SW-5791 Event Management - Follow up (#3308)

terraware · Nov 1, 2024 · 0d79e86 · 0d79e86
1 parent 082f591
commit 0d79e86
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 150 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/styles": "^5.15.15",
     "@reduxjs/toolkit": "^1.9.3",
-    "@terraware/web-components": "^3.4.4",
+    "@terraware/web-components": "^3.4.6",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.3.0",
     "@testing-library/user-event": "^14.4.3",

diff --git a/playwright/e2e/suites/accession.spec.ts b/playwright/e2e/suites/accession.spec.ts
@@ -89,8 +89,7 @@ export default function AccessionTests() {
     await page.getByText('Fresh').click();
     await page.getByPlaceholder('Select...').nth(2).click();
     await page.getByText('Nursery Media').click();
-    await page.locator('input[type="text"]').click();
-    await page.locator('input[type="text"]').fill('5');
+    await page.locator('#seedsTested').getByRole('textbox').fill('5');
     await page.getByRole('button', { name: 'Save' }).click();
     await page.getByRole('button', { name: '#' }).click();
     await page.getByRole('button', { name: 'Edit' }).click();
@@ -125,7 +124,7 @@ export default function AccessionTests() {
       .getByText(/My New Nursery/)
       .nth(0)
       .click();
-    await page.locator('input[type="text"]').fill('300');
+    await page.locator('#withdrawnQuantity').getByRole('textbox').fill('300');
     await page.getByRole('button', { name: 'Add Notes' }).click();
     await page.locator('textarea').fill('Adding some test notes here!');
     await page.locator('#saveWithdraw').click();
@@ -159,8 +158,7 @@ export default function AccessionTests() {
     await page.getByPlaceholder('Select...').first().click();
     await page.getByText('Out-planting').click();
     await page.getByLabel('Seed Count', { exact: true }).check();
-    await page.locator('input[type="text"]').click();
-    await page.locator('input[type="text"]').fill('100');
+    await page.locator('#withdrawnQuantity').getByRole('textbox').fill('100');
     await page.locator('#saveWithdraw').click();
     await expect(page.getByRole('main')).toContainText('95 Grams');
     await expect(page.getByRole('main')).toContainText('~95 ct');
@@ -183,8 +181,7 @@ export default function AccessionTests() {
     await page.getByText('Soil').click();
     await page.getByPlaceholder('Select...').nth(3).click();
     await page.getByText('Soak').click();
-    await page.locator('input[type="text"]').click();
-    await page.locator('input[type="text"]').fill('20');
+    await page.locator('#withdrawnQuantity').getByRole('textbox').fill('20');
     await page.locator('#saveWithdraw').click();
     await expect(page.getByRole('main')).toContainText('75 Grams');
     await expect(page.getByRole('main')).toContainText('~75 ct');
@@ -206,8 +203,7 @@ export default function AccessionTests() {
     await expect(page.getByRole('main')).toContainText('15');
     await page.getByRole('button', { name: 'Edit' }).click();
     await page.getByRole('button', { name: 'Add Observation' }).click();
-    await page.locator('input[type="text"]').nth(2).click();
-    await page.locator('input[type="text"]').nth(2).fill('3');
+    await page.locator('div:nth-child(3) > div:nth-child(2) > div > .textfield > #seedsGerminated > input').fill('3');
     await page.getByLabel('Mark as Complete').check();
     await page.getByRole('button', { name: 'Save' }).click();
     await page.getByRole('button', { name: 'Apply Result' }).click();

diff --git a/playwright/e2e/suites/inventory.spec.ts b/playwright/e2e/suites/inventory.spec.ts
@@ -14,7 +14,7 @@ export default function InventoryTests() {
     await waitFor(page, '#home');
     await page.getByRole('button', { name: 'Seedlings' }).click();
     await page.getByRole('button', { name: 'Inventory' }).click();
-    await page.getByRole('button', { name: 'Add Inventory' }).click();
+    await page.locator('#new-inventory').click();
     await page.getByPlaceholder('Search or Select...').click();
     await page.locator('li').filter({ hasText: 'Banana' }).locator('div').click();
     await page.locator('div:nth-child(2) > .select > .textfield-container').click();
@@ -49,7 +49,7 @@ export default function InventoryTests() {
     await page.locator('textarea').fill('Adding some notes');
     await page.getByRole('button', { name: 'Save' }).click();
 
-    await expect(page.getByText('Banana')).toBeVisible();
+    await expect(page.getByText('Banana', { exact: true })).toBeVisible();
     await expect(page.getByText('Garage')).toBeVisible();
     await expect(page.getByText('-02-01')).toBeVisible();
     await expect(page.getByText('Germinating Quantity 500')).toBeVisible();
@@ -71,7 +71,7 @@ export default function InventoryTests() {
     await waitFor(page, '#home');
     await page.getByRole('button', { name: 'Seedlings' }).click();
     await page.getByRole('button', { name: 'Inventory' }).click();
-    await page.getByRole('button', { name: 'Add Inventory' }).click();
+    await page.locator('#new-inventory').click();
     await page.getByPlaceholder('Search or Select...').click();
     await page.locator('li').filter({ hasText: 'Coconut' }).locator('div').click();
 
@@ -109,7 +109,7 @@ export default function InventoryTests() {
     await page.locator('textarea').fill('Adding some notes');
     await page.getByRole('button', { name: 'Save' }).click();
 
-    await expect(page.getByText('Coconut')).toBeVisible();
+    await expect(page.getByText('Coconut', { exact: true })).toBeVisible();
     await expect(page.getByText('Garage')).toBeVisible();
     await expect(page.getByText('Germinating Quantity 25')).toBeVisible();
     await expect(page.getByText('Not Ready Quantity 25')).toBeVisible();

diff --git a/playwright/e2e/suites/locations.spec.ts b/playwright/e2e/suites/locations.spec.ts
@@ -20,8 +20,7 @@ export default function LocationTests() {
 
     await page.getByRole('button', { name: 'Add Seed Bank' }).click();
 
-    await page.locator('input[type="text"]').click();
-    await page.locator('input[type="text"]').fill(newSeedBankName);
+    await page.locator('#name').getByRole('textbox').fill(newSeedBankName);
     await page.locator('textarea').click();
     await page.locator('textarea').fill('My Brand New Seed Bank!');
     await page.getByLabel('Build Start Date').fill('2023-12-31');
@@ -62,8 +61,7 @@ export default function LocationTests() {
     await page.getByRole('button', { name: 'Locations' }).click();
     await page.getByRole('button', { name: 'Nurseries' }).click();
     await page.getByRole('button', { name: 'Add Nursery' }).click();
-    await page.locator('input[type="text"]').click();
-    await page.locator('input[type="text"]').fill(newNurseryName);
+    await page.locator('#name').getByRole('textbox').fill(newNurseryName);
     await page.locator('textarea').click();
     await page.locator('textarea').fill('My Super Special Test Nursery!!!');
     await page.getByLabel('Build Start Date').click();

diff --git a/src/scenes/AcceleratorRouter/Modules/AddEventModal.tsx b/src/scenes/AcceleratorRouter/Modules/AddEventModal.tsx
@@ -37,6 +37,7 @@ export default function AddEventModal(props: AddEventModalProps): JSX.Element {
   const result = useAppSelector(selectModuleCohorts(moduleId.toString()));
   const [availableCohorts, setAvailableCohorts] = useState<CohortModuleWithProject[]>();
   const [projectsSections, setProjectsSections] = useState<ProjectsSection[]>([{ cohort: {}, projectIds: [] }]);
+  const [dateError, setDateError] = useState(false);
 
   useEffect(() => {
     if (eventToEdit?.projects && eventToEdit.projects.length > 0) {
@@ -93,6 +94,14 @@ export default function AddEventModal(props: AddEventModalProps): JSX.Element {
 
   const save = () => {
     const projectsWithCohort: ModuleEventProject[] = [];
+    if (record.endTime && record.startTime) {
+      const endDateDate = new Date(record.endTime);
+      const startDateDate = new Date(record.startTime);
+      if (endDateDate < startDateDate) {
+        setDateError(true);
+        return;
+      }
+    }
     projectsSections.forEach((ps) =>
       ps.projectIds.forEach((projId) => {
         const foundCohort = availableCohorts?.find((coh) => coh.id === ps.cohort.id);
@@ -212,6 +221,7 @@ export default function AddEventModal(props: AddEventModalProps): JSX.Element {
             }}
             aria-label='date-picker'
             showTime={true}
+            errorText={record.endTime && dateError ? strings.INVALID_DATE : ''}
           />
         </Grid>
         <Grid item xs={12}>

diff --git a/src/scenes/AcceleratorRouter/Modules/EventsCellRenderer.tsx b/src/scenes/AcceleratorRouter/Modules/EventsCellRenderer.tsx
@@ -13,7 +13,9 @@ export default function EventsCellRenderer(props: RendererProps<TableRowType>):
   if (column.key === 'id' && onRowClick) {
     const valueToRender =
       value?.toString() === '-1' ? (
-        ''
+        <Link fontSize='16px' target='_blank' onClick={() => onRowClick()}>
+          {'<ID>'}
+        </Link>
       ) : (
         <Link fontSize='16px' target='_blank' onClick={() => onRowClick()}>
           {value as React.ReactNode}

diff --git a/src/scenes/AcceleratorRouter/Modules/EventsTable.tsx b/src/scenes/AcceleratorRouter/Modules/EventsTable.tsx
@@ -72,52 +72,81 @@ export default function EventsTable(props: EventsTableProps): JSX.Element {
   const [eventToEdit, setEventToEdit] = useState<ModuleEventPartial>();
 
   const onAddEvent = (eventToAdd: ModuleEventPartial) => {
+    let newEventToAdd = { ...eventToAdd };
+    if (eventToAdd.id === -1 && !eventToAdd.feId) {
+      newEventToAdd = { ...eventToAdd, feId: Symbol() };
+    }
     if (setEventsToAdd) {
       setEventsToAdd((prev) => {
         if (prev) {
-          return [...prev, eventToAdd];
+          return [...prev, newEventToAdd];
         } else {
-          return [eventToAdd];
+          return [newEventToAdd];
         }
       });
     }
   };
 
-  const onEditedEvent = (editedEvent: ModuleEventPartial) => {
-    if (setEventsToDelete && setEventsToAdd) {
-      // When editing a event, first we remove the old entrance and then we add it again
-      const eventsToAddIds = eventsToAdd?.map((mta) => mta.id).filter((id) => id !== -1);
-      if (eventsToAddIds?.includes(editedEvent.id)) {
-        const found = eventsToAdd?.find((eventToAdd) => eventToAdd.id === editedEvent.id);
-        if (found) {
-          const newEventsToAdd = eventsToAdd?.filter((etAdd) => etAdd.id !== editedEvent.id);
-          newEventsToAdd?.push(editedEvent);
-          setEventsToAdd(newEventsToAdd);
-        }
-      } else {
-        const found = prevEvents?.find((eventToAdd) => eventToAdd.id?.toString() === editedEvent.id?.toString());
-        if (found) {
-          setEventsToDelete((prev) => {
-            if (prev && found) {
-              return [...prev, found];
-            }
-            if (found) {
-              return [found];
-            }
-            return [];
-          });
-          setEventsToAdd((prev) => {
-            if (prev) {
-              return [...prev, editedEvent];
-            } else {
-              return [editedEvent];
-            }
-          });
-        }
+  const editNewEvent = (editedEvent: ModuleEventPartial) => {
+    if (!(setEventsToDelete && setEventsToAdd)) {
+      return;
+    }
+    const eventsToAddWithNoIds = eventsToAdd?.filter((ev) => ev.id === -1);
+    const feIds = eventsToAddWithNoIds?.map((ev) => ev.feId);
+    if (feIds?.includes(editedEvent.feId)) {
+      const found = eventsToAdd?.find((eventToAdd) => eventToAdd.feId === editedEvent.feId);
+      if (found) {
+        const newEventsToAdd = eventsToAdd?.filter((etAdd) => etAdd.feId !== editedEvent.feId);
+        newEventsToAdd?.push(editedEvent);
+        setEventsToAdd(newEventsToAdd);
       }
     }
   };
 
+  const editExistingEvent = (editedEvent: ModuleEventPartial) => {
+    if (!(setEventsToDelete && setEventsToAdd)) {
+      return;
+    }
+    // When editing a event, first we remove the old entrance and then we add it again
+    const eventsToAddIds = eventsToAdd?.map((mta) => mta.id).filter((id) => id !== -1);
+    if (eventsToAddIds?.includes(editedEvent.id)) {
+      const found = eventsToAdd?.find((eventToAdd) => eventToAdd.id === editedEvent.id);
+      if (found) {
+        const newEventsToAdd = eventsToAdd?.filter((etAdd) => etAdd.id !== editedEvent.id);
+        newEventsToAdd?.push(editedEvent);
+        setEventsToAdd(newEventsToAdd);
+      }
+    } else {
+      const found = prevEvents?.find((eventToAdd) => eventToAdd.id?.toString() === editedEvent.id?.toString());
+      if (found) {
+        setEventsToDelete((prev) => {
+          if (prev && found) {
+            return [...prev, found];
+          }
+          if (found) {
+            return [found];
+          }
+          return [];
+        });
+        setEventsToAdd((prev) => {
+          if (prev) {
+            return [...prev, editedEvent];
+          } else {
+            return [editedEvent];
+          }
+        });
+      }
+    }
+  };
+
+  const onEditedEvent = (editedEvent: ModuleEventPartial) => {
+    if (editedEvent.id === -1) {
+      editNewEvent(editedEvent);
+    } else {
+      editExistingEvent(editedEvent);
+    }
+  };
+
   const deleteEvents = () => {
     if (setEventsToDelete && setEventsToAdd) {
       const eventsToDelete = selectedRows.filter((sr) => sr.id?.toString() !== '-1');

diff --git a/src/types/Module.ts b/src/types/Module.ts
@@ -6,6 +6,7 @@ export type Module = components['schemas']['ModulePayload'];
 export type ModuleEvent = components['schemas']['ModuleEvent'];
 export type ModuleEventPartial = Omit<Partial<components['schemas']['ModuleEvent']>, 'projects'> & {
   projects?: ModuleEventProject[];
+  feId?: symbol;
 };
 export type ModuleEventProject = Partial<NonNullable<components['schemas']['ModuleEvent']['projects']>[0]>;
 export type ModuleEventWithStartTime = Omit<ModuleEvent, 'startTime'> & { startTime: string };