#523: Added functional color field filtering (#894)

* #523: Added functional color field filtering

* Added custom Firestore filter comparing only hex

* Minor code style fixes

src/components/fields/Color/filters.ts

@@ -0,0 +1,21 @@
+import { IFilterOperator } from "@src/components/fields/types";
+
+export const filterOperators: IFilterOperator[] = [
+  {
+    label: "is",
+    secondaryLabel: "==",
+    value: "color-equal"
+  },
+  {
+    label: "is not",
+    secondaryLabel: "!=",
+    value: "color-not-equal"
+}
+];
+
+export const valueFormatter = (value: any) => {
+  if (value && value.hex) {
+    return value.hex.toString()
+  }
+  return "";
+};

src/components/fields/Color/index.tsx

@@ -7,6 +7,7 @@ import ColorIcon from "@mui/icons-material/Colorize";
 import BasicCell from "@src/components/fields/_BasicCell/BasicCellNull";
 import InlineCell from "./InlineCell";
 import NullEditor from "@src/components/Table/editors/NullEditor";
+import { filterOperators, valueFormatter } from "./filters";
 
 const PopoverCell = lazy(
   () => import("./PopoverCell" /* webpackChunkName: "PopoverCell-Color" */)
@@ -31,6 +32,10 @@ export const config: IFieldConfig = {
   }),
   TableEditor: NullEditor as any,
   SideDrawerField,
+  filter: {
+    operators: filterOperators,
+    valueFormatter
+  },
   csvImportParser: (value: string) => {
     try {
       const obj = JSON.parse(value);

src/hooks/useFirestoreCollectionWithAtom.ts

@@ -376,12 +376,16 @@ export const tableFiltersToFirestoreFilters = (filters: TableFilter[]) => {
     } else if (filter.operator === "id-equal") {
       firestoreFilters.push(where(documentId(), "==", filter.value));
       continue;
+    } else if (filter.operator === "color-equal") {
+      firestoreFilters.push(where(filter.key.concat(".hex"), "==", filter.value.hex.toString()))
+      continue
+    } else if (filter.operator === "color-not-equal") {
+      firestoreFilters.push(where(filter.key.concat(".hex"), "!=", filter.value.hex.toString()))
+      continue
     }
-
     firestoreFilters.push(
       where(filter.key, filter.operator as WhereFilterOp, filter.value)
     );
   }
-
   return firestoreFilters;
 };

src/types/table.d.ts

@@ -169,7 +169,9 @@ export type TableFilter = {
     | "date-before-equal"
     | "date-after-equal"
     | "time-minute-equal"
-    | "id-equal";
+    | "id-equal"
+    | "color-equal"
+    | "color-not-equal";
   value: any;
 };