feat: filter groups in pallet selection based on receivingGroups

distributeaid · May 8, 2022 · 5ec4f2d · 5ec4f2d
1 parent c27ee2b
commit 5ec4f2d
Show file tree

Hide file tree

Showing 15 changed files with 296 additions and 101 deletions.
diff --git a/.github/workflows/frontend-e2e-tests.yml b/.github/workflows/frontend-e2e-tests.yml
@@ -72,14 +72,14 @@ jobs:
         working-directory: frontend
         run: npx playwright test tests/playwright/unauthenticated
 
-      - name: Run tests (admin workflows)
-        working-directory: frontend
-        run: npx playwright test tests/playwright/authenticated/admin
-
       - name: Run tests (user onboarding)
         working-directory: frontend
         run: npx playwright test tests/playwright/authenticated/user/onboarding
 
+      - name: Run tests (admin workflows)
+        working-directory: frontend
+        run: npx playwright test tests/playwright/authenticated/admin
+
       - name: Run tests (user offer creation)
         working-directory: frontend
         run: npx playwright test tests/playwright/authenticated/user/offer

diff --git a/frontend/README.md b/frontend/README.md
@@ -23,8 +23,8 @@ You can also run the tests against the frontend development server. Export the e
 You can then run the tests using
 
     npx playwright test tests/playwright/unauthenticated
-    npx playwright test tests/playwright/authenticated/admin
     npx playwright test tests/playwright/authenticated/user/onboarding
+    npx playwright test tests/playwright/authenticated/admin
     npx playwright test tests/playwright/authenticated/user/offer
 
 This works on your local machine, as well as using the Docker container.
@@ -36,8 +36,8 @@ For developing tests it is helpful to run the [Playwright Inspector](https://pla
 Then launch the inspector **on your local machine** using
 
     PWDEBUG=1 npx playwright test tests/playwright/unauthenticated
-    PWDEBUG=1 npx playwright test tests/playwright/authenticated/admin
     PWDEBUG=1 npx playwright test tests/playwright/authenticated/user/onboarding
+    PWDEBUG=1 npx playwright test tests/playwright/authenticated/admin
     PWDEBUG=1 npx playwright test tests/playwright/authenticated/user/offer
 
 This cannot be done inside the Docker container, since it launches the Firefox browser.

diff --git a/frontend/src/pages/offers/CreateOfferForm.tsx b/frontend/src/pages/offers/CreateOfferForm.tsx
@@ -203,7 +203,8 @@ const CreateOfferForm: FunctionComponent<PropsWithChildren<Props>> = (
             <p className="">{formatShipmentName(targetShipment.shipment)}</p>
             <p className="text-gray-500 text-sm">
               {formatListOfHubs(targetShipment.shipment.sendingHubs)} →{' '}
-              {formatListOfHubs(targetShipment.shipment.receivingHubs)}
+              {formatListOfHubs(targetShipment.shipment.receivingHubs)} →{' '}
+              {formatListOfHubs(targetShipment.shipment.receivingGroups)}
             </p>
           </>
         )}

diff --git a/frontend/src/pages/offers/LineItemForm.tsx b/frontend/src/pages/offers/LineItemForm.tsx
@@ -11,7 +11,7 @@ import { useForm } from 'react-hook-form'
 import Button from '../../components/Button'
 import InlineError from '../../components/forms/InlineError'
 import PlaceholderField from '../../components/forms/PlaceholderField'
-import SelectField, { SelectOption } from '../../components/forms/SelectField'
+import SelectField from '../../components/forms/SelectField'
 import TextField from '../../components/forms/TextField'
 import Spinner from '../../components/Spinner'
 import {
@@ -21,21 +21,16 @@ import {
 } from '../../data/constants'
 import {
   DangerousGoods,
-  GroupType,
   LineItemCategory,
   LineItemContainerType,
   LineItemUpdateInput,
   OfferQuery,
   PalletType,
-  useAllGroupsMinimalQuery,
+  ShipmentQuery,
   useLineItemQuery,
   useUpdateLineItemMutation,
 } from '../../types/api-types'
-import {
-  gramsToKilos,
-  groupToSelectOption,
-  kilosToGrams,
-} from '../../utils/format'
+import { gramsToKilos, kilosToGrams } from '../../utils/format'
 import { setEmptyFieldsToUndefined } from '../../utils/setEmptyFieldsToUndefined'
 
 interface Props {
@@ -54,13 +49,15 @@ interface Props {
    */
   palletType: PalletType
   offer: OfferQuery['offer']
+  shipment: ShipmentQuery['shipment']
 }
 
 const LineItemForm: FunctionComponent<PropsWithChildren<Props>> = ({
   lineItemId,
   onEditingComplete,
   palletType,
   offer,
+  shipment,
 }) => {
   const {
     data,
@@ -70,25 +67,15 @@ const LineItemForm: FunctionComponent<PropsWithChildren<Props>> = ({
     variables: { id: lineItemId },
   })
 
-  const [receivingGroups, setReceivingGroups] = useState<SelectOption[]>([])
-  const { data: groups, loading: groupsAreLoading } = useAllGroupsMinimalQuery({
-    variables: { groupType: GroupType.Regular },
-  })
-
-  // Groups available for reception are all groups that are not the sending group
-  const availableReceivingGroups = useMemo(
+  // Groups available for reception are all receiving groups that are not the sending group
+  const receivingGroups = useMemo(
     () =>
-      groups?.listGroups.filter(({ id }) => offer.sendingGroupId !== id) ?? [],
-    [groups, offer],
-  )
-
-  useEffect(
-    function organizeGroups() {
-      if (availableReceivingGroups.length) {
-        setReceivingGroups(availableReceivingGroups.map(groupToSelectOption))
-      }
-    },
-    [availableReceivingGroups],
+      (
+        shipment.receivingGroups.filter(
+          ({ id }) => offer.sendingGroupId !== id,
+        ) ?? []
+      ).map(({ id, name }) => ({ label: name, value: id })),
+    [shipment, offer],
   )
 
   /**
@@ -275,7 +262,7 @@ const LineItemForm: FunctionComponent<PropsWithChildren<Props>> = ({
     })
   })
 
-  if (!groupsAreLoading && receivingGroups.length === 0) {
+  if (receivingGroups.length === 0) {
     return (
       <div>
         <h2 className="text-lg mb-2">Unable to add items</h2>

diff --git a/frontend/src/pages/offers/PalletsEditor.spec.tsx b/frontend/src/pages/offers/PalletsEditor.spec.tsx
@@ -4,8 +4,10 @@
 import { MockedProvider } from '@apollo/react-testing'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { createLineItem, createOffer } from '../../../tests/builders'
+import createLineItem from '../../../tests/builders/createLineItem'
+import createOffer from '../../../tests/builders/createOffer'
 import createPallet from '../../../tests/builders/createPallet'
+import { createShipment } from '../../../tests/builders/createShipment'
 import {
   AllGroupsMinimalDocument,
   GroupType,
@@ -15,6 +17,7 @@ import {
 import PalletsEditor from './PalletsEditor'
 
 describe('PalletsEditor', () => {
+  const shipment = createShipment({ id: 1 })
   const offer = createOffer({ id: 2, offerId: 2 })
   const pallet = createPallet({
     id: 2,
@@ -60,7 +63,11 @@ describe('PalletsEditor', () => {
   it('shows form only for the line item which is being edited', async () => {
     render(
       <MockedProvider mocks={apolloQueryMocks}>
-        <PalletsEditor offer={offer} pallets={offer.pallets} />
+        <PalletsEditor
+          shipment={shipment}
+          offer={offer}
+          pallets={offer.pallets}
+        />
       </MockedProvider>,
     )
 

diff --git a/frontend/src/pages/offers/PalletsEditor.tsx b/frontend/src/pages/offers/PalletsEditor.tsx
@@ -7,6 +7,7 @@ import {
   PalletCreateInput,
   PalletDocument,
   PalletType,
+  ShipmentQuery,
   useCreateLineItemMutation,
   useCreatePalletMutation,
   usePalletLazyQuery,
@@ -19,6 +20,7 @@ import ViewLineItem from './ViewLineItem'
 import ViewPallet from './ViewPallet'
 interface Props {
   offer: OfferQuery['offer']
+  shipment: ShipmentQuery['shipment']
   pallets?: OfferQuery['offer']['pallets']
 }
 
@@ -28,6 +30,7 @@ interface Props {
  */
 const PalletsEditor: FunctionComponent<PropsWithChildren<Props>> = ({
   offer,
+  shipment,
   pallets = [],
 }) => {
   // TODO move this to the URL
@@ -182,6 +185,7 @@ const PalletsEditor: FunctionComponent<PropsWithChildren<Props>> = ({
             {lineItemToEditId === selectedLineItemId ? (
               <LineItemForm
                 offer={offer}
+                shipment={shipment}
                 lineItemId={selectedLineItemId}
                 palletType={
                   selectedPalletData.data?.pallet.palletType ||

diff --git a/frontend/src/pages/offers/ViewOfferPage.tsx b/frontend/src/pages/offers/ViewOfferPage.tsx
@@ -94,7 +94,8 @@ const ViewOfferPage: FunctionComponent = () => {
                     </p>
                     <p className="text-gray-600 text-sm">
                       {formatListOfHubs(shipment.shipment.sendingHubs)} →{' '}
-                      {formatListOfHubs(shipment.shipment.receivingHubs)}
+                      {formatListOfHubs(shipment.shipment.receivingHubs)} →{' '}
+                      {formatListOfHubs(shipment.shipment.receivingGroups)}
                     </p>
                   </>
                 )}
@@ -115,8 +116,12 @@ const ViewOfferPage: FunctionComponent = () => {
           )}
         </header>
         <main className="flex-grow flex items-stretch">
-          {offer?.offer && (
-            <PalletsEditor offer={offer.offer} pallets={offer?.offer.pallets} />
+          {offer?.offer && shipment?.shipment && (
+            <PalletsEditor
+              shipment={shipment.shipment}
+              offer={offer.offer}
+              pallets={offer?.offer.pallets}
+            />
           )}
         </main>
       </div>

diff --git a/frontend/src/pages/shipments/ShipmentDetails.tsx b/frontend/src/pages/shipments/ShipmentDetails.tsx
@@ -83,7 +83,7 @@ const ShipmentDetails: FunctionComponent<PropsWithChildren<Props>> = ({
           ↓
         </div>
         <div className="border border-gray-200 p-4 md:p-6 rounded flex-shrink-0 space-y-2">
-          <div className="uppercase text-xs text-gray-500 mb-2">To</div>
+          <div className="uppercase text-xs text-gray-500 mb-2">Via</div>
           {shipmentData.receivingHubs.map((hub) => (
             <div key={hub.id}>
               <div className="text-lg md:text-xl text-gray-800">{hub.name}</div>
@@ -99,6 +99,28 @@ const ShipmentDetails: FunctionComponent<PropsWithChildren<Props>> = ({
             </div>
           ))}
         </div>
+        <div className="text-2xl text-gray-500 p-2 md:p-4 transform md:-rotate-90 text-center">
+          ↓
+        </div>
+        <div className="border border-gray-200 p-4 md:p-6 rounded flex-shrink-0 space-y-2">
+          <div className="uppercase text-xs text-gray-500 mb-2">To</div>
+          {shipmentData.receivingGroups.map((group) => (
+            <div key={group.id}>
+              <div className="text-lg md:text-xl text-gray-800">
+                {group.name}
+              </div>
+              <div className="text-gray-600">
+                {group.locality}
+                {group.country && (
+                  <>
+                    {', '}
+                    {group.country.alias ?? group.country.shortName}
+                  </>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   )