fix: Add max year to date filters

* Set max year to 2400 so it limits the input to 4 numbers * Hoist localization provider to app level so we only have one and set it to use dayjs * Delete suppressFloatingFilterButton, I was unable to find this anywhere so I believe it does nothing
bcgov · Dec 4, 2024 · 5940c69 · 5940c69
1 parent 07139c3
commit 5940c69
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 603 deletions.
diff --git a/frontend/src/components/BCDataGrid/components/Editors/DateEditor.jsx b/frontend/src/components/BCDataGrid/components/Editors/DateEditor.jsx
@@ -1,7 +1,6 @@
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+import { DatePicker } from '@mui/x-date-pickers'
 import { format, parseISO } from 'date-fns'
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 export const DateEditor = ({ value, onValueChange, minDate, maxDate }) => {
   const [selectedDate, setSelectedDate] = useState(
@@ -52,28 +51,26 @@ export const DateEditor = ({ value, onValueChange, minDate, maxDate }) => {
       onMouseDown={stopPropagation}
       onClick={stopPropagation}
     >
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <DatePicker
-          className="ag-grid-date-editor ag-input-field"
-          fullWidth
-          margin="normal"
-          id="date-picker-dialog"
-          format="yyyy-MM-dd"
-          slotProps={{
-            field: { clearable: true },
-            popper: { placement: 'bottom-start' }
-          }}
-          value={selectedDate}
-          onChange={updateValue}
-          open={isOpen}
-          onOpen={handleDatePickerOpen}
-          onClose={handleDatePickerClose}
-          variant="inline"
-          disableToolbar
-          minDate={minDate}
-          maxDate={maxDate}
-        />
-      </LocalizationProvider>
+      <DatePicker
+        className="ag-grid-date-editor ag-input-field"
+        fullWidth
+        margin="normal"
+        id="date-picker-dialog"
+        format="yyyy-MM-dd"
+        slotProps={{
+          field: { clearable: true },
+          popper: { placement: 'bottom-start' }
+        }}
+        value={selectedDate}
+        onChange={updateValue}
+        open={isOpen}
+        onOpen={handleDatePickerOpen}
+        onClose={handleDatePickerClose}
+        variant="inline"
+        disableToolbar
+        minDate={minDate}
+        maxDate={maxDate}
+      />
     </div>
   )
 }
diff --git a/frontend/src/components/BCDataGrid/components/Filters/BCColumnSetFilter.jsx b/frontend/src/components/BCDataGrid/components/Filters/BCColumnSetFilter.jsx
@@ -66,6 +66,7 @@ export const BCColumnSetFilter = forwardRef((props, ref) => {
       multiple={props.multiple}
       disableCloseOnSelect={props.disableCloseOnSelect}
       onChange={onInputBoxChanged}
+      openOnFocus
       isOptionEqualToValue={(option, value) => option.name === value.name}
       limitTags={1}
       className="bc-column-set-filter ag-list ag-select-list ag-ltr ag-popup-child ag-popup-positioned-under"
@@ -79,7 +80,7 @@ export const BCColumnSetFilter = forwardRef((props, ref) => {
       renderOption={(propsIn, option, { selected }) => (
         <Box
           component="li"
-          key={option}
+          key={option.name}
           className={
             selected
               ? 'ag-list-item ag-select-list-item selected'

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -6,6 +6,8 @@ import theme from '@/themes'
 import './i18n'
 import { KeycloakProvider } from '@/components/KeycloakProvider'
 import { getKeycloak } from '@/utils/keycloak'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { LocalizationProvider } from '@mui/x-date-pickers'
 
 const queryClient = new QueryClient()
 const keycloak = getKeycloak()
@@ -17,8 +19,10 @@ if (root) {
       <KeycloakProvider authClient={keycloak}>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <App />
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <CssBaseline />
+              <App />
+            </LocalizationProvider>
           </ThemeProvider>
         </QueryClientProvider>
       </KeycloakProvider>

diff --git a/frontend/src/views/Admin/AdminMenu/components/_schema.js b/frontend/src/views/Admin/AdminMenu/components/_schema.js
@@ -47,7 +47,6 @@ export const usersColumnDefs = (t) => [
       suppressFilterButton: true
     },
     floatingFilterComponent: BCColumnSetFilter,
-    suppressFloatingFilterButton: true,
     floatingFilterComponentParams: {
       apiQuery: useRoleList, // all data returned should be an array which includes an object of key 'name'
       // Eg: [{id: 1, name: 'EntryListItem' }] except name all others are optional
@@ -88,7 +87,6 @@ export const usersColumnDefs = (t) => [
     cellRenderer: StatusRenderer,
     cellClass: 'vertical-middle',
     floatingFilterComponent: BCColumnSetFilter,
-    suppressFloatingFilterButton: true,
     floatingFilterComponentParams: {
       apiQuery: () => ({
         data: [
@@ -252,7 +250,6 @@ export const auditLogColDefs = (t) => [
     flex: 1,
     valueGetter: ({ data }) => data.createDate || '',
     valueFormatter: timezoneFormatter,
-    suppressFloatingFilterButton: true,
     filter: 'agDateColumnFilter',
     filterParams: {
       filterOptions: ['equals', 'lessThan', 'greaterThan', 'inRange'],

diff --git a/frontend/src/views/ComplianceReports/components/_schema.jsx b/frontend/src/views/ComplianceReports/components/_schema.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable chai-friendly/no-unused-expressions */
 import { BCColumnSetFilter } from '@/components/BCDataGrid/components'
 import { SUMMARY } from '@/constants/common'
 import { ReportsStatusRenderer, LinkRenderer } from '@/utils/grid/cellRenderers'
@@ -14,7 +13,6 @@ export const reportsColDefs = (t, bceidRole) => [
       url: ({ data }) =>
         `${data.compliancePeriod?.description}/${data.complianceReportId}`
     },
-    suppressFloatingFilterButton: true,
     valueGetter: ({ data }) => data.compliancePeriod?.description || '',
     filterParams: {
       buttons: ['clear']
@@ -42,7 +40,6 @@ export const reportsColDefs = (t, bceidRole) => [
       return `${typeLabel}${nickname}`
     },
     filter: 'agTextColumnFilter', // Enable text filtering
-    suppressFloatingFilterButton: true,
     filterParams: {
       textFormatter: (value) => value.replace(/\s+/g, '').toLowerCase(),
       textCustomComparator: (filter, value, filterText) => {
@@ -96,12 +93,12 @@ export const reportsColDefs = (t, bceidRole) => [
     flex: 1,
     valueGetter: ({ data }) => data.updateDate || '',
     valueFormatter: timezoneFormatter,
-    suppressFloatingFilterButton: true,
     filter: 'agDateColumnFilter',
     filterParams: {
       filterOptions: ['equals', 'lessThan', 'greaterThan', 'inRange'],
       suppressAndOrCondition: true,
-      buttons: ['clear']
+      buttons: ['clear'],
+      maxValidYear: 2400
     }
   }
 ]