From 63265e3c859ee8f0c6157c39f7f1d9775728b796 Mon Sep 17 00:00:00 2001
From: Miriam Shams-Rainey <miriam.shams.rainey@duke.edu>
Date: Wed, 2 Nov 2022 01:40:42 -0400
Subject: [PATCH] #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      | 21 +++++++++++++++++++++
 src/components/fields/Color/index.tsx       |  5 +++++
 src/hooks/useFirestoreCollectionWithAtom.ts |  8 ++++++--
 src/types/table.d.ts                        |  4 +++-
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/components/fields/Color/filters.ts

diff --git a/src/components/fields/Color/filters.ts b/src/components/fields/Color/filters.ts
new file mode 100644
index 00000000..68677a91
--- /dev/null
+++ b/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 "";
+};
\ No newline at end of file
diff --git a/src/components/fields/Color/index.tsx b/src/components/fields/Color/index.tsx
index 13cb9843..d8da5e50 100644
--- a/src/components/fields/Color/index.tsx
+++ b/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);
diff --git a/src/hooks/useFirestoreCollectionWithAtom.ts b/src/hooks/useFirestoreCollectionWithAtom.ts
index 43f7165a..f8dada5f 100644
--- a/src/hooks/useFirestoreCollectionWithAtom.ts
+++ b/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;
 };
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index dadbf2ab..fd149f5e 100644
--- a/src/types/table.d.ts
+++ b/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;
 };