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 6, 2024 · 0fb8fb2 · 0fb8fb2
1 parent 8b900b3
commit 0fb8fb2
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 76 deletions.
diff --git a/backend/lcfs/web/api/fuel_code/repo.py b/backend/lcfs/web/api/fuel_code/repo.py
@@ -296,7 +296,14 @@ async def get_fuel_codes_paginated(
         conditions = [FuelCode.fuel_status_id != delete_status.fuel_code_status_id]
 
         for filter in pagination.filters:
+
             filter_value = filter.filter
+            if filter.filter_type == "date":
+                if filter.type == "inRange":
+                    filter_value = [filter.date_from, filter.date_to]
+                else:
+                    filter_value = filter.date_from
+
             filter_option = filter.type
             filter_type = filter.filter_type
             if filter.field == "status":
@@ -379,37 +386,6 @@ async def get_fuel_code_statuses(self):
         status_results = await self.db.execute(query)
         return status_results.scalars().all()
 
-    def apply_filters(self, pagination, conditions):
-        """
-        Apply filters to the fuel code query.
-
-        Args:
-            pagination (PaginationRequestSchema): The pagination object containing page and size information.
-            conditions (List[Condition]): The list of conditions to apply.
-
-        Returns:
-            List[QueryCondition]: Array of where clauses to be applied to the query
-        """
-
-        for filter in pagination.filters:
-            # Handle other filters as before
-            field = get_field_for_filter(FuelCode, filter.field)
-            # Check if the filter is of type "date"
-            if filter.filter_type == "date":
-                if filter.type == "inRange":
-                    filter_value = [filter.date_from, filter.date_to]
-                else:
-                    filter_value = filter.date_from
-            else:
-                # For non-date filters, use the standard filter value
-                filter_value = filter.filter
-
-            filter_option = filter.type
-            filter_type = filter.filter_type
-            conditions.append(
-                apply_filter_conditions(field, filter_value, filter_option, filter_type)
-            )
-
     @repo_handler
     async def create_fuel_code(self, fuel_code: FuelCode) -> FuelCode:
         """

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"

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
@@ -45,7 +45,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
@@ -86,7 +85,6 @@ export const usersColumnDefs = (t) => [
     cellRenderer: StatusRenderer,
     cellClass: 'vertical-middle',
     floatingFilterComponent: BCColumnSetFilter,
-    suppressFloatingFilterButton: true,
     floatingFilterComponentParams: {
       apiQuery: () => ({
         data: [
@@ -250,7 +248,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
     }
   }
 ]

diff --git a/frontend/src/views/FuelCodes/_schema.jsx b/frontend/src/views/FuelCodes/_schema.jsx
@@ -65,26 +65,46 @@ export const fuelCodeColDefs = (t) => [
   {
     field: 'applicationDate',
     headerName: t('fuelCode:fuelCodeColLabels.applicationDate'),
-    cellRenderer: TextRenderer,
-    filter: false
+    filter: 'agDateColumnFilter',
+    filterParams: {
+      filterOptions: ['equals', 'lessThan', 'greaterThan', 'inRange'],
+      suppressAndOrCondition: true,
+      maxValidYear: 2400
+    },
+    cellRenderer: TextRenderer
   },
   {
     field: 'approvalDate',
     headerName: t('fuelCode:fuelCodeColLabels.approvalDate'),
-    cellRenderer: TextRenderer,
-    filter: false
+    filter: 'agDateColumnFilter',
+    filterParams: {
+      filterOptions: ['equals', 'lessThan', 'greaterThan', 'inRange'],
+      suppressAndOrCondition: true,
+      maxValidYear: 2400
+    },
+    cellRenderer: TextRenderer
   },
   {
     field: 'effectiveDate',
     headerName: t('fuelCode:fuelCodeColLabels.effectiveDate'),
-    cellRenderer: TextRenderer,
-    filter: false
+    filter: 'agDateColumnFilter',
+    filterParams: {
+      filterOptions: ['equals', 'lessThan', 'greaterThan', 'inRange'],
+      suppressAndOrCondition: true,
+      maxValidYear: 2400
+    },
+    cellRenderer: TextRenderer
   },
   {
     field: 'expirationDate',
-    headerName: t('fuelCode:fuelCodeColLabels.expiryDate'),
-    cellRenderer: TextRenderer,
-    filter: false
+    headerName: t('fuelCode:fuelCodeColLabels.expirationDate'),
+    filter: 'agDateColumnFilter',
+    filterParams: {
+      filterOptions: ['equals', 'lessThan', 'greaterThan', 'inRange'],
+      suppressAndOrCondition: true,
+      maxValidYear: 2400
+    },
+    cellRenderer: TextRenderer
   },
   {
     field: 'fuelType',

diff --git a/frontend/src/views/Organizations/ViewOrganization/_schema.js b/frontend/src/views/Organizations/ViewOrganization/_schema.js
@@ -49,7 +49,6 @@ export const organizationsColDefs = (t) => [
     cellRenderer: OrgStatusRenderer,
     cellClass: 'vertical-middle',
     floatingFilterComponent: BCColumnSetFilter,
-    suppressFloatingFilterButton: true,
     floatingFilterComponentParams: {
       apiOptionField: 'status',
       apiQuery: useOrganizationStatuses,