diff --git a/client/src/components/Manifest/ManifestForm.tsx b/client/src/components/Manifest/ManifestForm.tsx index 54aa444bb..2b8c44216 100644 --- a/client/src/components/Manifest/ManifestForm.tsx +++ b/client/src/components/Manifest/ManifestForm.tsx @@ -14,7 +14,8 @@ import { AddHandler, GeneratorForm, Handler } from './Handler'; import { Manifest, manifestSchema, ManifestStatus } from './manifestSchema'; import { QuickerSignData, QuickerSignModal, QuickerSignModalBtn } from './QuickerSign'; import { Transporter, TransporterTable } from './Transporter'; -import { AddWasteLine, WasteLineTable } from './WasteLine'; +import { EditWasteModal, WasteLineTable } from './WasteLine'; +import { number } from 'zod'; const defaultValues: Manifest = { transporters: [], @@ -29,6 +30,8 @@ export interface ManifestContextType { setGeneratorStateCode: React.Dispatch>; tsdfStateCode?: string; setTsdfStateCode: React.Dispatch>; + editWasteLine?: number; + setEditWasteLine: React.Dispatch>; } interface ManifestFormProps { @@ -44,6 +47,8 @@ export const ManifestContext = createContext({ setGeneratorStateCode: () => {}, tsdfStateCode: undefined, setTsdfStateCode: () => {}, + editWasteLine: undefined, + setEditWasteLine: () => {}, }); /** @@ -137,7 +142,8 @@ export function ManifestForm({ // State and methods for the manifest's waste lines const [showWasteLineForm, setShowWasteLineForm] = useState(false); const toggleWlFormShow = () => setShowWasteLineForm(!showWasteLineForm); - const wastes: Array = manifestMethods.getValues('wastes'); + const [editWasteLine, setEditWasteLine] = useState(undefined); + const allWastes: Array = manifestMethods.getValues('wastes'); const wasteArrayMethods = useFieldArray({ control: manifestMethods.control, name: 'wastes', @@ -165,6 +171,8 @@ export function ManifestForm({ manifestStatus: manifestStatus, tsdfStateCode: tsdfStateCode, setTsdfStateCode: setTsdfStateCode, + editWasteLine: editWasteLine, + setEditWasteLine: setEditWasteLine, }} > @@ -468,7 +476,11 @@ export function ManifestForm({ {/* Table Showing current Waste Lines included on the manifest */} - + {readOnly ? ( <> ) : ( @@ -586,9 +598,9 @@ export function ManifestForm({ mtnHandler={quickerSignHandler.handler} siteType={quickerSignHandler.siteType} /> - diff --git a/client/src/components/Manifest/WasteLine/AddWasteLine.tsx b/client/src/components/Manifest/WasteLine/AddWasteLine.tsx deleted file mode 100644 index 5f3298ffe..000000000 --- a/client/src/components/Manifest/WasteLine/AddWasteLine.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { Col, Row } from 'react-bootstrap'; -import { WasteLineForm } from './WasteLineForm'; -import { UseFieldArrayAppend } from 'react-hook-form'; -import { Manifest } from 'components/Manifest/manifestSchema'; -import { WasteLine } from 'components/Manifest/WasteLine/wasteLineSchema'; -import { HtModal } from 'components/Ht'; - -interface Props { - handleClose: () => void; - show: boolean | undefined; - currentWastes?: Array; - appendWaste: UseFieldArrayAppend; -} - -/** - * WasteLine is solely responsible for displaying the WasteLineForm in a - * pleasant to look at modal. - * @constructor - */ -export function AddWasteLine({ show, handleClose, appendWaste, currentWastes }: Props) { - return ( - - - - - - - - - A waste line should be added for each unique waste stream. - - - - - - - - - ); -} diff --git a/client/src/components/Manifest/WasteLine/EditWasteModal.tsx b/client/src/components/Manifest/WasteLine/EditWasteModal.tsx new file mode 100644 index 000000000..e250d004a --- /dev/null +++ b/client/src/components/Manifest/WasteLine/EditWasteModal.tsx @@ -0,0 +1,68 @@ +import React, { useContext } from 'react'; +import { Col, Row } from 'react-bootstrap'; +import { WasteLineForm } from './WasteLineForm'; +import { UseFieldArrayReturn } from 'react-hook-form'; +import { Manifest } from 'components/Manifest/manifestSchema'; +import { WasteLine } from 'components/Manifest/WasteLine/wasteLineSchema'; +import { HtModal } from 'components/Ht'; +import { ManifestContext, ManifestContextType } from 'components/Manifest/ManifestForm'; + +interface Props { + handleClose: () => void; + show: boolean | undefined; + currentWastes: Array; + wasteArrayMethods: UseFieldArrayReturn; +} + +/** + * WasteLine is solely responsible for displaying the WasteLineForm in a + * pleasant to look at modal. + * @constructor + */ +export function EditWasteModal({ show, handleClose, currentWastes, wasteArrayMethods }: Props) { + const { editWasteLine, setEditWasteLine } = useContext(ManifestContext); + let waste: WasteLine | undefined = undefined; + if (editWasteLine !== undefined) { + waste = currentWastes[editWasteLine]; + } + let lineNumber = undefined; + if (editWasteLine !== undefined) { + lineNumber = editWasteLine; + } else { + lineNumber = currentWastes.length; + } + + const handleCloseAndReset = () => { + setEditWasteLine(undefined); + handleClose(); + }; + + return ( + + + + + + + + + A waste line should be added for each unique waste stream. + + + + + + + + + ); +} diff --git a/client/src/components/Manifest/WasteLine/WasteLineForm.spec.tsx b/client/src/components/Manifest/WasteLine/WasteLineForm.spec.tsx index 544c35772..9db9e307b 100644 --- a/client/src/components/Manifest/WasteLine/WasteLineForm.spec.tsx +++ b/client/src/components/Manifest/WasteLine/WasteLineForm.spec.tsx @@ -9,7 +9,8 @@ describe('WasteLineForm', () => { test('renders', () => { renderWithProviders( console.log('waste appended')} + wasteArrayMethods={{} as any} + lineNumber={0} handleClose={() => console.log('close action handled')} />, {} @@ -21,7 +22,8 @@ describe('WasteLineForm', () => { // Arrange renderWithProviders( console.log('waste appended')} + wasteArrayMethods={{} as any} + lineNumber={0} handleClose={() => console.log('close action handled')} />, {} @@ -35,7 +37,8 @@ describe('WasteLineForm', () => { // Arrange renderWithProviders( console.log('waste appended')} + wasteArrayMethods={{} as any} + lineNumber={0} handleClose={() => console.log('close action handled')} />, {} @@ -52,7 +55,8 @@ describe('WasteLineForm', () => { // Arrange renderWithProviders( console.log('waste appended')} + wasteArrayMethods={{} as any} + lineNumber={0} handleClose={() => console.log('close action handled')} />, {} @@ -75,7 +79,8 @@ describe('WasteLineForm', () => { // Arrange renderWithProviders( console.log('waste appended')} + wasteArrayMethods={{} as any} + lineNumber={0} handleClose={() => console.log('close action handled')} />, {} @@ -92,7 +97,8 @@ describe('WasteLineForm', () => { // Arrange renderWithProviders( console.log('waste appended')} + wasteArrayMethods={{} as any} + lineNumber={0} handleClose={() => console.log('close action handled')} />, {} diff --git a/client/src/components/Manifest/WasteLine/WasteLineForm.tsx b/client/src/components/Manifest/WasteLine/WasteLineForm.tsx index 6aa6a60ae..d6c9b696c 100644 --- a/client/src/components/Manifest/WasteLine/WasteLineForm.tsx +++ b/client/src/components/Manifest/WasteLine/WasteLineForm.tsx @@ -7,37 +7,44 @@ import { HazardousWasteForm } from 'components/Manifest/WasteLine/HazardousWaste import { WasteLine, wasteLineSchema } from 'components/Manifest/WasteLine/wasteLineSchema'; import React from 'react'; import { Button, Col, Container, Form, Row } from 'react-bootstrap'; -import { Controller, FormProvider, UseFieldArrayAppend, useForm } from 'react-hook-form'; +import { Controller, FormProvider, UseFieldArrayReturn, useForm } from 'react-hook-form'; import { QuantityForm } from './QuantityForm'; interface WasteLineFormProps { handleClose: () => void; - currentWastes?: Array; - appendWaste: UseFieldArrayAppend; + waste?: WasteLine; + lineNumber: number; + wasteArrayMethods: UseFieldArrayReturn; } -const wasteLineDefaultValues: Partial = { - dotHazardous: true, - // @ts-ignore - quantity: { containerNumber: 1, quantity: 1 }, -}; - /** * WasteLineForm is the top level component/form for adding wastes to * the uniform hazardous waste manifest. * @constructor */ -export function WasteLineForm({ handleClose, appendWaste, currentWastes }: WasteLineFormProps) { - const newLineNumber = currentWastes ? currentWastes.length + 1 : 1; - const [dotHazardous, setDotHazardous] = React.useState(true); - const [epaWaste, setEpaWaste] = React.useState(true); +export function WasteLineForm({ + handleClose, + wasteArrayMethods, + waste, + lineNumber, +}: WasteLineFormProps) { + const [dotHazardous, setDotHazardous] = React.useState( + waste?.dotHazardous ? waste.dotHazardous : true + ); + const [epaWaste, setEpaWaste] = React.useState(waste?.epaWaste ? waste.epaWaste : true); + // @ts-ignore + const wasteLineDefaultValues: Partial = waste + ? waste + : { + lineNumber: lineNumber, + dotHazardous: dotHazardous, + epaWaste: epaWaste, + quantity: { containerNumber: 1, quantity: 1 }, + }; const wasteMethods = useForm({ resolver: zodResolver(wasteLineSchema), defaultValues: { ...wasteLineDefaultValues, - dotHazardous: dotHazardous, - epaWaste: epaWaste, - lineNumber: newLineNumber, }, }); const { @@ -45,7 +52,6 @@ export function WasteLineForm({ handleClose, appendWaste, currentWastes }: Waste handleSubmit, formState: { errors }, setValue, - getValues, } = wasteMethods; /** @@ -53,9 +59,12 @@ export function WasteLineForm({ handleClose, appendWaste, currentWastes }: Waste * @param wasteLine the data submitted from the form */ const onSubmit = (wasteLine: WasteLine) => { - appendWaste(wasteLine); // append the new waste line to the manifest + if (waste) { + wasteArrayMethods.update(lineNumber, wasteLine); // append the new waste line to the manifest + } else { + wasteArrayMethods.append(wasteLine); // append the new waste line to the manifest + } handleClose(); - console.log('dotInformation', wasteLine.dotInformation); }; /** diff --git a/client/src/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx b/client/src/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx index 26f258bfa..3b7c0868a 100644 --- a/client/src/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx +++ b/client/src/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx @@ -1,39 +1,41 @@ import { faTools } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import React from 'react'; -import { Table } from 'react-bootstrap'; +import React, { useContext } from 'react'; +import { Button, Table } from 'react-bootstrap'; import { WasteLine } from 'components/Manifest/WasteLine/wasteLineSchema'; +import { ManifestContext, ManifestContextType } from 'components/Manifest/ManifestForm'; +import { WasteRowActions } from 'components/Manifest/WasteLine/WasteLineTable/WasteRowActions'; +import { UseFieldArrayReturn } from 'react-hook-form'; +import { Manifest } from 'components/Manifest'; interface WasteLineTableProps { wastes: Array; + toggleWLModal: () => void; + wasteArrayMethods: UseFieldArrayReturn; } -export function WasteLineTable({ wastes }: WasteLineTableProps) { +export function WasteLineTable({ wastes, toggleWLModal, wasteArrayMethods }: WasteLineTableProps) { + const { editWasteLine, setEditWasteLine } = useContext(ManifestContext); if (!wastes || wastes.length < 1) { return <>; } - if (wastes) { - for (let i = 0; i < wastes?.length; i++) { - wastes[i].lineNumber = i + 1; - } - } return ( - + - + {wastes.map((wasteLine, index) => { return ( - + @@ -62,7 +64,12 @@ export function WasteLineTable({ wastes }: WasteLineTableProps) { ); diff --git a/client/src/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx b/client/src/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx new file mode 100644 index 000000000..2f283f1e9 --- /dev/null +++ b/client/src/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Button } from 'react-bootstrap'; +import { UseFieldArrayReturn } from 'react-hook-form'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faTimes, faTools } from '@fortawesome/free-solid-svg-icons'; +import { Manifest } from 'components/Manifest'; + +interface WasteRowActionProps { + index: number; + wasteArrayMethods: UseFieldArrayReturn; + toggleWLModal: () => void; + setEditWasteLine: (index: number) => void; +} + +/** + * WasteRowActions - actions for controlling waste lines on a manifest + * @constructor + */ +function WasteRowActions({ + index, + wasteArrayMethods, + setEditWasteLine, + toggleWLModal, +}: WasteRowActionProps) { + return ( +
+ + +
+ ); +} + +export { WasteRowActions }; diff --git a/client/src/components/Manifest/WasteLine/index.ts b/client/src/components/Manifest/WasteLine/index.ts index 7aec8061e..773161257 100644 --- a/client/src/components/Manifest/WasteLine/index.ts +++ b/client/src/components/Manifest/WasteLine/index.ts @@ -1,6 +1,6 @@ -import { AddWasteLine } from './AddWasteLine'; +import { EditWasteModal } from 'components/Manifest/WasteLine/EditWasteModal'; import { WasteLineTable } from './WasteLineTable'; import { WasteLine } from 'components/Manifest/WasteLine/wasteLineSchema'; -export { WasteLineTable, AddWasteLine }; +export { WasteLineTable, EditWasteModal }; export type { WasteLine };
#U.S. DOT DescriptionDescription Containers Type CodesEdit
{wasteLine.lineNumber}{wasteLine.lineNumber + 1} - {wasteLine.wasteDescription} + {wasteLine.wasteDescription ?? wasteLine.dotInformation?.printedDotInformation} {wasteLine.quantity?.containerNumber} {String(wasteLine.quantity?.containerType.code)} - +