From d70cc19b92c8f94df4a7c2fb4edf2faa98dbb19d Mon Sep 17 00:00:00 2001 From: Kevin Hashimoto Date: Mon, 16 Dec 2024 16:44:28 -0800 Subject: [PATCH] feat: reports to have blank row on load + open first cell --- .../components/Editors/DateEditor.jsx | 16 ++++++- .../AddEditAllocationAgreements.jsx | 11 ++++- .../views/AllocationAgreements/_schema.jsx | 9 ++-- .../AddEditFinalSupplyEquipments.jsx | 22 ++++++++-- .../views/FuelExports/AddEditFuelExports.jsx | 22 ++++++++-- frontend/src/views/FuelExports/_schema.jsx | 7 ++- .../FuelSupplies/AddEditFuelSupplies.jsx | 9 +++- .../AddEditNotionalTransfers.jsx | 16 ++++++- .../src/views/OtherUses/AddEditOtherUses.jsx | 44 +++++++++++++------ 9 files changed, 124 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/BCDataGrid/components/Editors/DateEditor.jsx b/frontend/src/components/BCDataGrid/components/Editors/DateEditor.jsx index 01321d990..d2c5f51e4 100644 --- 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 index f09d3ee0e..4e4a3c722 100644 --- a/frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.jsx +++ b/frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.jsx @@ -80,13 +80,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 index 6e503e3dd..5f1e71c81 100644 --- 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 || @@ -361,7 +365,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 index fb9fcafaa..2244efea4 100644 --- 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 index ebaa03498..9850d04b5 100644 --- a/frontend/src/views/FuelExports/AddEditFuelExports.jsx +++ b/frontend/src/views/FuelExports/AddEditFuelExports.jsx @@ -18,9 +18,10 @@ import { defaultColDef, fuelExportColDefs } from './_schema' 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']) @@ -74,21 +75,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 index f113671d3..58346a607 100644 --- a/frontend/src/views/FuelExports/_schema.jsx +++ b/frontend/src/views/FuelExports/_schema.jsx @@ -44,7 +44,7 @@ const cellErrorStyle = (params, errors) => { return style } -export const fuelExportColDefs = (optionsData, errors) => [ +export const fuelExportColDefs = (optionsData, errors, gridReady) => [ validation, actions({ enableDuplicate: false, @@ -103,7 +103,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 index 7d7c4bd29..1c0a852f4 100644 --- a/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx +++ b/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx @@ -79,10 +79,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 index 2360dfb19..2df027624 100644 --- 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 index bbd553ca3..d78737564 100644 --- a/frontend/src/views/OtherUses/AddEditOtherUses.jsx +++ b/frontend/src/views/OtherUses/AddEditOtherUses.jsx @@ -17,7 +17,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { useLocation, useNavigate, useParams } from 'react-router-dom' import { v4 as uuid } from 'uuid' -import { defaultColDef, otherUsesColDefs, PROVISION_APPROVED_FUEL_CODE} from './_schema' +import { + defaultColDef, + otherUsesColDefs, + PROVISION_APPROVED_FUEL_CODE +} from './_schema' import * as ROUTES from '@/constants/routes/routes.js' export const AddEditOtherUses = () => { @@ -55,31 +59,31 @@ export const AddEditOtherUses = () => { rows.map((row) => ({ ...row, id: row.id || uuid(), - isValid: true, - })); + isValid: true + })) - setRowData(ensureRowIds(otherUses)); + setRowData(ensureRowIds(otherUses)) } - }, [otherUses]); + }, [otherUses]) const findCiOfFuel = useCallback((data, optionsData) => { - let ciOfFuel = 0; + let ciOfFuel = 0 if (data.provisionOfTheAct === PROVISION_APPROVED_FUEL_CODE) { const fuelType = optionsData?.fuelTypes?.find( (obj) => data.fuelType === obj.fuelType - ); + ) const fuelCode = fuelType?.fuelCodes?.find( (item) => item.fuelCode === data.fuelCode - ); - ciOfFuel = fuelCode?.carbonIntensity || 0; + ) + ciOfFuel = fuelCode?.carbonIntensity || 0 } else { const fuelType = optionsData?.fuelTypes?.find( (obj) => data.fuelType === obj.fuelType - ); - ciOfFuel = fuelType?.defaultCarbonIntensity || 0; + ) + ciOfFuel = fuelType?.defaultCarbonIntensity || 0 } - return ciOfFuel; - }, []); + return ciOfFuel + }, []) const onGridReady = (params) => { const ensureRowIds = (rows) => { @@ -98,7 +102,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 +119,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) => {