Enhance manufacturers table filtering #1037

- remove optional filter in address in catalogue items table
ral-facilities · Nov 21, 2024 · 9a67149 · 9a67149
1 parent fbf54d4
commit 9a67149
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -574,10 +574,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
         id: 'manufacturer.address',
         filterVariant: COLUMN_FILTER_VARIANTS.string,
         filterFn: COLUMN_FILTER_FUNCTIONS.string,
-        columnFilterModeOptions: [
-          ...COLUMN_FILTER_MODE_OPTIONS.string,
-          ...OPTIONAL_FILTER_MODE_OPTIONS,
-        ],
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
         size: 300,
         Cell: ({ row }) => (
           <div style={{ display: 'inline-block' }}>

diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
@@ -26,11 +26,16 @@ import { useGetManufacturers } from '../api/manufacturers';
 import { usePreservedTableState } from '../common/preservedTableState.component';
 import { RequestType } from '../form.schemas';
 import {
+  COLUMN_FILTER_FUNCTIONS,
+  COLUMN_FILTER_MODE_OPTIONS,
+  COLUMN_FILTER_VARIANTS,
+  OPTIONAL_FILTER_MODE_OPTIONS,
   TableBodyCellOverFlowTip,
   TableCellOverFlowTipProps,
   TableHeaderOverflowTip,
   displayTableRowCountText,
   formatDateTimeStrings,
+  getInitialColumnFilterFnState,
   getPageHeightCalc,
 } from '../utils';
 import Breadcrumbs from '../view/breadcrumbs.component';
@@ -60,6 +65,9 @@ function ManufacturerComponent() {
         Header: TableHeaderOverflowTip,
         accessorFn: (row) => row.name,
         id: 'name',
+        filterVariant: COLUMN_FILTER_VARIANTS.string,
+        filterFn: COLUMN_FILTER_FUNCTIONS.string,
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
         size: 400,
         Cell: ({ row }) =>
           row.original.name && (
@@ -77,8 +85,9 @@ function ManufacturerComponent() {
         Header: TableHeaderOverflowTip,
         accessorFn: (row) => new Date(row.modified_time),
         id: 'modified_time',
-        filterVariant: 'datetime-range',
-        filterFn: 'betweenInclusive',
+        filterVariant: COLUMN_FILTER_VARIANTS.datetime,
+        filterFn: COLUMN_FILTER_FUNCTIONS.datetime,
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.datetime,
         size: 350,
         enableGrouping: false,
         Cell: ({ row }) =>
@@ -90,8 +99,9 @@ function ManufacturerComponent() {
         Header: TableHeaderOverflowTip,
         accessorFn: (row) => new Date(row.created_time),
         id: 'created_time',
-        filterVariant: 'datetime-range',
-        filterFn: 'betweenInclusive',
+        filterVariant: COLUMN_FILTER_VARIANTS.datetime,
+        filterFn: COLUMN_FILTER_FUNCTIONS.datetime,
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.datetime,
         size: 350,
         enableGrouping: false,
         enableHiding: true,
@@ -103,6 +113,12 @@ function ManufacturerComponent() {
         Header: TableHeaderOverflowTip,
         accessorFn: (row) => row.url ?? '',
         id: 'url',
+        filterVariant: COLUMN_FILTER_VARIANTS.string,
+        filterFn: COLUMN_FILTER_FUNCTIONS.string,
+        columnFilterModeOptions: [
+          ...COLUMN_FILTER_MODE_OPTIONS.string,
+          ...OPTIONAL_FILTER_MODE_OPTIONS,
+        ],
         size: 500,
         Cell: ({ row }) =>
           row.original.url && (
@@ -118,6 +134,10 @@ function ManufacturerComponent() {
         accessorFn: (row) =>
           `${row.address.address_line} ${row.address.town} ${row.address.county} ${row.address.postcode} ${row.address.country}`,
         id: 'address',
+        filterVariant: COLUMN_FILTER_VARIANTS.string,
+        filterFn: COLUMN_FILTER_FUNCTIONS.string,
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
+
         size: 650,
         Cell: ({ row }) => (
           <div style={{ display: 'inline-block' }}>
@@ -144,6 +164,12 @@ function ManufacturerComponent() {
         Header: TableHeaderOverflowTip,
         accessorFn: (row) => row.telephone,
         id: 'telephone',
+        filterVariant: COLUMN_FILTER_VARIANTS.string,
+        filterFn: COLUMN_FILTER_FUNCTIONS.string,
+        columnFilterModeOptions: [
+          ...COLUMN_FILTER_MODE_OPTIONS.string,
+          ...OPTIONAL_FILTER_MODE_OPTIONS,
+        ],
         size: 250,
       },
     ];
@@ -152,10 +178,15 @@ function ManufacturerComponent() {
   const noResultsTxt =
     'No results found: Try adding an Manufacturer by using the Add Manufacturer button on the top left of your screen';
 
+  const initialColumnFilterFnState = React.useMemo(() => {
+    return getInitialColumnFilterFnState(columns);
+  }, [columns]);
+
   const { preservedState, onPreservedStatesChange } = usePreservedTableState({
     initialState: {
       columnVisibility: { created_time: false },
       pagination: { pageSize: 15, pageIndex: 0 },
+      columnFilterFns: initialColumnFilterFnState,
     },
     storeInUrl: true,
   });
@@ -166,6 +197,7 @@ function ManufacturerComponent() {
     data: manufacturerData ?? [], //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
     // Features
     enableColumnOrdering: true,
+    enableColumnFilterModes: true,
     enableColumnResizing: true,
     enableFacetedValues: true,
     enableRowActions: true,