New WasteRowActions component that contains the actions a user can ta…

…ke on a waste line, currently delete and edit
USEPA · Aug 31, 2023 · a2ef0b8 · a2ef0b8
1 parent a02cd19
commit a2ef0b8
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 19 deletions.
diff --git a/client/src/components/Manifest/ManifestForm.tsx b/client/src/components/Manifest/ManifestForm.tsx
@@ -476,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={allWastes} toggleWLModal={toggleWlFormShow} />
+                <WasteLineTable
+                  wastes={allWastes}
+                  toggleWLModal={toggleWlFormShow}
+                  wasteArrayMethods={wasteArrayMethods}
+                />
                 {readOnly ? (
                   <></>
                 ) : (

diff --git a/client/src/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx b/client/src/components/Manifest/WasteLine/WasteLineTable/WasteLineTable.tsx
@@ -4,25 +4,21 @@ 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<WasteLine>;
   toggleWLModal: () => void;
+  wasteArrayMethods: UseFieldArrayReturn<Manifest, 'wastes'>;
 }
 
-export function WasteLineTable({ wastes, toggleWLModal }: WasteLineTableProps) {
+export function WasteLineTable({ wastes, toggleWLModal, wasteArrayMethods }: WasteLineTableProps) {
   const { editWasteLine, setEditWasteLine } = useContext<ManifestContextType>(ManifestContext);
   if (!wastes || wastes.length < 1) {
     return <></>;
   }
-  // if (wastes) {
-  //   for (let i = 0; i < wastes?.length; i++) {
-  //     console.log('waste', wastes[i]);
-  //     wastes[i].lineNumber = i + 1;
-  //   }
-  // }
-  console.log('waste line desc', wastes[0].wasteDescription);
-  console.log('waste line dot', wastes[0].dotInformation?.printedDotInformation);
   return (
     <Table striped>
       <thead>
@@ -39,7 +35,7 @@ export function WasteLineTable({ wastes, toggleWLModal }: WasteLineTableProps) {
         {wastes.map((wasteLine, index) => {
           return (
             <tr key={index}>
-              <td>{wasteLine.lineNumber}</td>
+              <td>{wasteLine.lineNumber + 1}</td>
               <td
                 style={{
                   maxWidth: '200px',
@@ -68,14 +64,12 @@ export function WasteLineTable({ wastes, toggleWLModal }: WasteLineTableProps) {
                 </small>
               </td>
               <td className="text-center">
-                <Button
-                  onClick={() => {
-                    setEditWasteLine(index);
-                    toggleWLModal();
-                  }}
-                >
-                  <FontAwesomeIcon icon={faTools} className="text-info" />
-                </Button>
+                <WasteRowActions
+                  index={index}
+                  wasteArrayMethods={wasteArrayMethods}
+                  toggleWLModal={toggleWLModal}
+                  setEditWasteLine={setEditWasteLine}
+                />
               </td>
             </tr>
           );

diff --git a/client/src/components/Manifest/WasteLine/WasteLineTable/WasteRowActions.tsx 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<Manifest, 'wastes'>;
+  toggleWLModal: () => void;
+  setEditWasteLine: (index: number) => void;
+}
+
+/**
+ * WasteRowActions - actions for controlling waste lines on a manifest
+ * @constructor
+ */
+function WasteRowActions({
+  index,
+  wasteArrayMethods,
+  setEditWasteLine,
+  toggleWLModal,
+}: WasteRowActionProps) {
+  return (
+    <div className="d-flex justify-content-between mx-0">
+      <Button
+        title={`remove-waste-${index}-button`}
+        variant="danger"
+        onClick={() => {
+          wasteArrayMethods.remove(index);
+        }}
+      >
+        <FontAwesomeIcon icon={faTimes} />
+      </Button>
+      <Button
+        onClick={() => {
+          setEditWasteLine(index);
+          toggleWLModal();
+        }}
+      >
+        <FontAwesomeIcon icon={faTools} className="text-light" />
+      </Button>
+    </div>
+  );
+}
+
+export { WasteRowActions };