customize transporter information accordian button and rename title o…

…f transporter row action buttons to better reflect behavior and clean up

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haztrak",
-  "version": "0.7.0",
+  "version": "0.6.2",
   "private": true,
   "scripts": {
     "start": "vite",

client/src/App.scss

@@ -88,6 +88,10 @@ $info: #009999;
   transform: rotate(-90deg);
 }
 
+.rotate-90 {
+  transform: rotate(90deg);
+}
+
 .app-container {
   min-height: 350px;
 }

client/src/components/Manifest/Transporter/TransporterTable/TransporterRowActions.tsx → client/src/components/Manifest/Transporter/TransporterRowActions.tsx

@@ -79,7 +79,7 @@ function TransporterRowActions({
     <>
       <Dropdown>
         <Dropdown.Toggle
-          title={`transporter action ${index}`}
+          title={`transporter ${index + 1} actions`}
           className="bg-transparent border-0 text-dark no-caret justify-content-end"
         >
           <FontAwesomeIcon icon={faEllipsisVertical} className="pe-2 shadow-none" />

client/src/components/Manifest/Transporter/TransporterTable/TransporterTable.spec.tsx → client/src/components/Manifest/Transporter/TransporterTable.spec.tsx

@@ -52,7 +52,7 @@ describe('TransporterTable', () => {
       {}
     );
     const actionDropdown = await screen.findAllByRole('button', {
-      name: /transporter action [0-9]/,
+      name: /transporter [0-9] actions/,
     });
     expect(actionDropdown).length(2);
   });
@@ -69,7 +69,7 @@ describe('TransporterTable', () => {
       {}
     );
     const actionDropdown = screen.queryAllByRole('button', {
-      name: /transporter action [0-9]/,
+      name: /transporter [0-9] actions/,
     });
     expect(actionDropdown).length(0);
   });
@@ -85,7 +85,7 @@ describe('TransporterTable', () => {
       {}
     );
     const actionDropdowns = await screen.findAllByRole('button', {
-      name: /transporter action [0-9]/,
+      name: /transporter [0-9] actions/,
     });
     for (let i = 1; i < TRAN_ARRAY.length; i++) {
       await userEvent.click(actionDropdowns[i]);
@@ -104,7 +104,7 @@ describe('TransporterTable', () => {
       {}
     );
     const actionDropdowns = await screen.findAllByRole('button', {
-      name: /transporter action [0-9]/,
+      name: /transporter [0-9] actions/,
     });
     for (let i = 0; i < TRAN_ARRAY.length; i++) {
       await userEvent.click(actionDropdowns[i]);

client/src/components/Manifest/Transporter/TransporterTable.tsx

@@ -0,0 +1,127 @@
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { faAngleRight, faCheck, faSignature } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Transporter } from 'components/Manifest';
+import { Manifest } from 'components/Manifest/manifestSchema';
+import { QuickerSignData, QuickerSignModalBtn } from 'components/Manifest/QuickerSign';
+import React, { useState } from 'react';
+import { Accordion, Button, Card, Col, Row, Table, useAccordionButton } from 'react-bootstrap';
+import { UseFieldArrayReturn } from 'react-hook-form';
+import { TransporterRowActions } from './TransporterRowActions';
+
+interface TransporterTableProps {
+  transporters?: Array<Transporter>;
+  arrayFieldMethods: UseFieldArrayReturn<Manifest, 'transporters', 'id'>;
+  readOnly?: boolean;
+  setupSign: (data: QuickerSignData) => void;
+}
+
+function CustomToggle({ eventKey }: any) {
+  const [open, setOpen] = useState(false);
+  const decoratedOnClick = useAccordionButton(eventKey, () => setOpen(!open));
+
+  return (
+    <Button
+      onClick={decoratedOnClick}
+      className="bg-transparent border-0 text-dark"
+      title="more info"
+    >
+      <FontAwesomeIcon
+        icon={faAngleRight}
+        className={`sb-sidenav-collapse-arrow ${open ? 'rotate-90' : ''} `}
+      />
+    </Button>
+  );
+}
+
+function TransporterTable({
+  transporters,
+  arrayFieldMethods,
+  readOnly,
+  setupSign,
+}: TransporterTableProps) {
+  const [parent] = useAutoAnimate();
+
+  if (!transporters || transporters.length < 1) {
+    return <></>;
+  }
+
+  if (transporters) {
+    for (let i = 0; i < transporters?.length; i++) {
+      transporters[i].order = i + 1;
+    }
+  }
+
+  return (
+    <>
+      <Accordion ref={parent}>
+        {transporters.map((transporter, index) => {
+          return (
+            <Card key={transporter.epaSiteId} className="py-2 px-4 my-2">
+              <Row className="d-flex justify-content-between">
+                <Col xs={8} className="d-flex align-items-center">
+                  <div>
+                    <h5 className="d-inline border-3 me-3">{transporter.order} </h5>
+                    <span>{transporter.name}</span>
+                  </div>
+                </Col>
+                <Col xs={1}>
+                  {readOnly ? (
+                    <QuickerSignModalBtn
+                      siteType={'Transporter'}
+                      mtnHandler={transporter}
+                      handleClick={setupSign}
+                      iconOnly={true}
+                      disabled={transporter.signed}
+                    />
+                  ) : transporter.signed ? (
+                    <FontAwesomeIcon icon={faSignature} />
+                  ) : (
+                    <></>
+                  )}
+                </Col>
+                <Col xs={1}>
+                  {readOnly || (
+                    <TransporterRowActions
+                      removeTransporter={arrayFieldMethods.remove}
+                      swapTransporter={arrayFieldMethods.swap}
+                      index={index}
+                      length={transporters?.length}
+                    />
+                  )}
+                </Col>
+                <Col xs={1}>
+                  <CustomToggle eventKey={transporter.epaSiteId}></CustomToggle>
+                </Col>
+              </Row>
+              <Accordion.Collapse eventKey={transporter.epaSiteId}>
+                <Card.Body>
+                  <Table>
+                    <thead>
+                      <tr>
+                        <th>EPA ID</th>
+                        <th>Phone</th>
+                        <th>Can e-Sign?</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>{transporter.epaSiteId}</td>
+                        <td>{transporter.contact.phone?.number}</td>
+                        <td className="text-success text-center">
+                          {transporter ? <FontAwesomeIcon icon={faCheck} /> : 'no'}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </Table>
+                </Card.Body>
+              </Accordion.Collapse>
+            </Card>
+          );
+        })}
+      </Accordion>
+    </>
+  );
+}
+
+export { TransporterTable };

client/src/components/Manifest/UpdateRcra/UpdateRcra.tsx

@@ -8,6 +8,13 @@ interface UpdateRcraProps {
   taskId: string;
 }
 
+/**
+ * UpdateRcra is a component that will poll the server for the status of an asynchronous task and
+ * display that status to the user. If the task is successful, the user will be redirected to the
+ * manifest view page.
+ * @param taskId
+ * @constructor
+ */
 export function UpdateRcra({ taskId }: UpdateRcraProps) {
   const [showToast, setShowToast] = React.useState(true);