From ec5620a7ed892d50b49f499ea315a815cea115cf Mon Sep 17 00:00:00 2001 From: Kevin Hashimoto Date: Thu, 12 Dec 2024 14:59:08 -0800 Subject: [PATCH] feat: clickable summaries --- .../AllocationAgreementSummary.jsx | 17 +++++++++--- .../FinalSupplyEquipmentSummary.jsx | 26 ++++++++++++++----- .../views/FuelExports/FuelExportSummary.jsx | 16 ++++++++++-- .../views/FuelSupplies/FuelSupplySummary.jsx | 17 +++++++++--- .../NotionalTransferSummary.jsx | 18 +++++++++++-- .../src/views/OtherUses/OtherUsesSummary.jsx | 23 +++++++++++++--- 6 files changed, 97 insertions(+), 20 deletions(-) diff --git a/frontend/src/views/AllocationAgreements/AllocationAgreementSummary.jsx b/frontend/src/views/AllocationAgreements/AllocationAgreementSummary.jsx index 7e76706cf..30b1a9f02 100644 --- a/frontend/src/views/AllocationAgreements/AllocationAgreementSummary.jsx +++ b/frontend/src/views/AllocationAgreements/AllocationAgreementSummary.jsx @@ -1,23 +1,24 @@ import BCAlert from '@/components/BCAlert' import BCBox from '@/components/BCBox' import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer' -import { apiRoutes } from '@/constants/routes' +import { apiRoutes, ROUTES } from '@/constants/routes' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters' import { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { useLocation, useParams } from 'react-router-dom' +import { useLocation, useParams, useNavigate } from 'react-router-dom' import { v4 as uuid } from 'uuid' export const AllocationAgreementSummary = ({ data }) => { const [alertMessage, setAlertMessage] = useState('') const [alertSeverity, setAlertSeverity] = useState('info') const [gridKey, setGridKey] = useState(`allocation-agreements-grid`) - const { complianceReportId } = useParams() + const { complianceReportId, compliancePeriod } = useParams() const gridRef = useRef() const { t } = useTranslation(['common', 'allocationAgreement']) const location = useLocation() + const navigate = useNavigate() useEffect(() => { if (location.state?.message) { @@ -135,6 +136,15 @@ export const AllocationAgreementSummary = ({ data }) => { setGridKey(`allocation-agreements-grid-${uuid()}`) } + const handleRowClicked = (params) => { + navigate( + ROUTES.REPORTS_ADD_ALLOCATION_AGREEMENTS.replace( + ':compliancePeriod', + compliancePeriod + ).replace(':complianceReportId', complianceReportId) + ) + } + return (
@@ -159,6 +169,7 @@ export const AllocationAgreementSummary = ({ data }) => { enableCopyButton={false} defaultColDef={defaultColDef} suppressPagination={data.allocationAgreements.length <= 10} + handleRowClicked={handleRowClicked} /> diff --git a/frontend/src/views/FinalSupplyEquipments/FinalSupplyEquipmentSummary.jsx b/frontend/src/views/FinalSupplyEquipments/FinalSupplyEquipmentSummary.jsx index 1a2f7851e..4753dc1fc 100644 --- a/frontend/src/views/FinalSupplyEquipments/FinalSupplyEquipmentSummary.jsx +++ b/frontend/src/views/FinalSupplyEquipments/FinalSupplyEquipmentSummary.jsx @@ -1,23 +1,24 @@ import BCAlert from '@/components/BCAlert' import BCBox from '@/components/BCBox' import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer' -import { apiRoutes } from '@/constants/routes' +import { apiRoutes, ROUTES } from '@/constants/routes' import { CommonArrayRenderer } from '@/utils/grid/cellRenderers' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { useLocation, useParams } from 'react-router-dom' +import { useLocation, useParams, useNavigate } from 'react-router-dom' import { v4 as uuid } from 'uuid' export const FinalSupplyEquipmentSummary = ({ data }) => { const [alertMessage, setAlertMessage] = useState('') const [alertSeverity, setAlertSeverity] = useState('info') const [gridKey, setGridKey] = useState(`final-supply-equipments-grid`) - const { complianceReportId } = useParams() + const { complianceReportId, compliancePeriod } = useParams() const gridRef = useRef() const { t } = useTranslation(['common', 'finalSupplyEquipments']) const location = useLocation() + const navigate = useNavigate() useEffect(() => { if (location.state?.message) { @@ -67,9 +68,12 @@ export const FinalSupplyEquipmentSummary = ({ data }) => { field: 'supplyToDate' }, { - headerName: t('finalSupplyEquipment:finalSupplyEquipmentColLabels.kwhUsage'), + headerName: t( + 'finalSupplyEquipment:finalSupplyEquipmentColLabels.kwhUsage' + ), field: 'kwhUsage', - valueFormatter: (params) => params.value ? params.value.toFixed(2) : '0.00' + valueFormatter: (params) => + params.value ? params.value.toFixed(2) : '0.00' }, { headerName: t( @@ -106,7 +110,7 @@ export const FinalSupplyEquipmentSummary = ({ data }) => { headerName: t( 'finalSupplyEquipment:finalSupplyEquipmentColLabels.ports' ), - field: 'ports', + field: 'ports' }, { headerName: t( @@ -183,6 +187,15 @@ export const FinalSupplyEquipmentSummary = ({ data }) => { setGridKey(`final-supply-equipments-grid-${uuid()}`) } + const handleRowClicked = (params) => { + navigate( + ROUTES.REPORTS_ADD_FINAL_SUPPLY_EQUIPMENTS.replace( + ':compliancePeriod', + compliancePeriod + ).replace(':complianceReportId', complianceReportId) + ) + } + return (
@@ -207,6 +220,7 @@ export const FinalSupplyEquipmentSummary = ({ data }) => { enableCopyButton={false} defaultColDef={defaultColDef} suppressPagination={data.finalSupplyEquipments.length <= 10} + handleRowClicked={handleRowClicked} /> diff --git a/frontend/src/views/FuelExports/FuelExportSummary.jsx b/frontend/src/views/FuelExports/FuelExportSummary.jsx index 03f2f06d5..4cab9c377 100644 --- a/frontend/src/views/FuelExports/FuelExportSummary.jsx +++ b/frontend/src/views/FuelExports/FuelExportSummary.jsx @@ -6,17 +6,19 @@ import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { useLocation, useParams } from 'react-router-dom' +import { useLocation, useParams, useNavigate } from 'react-router-dom' import i18n from '@/i18n' +import { ROUTES } from '@/constants/routes' export const FuelExportSummary = ({ data }) => { const [alertMessage, setAlertMessage] = useState('') const [alertSeverity, setAlertSeverity] = useState('info') - const { complianceReportId } = useParams() + const { complianceReportId, compliancePeriod } = useParams() const gridRef = useRef() const { t } = useTranslation(['common', 'fuelExport']) const location = useLocation() + const navigate = useNavigate() useEffect(() => { if (location.state?.message) { @@ -122,6 +124,15 @@ export const FuelExportSummary = ({ data }) => { return params.data.fuelExportId.toString() } + const handleRowClicked = (params) => { + navigate( + ROUTES.REPORTS_ADD_FUEL_EXPORTS.replace( + ':compliancePeriod', + compliancePeriod + ).replace(':complianceReportId', complianceReportId) + ) + } + return (
@@ -144,6 +155,7 @@ export const FuelExportSummary = ({ data }) => { enableCopyButton={false} defaultColDef={defaultColDef} suppressPagination={data.fuelExports.length <= 10} + onRowClicked={handleRowClicked} /> diff --git a/frontend/src/views/FuelSupplies/FuelSupplySummary.jsx b/frontend/src/views/FuelSupplies/FuelSupplySummary.jsx index a8ea2298c..2e913d8dd 100644 --- a/frontend/src/views/FuelSupplies/FuelSupplySummary.jsx +++ b/frontend/src/views/FuelSupplies/FuelSupplySummary.jsx @@ -1,12 +1,12 @@ import BCAlert from '@/components/BCAlert' import BCBox from '@/components/BCBox' import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer' -import { apiRoutes } from '@/constants/routes' +import { apiRoutes, ROUTES } from '@/constants/routes' import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { useLocation, useParams } from 'react-router-dom' +import { useLocation, useNavigate, useParams } from 'react-router-dom' import { v4 as uuid } from 'uuid' import i18n from '@/i18n' import { StandardCellWarningAndErrors } from '@/utils/grid/errorRenderers' @@ -15,11 +15,12 @@ export const FuelSupplySummary = ({ data }) => { const [alertMessage, setAlertMessage] = useState('') const [alertSeverity, setAlertSeverity] = useState('info') const [gridKey, setGridKey] = useState(`fuel-supplies-grid`) - const { complianceReportId } = useParams() + const { complianceReportId, compliancePeriod } = useParams() const gridRef = useRef() const { t } = useTranslation(['common', 'fuelSupply']) const location = useLocation() + const navigate = useNavigate() useEffect(() => { if (location.state?.message) { @@ -125,6 +126,15 @@ export const FuelSupplySummary = ({ data }) => { setGridKey(`fuel-supplies-grid-${uuid()}`) } + const handleRowClicked = (params) => { + navigate( + ROUTES.REPORTS_ADD_SUPPLY_OF_FUEL.replace( + ':compliancePeriod', + compliancePeriod + ).replace(':complianceReportId', complianceReportId) + ) + } + return (
@@ -149,6 +159,7 @@ export const FuelSupplySummary = ({ data }) => { enableCopyButton={false} defaultColDef={defaultColDef} suppressPagination={data.fuelSupplies.length <= 10} + handleRowClicked={handleRowClicked} /> diff --git a/frontend/src/views/NotionalTransfers/NotionalTransferSummary.jsx b/frontend/src/views/NotionalTransfers/NotionalTransferSummary.jsx index 1cc1c5017..e93d2502f 100644 --- a/frontend/src/views/NotionalTransfers/NotionalTransferSummary.jsx +++ b/frontend/src/views/NotionalTransfers/NotionalTransferSummary.jsx @@ -5,16 +5,18 @@ import { useGetNotionalTransfers } from '@/hooks/useNotionalTransfer' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useEffect, useState, useMemo } from 'react' import { useTranslation } from 'react-i18next' -import { useLocation, useParams } from 'react-router-dom' +import { useLocation, useParams, useNavigate } from 'react-router-dom' import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters' +import { ROUTES } from '@/constants/routes' export const NotionalTransferSummary = ({ data }) => { const [alertMessage, setAlertMessage] = useState('') const [alertSeverity, setAlertSeverity] = useState('info') - const { complianceReportId } = useParams() + const { complianceReportId, compliancePeriod } = useParams() const { t } = useTranslation(['common', 'notionalTransfers']) const location = useLocation() + const navigate = useNavigate() useEffect(() => { if (location.state?.message) { @@ -32,6 +34,16 @@ export const NotionalTransferSummary = ({ data }) => { [] ) + const handleRowClicked = (params) => { + console.log('Row clicked', params) + navigate( + ROUTES.REPORTS_ADD_NOTIONAL_TRANSFERS.replace( + ':compliancePeriod', + compliancePeriod + ).replace(':complianceReportId', complianceReportId) + ) + } + const columns = [ { headerName: t('notionalTransfer:notionalTransferColLabels.legalName'), @@ -90,6 +102,8 @@ export const NotionalTransferSummary = ({ data }) => { }} enableCellTextSelection ensureDomOrder + handleRo + onRowClicked={handleRowClicked} /> diff --git a/frontend/src/views/OtherUses/OtherUsesSummary.jsx b/frontend/src/views/OtherUses/OtherUsesSummary.jsx index bd5f2b499..7c8020739 100644 --- a/frontend/src/views/OtherUses/OtherUsesSummary.jsx +++ b/frontend/src/views/OtherUses/OtherUsesSummary.jsx @@ -4,18 +4,23 @@ import { BCGridViewer } from '@/components/BCDataGrid/BCGridViewer' import { useGetOtherUses } from '@/hooks/useOtherUses' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useEffect, useState } from 'react' -import { useLocation, useParams } from 'react-router-dom' -import { formatNumberWithCommas as valueFormatter, decimalFormatter } from '@/utils/formatters' +import { useLocation, useParams, useNavigate } from 'react-router-dom' +import { + formatNumberWithCommas as valueFormatter, + decimalFormatter +} from '@/utils/formatters' import { useTranslation } from 'react-i18next' +import { ROUTES } from '@/constants/routes' export const OtherUsesSummary = ({ data }) => { const [alertMessage, setAlertMessage] = useState('') const [alertSeverity, setAlertSeverity] = useState('info') const { t } = useTranslation(['common', 'otherUses']) - const { complianceReportId } = useParams() + const { complianceReportId, compliancePeriod } = useParams() const location = useLocation() + const navigate = useNavigate() useEffect(() => { if (location.state?.message) { @@ -81,6 +86,15 @@ export const OtherUsesSummary = ({ data }) => { const getRowId = (params) => params.data.otherUsesId + const handleRowClicked = (params) => { + navigate( + ROUTES.REPORTS_ADD_OTHER_USE_FUELS.replace( + ':compliancePeriod', + compliancePeriod + ).replace(':complianceReportId', complianceReportId) + ) + } + return (
@@ -106,10 +120,11 @@ export const OtherUsesSummary = ({ data }) => { }} enableCellTextSelection ensureDomOrder + onRowClicked={handleRowClicked} /> ) } -OtherUsesSummary.displayName = 'OtherUsesSummary' \ No newline at end of file +OtherUsesSummary.displayName = 'OtherUsesSummary'