Enhance catalogue category card filters #1124

src/catalogue/category/catalogueCardView.component.test.tsx

@@ -169,4 +169,35 @@ describe('CardView', () => {
 
     expect(clearFiltersButton).toBeDisabled();
   });
+
+  it('renders the multi-select filter mode dropdown correctly', async () => {
+    createView();
+
+    await user.click(screen.getByText('Show Filters'));
+
+    const dropdownButtons = await screen.findAllByTestId('FilterListIcon');
+
+    expect(dropdownButtons[3]).toBeInTheDocument();
+
+    await user.click(dropdownButtons[3]);
+
+    const includeAnyText = await screen.findByRole('menuitem', {
+      name: 'Includes any',
+    });
+    const excludeAnyText = await screen.findByRole('menuitem', {
+      name: 'Excludes any',
+    });
+
+    const includeAllText = await screen.findByRole('menuitem', {
+      name: 'Includes all',
+    });
+    const excludeAllText = await screen.findByRole('menuitem', {
+      name: 'Excludes all',
+    });
+
+    expect(includeAnyText).toBeInTheDocument();
+    expect(excludeAnyText).toBeInTheDocument();
+    expect(includeAllText).toBeInTheDocument();
+    expect(excludeAllText).toBeInTheDocument();
+  });
 });

src/catalogue/category/catalogueCardView.component.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   Collapse,
   Grid,
+  MenuItem,
   Typography,
   useMediaQuery,
   useTheme,
@@ -17,7 +18,16 @@ import React from 'react';
 import { CatalogueCategory } from '../../api/api.types';
 import CardViewFilters from '../../common/cardView/cardViewFilters.component';
 import { usePreservedTableState } from '../../common/preservedTableState.component';
-import { displayTableRowCountText, getPageHeightCalc } from '../../utils';
+import {
+  COLUMN_FILTER_FUNCTIONS,
+  COLUMN_FILTER_MODE_OPTIONS,
+  COLUMN_FILTER_VARIANTS,
+  customFilterFunctions,
+  displayTableRowCountText,
+  getInitialColumnFilterFnState,
+  getPageHeightCalc,
+  MRT_Functions_Localisation,
+} from '../../utils';
 import CatalogueCard from './catalogueCard.component';
 export interface CatalogueCardViewProps {
   catalogueCategoryData: CatalogueCategory[];
@@ -42,14 +52,6 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
     selectedCategories,
   } = props;
 
-  const { preservedState, onPreservedStatesChange } = usePreservedTableState({
-    initialState: {
-      pagination: { pageSize: 30, pageIndex: 0 },
-    },
-    storeInUrl: true,
-    paginationOnly: true,
-  });
-
   // Display total and pagination on separate lines if on a small screen
   const theme = useTheme();
   const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -71,14 +73,18 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
         header: 'Name',
         accessorFn: (row) => row.name,
         id: 'name',
+        filterVariant: COLUMN_FILTER_VARIANTS.string,
+        filterFn: COLUMN_FILTER_FUNCTIONS.string,
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
         size: 300,
       },
       {
         header: 'Last modified',
         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: 500,
         enableGrouping: false,
       },
@@ -87,36 +93,87 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
         header: 'Created',
         accessorFn: (row) => new Date(row.modified_time),
         id: 'created',
-        filterVariant: 'datetime-range',
-        filterFn: 'betweenInclusive',
+        filterVariant: COLUMN_FILTER_VARIANTS.datetime,
+        filterFn: COLUMN_FILTER_FUNCTIONS.datetime,
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.datetime,
         size: 500,
         enableGrouping: false,
       },
       {
         header: 'Property names',
         accessorFn: (row) =>
           row.properties.map((value) => value['name']).join(', '),
-        id: 'property-names',
+        id: 'properties',
         size: 350,
-        filterVariant: 'autocomplete',
+        filterVariant: 'multi-select',
+        filterFn: 'arrIncludesSome',
+        columnFilterModeOptions: [
+          'arrIncludesSome',
+          'arrIncludesAll',
+          'arrExcludesSome',
+          'arrExcludesAll',
+        ],
+        renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
+          <MenuItem
+            key="arrIncludesSome"
+            onClick={() => onSelectFilterMode('arrIncludesSome')}
+          >
+            {MRT_Functions_Localisation.filterArrIncludesSome}
+          </MenuItem>,
+          <MenuItem
+            key="arrIncludesAll"
+            onClick={() => onSelectFilterMode('arrIncludesAll')}
+          >
+            {MRT_Functions_Localisation.filterArrIncludesAll}
+          </MenuItem>,
+          <MenuItem
+            key="arrExcludesSome"
+            onClick={() => onSelectFilterMode('arrExcludesSome')}
+          >
+            {MRT_Functions_Localisation.filterArrExcludesSome}
+          </MenuItem>,
+
+          <MenuItem
+            key="arrExcludesAll"
+            onClick={() => onSelectFilterMode('arrExcludesAll')}
+          >
+            {MRT_Functions_Localisation.filterArrExcludesAll}
+          </MenuItem>,
+        ],
         filterSelectOptions: propertyNames,
         enableGrouping: false,
       },
       {
         header: 'Is Leaf',
         accessorFn: (row) => (row.is_leaf === true ? 'Yes' : 'No'),
         id: 'is-leaf',
+        filterVariant: COLUMN_FILTER_VARIANTS.boolean,
+        enableColumnFilterModes: false,
         size: 200,
-        filterVariant: 'autocomplete',
       },
     ];
   }, [propertyNames]);
+
+  const initialColumnFilterFnState = React.useMemo(() => {
+    return getInitialColumnFilterFnState(columns);
+  }, [columns]);
+
+  const { preservedState, onPreservedStatesChange } = usePreservedTableState({
+    initialState: {
+      pagination: { pageSize: 30, pageIndex: 0 },
+      columnFilterFns: initialColumnFilterFnState,
+    },
+    storeInUrl: true,
+    paginationOnly: true,
+  });
+
   const table = useMaterialReactTable({
     // Data
     columns: columns,
     data: catalogueCategoryData ?? [],
     // Features
     enableColumnOrdering: false,
+    enableColumnFilterModes: true,
     enableColumnPinning: false,
     enableTopToolbar: true,
     enableFacetedValues: true,
@@ -130,13 +187,15 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
     enableHiding: false,
     enableFullScreenToggle: false,
     enablePagination: true,
+    filterFns: customFilterFunctions,
     // Other settings
     paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',
     autoResetPageIndex: false,
     // Localisation
     localization: {
       ...MRT_Localization_EN,
+      ...MRT_Functions_Localisation,
       rowsPerPage: 'Categories per page',
     },
     // State

src/items/itemsTable.component.test.tsx

@@ -446,10 +446,10 @@ describe('Items Table', () => {
     await user.click(dropdownButton);
 
     const includeText = await screen.findByRole('menuitem', {
-      name: 'Includes',
+      name: 'Includes any',
     });
     const excludeText = await screen.findByRole('menuitem', {
-      name: 'Excludes',
+      name: 'Excludes any',
     });
 
     expect(includeText).toBeInTheDocument();

src/items/itemsTable.component.tsx

@@ -248,19 +248,19 @@ export function ItemsTable(props: ItemTableProps) {
         id: 'item.usage_status',
         filterVariant: 'multi-select',
         filterFn: 'arrIncludesSome',
-        columnFilterModeOptions: ['arrIncludesSome', 'arrIncludesNone'],
+        columnFilterModeOptions: ['arrIncludesSome', 'arrExcludesSome'],
         renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
           <MenuItem
             key="arrIncludesSome"
             onClick={() => onSelectFilterMode('arrIncludesSome')}
           >
-            Includes
+            {MRT_Functions_Localisation.filterArrIncludesSome}
           </MenuItem>,
           <MenuItem
-            key="arrIncludesNone"
-            onClick={() => onSelectFilterMode('arrIncludesNone')}
+            key="arrExcludesSome"
+            onClick={() => onSelectFilterMode('arrExcludesSome')}
           >
-            Excludes
+            {MRT_Functions_Localisation.filterArrExcludesSome}
           </MenuItem>,
         ],
         size: 350,
@@ -273,19 +273,19 @@ export function ItemsTable(props: ItemTableProps) {
         id: 'system.name',
         filterVariant: 'multi-select',
         filterFn: 'arrIncludesSome',
-        columnFilterModeOptions: ['arrIncludesSome', 'arrIncludesNone'],
+        columnFilterModeOptions: ['arrIncludesSome', 'arrExcludesSome'],
         renderColumnFilterModeMenuItems: ({ onSelectFilterMode }) => [
           <MenuItem
             key="arrIncludesSome"
             onClick={() => onSelectFilterMode('arrIncludesSome')}
           >
-            Includes
+            {MRT_Functions_Localisation.filterArrIncludesSome}
           </MenuItem>,
           <MenuItem
-            key="arrIncludesNone"
-            onClick={() => onSelectFilterMode('arrIncludesNone')}
+            key="arrExcludesSome"
+            onClick={() => onSelectFilterMode('arrExcludesSome')}
           >
-            Excludes
+            {MRT_Functions_Localisation.filterArrExcludesSome}
           </MenuItem>,
         ],
         size: 350,