32017 Add all filter options to column selection

- Successfully parsed and added Managed Attributes column and column selector as proof of concept - Need to extend this to all possible QueryBuilder options taking into account the different types of options - Fixed bug where query builder column was showing in the table but not column selector
AAFC-BICoE · Nov 22, 2023 · e00165d · e00165d
1 parent c18fb88
commit e00165d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 28 deletions.
diff --git a/packages/common-ui/lib/column-selector/ColumnSelector.tsx b/packages/common-ui/lib/column-selector/ColumnSelector.tsx
@@ -91,8 +91,9 @@ function useCustomMenu<TData>({
       }
     });
     setSearchedColumns(reactTable?.getAllLeafColumns());
-  }, [reactTable]);
+  }, [reactTable, reactTable?.getAllLeafColumns().length]);
 
+  // Set local storage visibility state whenever state changes
   useEffect(
     () => {
       if (reactTable && reactTable?.getState()?.columnVisibility) {

diff --git a/packages/common-ui/lib/column-selector/ColumnSelectorUtils.tsx b/packages/common-ui/lib/column-selector/ColumnSelectorUtils.tsx
@@ -1,25 +1,25 @@
-import { useDinaIntl } from "../../../dina-ui/intl/dina-ui-intl";
+import { query } from "kitsu-core";
 import { FieldHeader } from "..";
+import { TableColumn } from "../list-page/types";
+import { KitsuResource } from "kitsu";
 
-export function getQueryBuilderColumns(parameters: any[], formatMessage) {
+export function getQueryBuilderColumns<TData extends KitsuResource>(
+  parameters: any[],
+  formatMessage
+): TableColumn<TData>[] {
+  const queryBuilderColumns: TableColumn<TData>[] = [];
   parameters.forEach((queryParameter) => {
     const flattenedParameter = flattenObject(queryParameter);
     Object.keys(flattenedParameter).forEach((paramKey) => {
       if (paramKey.includes("data.attributes")) {
         const dataAttributesIndex = paramKey.indexOf("data.attributes");
         const queryKey = paramKey.slice(dataAttributesIndex);
         if (queryKey.includes("managedAttributes")) {
-          const attributeColumn = {
-            header: () => (
-              <FieldHeader
-                name={formatMessage("managedAttribute", {
-                  name: "integer 1"
-                })}
-              />
-            ),
-            accessorKey: "data.attributes.managedAttributes.integer_1"
-            // isKeyword: true
-          };
+          const managedAttributesColumn = getManagedAttributesColumn(
+            queryKey,
+            formatMessage
+          );
+          queryBuilderColumns.push(managedAttributesColumn);
         }
       } else if (paramKey.includes("included.attributes")) {
         const includedAttributesIndex = paramKey.indexOf("included.attributes");
@@ -33,6 +33,27 @@ export function getQueryBuilderColumns(parameters: any[], formatMessage) {
       }
     });
   });
+
+  return queryBuilderColumns;
+}
+
+function getManagedAttributesColumn(queryKey: string, formatMessage: any) {
+  const managedAttributesKey = queryKey.slice(queryKey.lastIndexOf(".") + 1);
+  const managedAttributesName = managedAttributesKey.replaceAll("_", " ");
+  const managedAttributesColumn = {
+    header: () => (
+      <FieldHeader
+        name={formatMessage("managedAttribute", {
+          name: managedAttributesName
+        })}
+      />
+    ),
+    accessorKey: queryKey,
+    id: formatMessage("managedAttribute", {
+      name: managedAttributesName
+    })
+  };
+  return managedAttributesColumn;
 }
 
 /**

diff --git a/packages/common-ui/lib/list-page/QueryPage.tsx b/packages/common-ui/lib/list-page/QueryPage.tsx
@@ -333,7 +333,7 @@ export function QueryPage<TData extends KitsuResource>({
   const [error, setError] = useState<any>();
 
   const { formatMessage: dinaFormatMessage } = useDinaIntl();
-  const [queryBuilderColumns, setQueryParameters] = useState<
+  const [queryBuilderColumns, setQueryBuilderColumns] = useState<
     TableColumn<TData>[]
   >([]);
 
@@ -384,7 +384,9 @@ export function QueryPage<TData extends KitsuResource>({
         parameters
       );
     }
-    getQueryBuilderColumns(parameters, dinaFormatMessage);
+    setQueryBuilderColumns(
+      getQueryBuilderColumns(parameters, dinaFormatMessage)
+    );
 
     queryDSL = applyRootQuery(queryDSL);
 
@@ -681,7 +683,8 @@ export function QueryPage<TData extends KitsuResource>({
           }
         ]
       : []),
-    ...columns
+    ...columns,
+    ...queryBuilderColumns
   ];
 
   // Columns generated for the selected resources, only in selection mode.

diff --git a/packages/dina-ui/pages/collection/material-sample/list.tsx b/packages/dina-ui/pages/collection/material-sample/list.tsx
@@ -272,17 +272,6 @@ export default function MaterialSampleListPage() {
 
     // Created On
     dateCell("createdOn", "data.attributes.createdOn"),
-    {
-      header: () => (
-        <FieldHeader
-          name={formatMessage("managedAttribute", {
-            name: "integer 1"
-          })}
-        />
-      ),
-      accessorKey: "data.attributes.managedAttributes.integer_1"
-      // isKeyword: true
-    },
     // TODO: remove after finishing ES parsing
     dateCell(
       "collectingEventCreatedOn",