-
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.
Merge branch 'release-0.2.0' into fix/daniel-use-correct-compliance-p…
…eriod-1497
- Loading branch information
Showing
10 changed files
with
345 additions
and
38 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
128 changes: 128 additions & 0 deletions
128
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,128 @@ | ||
| 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' | ||
|
|
||
| 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" | ||
| role="group" | ||
| aria-labelledby="date-picker-label" | ||
| sx={{ | ||
| border: 'none', | ||
| '& .MuiOutlinedInput-root': { p: 0 }, | ||
| '& .MuiOutlinedInput-notchedOutline': { border: 'none' }, | ||
| '& .Mui-focused': { | ||
| border: '1px solid #495057', | ||
| boxShadow: '0 0 0 1px #495057' | ||
| } | ||
| }} | ||
| > | ||
| <DatePicker | ||
| id="date-picker" | ||
| aria-label="Date Picker" | ||
| aria-describedby="date-picker-description" | ||
| 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)} | ||
| aria-label="Open calendar" | ||
| > | ||
| <CalendarIcon fontSize="small" /> | ||
| </IconButton> | ||
| </InputAdornment> | ||
| ), | ||
| endAdornment: selectedDate && ( | ||
| <InputAdornment position="end"> | ||
| <IconButton | ||
| size="small" | ||
| onClick={handleClear} | ||
| onMouseDown={(event) => event.stopPropagation()} | ||
| edge="end" | ||
| aria-label="Clear date" | ||
| > | ||
| <ClearIcon fontSize="small" /> | ||
| </IconButton> | ||
| </InputAdornment> | ||
| ) | ||
| } | ||
| } | ||
| }} | ||
| /> | ||
| </FormControl> | ||
| ) | ||
| } | ||
|
|
||
| BCDateFloatingFilter.displayName = 'BCDateFloatingFilter' |
140 changes: 140 additions & 0 deletions
140
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,140 @@ | ||
| 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%' }} | ||
| role="group" | ||
| aria-labelledby="select-filter-label" | ||
| > | ||
| <div | ||
| className="select-container" | ||
| style={{ | ||
| maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP | ||
| }} | ||
| role="combobox" | ||
| aria-expanded={selectedValues.length > 0} | ||
| aria-controls="select-filter" | ||
| > | ||
| <select | ||
| id="select-filter" | ||
| multiple={multiple} | ||
| value={selectedValues} | ||
| onChange={handleChange} | ||
| disabled={disabled || isLoading} | ||
| aria-multiselectable={multiple} | ||
| aria-disabled={disabled || isLoading} | ||
| aria-describedby={ | ||
| isError ? 'select-filter-error' : 'select-filter-description' | ||
| } | ||
| 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.