forked from bcgov/wps
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Morecast: Validation on editable fields (bcgov#3919)
Adds an optional `validator` function for `IndeterminateField` that gets called in `preProcessEditCellProps` callback for cells in edit mode to set the error prop if validation doesn't pass for the forecast parameter. The same `validator` function is passed down to cells in view mode to do the same thing. Adds the `EditInputCell` component as the render component for cells in edit mode that gets rendered by the `renderEditCell` callback on the `GridColDef`. `EditInputCell` props include an empty or non-empty `error` string that drives the visibility of the tooltip and red border. Similar behaviour for the `renderCell` callback for cells in view mode, except it doesn't receive the `error` string in props so it calls `validator` itself. This is to keep the same behaviour whether the user is actively editing or not and the current value is invalid. Opted to prevent edits from committing locally when invalid so that invalid values aren't stored in drafts.
- Loading branch information
Showing
16 changed files
with
619 additions
and
72 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -67,6 +67,7 @@ | |
| "cffdrs", | ||
| "colour", | ||
| "cutline", | ||
| "CWFIS", | ||
| "determinates", | ||
| "excinfo", | ||
| "fastapi", | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { GridRenderEditCellParams, useGridApiContext } from '@mui/x-data-grid-pro' | ||
| import React, { useRef, useEffect } from 'react' | ||
| import { TextField } from '@mui/material' | ||
| import { theme } from '@/app/theme' | ||
| import { isEmpty } from 'lodash' | ||
| import { AppDispatch } from '@/app/store' | ||
| import { useDispatch } from 'react-redux' | ||
| import { setInputValid } from '@/features/moreCast2/slices/validInputSlice' | ||
| import InvalidCellToolTip from '@/features/moreCast2/components/InvalidCellToolTip' | ||
|
|
||
| export const EditInputCell = (props: GridRenderEditCellParams) => { | ||
| const { id, value, field, hasFocus, error } = props | ||
| const apiRef = useGridApiContext() | ||
| const inputRef = useRef<HTMLInputElement | null>(null) | ||
| const dispatch: AppDispatch = useDispatch() | ||
|
|
||
| dispatch(setInputValid(isEmpty(error))) | ||
|
|
||
| useEffect(() => { | ||
| if (hasFocus && inputRef.current) { | ||
| inputRef.current.focus() | ||
| } | ||
| }, [hasFocus]) | ||
|
|
||
| const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const newValue = event.target.value | ||
| apiRef.current.setEditCellValue({ id, field, value: newValue }) | ||
| } | ||
|
|
||
| const handleBlur = () => { | ||
| apiRef.current.stopCellEditMode({ id, field }) | ||
| } | ||
|
|
||
| const handleKeyDown = (event: React.KeyboardEvent) => { | ||
| if (event.key === 'Escape') { | ||
| event.stopPropagation() | ||
| if (isEmpty(error)) { | ||
| apiRef.current.stopCellEditMode({ id, field }) | ||
| } else { | ||
| event.stopPropagation() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <InvalidCellToolTip error={error}> | ||
| <TextField | ||
| data-testid="forecast-edit-cell" | ||
| type="number" | ||
| inputMode="numeric" | ||
| inputRef={inputRef} | ||
| size="small" | ||
| InputLabelProps={{ | ||
| shrink: true | ||
| }} | ||
| sx={{ | ||
| '& .MuiOutlinedInput-root': { | ||
| '& fieldset': { | ||
| borderColor: error ? theme.palette.error.main : '#737373', | ||
| borderWidth: '2px' | ||
| }, | ||
| '&:hover fieldset': { | ||
| borderColor: error ? theme.palette.error.main : '#737373' | ||
| }, | ||
| '&.Mui-focused fieldset': { | ||
| borderColor: error ? theme.palette.error.main : '#737373', | ||
| borderWidth: '2px' | ||
| } | ||
| } | ||
| }} | ||
| value={value} | ||
| onChange={handleValueChange} | ||
| onBlur={handleBlur} | ||
| onKeyDown={handleKeyDown} | ||
| /> | ||
| </InvalidCellToolTip> | ||
| ) | ||
| } |
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.