Auto animate Transporter Table

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haztrak",
-  "version": "0.7.0",
+  "version": "0.6.2",
   "private": true,
   "scripts": {
     "start": "vite",
@@ -14,6 +14,7 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",

client/src/App.scss

@@ -23,6 +23,10 @@ $info: #009999;
   z-index: 999; /* Ensure it's above other content */
 }
 
+.no-caret::after {
+  display: none !important;
+}
+
 .badge-top-right {
   min-width: 1.5rem !important;
   top: -0.75rem !important;
@@ -84,6 +88,10 @@ $info: #009999;
   transform: rotate(-90deg);
 }
 
+.rotate-90 {
+  transform: rotate(90deg);
+}
+
 .app-container {
   min-height: 350px;
 }

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

@@ -0,0 +1,111 @@
+import {
+  faArrowDown,
+  faArrowUp,
+  faEllipsisVertical,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { MouseEventHandler, ReactElement } from 'react';
+import { Col, Dropdown, Row } from 'react-bootstrap';
+import { UseFieldArrayRemove, UseFieldArraySwap } from 'react-hook-form';
+
+interface TranRowActionProps {
+  index: number;
+  length: number;
+  removeTransporter: UseFieldArrayRemove;
+  swapTransporter: UseFieldArraySwap;
+}
+
+interface RowDropdownItems {
+  text: string;
+  icon: ReactElement;
+  onClick: MouseEventHandler<HTMLElement>;
+  disabled: boolean;
+  label: string;
+}
+
+/**
+ * TransporterRowActions uses index and length to disable and display
+ * different actions for eah row, expected to be part of a mapped table or list.
+ * @constructor
+ */
+function TransporterRowActions({
+  index,
+  removeTransporter,
+  swapTransporter,
+  length,
+}: TranRowActionProps) {
+  const isFirst = index === 0;
+  const isLast = index + 1 === length;
+
+  const actions: RowDropdownItems[] = [
+    {
+      text: 'Move up',
+      icon: (
+        <FontAwesomeIcon icon={faArrowUp} className={isFirst ? 'text-secondary' : 'text-primary'} />
+      ),
+      onClick: () => {
+        swapTransporter(index, index - 1);
+      },
+      disabled: isFirst,
+      label: `move transporter ${index} up`,
+    },
+    {
+      text: 'Move Down',
+      icon: (
+        <FontAwesomeIcon
+          icon={faArrowDown}
+          className={isLast ? 'text-secondary' : 'text-primary'}
+        />
+      ),
+      onClick: () => {
+        swapTransporter(index, index + 1);
+      },
+      disabled: isLast,
+      label: `move transporter ${index} down`,
+    },
+    {
+      text: 'Remove',
+      icon: <FontAwesomeIcon icon={faTrash} className="text-danger" />,
+      onClick: () => {
+        removeTransporter(index);
+      },
+      disabled: false,
+      label: `remove transporter ${index}`,
+    },
+  ];
+
+  return (
+    <>
+      <Dropdown>
+        <Dropdown.Toggle
+          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" />
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {actions.map((action, i) => {
+            return (
+              <Dropdown.Item
+                key={i}
+                disabled={action.disabled}
+                onClick={action.onClick}
+                title={action.label}
+              >
+                <Row>
+                  <Col xs={2}>{action.icon}</Col>
+                  <Col xs={10}>
+                    <span>{action.text}</span>
+                  </Col>
+                </Row>
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
+
+export { TransporterRowActions };

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

@@ -1,22 +1,25 @@
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { Transporter } from 'components/Manifest';
 import React from 'react';
 import { renderWithProviders, screen } from 'test-utils';
-import { TransporterTable } from './index';
 import { createMockTransporter } from 'test-utils/fixtures';
-import { Transporter } from 'components/Manifest';
-import { describe, test, expect } from 'vitest';
+import { describe, expect, test } from 'vitest';
+import { TransporterTable } from './index';
 
 const HANDLER_ID_1 = 'siteId1';
 const HANDLER_ID_2 = 'siteId2';
+const HANDLER_NAME_1 = 'My Transporter';
+const HANDLER_NAME_2 = 'My Other Transporter';
 
 const mockSetupSign = (data: any) => console.log(data);
 
 const TRAN_ARRAY: Array<Transporter> = [
   {
-    ...createMockTransporter({ epaSiteId: HANDLER_ID_1, order: 1 }),
+    ...createMockTransporter({ epaSiteId: HANDLER_ID_1, name: HANDLER_NAME_1, order: 1 }),
   },
   {
-    ...createMockTransporter({ epaSiteId: HANDLER_ID_2, order: 2 }),
+    ...createMockTransporter({ epaSiteId: HANDLER_ID_2, name: HANDLER_NAME_2, order: 2 }),
   },
 ];
 
@@ -32,12 +35,12 @@ describe('TransporterTable', () => {
       />,
       {}
     );
-    expect(screen.getByText(HANDLER_ID_1)).toBeInTheDocument();
-    expect(screen.getByText(HANDLER_ID_2)).toBeInTheDocument();
+    expect(screen.getByText(HANDLER_NAME_1)).toBeInTheDocument();
+    expect(screen.getByText(HANDLER_NAME_2)).toBeInTheDocument();
     // debug(undefined, Infinity);
   });
-  test('renders actions for each transporter', () => {
-    const emptyArrayFieldMethods = {}; // empty method placeholders to fulfil required prop
+  test('renders an action dropdown when editable', async () => {
+    const emptyArrayFieldMethods = {}; // empty method placeholders to fulfill required prop
     renderWithProviders(
       <TransporterTable
         setupSign={mockSetupSign}
@@ -48,29 +51,29 @@ describe('TransporterTable', () => {
       />,
       {}
     );
-    for (let i = 0; i < TRAN_ARRAY.length; i++) {
-      expect(screen.getByTitle(`remove-transporter-${i}-button`)).toBeInTheDocument();
-      expect(screen.getByTitle(`move-transporter-${i}-down-button`)).toBeInTheDocument();
-      expect(screen.getByTitle(`move-transporter-${i}-up-button`)).toBeInTheDocument();
-    }
-    expect(
-      screen.getByTitle(`move-transporter-${TRAN_ARRAY.length - 1}-down-button`)
-    ).toBeDisabled();
+    const actionDropdown = await screen.findAllByRole('button', {
+      name: /transporter [0-9] actions/,
+    });
+    expect(actionDropdown).length(2);
   });
-  test('first increase order button is disabled', () => {
+  test('does not renders an action dropdown when readonly', () => {
     const emptyArrayFieldMethods = {}; // empty method placeholders to fulfill required prop
     renderWithProviders(
       <TransporterTable
         setupSign={mockSetupSign}
         // @ts-ignore
         arrayFieldMethods={emptyArrayFieldMethods}
         transporters={TRAN_ARRAY}
+        readOnly={true}
       />,
       {}
     );
-    expect(screen.getByTitle(`move-transporter-${0}-up-button`)).toBeDisabled();
+    const actionDropdown = screen.queryAllByRole('button', {
+      name: /transporter [0-9] actions/,
+    });
+    expect(actionDropdown).length(0);
   });
-  test('move-up is enabled for all but first', () => {
+  test('move-up is enabled for all but first', async () => {
     const emptyArrayFieldMethods = {}; // empty method placeholders to fulfill required prop
     renderWithProviders(
       <TransporterTable
@@ -81,11 +84,15 @@ describe('TransporterTable', () => {
       />,
       {}
     );
+    const actionDropdowns = await screen.findAllByRole('button', {
+      name: /transporter [0-9] actions/,
+    });
     for (let i = 1; i < TRAN_ARRAY.length; i++) {
-      expect(screen.getByTitle(`move-transporter-${i}-up-button`)).not.toBeDisabled();
+      await userEvent.click(actionDropdowns[i]);
+      expect(screen.getByTitle(`move transporter ${i} up`)).not.toBeDisabled();
     }
   });
-  test('last move-down is disabled', () => {
+  test('All but last move-down buttons are not disabled', async () => {
     const emptyArrayFieldMethods = {}; // empty method placeholders to fulfill required prop
     renderWithProviders(
       <TransporterTable
@@ -96,25 +103,12 @@ describe('TransporterTable', () => {
       />,
       {}
     );
+    const actionDropdowns = await screen.findAllByRole('button', {
+      name: /transporter [0-9] actions/,
+    });
     for (let i = 0; i < TRAN_ARRAY.length; i++) {
-      expect(
-        screen.getByTitle(`move-transporter-${TRAN_ARRAY.length - 1}-down-button`)
-      ).toBeDisabled();
-    }
-  });
-  test('move-down is enabled for all but last', () => {
-    const emptyArrayFieldMethods = {}; // empty method placeholders to fulfill required prop
-    renderWithProviders(
-      <TransporterTable
-        setupSign={mockSetupSign}
-        // @ts-ignore
-        arrayFieldMethods={emptyArrayFieldMethods}
-        transporters={TRAN_ARRAY}
-      />,
-      {}
-    );
-    for (let i = 0; i < TRAN_ARRAY.length - 1; i++) {
-      expect(screen.getByTitle(`move-transporter-${i}-down-button`)).not.toBeDisabled();
+      await userEvent.click(actionDropdowns[i]);
+      expect(screen.getByTitle(`move transporter ${i} down`)).not.toBeDisabled();
     }
   });
 });