From 747384fa3cf161b2f28bc9131cfd3f6c923691c6 Mon Sep 17 00:00:00 2001 From: prv-proton Date: Mon, 6 Jan 2025 21:01:33 -0800 Subject: [PATCH] Feat: LCFS - Implement Accessibility & Functional Enhancements for AG Grid Filtering Components #1585 --- backend/lcfs/web/api/transaction/services.py | 16 ++- backend/lcfs/web/api/user/repo.py | 17 +-- .../BCDataGrid/BCDataGridServer.jsx | 13 ++- .../src/components/BCDataGrid/BCGridBase.jsx | 5 +- .../components/BCDataGrid/BCGridViewer.jsx | 4 +- .../Filters/BCDateFloatingFilter.jsx | 107 ++++++++++-------- .../Filters/BCSelectFloatingFilter.jsx | 3 +- .../components/Renderers/AccessibleHeader.jsx | 7 ++ .../components/Renderers/RequiredHeader.jsx | 4 +- .../components/BCDataGrid/components/index.js | 1 + frontend/src/constants/statuses.js | 7 ++ frontend/src/utils/grid/cellRenderers.jsx | 79 ++++++------- .../AdminMenu/components/UserActivity.jsx | 7 +- .../Admin/AdminMenu/components/Users.jsx | 1 - .../Admin/AdminMenu/components/_schema.js | 84 ++++++++++++-- .../ComplianceReports/components/_schema.jsx | 6 +- frontend/src/views/FuelCodes/_schema.jsx | 59 ++++++---- .../NotificationMenu/components/_schema.jsx | 4 +- .../AddEditNotionalTransfers.jsx | 5 +- .../Organizations/ViewOrganization/_schema.js | 3 +- frontend/src/views/Transactions/_schema.js | 12 +- frontend/src/views/Transactions/options.js | 38 ------- 22 files changed, 284 insertions(+), 198 deletions(-) create mode 100644 frontend/src/components/BCDataGrid/components/Renderers/AccessibleHeader.jsx delete mode 100644 frontend/src/views/Transactions/options.js diff --git a/backend/lcfs/web/api/transaction/services.py b/backend/lcfs/web/api/transaction/services.py index 1abdfc2f0..0f2434851 100644 --- a/backend/lcfs/web/api/transaction/services.py +++ b/backend/lcfs/web/api/transaction/services.py @@ -84,9 +84,23 @@ def apply_transaction_filters(self, pagination, conditions): else: # Handle other filters field = get_field_for_filter(TransactionView, filter.field) + filter_value = filter.filter + # check if the date string is selected for filter + if filter.filter is None: + filter_value = [ + datetime.strptime(filter.date_from, "%Y-%m-%d %H:%M:%S").strftime( + "%Y-%m-%d" + ) + ] + if filter.date_to: + filter_value.append( + datetime.strptime(filter.date_to, "%Y-%m-%d %H:%M:%S").strftime( + "%Y-%m-%d" + ) + ) conditions.append( apply_filter_conditions( - field, filter.filter, filter.type, filter.filter_type + field, filter_value, filter.type, filter.filter_type ) ) diff --git a/backend/lcfs/web/api/user/repo.py b/backend/lcfs/web/api/user/repo.py index f55e0eab4..4a8f99513 100644 --- a/backend/lcfs/web/api/user/repo.py +++ b/backend/lcfs/web/api/user/repo.py @@ -607,14 +607,17 @@ def _apply_login_history_filters(self, query, pagination): filter_value = filter.filter filter_option = filter.type filter_type = filter.filter_type - if filter.field is not None: + if filter.field == "is_login_successful": + filter_option = "true" if filter_value == "Success" else "false" + field = get_field_for_filter(UserLoginHistory, "is_login_successful") + elif filter.field is not None: field = get_field_for_filter(UserLoginHistory, filter.field) - if field is not None: - condition = apply_filter_conditions( - field, filter_value, filter_option, filter_type - ) - if condition is not None: - conditions.append(condition) + if field is not None: + condition = apply_filter_conditions( + field, filter_value, filter_option, filter_type + ) + if condition is not None: + conditions.append(condition) query = query.where(and_(*conditions)) # Apply ordering diff --git a/frontend/src/components/BCDataGrid/BCDataGridServer.jsx b/frontend/src/components/BCDataGrid/BCDataGridServer.jsx index 667719390..fea836178 100644 --- a/frontend/src/components/BCDataGrid/BCDataGridServer.jsx +++ b/frontend/src/components/BCDataGrid/BCDataGridServer.jsx @@ -16,7 +16,7 @@ import { useApiService } from '@/services/useApiService' import BCAlert from '@/components/BCAlert' import BCBox from '@/components/BCBox' import DataGridLoading from '@/components/DataGridLoading' -import { BCPagination } from './components' +import { AccessibleHeader, BCPagination } from './components' import { useTranslation } from 'react-i18next' // Import useTranslation // Register the required AG Grid modules for row model and CSV export functionality ModuleRegistry.registerModules([ClientSideRowModelModule, CsvExportModule]) @@ -122,7 +122,7 @@ const BCDataGridServer = ({ [apiService, apiEndpoint, page, size, sortModel] ) - // Hanlde page change + // Handle page change const handleChangePage = useCallback((event, newPage) => { setLoading(true) setPage(newPage + 1) @@ -189,7 +189,7 @@ const BCDataGridServer = ({ let localFilteredData = [...rowData] // Handle the 'type' filter locally - const typeFilter = filterModel['type'] + const typeFilter = filterModel.type if (typeFilter) { const filterText = typeFilter.filter?.toLowerCase() || '' @@ -199,7 +199,7 @@ const BCDataGridServer = ({ }) // Remove 'type' from the filter model to prevent backend filtering - delete filterModel['type'] + delete filterModel.type } // Handle other filters (backend filters) @@ -269,10 +269,11 @@ const BCDataGridServer = ({ suppressDragLeaveHidesColumns: true, suppressMovableColumns: true, suppressColumnMoveAnimation: false, - rowSelection: 'multiple', animateRows: true, suppressPaginationPanel: true, suppressScrollOnNewData: true, + suppressColumnVirtualisation: true, + enableBrowserTooltips: true, suppressCsvExport: false, // enableCellTextSelection: true, // enables text selection on the grid // ensureDomOrder: true, @@ -288,6 +289,8 @@ const BCDataGridServer = ({ // Memorized default column definition parameters const defaultColDefParams = useMemo(() => ({ + headerComponent: AccessibleHeader, + suppressHeaderFilterButton: true, resizable: true, sortable: true, filter: true, diff --git a/frontend/src/components/BCDataGrid/BCGridBase.jsx b/frontend/src/components/BCDataGrid/BCGridBase.jsx index 4a30c198e..8ec81244d 100644 --- a/frontend/src/components/BCDataGrid/BCGridBase.jsx +++ b/frontend/src/components/BCDataGrid/BCGridBase.jsx @@ -33,13 +33,14 @@ export const BCGridBase = forwardRef(({ autoSizeStrategy, ...props }, ref) => { suppressDragLeaveHidesColumns suppressMovableColumns suppressColumnMoveAnimation={false} - reactiveCustomComponents suppressCsvExport={false} + suppressColumnVirtualisation={true} + enableBrowserTooltips={true} suppressPaginationPanel suppressScrollOnNewData getRowStyle={getRowStyle} rowHeight={45} - headerHeight={45} + headerHeight={40} {...props} /> diff --git a/frontend/src/components/BCDataGrid/BCGridViewer.jsx b/frontend/src/components/BCDataGrid/BCGridViewer.jsx index 8a5638431..347270dcf 100644 --- a/frontend/src/components/BCDataGrid/BCGridViewer.jsx +++ b/frontend/src/components/BCDataGrid/BCGridViewer.jsx @@ -1,7 +1,7 @@ import BCAlert, { FloatingAlert } from '@/components/BCAlert' import BCBox from '@/components/BCBox' import { BCGridBase } from '@/components/BCDataGrid/BCGridBase' -import { BCPagination } from '@/components/BCDataGrid/components' +import { AccessibleHeader, BCPagination } from '@/components/BCDataGrid/components' import '@ag-grid-community/styles/ag-grid.css' import '@ag-grid-community/styles/ag-theme-material.css' import { useCallback, useMemo, useRef, useState } from 'react' @@ -161,6 +161,8 @@ export const BCGridViewer = ({ const defaultColDefParams = useMemo( () => ({ + headerComponent: AccessibleHeader, + suppressHeaderFilterButton: true, resizable: true, sortable: true, filter: true, diff --git a/frontend/src/components/BCDataGrid/components/Filters/BCDateFloatingFilter.jsx b/frontend/src/components/BCDataGrid/components/Filters/BCDateFloatingFilter.jsx index 6a924492b..36cb78c7c 100644 --- a/frontend/src/components/BCDataGrid/components/Filters/BCDateFloatingFilter.jsx +++ b/frontend/src/components/BCDataGrid/components/Filters/BCDateFloatingFilter.jsx @@ -6,11 +6,16 @@ import { } from '@mui/icons-material' import { DatePicker } from '@mui/x-date-pickers' import { format, isValid } from 'date-fns' +import dayjs from 'dayjs' +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs' +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider' export const BCDateFloatingFilter = ({ model, onModelChange, disabled = false, + minDate = '2013-01-01', + maxDate = '2040-01-01', initialFilterType = 'equals', label = 'Select Date' }) => { @@ -52,7 +57,7 @@ export const BCDateFloatingFilter = ({ return } - if (model.filter) { + if (model?.dateFrom) { const date = new Date(model.dateFrom) setSelectedDate(isValid(date) ? date : null) } @@ -67,7 +72,6 @@ export const BCDateFloatingFilter = ({ aria-labelledby="date-picker-label" sx={{ border: 'none', - '& .MuiOutlinedInput-root': { p: 0 }, '& .MuiOutlinedInput-notchedOutline': { border: 'none' }, '& .Mui-focused': { border: '1px solid #495057', @@ -75,52 +79,61 @@ export const BCDateFloatingFilter = ({ } }} > - - setOpen(true)} - aria-label="Open calendar" - > - - - - ), - endAdornment: selectedDate && ( - - event.stopPropagation()} - edge="end" - aria-label="Clear date" - > - - - - ) + + + setOpen(true)} + aria-label="Open calendar" + > + + + + ), + endAdornment: selectedDate && ( + + event.stopPropagation()} + edge="end" + aria-label="Clear date" + > + + + + ) + } } - } - }} - /> + }} + /> + ) } diff --git a/frontend/src/components/BCDataGrid/components/Filters/BCSelectFloatingFilter.jsx b/frontend/src/components/BCDataGrid/components/Filters/BCSelectFloatingFilter.jsx index ccb30136d..11052ddb7 100644 --- a/frontend/src/components/BCDataGrid/components/Filters/BCSelectFloatingFilter.jsx +++ b/frontend/src/components/BCDataGrid/components/Filters/BCSelectFloatingFilter.jsx @@ -80,7 +80,7 @@ export const BCSelectFloatingFilter = ({ } else { setSelectedValues([model?.filter]) } - }, [model, initialSelectedValues]) + }, [model]) return (
event.stopPropagation()} aria-label="Clear selection" + tabIndex={-1} > diff --git a/frontend/src/components/BCDataGrid/components/Renderers/AccessibleHeader.jsx b/frontend/src/components/BCDataGrid/components/Renderers/AccessibleHeader.jsx new file mode 100644 index 000000000..af0cdaf56 --- /dev/null +++ b/frontend/src/components/BCDataGrid/components/Renderers/AccessibleHeader.jsx @@ -0,0 +1,7 @@ +export const AccessibleHeader = (props) => { + return ( +
+ {props.column.colDef.headerName} +
+ ) +} diff --git a/frontend/src/components/BCDataGrid/components/Renderers/RequiredHeader.jsx b/frontend/src/components/BCDataGrid/components/Renderers/RequiredHeader.jsx index 1e8ddfbfb..8a6b9174f 100644 --- a/frontend/src/components/BCDataGrid/components/Renderers/RequiredHeader.jsx +++ b/frontend/src/components/BCDataGrid/components/Renderers/RequiredHeader.jsx @@ -1,8 +1,8 @@ export const RequiredHeader = (props) => { return ( -
+
* - {props.column.colDef.headerName} + {props.column.colDef.headerName}
) } diff --git a/frontend/src/components/BCDataGrid/components/index.js b/frontend/src/components/BCDataGrid/components/index.js index 16e855ef3..56eb9135a 100644 --- a/frontend/src/components/BCDataGrid/components/index.js +++ b/frontend/src/components/BCDataGrid/components/index.js @@ -6,6 +6,7 @@ export { DateRangeCellEditor } from './Editors/DateRangeCellEditor' export { ActionsRenderer } from './Renderers/ActionsRenderer' export { ActionsRenderer2 } from './Renderers/ActionsRenderer2' export { RequiredHeader } from './Renderers/RequiredHeader' +export { AccessibleHeader } from './Renderers/AccessibleHeader' export { ValidationRenderer } from './Renderers/ValidationRenderer' export { ValidationRenderer2 } from './Renderers/ValidationRenderer2' export { BCColumnSetFilter } from './Filters/BCColumnSetFilter' diff --git a/frontend/src/constants/statuses.js b/frontend/src/constants/statuses.js index 91c7d3662..36844092a 100644 --- a/frontend/src/constants/statuses.js +++ b/frontend/src/constants/statuses.js @@ -66,3 +66,10 @@ export const FUEL_CODE_STATUSES = { export function getAllFuelCodeStatuses() { return Object.values(FUEL_CODE_STATUSES) } + +export const TRANSACTION_TYPES = { + TRANSFER: 'Transfer', + INITIATIVE_AGREEMENT: 'InitiativeAgreement', + COMPLIANCE_REPORT: 'ComplianceReport', + ADMINISTRATIVE_ADJUSTMENT: 'AdminAdjustment' +} \ No newline at end of file diff --git a/frontend/src/utils/grid/cellRenderers.jsx b/frontend/src/utils/grid/cellRenderers.jsx index 642ba9fed..abaf0d179 100644 --- a/frontend/src/utils/grid/cellRenderers.jsx +++ b/frontend/src/utils/grid/cellRenderers.jsx @@ -35,64 +35,55 @@ export const LinkRenderer = (props) => { ) } +const BaseStatusRenderer = ({ + isView = false, + value = false, + successText = 'Active', + failureText = 'Inactive', + successColor = 'success', + failureColor = 'smoky' +}) => { + const badgeStyles = { + ...(!isView ? { display: 'flex', justifyContent: 'center' } : {}), + '& .MuiBadge-badge': { + minWidth: '120px', + fontWeight: 'regular', + textTransform: 'capitalize', + fontSize: '0.875rem', + padding: '0.4em 0.6em' + } + } -export const StatusRenderer = (props) => { return ( ) } -export const LoginStatusRenderer = (props) => { - return ( - - - - ) -} +export const StatusRenderer = (props) => ( + +) + +export const LoginStatusRenderer = (props) => ( + +) export const OrgStatusRenderer = (props) => { const location = useLocation() diff --git a/frontend/src/views/Admin/AdminMenu/components/UserActivity.jsx b/frontend/src/views/Admin/AdminMenu/components/UserActivity.jsx index 532214e8e..f54b5120a 100644 --- a/frontend/src/views/Admin/AdminMenu/components/UserActivity.jsx +++ b/frontend/src/views/Admin/AdminMenu/components/UserActivity.jsx @@ -13,9 +13,9 @@ export const UserActivity = () => { const navigate = useNavigate() const getRowId = useCallback((params) => { - return `${params.data.transactionType.toLowerCase()}-${ - params.data.transactionId - }` + return `${ + params.data.actionTaken + }-${params.data.transactionType}-${params.data.transactionId}` }, []) const handleRowClicked = useCallback( @@ -64,7 +64,6 @@ export const UserActivity = () => { defaultMinWidth: 50, defaultMaxWidth: 600 }} - rowSelection={{ isRowSelectable: false }} onRowClicked={handleRowClicked} /> diff --git a/frontend/src/views/Admin/AdminMenu/components/Users.jsx b/frontend/src/views/Admin/AdminMenu/components/Users.jsx index 49921701b..4c67e3e63 100644 --- a/frontend/src/views/Admin/AdminMenu/components/Users.jsx +++ b/frontend/src/views/Admin/AdminMenu/components/Users.jsx @@ -15,7 +15,6 @@ import { useTranslation } from 'react-i18next' import { ROUTES, apiRoutes } from '@/constants/routes' import { usersColumnDefs, idirUserDefaultFilter } from './_schema' -import { calculateRowHeight } from '@/utils/formatters' export const Users = () => { const { t } = useTranslation(['common', 'admin']) diff --git a/frontend/src/views/Admin/AdminMenu/components/_schema.js b/frontend/src/views/Admin/AdminMenu/components/_schema.js index 1c8093fe5..03438e25a 100644 --- a/frontend/src/views/Admin/AdminMenu/components/_schema.js +++ b/frontend/src/views/Admin/AdminMenu/components/_schema.js @@ -14,6 +14,11 @@ import { BCSelectFloatingFilter, BCDateFloatingFilter } from '@/components/BCDataGrid/components/index' +import { + COMPLIANCE_REPORT_STATUSES, + TRANSACTION_TYPES, + TRANSFER_STATUSES +} from '@/constants/statuses' export const usersColumnDefs = (t) => [ { @@ -50,7 +55,6 @@ export const usersColumnDefs = (t) => [ }, floatingFilterComponent: BCSelectFloatingFilter, suppressFloatingFilterButton: true, - suppressHeaderFilterButton: true, floatingFilterComponentParams: { optionsQuery: useRoleList, params: 'government_roles_only=true', @@ -101,8 +105,7 @@ export const usersColumnDefs = (t) => [ labelKey: 'name' }, minWidth: 120, - suppressFloatingFilterButton: true, - suppressHeaderFilterButton: true + suppressFloatingFilterButton: true }, { colId: 'organizationId', @@ -128,12 +131,51 @@ export const userActivityColDefs = [ { colId: 'actionTaken', field: 'actionTaken', - headerName: 'Action Taken' + headerName: 'Action Taken', + floatingFilterComponent: BCSelectFloatingFilter, + floatingFilterComponentParams: { + valueKey: 'action', + labelKey: 'action', + optionsQuery: () => { + const allStatuses = [ + ...Object.values(TRANSFER_STATUSES).map((value) => ({ + action: value + })) + // ...Object.values(COMPLIANCE_REPORT_STATUSES).map((value) => ({ + // action: value + // })) + ] + + const deduplicatedStatuses = Array.from( + new Set(allStatuses.map((item) => item.action)) + ).map((action) => ({ action })) + + return { + data: deduplicatedStatuses, + isLoading: false + } + } + }, + suppressFloatingFilterButton: true }, { colId: 'transactionType', field: 'transactionType', - headerName: 'Transaction Type' + headerName: 'Transaction Type', + floatingFilterComponent: BCSelectFloatingFilter, + floatingFilterComponentParams: { + valueKey: 'action', + labelKey: 'action', + optionsQuery: () => ({ + data: [ + ...Object.values(TRANSACTION_TYPES).map((value) => ({ + action: value + })) + ], + isLoading: false + }) + }, + suppressFloatingFilterButton: true }, { colId: 'transactionId', @@ -150,7 +192,8 @@ export const userActivityColDefs = [ field: 'createDate', headerName: 'Date', valueFormatter: dateFormatter, - filter: false + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true } ] @@ -180,7 +223,26 @@ export const userLoginHistoryColDefs = (t) => [ { field: 'isLoginSuccessful', headerName: t('admin:userLoginHistoryColLabels.isLoginSuccessful'), - cellRenderer: LoginStatusRenderer + cellRenderer: LoginStatusRenderer, + valueGetter: (params) => params.data.isLoginSuccessful, + filterParams: { + textMatcher: (filter) => { + return true + } + }, + floatingFilterComponent: BCSelectFloatingFilter, + floatingFilterComponentParams: { + optionsQuery: () => ({ + data: [ + { id: 1, name: 'Success' }, + { id: 0, name: 'Failed' } + ], + isLoading: false + }), + valueKey: 'name', + labelKey: 'name' + }, + suppressFloatingFilterButton: true }, { field: 'loginErrorMessage', @@ -190,7 +252,9 @@ export const userLoginHistoryColDefs = (t) => [ field: 'createDate', headerName: t('admin:userLoginHistoryColLabels.createDate'), cellDataType: 'dateString', - valueFormatter: timezoneFormatter + valueFormatter: timezoneFormatter, + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true } ] @@ -255,7 +319,9 @@ export const auditLogColDefs = (t) => [ filterOptions: ['equals', 'lessThan', 'greaterThan', 'inRange'], suppressAndOrCondition: true, buttons: ['clear'] - } + }, + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true } ] diff --git a/frontend/src/views/ComplianceReports/components/_schema.jsx b/frontend/src/views/ComplianceReports/components/_schema.jsx index 6c52b88b6..e2e9ba6a4 100644 --- a/frontend/src/views/ComplianceReports/components/_schema.jsx +++ b/frontend/src/views/ComplianceReports/components/_schema.jsx @@ -75,7 +75,8 @@ export const reportsColDefs = (t, bceidRole) => [ }), valueKey: 'name', labelKey: 'name' - } + }, + suppressFloatingFilterButton: true }, { field: 'updateDate', @@ -91,7 +92,8 @@ export const reportsColDefs = (t, bceidRole) => [ buttons: ['clear'], maxValidYear: 2400 }, - floatingFilterComponent: BCDateFloatingFilter + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true } ] diff --git a/frontend/src/views/FuelCodes/_schema.jsx b/frontend/src/views/FuelCodes/_schema.jsx index cb93d7617..48bbd4715 100644 --- a/frontend/src/views/FuelCodes/_schema.jsx +++ b/frontend/src/views/FuelCodes/_schema.jsx @@ -5,20 +5,23 @@ import { } from '@/utils/grid/cellRenderers' import { numberFormatter, timezoneFormatter } from '@/utils/formatters' import BCTypography from '@/components/BCTypography' -import { BCColumnSetFilter } from '@/components/BCDataGrid/components' +import { + BCSelectFloatingFilter, + BCDateFloatingFilter +} from '@/components/BCDataGrid/components' import { useFuelCodeStatuses, useTransportModes } from '@/hooks/useFuelCode' export const fuelCodeColDefs = (t) => [ { field: 'status', headerName: t('fuelCode:fuelCodeColLabels.status'), - floatingFilterComponent: BCColumnSetFilter, + floatingFilterComponent: BCSelectFloatingFilter, floatingFilterComponentParams: { - apiOptionField: 'status', - apiQuery: useFuelCodeStatuses, - disableCloseOnSelect: false, - multiple: false + valueKey: 'status', + labelKey: 'status', + optionsQuery: useFuelCodeStatuses }, + suppressFloatingFilterButton: true, valueGetter: (params) => params.data.fuelCodeStatus.status, cellRenderer: FuelCodeStatusTextRenderer }, @@ -26,6 +29,7 @@ export const fuelCodeColDefs = (t) => [ field: 'prefix', headerName: t('fuelCode:fuelCodeColLabels.prefix'), valueGetter: (params) => params.data.fuelCodePrefix.prefix, + suppressFloatingFilterButton: true, cellRenderer: TextRenderer }, { @@ -34,6 +38,7 @@ export const fuelCodeColDefs = (t) => [ cellRenderer: TextRenderer, type: 'numericColumn', filter: 'agNumberColumnFilter', + suppressFloatingFilterButton: true, filterParams: { filterOptions: ['startsWith'], buttons: ['clear'] @@ -76,26 +81,34 @@ export const fuelCodeColDefs = (t) => [ { field: 'applicationDate', headerName: t('fuelCode:fuelCodeColLabels.applicationDate'), - filter: false, + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true, + minWidth: 250, cellRenderer: TextRenderer }, { field: 'approvalDate', headerName: t('fuelCode:fuelCodeColLabels.approvalDate'), - filter: false, - cellRenderer: TextRenderer + cellRenderer: TextRenderer, + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true, + minWidth: 250 }, { field: 'effectiveDate', headerName: t('fuelCode:fuelCodeColLabels.effectiveDate'), - filter: false, - cellRenderer: TextRenderer + cellRenderer: TextRenderer, + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true, + minWidth: 250 }, { field: 'expirationDate', headerName: t('fuelCode:fuelCodeColLabels.expirationDate'), - filter: false, - cellRenderer: TextRenderer + cellRenderer: TextRenderer, + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true, + minWidth: 250 }, { field: 'fuelType', @@ -158,13 +171,13 @@ export const fuelCodeColDefs = (t) => [ field: 'feedstockFuelTransportMode', headerName: t('fuelCode:fuelCodeColLabels.feedstockFuelTransportMode'), sortable: false, - floatingFilterComponent: BCColumnSetFilter, + floatingFilterComponent: BCSelectFloatingFilter, floatingFilterComponentParams: { - apiOptionField: 'transportMode', - apiQuery: useTransportModes, - disableCloseOnSelect: false, - multiple: false + valueKey: 'transportMode', + labelKey: 'transportMode', + optionsQuery: useTransportModes }, + suppressFloatingFilterButton: true, minWidth: 335, valueGetter: (params) => params.data.feedstockFuelTransportModes.map( @@ -176,13 +189,13 @@ export const fuelCodeColDefs = (t) => [ field: 'finishedFuelTransportMode', headerName: t('fuelCode:fuelCodeColLabels.finishedFuelTransportMode'), sortable: false, - floatingFilterComponent: BCColumnSetFilter, + floatingFilterComponent: BCSelectFloatingFilter, floatingFilterComponentParams: { - apiOptionField: 'transportMode', - apiQuery: useTransportModes, - disableCloseOnSelect: false, - multiple: false + valueKey: 'transportMode', + labelKey: 'transportMode', + optionsQuery: useTransportModes }, + suppressFloatingFilterButton: true, minWidth: 335, valueGetter: (params) => params.data.finishedFuelTransportModes.map( diff --git a/frontend/src/views/Notifications/NotificationMenu/components/_schema.jsx b/frontend/src/views/Notifications/NotificationMenu/components/_schema.jsx index 601fb29c6..235eccc50 100644 --- a/frontend/src/views/Notifications/NotificationMenu/components/_schema.jsx +++ b/frontend/src/views/Notifications/NotificationMenu/components/_schema.jsx @@ -1,6 +1,7 @@ import { dateFormatter } from '@/utils/formatters' import { actions } from '@/components/BCDataGrid/columns' import { ROUTES } from '@/constants/routes' +import { BCDateFloatingFilter } from '@/components/BCDataGrid/components' export const columnDefs = (t, currentUser) => [ { @@ -16,7 +17,8 @@ export const columnDefs = (t, currentUser) => [ { colId: 'date', field: 'date', - cellDataType: 'date', + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true, headerName: t('notifications:notificationColLabels.date'), valueGetter: (params) => params.data.createDate, valueFormatter: dateFormatter diff --git a/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx b/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx index 812192fa9..00a633f7d 100644 --- a/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx +++ b/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx @@ -1,9 +1,8 @@ -import { useState, useEffect, useMemo, useRef, useCallback } from 'react' +import { useState, useEffect, useRef, useCallback } from 'react' import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useTranslation } from 'react-i18next' import { useLocation, useNavigate, useParams } from 'react-router-dom' -import { BCAlert2 } from '@/components/BCAlert' import BCBox from '@/components/BCBox' import Loading from '@/components/Loading' import { defaultColDef, notionalTransferColDefs } from './_schema' @@ -15,7 +14,6 @@ import { import { useCurrentUser } from '@/hooks/useCurrentUser' import { v4 as uuid } from 'uuid' import { BCGridEditor } from '@/components/BCDataGrid/BCGridEditor' -import { useApiService } from '@/services/useApiService' import * as ROUTES from '@/constants/routes/routes.js' export const AddEditNotionalTransfers = () => { @@ -26,7 +24,6 @@ export const AddEditNotionalTransfers = () => { const gridRef = useRef(null) const alertRef = useRef() const location = useLocation() - const apiService = useApiService() const { t } = useTranslation(['common', 'notionalTransfer', 'reports']) const { complianceReportId, compliancePeriod } = useParams() const { diff --git a/frontend/src/views/Organizations/ViewOrganization/_schema.js b/frontend/src/views/Organizations/ViewOrganization/_schema.js index 8b78ce4d5..95625fe20 100644 --- a/frontend/src/views/Organizations/ViewOrganization/_schema.js +++ b/frontend/src/views/Organizations/ViewOrganization/_schema.js @@ -54,8 +54,7 @@ export const organizationsColDefs = (t) => [ labelKey: 'status', optionsQuery: useOrganizationStatuses }, - suppressFloatingFilterButton: true, - suppressHeaderFilterButton: true + suppressFloatingFilterButton: true } ] diff --git a/frontend/src/views/Transactions/_schema.js b/frontend/src/views/Transactions/_schema.js index 50827ed38..e5e2fded4 100644 --- a/frontend/src/views/Transactions/_schema.js +++ b/frontend/src/views/Transactions/_schema.js @@ -5,7 +5,10 @@ import { spacesFormatter } from '@/utils/formatters' import { TransactionStatusRenderer } from '@/utils/grid/cellRenderers' -import { BCSelectFloatingFilter } from '@/components/BCDataGrid/components' +import { + BCSelectFloatingFilter, + BCDateFloatingFilter +} from '@/components/BCDataGrid/components' import { useTransactionStatuses } from '@/hooks/useTransactions' const prefixMap = { @@ -109,7 +112,6 @@ export const transactionsColDefs = (t) => [ optionsQuery: useTransactionStatuses }, suppressFloatingFilterButton: true, - suppressHeaderFilterButton: true, minWidth: 180, width: 250 }, @@ -118,7 +120,7 @@ export const transactionsColDefs = (t) => [ field: 'updateDate', headerName: t('txn:txnColLabels.updateDate'), valueFormatter: dateFormatter, - width: 190, + minWidth: 250, filter: 'agDateColumnFilter', filterParams: { filterOptions: ['inRange', 'equals', 'lessThan', 'greaterThan'], @@ -137,7 +139,9 @@ export const transactionsColDefs = (t) => [ }, browserDatePicker: true, // Uses the browser's date picker if available buttons: ['clear'] - } + }, + floatingFilterComponent: BCDateFloatingFilter, + suppressFloatingFilterButton: true } ] diff --git a/frontend/src/views/Transactions/options.js b/frontend/src/views/Transactions/options.js deleted file mode 100644 index 69cd55d5f..000000000 --- a/frontend/src/views/Transactions/options.js +++ /dev/null @@ -1,38 +0,0 @@ -// import { getOrganization } from '@/utils/getOrganization' -// import { getStatus } from '@/utils/getStatus' -// import dayjs from 'dayjs' - -// export const gridProps = { -// columnDefs: [ -// { field: 'transactionId', headerName: 'ID' }, -// { -// field: 'compliancePeriod', -// headerName: 'Compliant period' -// }, -// { field: 'transactionType.type', headerName: 'Type' }, -// { -// valueGetter: (data) => getOrganization(data, 'from'), -// headerName: 'Compliance units from' -// }, -// { -// valueGetter: (data) => getOrganization(data, 'to'), -// headerName: 'Compliance units to' -// }, -// { field: 'complianceUnits', headerName: 'Number of units' }, -// { field: 'valuePerUnit', headerName: 'Value per unit' }, -// { -// valueGetter: getStatus, -// headerName: 'Status' -// }, -// { -// valueFormatter: (data) => dayjs(data.lastUpdated).format('YYYY-MM-DD'), -// headerName: 'Last updated' -// } -// ], -// defaultColDef: { -// resizable: true, -// sortable: true, -// filter: true, -// floatingFilter: true -// } -// }