Merge pull request #1470 from bcgov/feat/kevin-1397

feat: reports to have blank row on load + open first cell
bcgov · Dec 17, 2024 · 58071b2 · 58071b2
2 parents bef9b1d + 1d05045
commit 58071b2
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 19 deletions.
diff --git a/frontend/src/components/BCDataGrid/components/Editors/DateEditor.jsx b/frontend/src/components/BCDataGrid/components/Editors/DateEditor.jsx
@@ -2,11 +2,23 @@ import { DatePicker } from '@mui/x-date-pickers'
 import { format, parseISO } from 'date-fns'
 import { useEffect, useRef, useState } from 'react'
 
-export const DateEditor = ({ value, onValueChange, minDate, maxDate }) => {
+export const DateEditor = ({
+  value,
+  onValueChange,
+  minDate,
+  maxDate,
+  rowIndex,
+  api,
+  autoOpenLastRow
+}) => {
   const [selectedDate, setSelectedDate] = useState(
     value ? parseISO(value) : null
   )
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(() => {
+    if (!autoOpenLastRow) return false
+    const lastRowIndex = api.getLastDisplayedRowIndex()
+    return rowIndex === lastRowIndex
+  })
   const containerRef = useRef(null)
 
   useEffect(() => {

diff --git a/frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.jsx b/frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.jsx
@@ -79,13 +79,22 @@ export const AddEditAllocationAgreements = () => {
           ...item,
           id: item.id || uuid() // Ensure every item has a unique ID
         }))
-        setRowData(updatedRowData)
+        setRowData([...updatedRowData, { id: uuid() }])
       } else {
         // If allocationAgreements is not available or empty, initialize with a single row
         setRowData([{ id: uuid() }])
       }
 
       params.api.sizeColumnsToFit()
+
+      setTimeout(() => {
+        const lastRowIndex = params.api.getLastDisplayedRowIndex()
+        params.api.setFocusedCell(lastRowIndex, 'allocationTransactionType')
+        params.api.startEditingCell({
+          rowIndex: lastRowIndex,
+          colKey: 'allocationTransactionType'
+        })
+      }, 100)
     },
     [data]
   )

diff --git a/frontend/src/views/AllocationAgreements/_schema.jsx b/frontend/src/views/AllocationAgreements/_schema.jsx
@@ -57,9 +57,13 @@ export const allocationAgreementColDefs = (optionsData, errors) => [
     headerName: i18n.t(
       'allocationAgreement:allocationAgreementColLabels.transaction'
     ),
-    cellEditor: 'agSelectCellEditor',
+    cellEditor: AutocompleteCellEditor,
     cellEditorParams: {
-      values: ['Allocated from', 'Allocated to']
+      options: ['Allocated from', 'Allocated to'],
+      multiple: false,
+      disableCloseOnSelect: false,
+      freeSolo: false,
+      openOnFocus: true
     },
     cellRenderer: (params) =>
       params.value ||
@@ -431,7 +435,6 @@ export const allocationAgreementColDefs = (optionsData, errors) => [
     headerName: i18n.t(
       'allocationAgreement:allocationAgreementColLabels.quantity'
     ),
-    editor: NumberEditor,
     valueFormatter,
     cellEditor: NumberEditor,
     cellEditorParams: {

diff --git a/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx b/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx
@@ -75,18 +75,32 @@ export const AddEditFinalSupplyEquipments = () => {
           }
         ])
       } else {
-        setRowData(
-          data.finalSupplyEquipments.map((item) => ({
+        setRowData([
+          ...data.finalSupplyEquipments.map((item) => ({
             ...item,
             levelOfEquipment: item.levelOfEquipment.name,
             fuelMeasurementType: item.fuelMeasurementType.type,
             intendedUses: item.intendedUseTypes.map((i) => i.type),
             intendedUsers: item.intendedUserTypes.map((i) => i.typeName),
             id: uuid()
-          }))
-        )
+          })),
+          {
+            id: uuid(),
+            complianceReportId,
+            supplyFromDate: `${compliancePeriod}-01-01`,
+            supplyToDate: `${compliancePeriod}-12-31`
+          }
+        ])
       }
       params.api.sizeColumnsToFit()
+
+      setTimeout(() => {
+        const lastRowIndex = params.api.getLastDisplayedRowIndex()
+        params.api.startEditingCell({
+          rowIndex: lastRowIndex,
+          colKey: 'organizationName'
+        })
+      }, 100)
     },
     [compliancePeriod, complianceReportId, data]
   )

diff --git a/frontend/src/views/FuelExports/AddEditFuelExports.jsx b/frontend/src/views/FuelExports/AddEditFuelExports.jsx
@@ -22,9 +22,10 @@ import {
 export const AddEditFuelExports = () => {
   const [rowData, setRowData] = useState([])
   const gridRef = useRef(null)
-  const [gridApi, setGridApi] = useState()
+  const [, setGridApi] = useState()
   const [errors, setErrors] = useState({})
   const [columnDefs, setColumnDefs] = useState([])
+  const [gridReady, setGridReady] = useState(false)
   const alertRef = useRef()
   const location = useLocation()
   const { t } = useTranslation(['common', 'fuelExport'])
@@ -78,21 +79,34 @@ export const AddEditFuelExports = () => {
           endUse: item.endUse?.type || 'Any',
           id: uuid()
         }))
-        setRowData(updatedRowData)
+        setRowData([...updatedRowData, { id: uuid(), compliancePeriod }])
       } else {
         setRowData([{ id: uuid(), compliancePeriod }])
       }
       params.api.sizeColumnsToFit()
+
+      setTimeout(() => {
+        const lastRowIndex = params.api.getLastDisplayedRowIndex()
+        params.api.startEditingCell({
+          rowIndex: lastRowIndex,
+          colKey: 'exportDate'
+        })
+        setGridReady(true)
+      }, 500)
     },
     [compliancePeriod, data]
   )
 
   useEffect(() => {
     if (optionsData?.fuelTypes?.length > 0) {
-      const updatedColumnDefs = fuelExportColDefs(optionsData, errors)
+      const updatedColumnDefs = fuelExportColDefs(
+        optionsData,
+        errors,
+        gridReady
+      )
       setColumnDefs(updatedColumnDefs)
     }
-  }, [errors, optionsData])
+  }, [errors, gridReady, optionsData])
 
   useEffect(() => {
     if (!fuelExportsLoading && !isArrayEmpty(data)) {

diff --git a/frontend/src/views/FuelExports/_schema.jsx b/frontend/src/views/FuelExports/_schema.jsx
@@ -46,7 +46,7 @@ const cellErrorStyle = (params, errors) => {
   return style
 }
 
-export const fuelExportColDefs = (optionsData, errors) => [
+export const fuelExportColDefs = (optionsData, errors, gridReady) => [
   validation,
   actions({
     enableDuplicate: false,
@@ -105,7 +105,10 @@ export const fuelExportColDefs = (optionsData, errors) => [
     ),
     suppressKeyboardEvent,
     cellEditor: DateEditor,
-    cellEditorPopup: true
+    cellEditorPopup: true,
+    cellEditorParams: {
+      autoOpenLastRow: !gridReady
+    }
   },
   {
     field: 'fuelType',

diff --git a/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx b/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx
@@ -83,10 +83,17 @@ export const AddEditFuelSupplies = () => {
           endUse: item.endUse?.type || 'Any',
           id: uuid()
         }))
-        setRowData(updatedRowData)
+        setRowData([...updatedRowData, { id: uuid() }])
       } else {
         setRowData([{ id: uuid() }])
       }
+      setTimeout(() => {
+        const lastRowIndex = params.api.getLastDisplayedRowIndex()
+        params.api.startEditingCell({
+          rowIndex: lastRowIndex,
+          colKey: 'fuelType'
+        })
+      }, 100)
     },
     [data, complianceReportId, compliancePeriod]
   )

diff --git a/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx b/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx
@@ -64,7 +64,13 @@ export const AddEditNotionalTransfers = () => {
 
     if (notionalTransfers && notionalTransfers.length > 0) {
       try {
-        setRowData(ensureRowIds(notionalTransfers))
+        setRowData([
+          ...ensureRowIds(notionalTransfers),
+          {
+            id: uuid(),
+            complianceReportId
+          }
+        ])
       } catch (error) {
         alertRef.triggerAlert({
           message: t('notionalTransfer:LoadFailMsg'),
@@ -78,6 +84,14 @@ export const AddEditNotionalTransfers = () => {
     }
 
     params.api.sizeColumnsToFit()
+
+    setTimeout(() => {
+      const lastRowIndex = params.api.getLastDisplayedRowIndex()
+      params.api.startEditingCell({
+        rowIndex: lastRowIndex,
+        colKey: 'legalName'
+      })
+    }, 100)
   }
 
   const onCellEditingStopped = useCallback(

diff --git a/frontend/src/views/OtherUses/AddEditOtherUses.jsx b/frontend/src/views/OtherUses/AddEditOtherUses.jsx
@@ -98,7 +98,10 @@ export const AddEditOtherUses = () => {
 
     if (otherUses && otherUses.length > 0) {
       try {
-        setRowData(ensureRowIds(otherUses))
+        setRowData([
+          ...ensureRowIds(otherUses),
+          { id: uuid(), complianceReportId }
+        ])
       } catch (error) {
         alertRef.triggerAlert({
           message: t('otherUses:otherUsesLoadFailMsg'),
@@ -112,6 +115,15 @@ export const AddEditOtherUses = () => {
     }
 
     params.api.sizeColumnsToFit()
+
+    setTimeout(() => {
+      const lastRowIndex = params.api.getLastDisplayedRowIndex()
+
+      params.api.startEditingCell({
+        rowIndex: lastRowIndex,
+        colKey: 'fuelType'
+      })
+    }, 100)
   }
 
   const onAction = async (action, params) => {