LCFS - Set focus #1188

bcgov · Nov 19, 2024 · 2a5d5f2 · 2a5d5f2
1 parent 57af75a
commit 2a5d5f2
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 14 deletions.
diff --git a/frontend/src/components/BCDataGrid/BCGridEditor.jsx b/frontend/src/components/BCDataGrid/BCGridEditor.jsx
@@ -44,10 +44,44 @@ export const BCGridEditor = ({
 }) => {
   const localRef = useRef(null)
   const ref = gridRef || localRef
+  const firstEditableColumnRef = useRef(null)
   const [anchorEl, setAnchorEl] = useState(null)
   const buttonRef = useRef(null)
   const { t } = useTranslation(['common'])
 
+  // Helper function to find and cache first editable column
+  const findFirstEditableColumn = useCallback(() => {
+    if (!ref.current?.api) return null
+
+    if (!firstEditableColumnRef.current) {
+      const columns = ref.current.api.getAllDisplayedColumns()
+      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
+
+    // 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])
+
   const handleExcelPaste = useCallback(
     (params) => {
       const newData = []
@@ -106,13 +140,18 @@ export const BCGridEditor = ({
     [onCellValueChanged]
   )
 
-  const onCellClicked = (params) => {
+  const onCellClicked = async (params) => {
     if (
       params.column.colId === 'action' &&
       params.event.target.dataset.action &&
       onAction
     ) {
-      onAction(params.event.target.dataset.action, params)
+      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]
+        startEditingFirstEditableCell(duplicatedRowNode.rowIndex)
+      }
     }
   }
 
@@ -124,7 +163,7 @@ export const BCGridEditor = ({
     setAnchorEl(null)
   }
 
-  const handleAddRows = (numRows) => {
+  const handleAddRows = useCallback((numRows) => {
     let newRows = []
     if (props.onAddRows) {
       newRows = props.onAddRows(numRows)
@@ -133,9 +172,19 @@ export const BCGridEditor = ({
         .fill()
         .map(() => ({ id: uuid() }))
     }
-    ref.current.api.applyTransaction({ add: newRows })
+
+    // 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)
+
     setAnchorEl(null)
-  }
+  }, [props.onAddRows, startEditingFirstEditableCell])
 
   const isGridValid = () => {
     let isValid = true
@@ -190,9 +239,7 @@ export const BCGridEditor = ({
                 <FontAwesomeIcon icon={faCaretDown} className="small-icon" />
               )
             }
-            onClick={() =>
-              addMultiRow ? handleAddRowsClick : handleAddRows(1)
-            }
+            onClick={addMultiRow ? handleAddRowsClick : () => handleAddRows(1)}
           >
             Add row
           </BCButton>
@@ -255,5 +302,6 @@ BCGridEditor.propTypes = {
   onAction: PropTypes.func,
   onRowEditingStopped: PropTypes.func,
   onCellValueChanged: PropTypes.func,
-  showAddRowsButton: PropTypes.bool
+  showAddRowsButton: PropTypes.bool,
+  onAddRows: PropTypes.func
 }
diff --git a/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx b/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx
@@ -151,9 +151,8 @@ export const AddEditFinalSupplyEquipments = () => {
           if (fields[0] === 'postalCode') {
             errMsg = t('finalSupplyEquipment:postalCodeError')
           } else {
-            errMsg = `Error updating row: ${
-              fieldLabels.length === 1 ? fieldLabels[0] : ''
-            } ${String(message).toLowerCase()}`
+            errMsg = `Error updating row: ${fieldLabels.length === 1 ? fieldLabels[0] : ''
+              } ${String(message).toLowerCase()}`
           }
         } else {
           errMsg = error.response.data?.detail
@@ -216,7 +215,7 @@ export const AddEditFinalSupplyEquipments = () => {
         modified: true
       }
 
-      params.api.applyTransaction({
+      const transaction = params.api.applyTransaction({
         add: [rowData],
         addIndex: params.node?.rowIndex + 1
       })
@@ -227,6 +226,7 @@ export const AddEditFinalSupplyEquipments = () => {
         message: 'Error updating row: Fuel supply equipment Fields required',
         severity: 'error'
       })
+      return transaction
     }
   }
 
@@ -240,7 +240,7 @@ export const AddEditFinalSupplyEquipments = () => {
   }, [navigate, compliancePeriod, complianceReportId])
 
   const onAddRows = useCallback((numRows) => {
-    return Array(numRows).fill().map(()=>({
+    return Array(numRows).fill().map(() => ({
       id: uuid(),
       complianceReportId,
       supplyFromDate: `${compliancePeriod}-01-01`,