From ce726f713f237b9e914421b02f07770918472a31 Mon Sep 17 00:00:00 2001 From: Kevin Hashimoto Date: Tue, 17 Dec 2024 16:32:07 -0800 Subject: [PATCH] feat: clear alert on action --- frontend/src/components/BCAlert/BCAlert2.jsx | 3 + .../components/BCDataGrid/BCGridEditor.jsx | 103 ++++++++++-------- .../FuelSupplies/AddEditFuelSupplies.jsx | 30 +++-- 3 files changed, 79 insertions(+), 57 deletions(-) diff --git a/frontend/src/components/BCAlert/BCAlert2.jsx b/frontend/src/components/BCAlert/BCAlert2.jsx index e7b1d684d..fd92913ab 100644 --- a/frontend/src/components/BCAlert/BCAlert2.jsx +++ b/frontend/src/components/BCAlert/BCAlert2.jsx @@ -70,6 +70,9 @@ export const BCAlert2 = forwardRef( setSeverity(severity) setMessage(message) setTriggerCount((prevCount) => prevCount + 1) + }, + clearAlert: () => { + setAlertStatus('fadeOut') } })) diff --git a/frontend/src/components/BCDataGrid/BCGridEditor.jsx b/frontend/src/components/BCDataGrid/BCGridEditor.jsx index cdc02be64..6edf579f2 100644 --- a/frontend/src/components/BCDataGrid/BCGridEditor.jsx +++ b/frontend/src/components/BCDataGrid/BCGridEditor.jsx @@ -59,32 +59,36 @@ export const BCGridEditor = ({ if (!firstEditableColumnRef.current) { const columns = ref.current.api.getAllDisplayedColumns() - firstEditableColumnRef.current = columns.find(col => - col.colDef.editable !== false && - !['action', 'checkbox'].includes(col.colDef.field) + firstEditableColumnRef.current = columns.find( + (col) => + col.colDef.editable !== false && + !['action', 'checkbox'].includes(col.colDef.field) ) } return firstEditableColumnRef.current }, []) // Helper function to start editing first editable cell in a row - const startEditingFirstEditableCell = useCallback((rowIndex) => { - if (!ref.current?.api) return + const startEditingFirstEditableCell = useCallback( + (rowIndex) => { + if (!ref.current?.api) return - // Ensure we have the first editable column - const firstEditableColumn = findFirstEditableColumn() - if (!firstEditableColumn) return + // Ensure we have the first editable column + const firstEditableColumn = findFirstEditableColumn() + if (!firstEditableColumn) return - // Use setTimeout to ensure the grid is ready - setTimeout(() => { - ref.current.api.ensureIndexVisible(rowIndex) - ref.current.api.setFocusedCell(rowIndex, firstEditableColumn.getColId()) - ref.current.api.startEditingCell({ - rowIndex, - colKey: firstEditableColumn.getColId() - }) - }, 100) - }, [findFirstEditableColumn]) + // Use setTimeout to ensure the grid is ready + setTimeout(() => { + ref.current.api.ensureIndexVisible(rowIndex) + ref.current.api.setFocusedCell(rowIndex, firstEditableColumn.getColId()) + ref.current.api.startEditingCell({ + rowIndex, + colKey: firstEditableColumn.getColId() + }) + }, 100) + }, + [findFirstEditableColumn] + ) const handleExcelPaste = useCallback( (params) => { @@ -175,7 +179,11 @@ export const BCGridEditor = ({ params.event.target.dataset.action && onAction ) { - const transaction = await onAction(params.event.target.dataset.action, params) + alertRef.current.clearAlert() + const transaction = await onAction( + params.event.target.dataset.action, + params + ) // Focus and edit the first editable column of the duplicated row if (transaction?.add.length > 0) { const duplicatedRowNode = transaction.add[0] @@ -192,28 +200,32 @@ export const BCGridEditor = ({ setAnchorEl(null) } - const handleAddRows = useCallback((numRows) => { - let newRows = [] - if (props.onAddRows) { - newRows = props.onAddRows(numRows) - } else { - newRows = Array(numRows) - .fill() - .map(() => ({ id: uuid() })) - } + const handleAddRows = useCallback( + (numRows) => { + alertRef.current.clearAlert() + let newRows = [] + if (props.onAddRows) { + newRows = props.onAddRows(numRows) + } else { + newRows = Array(numRows) + .fill() + .map(() => ({ id: uuid() })) + } - // Add the new rows - ref.current.api.applyTransaction({ - add: newRows, - addIndex: ref.current.api.getDisplayedRowCount() - }) + // Add the new rows + ref.current.api.applyTransaction({ + add: newRows, + addIndex: ref.current.api.getDisplayedRowCount() + }) - // Focus and start editing the first new row - const firstNewRowIndex = ref.current.api.getDisplayedRowCount() - numRows - startEditingFirstEditableCell(firstNewRowIndex) + // Focus and start editing the first new row + const firstNewRowIndex = ref.current.api.getDisplayedRowCount() - numRows + startEditingFirstEditableCell(firstNewRowIndex) - setAnchorEl(null) - }, [props.onAddRows, startEditingFirstEditableCell]) + setAnchorEl(null) + }, + [props.onAddRows, startEditingFirstEditableCell] + ) const isGridValid = () => { let isValid = true @@ -238,24 +250,25 @@ export const BCGridEditor = ({ setShowCloseModal(true) } const hasRequiredHeaderComponent = useCallback(() => { - const columnDefs = ref.current?.api?.getColumnDefs() || []; + const columnDefs = ref.current?.api?.getColumnDefs() || [] // Check if any column has `headerComponent` matching "RequiredHeader" - return columnDefs.some( - colDef => colDef.headerComponent?.name === 'RequiredHeader' - ) || columnDefs.some(colDef => !!colDef.headerComponent) + return ( + columnDefs.some( + (colDef) => colDef.headerComponent?.name === 'RequiredHeader' + ) || columnDefs.some((colDef) => !!colDef.headerComponent) + ) }, [ref]) - return ( - {hasRequiredHeaderComponent() && + {hasRequiredHeaderComponent() && ( - } + )} { severity: location.state.severity || 'info' }) } - }, [location?.state?.message, location?.state?.severity]); + }, [location?.state?.message, location?.state?.severity]) - const validate = (params, validationFn, errorMessage, alertRef, field = null) => { - const value = field ? params.node?.data[field] : params; + const validate = ( + params, + validationFn, + errorMessage, + alertRef, + field = null + ) => { + const value = field ? params.node?.data[field] : params if (field && params.colDef.field !== field) { - return true; + return true } if (!validationFn(value)) { alertRef.current?.triggerAlert({ message: errorMessage, - severity: 'error', - }); - return false; + severity: 'error' + }) + return false } - return true; // Proceed with the update - }; + return true // Proceed with the update + } const onGridReady = useCallback( async (params) => { @@ -172,12 +178,12 @@ export const AddEditFuelSupplies = () => { const isValid = validate( params, (value) => { - return value !== null && !isNaN(value) && value > 0; + return value !== null && !isNaN(value) && value > 0 }, 'Quantity supplied must be greater than 0.', alertRef, - 'quantity', - ); + 'quantity' + ) if (!isValid) { return