Wastelines Row Actions (#583)

* add editWasteLine to ManifestContext * Use ManifestContext to pull up current wasteline information for editing * reset ManifestContext editWasteLine value on handler close * Render waste description or dotInfromation.printedDotInforation depending on what's present * New WasteRowActions component that contains the actions a user can take on a waste line, currently delete and edit
USEPA · Aug 31, 2023 · 266e742 · 266e742
1 parent dc7c88d
commit 266e742
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 91 deletions.
diff --git 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<React.SetStateAction<string | undefined>>;
   tsdfStateCode?: string;
   setTsdfStateCode: React.Dispatch<React.SetStateAction<string | undefined>>;
+  editWasteLine?: number;
+  setEditWasteLine: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 
 interface ManifestFormProps {
@@ -44,6 +47,8 @@ export const ManifestContext = createContext<ManifestContextType>({
   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<boolean>(false);
   const toggleWlFormShow = () => setShowWasteLineForm(!showWasteLineForm);
-  const wastes: Array<WasteLine> = manifestMethods.getValues('wastes');
+  const [editWasteLine, setEditWasteLine] = useState<number | undefined>(undefined);
+  const allWastes: Array<WasteLine> = manifestMethods.getValues('wastes');
   const wasteArrayMethods = useFieldArray<Manifest, 'wastes'>({
     control: manifestMethods.control,
     name: 'wastes',
@@ -165,6 +171,8 @@ export function ManifestForm({
           manifestStatus: manifestStatus,
           tsdfStateCode: tsdfStateCode,
           setTsdfStateCode: setTsdfStateCode,
+          editWasteLine: editWasteLine,
+          setEditWasteLine: setEditWasteLine,
         }}
       >
         <FormProvider {...manifestMethods}>
@@ -468,7 +476,11 @@ export function ManifestForm({
               <HtCard.Header title="Waste" />
               <HtCard.Body className="pb-4">
                 {/* Table Showing current Waste Lines included on the manifest */}
-                <WasteLineTable wastes={wastes} />
+                <WasteLineTable
+                  wastes={allWastes}
+                  toggleWLModal={toggleWlFormShow}
+                  wasteArrayMethods={wasteArrayMethods}
+                />
                 {readOnly ? (
                   <></>
                 ) : (
@@ -586,9 +598,9 @@ export function ManifestForm({
             mtnHandler={quickerSignHandler.handler}
             siteType={quickerSignHandler.siteType}
           />
-          <AddWasteLine
-            appendWaste={wasteArrayMethods.append}
-            currentWastes={wastes}
+          <EditWasteModal
+            wasteArrayMethods={wasteArrayMethods}
+            currentWastes={allWastes}
             handleClose={toggleWlFormShow}
             show={showWasteLineForm}
           />

diff --git a/client/src/components/Manifest/WasteLine/AddWasteLine.tsx b/client/src/components/Manifest/WasteLine/AddWasteLine.tsx
diff --git a/client/src/components/Manifest/WasteLine/EditWasteModal.tsx 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<WasteLine>;
+  wasteArrayMethods: UseFieldArrayReturn<Manifest, 'wastes'>;
+}
+
+/**
+ * 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<ManifestContextType>(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 (
+    <HtModal
+      showModal={show ? show : false}
+      handleClose={handleCloseAndReset}
+      dialogClassName="modal-90w"
+    >
+      <HtModal.Header closeButton>
+        <Col>
+          <Row>
+            <HtModal.Title title="Add Waste Line" />
+          </Row>
+          <Row>
+            <i>
+              <small>A waste line should be added for each unique waste stream.</small>
+            </i>
+          </Row>
+        </Col>
+      </HtModal.Header>
+      <HtModal.Body>
+        <WasteLineForm
+          wasteArrayMethods={wasteArrayMethods}
+          lineNumber={lineNumber}
+          waste={waste}
+          handleClose={handleCloseAndReset}
+        />
+      </HtModal.Body>
+    </HtModal>
+  );
+}
diff --git 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(
       <WasteLineForm
-        appendWaste={() => console.log('waste appended')}
+        wasteArrayMethods={{} as any}
+        lineNumber={0}
         handleClose={() => console.log('close action handled')}
       />,
       {}
@@ -21,7 +22,8 @@ describe('WasteLineForm', () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm
-        appendWaste={() => console.log('waste appended')}
+        wasteArrayMethods={{} as any}
+        lineNumber={0}
         handleClose={() => console.log('close action handled')}
       />,
       {}
@@ -35,7 +37,8 @@ describe('WasteLineForm', () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm
-        appendWaste={() => console.log('waste appended')}
+        wasteArrayMethods={{} as any}
+        lineNumber={0}
         handleClose={() => console.log('close action handled')}
       />,
       {}
@@ -52,7 +55,8 @@ describe('WasteLineForm', () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm
-        appendWaste={() => console.log('waste appended')}
+        wasteArrayMethods={{} as any}
+        lineNumber={0}
         handleClose={() => console.log('close action handled')}
       />,
       {}
@@ -75,7 +79,8 @@ describe('WasteLineForm', () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm
-        appendWaste={() => console.log('waste appended')}
+        wasteArrayMethods={{} as any}
+        lineNumber={0}
         handleClose={() => console.log('close action handled')}
       />,
       {}
@@ -92,7 +97,8 @@ describe('WasteLineForm', () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm
-        appendWaste={() => 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
@@ -7,55 +7,64 @@ 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<WasteLine>;
-  appendWaste: UseFieldArrayAppend<Manifest, 'wastes'>;
+  waste?: WasteLine;
+  lineNumber: number;
+  wasteArrayMethods: UseFieldArrayReturn<Manifest, 'wastes'>;
 }
 
-const wasteLineDefaultValues: Partial<WasteLine> = {
-  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<boolean>(true);
-  const [epaWaste, setEpaWaste] = React.useState<boolean>(true);
+export function WasteLineForm({
+  handleClose,
+  wasteArrayMethods,
+  waste,
+  lineNumber,
+}: WasteLineFormProps) {
+  const [dotHazardous, setDotHazardous] = React.useState<boolean>(
+    waste?.dotHazardous ? waste.dotHazardous : true
+  );
+  const [epaWaste, setEpaWaste] = React.useState<boolean>(waste?.epaWaste ? waste.epaWaste : true);
+  // @ts-ignore
+  const wasteLineDefaultValues: Partial<WasteLine> = waste
+    ? waste
+    : {
+        lineNumber: lineNumber,
+        dotHazardous: dotHazardous,
+        epaWaste: epaWaste,
+        quantity: { containerNumber: 1, quantity: 1 },
+      };
   const wasteMethods = useForm<WasteLine>({
     resolver: zodResolver(wasteLineSchema),
     defaultValues: {
       ...wasteLineDefaultValues,
-      dotHazardous: dotHazardous,
-      epaWaste: epaWaste,
-      lineNumber: newLineNumber,
     },
   });
   const {
     register,
     handleSubmit,
     formState: { errors },
     setValue,
-    getValues,
   } = wasteMethods;
 
   /**
    * onSubmit is the callback function for the form submission.
    * @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);
   };
 
   /**