-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: LCFS - Improve Accessibility for AG Grid Filtering Components #…
- Loading branch information
prv-proton
committed
Jan 2, 2025
1 parent
64b5b3d
commit b2f4d24
Showing
10 changed files
with
326 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
122 changes: 122 additions & 0 deletions
122
frontend/src/components/BCDataGrid/components/Filters/BCDateFloatingFilter.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| import { useState, useEffect, useCallback } from 'react' | ||
| import { FormControl, IconButton, InputAdornment } from '@mui/material' | ||
| import { | ||
| Clear as ClearIcon, | ||
| CalendarToday as CalendarIcon | ||
| } from '@mui/icons-material' | ||
| import { DatePicker } from '@mui/x-date-pickers' | ||
| import { format, isValid } from 'date-fns' | ||
| import { getDateFromDateSections } from '@mui/x-date-pickers/internals/hooks/useField/useField.utils' | ||
|
|
||
| export const BCDateFloatingFilter = ({ | ||
| model, | ||
| onModelChange, | ||
| disabled = false, | ||
| initialFilterType = 'equals', | ||
| label = 'Select Date' | ||
| }) => { | ||
| const [selectedDate, setSelectedDate] = useState(null) | ||
| const [open, setOpen] = useState(false) | ||
|
|
||
| const handleChange = useCallback((newDate) => { | ||
| setSelectedDate(newDate) | ||
|
|
||
| if (newDate && isValid(newDate)) { | ||
| onModelChange({ | ||
| type: initialFilterType, | ||
| dateFrom: format(newDate, 'yyyy-MM-dd'), | ||
| dateTo: null, | ||
| filterType: 'date' | ||
| }) | ||
| } else { | ||
| onModelChange(null) | ||
| } | ||
| }, []) | ||
|
|
||
| const handleClear = (event) => { | ||
| event.stopPropagation() | ||
| setSelectedDate(null) | ||
| onModelChange(null) | ||
| } | ||
|
|
||
| const handleOpen = () => { | ||
| setOpen(true) | ||
| } | ||
|
|
||
| const handleClose = () => { | ||
| setOpen(false) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| if (!model) { | ||
| setSelectedDate(null) | ||
| return | ||
| } | ||
|
|
||
| if (model.filter) { | ||
| const date = new Date(model.dateFrom) | ||
| setSelectedDate(isValid(date) ? date : null) | ||
| } | ||
| }, [model]) | ||
|
|
||
| return ( | ||
| <FormControl | ||
| className="bc-column-date-filter" | ||
| fullWidth | ||
| size="small" | ||
| sx={{ | ||
| border: 'none', | ||
| '& .MuiOutlinedInput-root': { p: 0 }, | ||
| '& .MuiOutlinedInput-notchedOutline': { border: 'none' }, | ||
| '& .Mui-focused': { | ||
| border: '1px solid #495057', | ||
| boxShadow: '0 0 0 1px #495057' | ||
| } | ||
| }} | ||
| > | ||
| <DatePicker | ||
| sx={{ border: 'none', borderBottom: '2px solid #495057' }} | ||
| value={selectedDate} | ||
| onChange={handleChange} | ||
| open={open} | ||
| onOpen={handleOpen} | ||
| onClose={handleClose} | ||
| disabled={disabled} | ||
| format="yyyy-MM-dd" | ||
| slotProps={{ | ||
| textField: { | ||
| size: 'small', | ||
| label, | ||
| InputProps: { | ||
| startAdornment: ( | ||
| <InputAdornment position="start"> | ||
| <IconButton | ||
| size="small" | ||
| edge="start" | ||
| onClick={() => setOpen(true)} | ||
| > | ||
| <CalendarIcon fontSize="small" /> | ||
| </IconButton> | ||
| </InputAdornment> | ||
| ), | ||
| endAdornment: selectedDate && ( | ||
| <InputAdornment position="end"> | ||
| <IconButton | ||
| size="small" | ||
| onClick={handleClear} | ||
| onMouseDown={(event) => event.stopPropagation()} | ||
| edge="end" | ||
| > | ||
| <ClearIcon fontSize="small" /> | ||
| </IconButton> | ||
| </InputAdornment> | ||
| ) | ||
| } | ||
| } | ||
| }} | ||
| /> | ||
| </FormControl> | ||
| ) | ||
| } | ||
|
|
||
| BCDateFloatingFilter.displayName = 'BCDateFloatingFilter' |
128 changes: 128 additions & 0 deletions
128
frontend/src/components/BCDataGrid/components/Filters/BCSelectFloatingFilter.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import { useState, useCallback, useEffect } from 'react' | ||
| import { IconButton } from '@mui/material' | ||
| import { Clear as ClearIcon } from '@mui/icons-material' | ||
| const ITEM_HEIGHT = 48 | ||
| const ITEM_PADDING_TOP = 8 | ||
|
|
||
| export const BCSelectFloatingFilter = ({ | ||
| model, | ||
| onModelChange, | ||
| optionsQuery, | ||
| valueKey = 'value', | ||
| labelKey = 'label', | ||
| disabled = false, | ||
| params, | ||
| initialFilterType = 'equals', | ||
| multiple = false, | ||
| initialSelectedValues = [] | ||
| }) => { | ||
| const [selectedValues, setSelectedValues] = useState([]) | ||
| const { data: optionsData, isLoading, isError, error } = optionsQuery(params) | ||
|
|
||
| const handleChange = (event) => { | ||
| const { options } = event.target | ||
| const newValues = Array.from(options) | ||
| .filter((option) => option.selected) | ||
| .map((option) => option.value) | ||
|
|
||
| if (!multiple) { | ||
| setSelectedValues([newValues[0] || '']) | ||
| onModelChange( | ||
| !newValues[0] || newValues[0] === '0' | ||
| ? null | ||
| : { | ||
| type: initialFilterType, | ||
| filter: newValues[0] | ||
| } | ||
| ) | ||
| } else { | ||
| setSelectedValues(newValues) | ||
| onModelChange({ | ||
| type: initialFilterType, | ||
| filter: newValues | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| const handleClear = (event) => { | ||
| event.stopPropagation() | ||
| setSelectedValues([]) | ||
| onModelChange(null) | ||
| } | ||
|
|
||
| const renderSelectContent = useCallback(() => { | ||
| if (isLoading) { | ||
| return ( | ||
| <option disabled value=""> | ||
| Loading... | ||
| </option> | ||
| ) | ||
| } | ||
|
|
||
| if (isError) { | ||
| return ( | ||
| <option disabled value=""> | ||
| Error loading options: {error?.message} | ||
| </option> | ||
| ) | ||
| } | ||
|
|
||
| return (optionsData || []).map((option) => ( | ||
| <option key={option[valueKey]} value={option[valueKey]}> | ||
| {option[labelKey]} | ||
| </option> | ||
| )) | ||
| }, [isLoading, isError, optionsData, error]) | ||
|
|
||
| useEffect(() => { | ||
| if (!model) { | ||
| setSelectedValues(initialSelectedValues) | ||
| } else { | ||
| setSelectedValues([model?.filter]) | ||
| } | ||
| }, [model, initialSelectedValues]) | ||
|
|
||
| return ( | ||
| <div style={{ position: 'relative', width: '100%' }}> | ||
| <div | ||
| className="select-container" | ||
| style={{ | ||
| maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP | ||
| }} | ||
| > | ||
| <select | ||
| id="select-filter" | ||
| multiple={multiple} | ||
| value={selectedValues} | ||
| onChange={handleChange} | ||
| disabled={disabled || isLoading} | ||
| style={{ | ||
| color: selectedValues.length > 0 ? '#999' : '#000' | ||
| }} | ||
| > | ||
| <option | ||
| value="" | ||
| disabled={!multiple} | ||
| style={{ display: multiple ? 'none' : 'block' }} | ||
| > | ||
| Select | ||
| </option> | ||
| {renderSelectContent()} | ||
| </select> | ||
| {selectedValues.length > 0 && ( | ||
| <IconButton | ||
| size="small" | ||
| sx={{ mr: 2 }} | ||
| onClick={handleClear} | ||
| onMouseDown={(event) => event.stopPropagation()} | ||
| aria-label="Clear selection" | ||
| > | ||
| <ClearIcon fontSize="small" /> | ||
| </IconButton> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| BCSelectFloatingFilter.displayName = 'BCSelectFloatingFilter' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.