added filterfn defintions to all date variants, and fixed linting #979

ral-facilities · Oct 3, 2024 · 816706a · 816706a
1 parent 9761bf9
commit 816706a
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 36 deletions.
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
+const PACKAGE_VERSION = '2.4.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

diff --git a/src/admin/units/units.component.tsx b/src/admin/units/units.component.tsx
@@ -25,7 +25,6 @@ import {
   TableCellOverFlowTipProps,
   displayTableRowCountText,
   formatDateTimeStrings,
-  getInitialColumnFilterFnState,
   getPageHeightCalc,
   removeSecondsFromDate,
 } from '../../utils';
@@ -49,6 +48,7 @@ function Units() {
       {
         header: 'Value',
         accessorFn: (row) => row.value,
+        filterFn: 'fuzzy',
         id: 'value',
         Cell: ({ row }) => row.original.value,
       },
@@ -57,6 +57,7 @@ function Units() {
         accessorFn: (row) => removeSecondsFromDate(row.modified_time),
         id: 'modified_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         Cell: ({ row }) =>
@@ -68,6 +69,7 @@ function Units() {
         accessorFn: (row) => removeSecondsFromDate(row.created_time),
         id: 'created_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         enableHiding: true,
@@ -83,7 +85,6 @@ function Units() {
   const { preservedState, onPreservedStatesChange } = usePreservedTableState({
     initialState: {
       pagination: { pageSize: 15, pageIndex: 0 },
-      columnFilterFns: getInitialColumnFilterFnState(columns),
     },
     storeInUrl: true,
   });

diff --git a/src/admin/usageStatuses/__snapshots__/usageStatuses.component.test.tsx.snap b/src/admin/usageStatuses/__snapshots__/usageStatuses.component.test.tsx.snap
@@ -390,13 +390,50 @@ exports[`Usage statuses > renders table correctly 1`] = `
                         class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-jk1t0h-MuiFormControl-root-MuiTextField-root"
                       >
                         <div
-                          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
+                          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
                         >
+                          <div
+                            class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeMedium css-ittuaa-MuiInputAdornment-root"
+                          >
+                            <span
+                              class="notranslate"
+                            >
+                              
+                            </span>
+                            <span
+                              aria-label="Change filter mode"
+                              class=""
+                              data-mui-internal-clone-element="true"
+                            >
+                              <button
+                                aria-label="Change filter mode"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cyhbc3-MuiButtonBase-root-MuiIconButton-root"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                                  data-testid="FilterListIcon"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"
+                                  />
+                                </svg>
+                                <span
+                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                                />
+                              </button>
+                            </span>
+                          </div>
                           <input
+                            aria-describedby=":r7:-helper-text"
                             aria-invalid="false"
                             aria-label="Filter by Value"
                             autocomplete="new-password"
-                            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
+                            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                             id=":r7:"
                             placeholder="Filter by Value"
                             title="Filter by Value"
@@ -433,6 +470,14 @@ exports[`Usage statuses > renders table correctly 1`] = `
                             </span>
                           </div>
                         </div>
+                        <p
+                          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-jchqo4-MuiFormHelperText-root"
+                          id=":r7:-helper-text"
+                        >
+                          <label>
+                            Filter Mode: Fuzzy
+                          </label>
+                        </p>
                       </div>
                     </div>
                   </div>
@@ -592,12 +637,12 @@ exports[`Usage statuses > renders table correctly 1`] = `
                               </span>
                             </div>
                             <input
-                              aria-describedby=":rc:-helper-text"
+                              aria-describedby=":rd:-helper-text"
                               aria-invalid="false"
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rc:"
+                              id=":rd:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -632,7 +677,7 @@ exports[`Usage statuses > renders table correctly 1`] = `
                           </div>
                           <p
                             class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-jchqo4-MuiFormHelperText-root"
-                            id=":rc:-helper-text"
+                            id=":rd:-helper-text"
                           >
                             <label>
                               Filter Mode: Between
@@ -650,7 +695,7 @@ exports[`Usage statuses > renders table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rf:"
+                              id=":rg:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -843,12 +888,12 @@ exports[`Usage statuses > renders table correctly 1`] = `
                               </span>
                             </div>
                             <input
-                              aria-describedby=":rk:-helper-text"
+                              aria-describedby=":rl:-helper-text"
                               aria-invalid="false"
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk:"
+                              id=":rl:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -883,7 +928,7 @@ exports[`Usage statuses > renders table correctly 1`] = `
                           </div>
                           <p
                             class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-jchqo4-MuiFormHelperText-root"
-                            id=":rk:-helper-text"
+                            id=":rl:-helper-text"
                           >
                             <label>
                               Filter Mode: Between
@@ -901,7 +946,7 @@ exports[`Usage statuses > renders table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rn:"
+                              id=":ro:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -1322,7 +1367,7 @@ exports[`Usage statuses > renders table correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":rp:"
+                    aria-controls=":rq:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"

diff --git a/src/admin/usageStatuses/usageStatuses.component.tsx b/src/admin/usageStatuses/usageStatuses.component.tsx
@@ -102,10 +102,6 @@ function UsageStatuses() {
     storeInUrl: true,
   });
 
-  console.log(
-    `INITIAL STATE ${JSON.stringify(getInitialColumnFilterFnState(columns))}`
-  );
-
   const table = useMaterialReactTable({
     columns: columns,
     data: usageStatusData ?? [],

diff --git a/src/catalogue/category/catalogueCategoryTableView.component.tsx b/src/catalogue/category/catalogueCategoryTableView.component.tsx
@@ -61,6 +61,7 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
         accessorFn: (row) => removeSecondsFromDate(row.modified_time),
         id: 'modified_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 567.5,
         enableGrouping: false,
         Cell: ({ row }) =>

diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -263,6 +263,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
           removeSecondsFromDate(row.catalogueItem.modified_time),
         id: 'catalogueItem.modified_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         Cell: ({ row }) =>
@@ -275,6 +276,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
           removeSecondsFromDate(row.catalogueItem.created_time),
         id: 'catalogueItem.created_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         enableHiding: true,
@@ -649,7 +651,6 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
     enableStickyHeader: true,
     enableDensityToggle: false,
     enableRowSelection: true,
-    enableColumnFilterModes: true,
     enableHiding: !dense,
     enableTopToolbar: true,
     enableMultiRowSelection: !dense,

diff --git a/src/common/preservedTableState.component.tsx b/src/common/preservedTableState.component.tsx
@@ -195,8 +195,6 @@ export const usePreservedTableState = (props?: UsePreservedTableStateProps) => {
     getParsedState(unparsedState)
   );
 
-  console.log(`PARSED STATE ${JSON.stringify(parsedState)}`);
-
   // Update the search params only if necessary
   useEffect(() => {
     if (props?.storeInUrl) {
@@ -275,8 +273,6 @@ export const usePreservedTableState = (props?: UsePreservedTableStateProps) => {
     ]
   );
 
-  console.log(`DEFAULT STATE ${JSON.stringify(defaultState)}`);
-
   // Convert the state stored into the url to one that can be used
   // (apply any default values here)
   const state: State = useMemo(
@@ -541,19 +537,6 @@ export const usePreservedTableState = (props?: UsePreservedTableStateProps) => {
     [defaultState.p, props?.paginationOnly, state.p, updateSearchParams]
   );
 
-  console.log(
-    `PRESERVED STATE ${JSON.stringify({
-      columnFilters: state.cF,
-      columnFilterFns: state.cFn,
-      sorting: state.srt,
-      columnVisibility: state.cVis,
-      globalFilter: state.gFil,
-      grouping: state.g,
-      columnOrder: state.cO,
-      pagination: state.p,
-    })}`
-  );
-
   return {
     preservedState: {
       columnFilters: state.cF,

diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
@@ -141,6 +141,7 @@ export function ItemsTable(props: ItemTableProps) {
         accessorFn: (row) => removeSecondsFromDate(row.item.modified_time),
         id: 'item.modified_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         Cell: ({ row }) =>
           row.original.item.modified_time &&
@@ -153,6 +154,7 @@ export function ItemsTable(props: ItemTableProps) {
         accessorFn: (row) => removeSecondsFromDate(row.item.created_time),
         id: 'item.created_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         Cell: ({ row }) =>
           formatDateTimeStrings(row.original.item.created_time, true),
@@ -184,6 +186,7 @@ export function ItemsTable(props: ItemTableProps) {
             : null,
         id: 'item.warranty_end_date',
         filterVariant: 'date-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         Cell: ({ row }) =>
           row.original.item.warranty_end_date &&
@@ -203,6 +206,7 @@ export function ItemsTable(props: ItemTableProps) {
             : null,
         id: 'item.delivered_date',
         filterVariant: 'date-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         Cell: ({ row }) =>
           row.original.item.delivered_date &&

diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
@@ -79,6 +79,7 @@ function ManufacturerComponent() {
         accessorFn: (row) => removeSecondsFromDate(row.modified_time),
         id: 'modified_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         Cell: ({ row }) =>
@@ -91,6 +92,7 @@ function ManufacturerComponent() {
         accessorFn: (row) => removeSecondsFromDate(row.created_time),
         id: 'created_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         enableHiding: true,

diff --git a/src/systems/systemItemsTable.component.tsx b/src/systems/systemItemsTable.component.tsx
@@ -304,6 +304,7 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
         accessorFn: (row) => removeSecondsFromDate(row.item.modified_time),
         id: 'item.modified_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         Cell: ({ row }) =>
@@ -316,6 +317,7 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
         accessorFn: (row) => removeSecondsFromDate(row.item.created_time),
         id: 'item.created_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         enableGrouping: false,
         Cell: ({ row }) =>
@@ -330,6 +332,7 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
             : null,
         id: 'item.delivered_date',
         filterVariant: 'date-range',
+        filterFn: 'betweenInclusive',
         size: 350,
         Cell: ({ row }) =>
           row.original.item.delivered_date &&

diff --git a/src/systems/systemsTableView.component.tsx b/src/systems/systemsTableView.component.tsx
@@ -54,6 +54,7 @@ export const SystemsTableView = (props: SystemsTableViewProps) => {
         accessorFn: (row) => removeSecondsFromDate(row.modified_time),
         id: 'modified_time',
         filterVariant: 'datetime-range',
+        filterFn: 'betweenInclusive',
         size: 400,
         enableGrouping: false,
         Cell: ({ row }) =>

diff --git a/src/utils.tsx b/src/utils.tsx
@@ -414,6 +414,7 @@ export const getInitialColumnFilterFnState = (
   return initialState;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getColumnIds = (columns: MRT_ColumnDef<any>[]): string[] => {
   const columnIds = columns.reduce<string[]>((result, column) => {
     if (column.id) {