delivery

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

packages/rmf-dashboard-framework/src/components/tasks/types/delivery.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DeliveryTaskForm, makeDefaultDeliveryTaskDescription } from './delivery';
+
+export default {
+  title: 'Tasks/DeliveryTaskForm',
+  component: DeliveryTaskForm,
+} satisfies Meta;
+
+type Story = StoryObj<typeof DeliveryTaskForm>;
+
+export const Default: Story = {
+  args: {
+    taskDesc: makeDefaultDeliveryTaskDescription(),
+    pickupPoints: { pickup_1: 'handler_1', pickup_2: 'handler_2' },
+    dropoffPoints: { dropoff_1: 'handler_3', dropoff_2: 'handler_4' },
+    onChange: () => {},
+    onValidate: () => {},
+  },
+};

packages/rmf-dashboard-framework/src/components/tasks/types/delivery.test.tsx

@@ -0,0 +1,163 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  DeliveryTaskDefinition,
+  DeliveryTaskForm,
+  isDeliveryTaskDescriptionValid,
+  makeDefaultDeliveryTaskDescription,
+  makeDeliveryTaskBookingLabel,
+  makeDeliveryTaskShortDescription,
+} from './delivery';
+
+const mockPickupPoints = {
+  pickup_1: 'handler_1',
+  pickup_2: 'handler_2',
+};
+const mockDropoffPoints = {
+  dropoff_1: 'handler_3',
+  dropoff_2: 'handler_4',
+};
+
+describe('Delivery task form', () => {
+  it('Delivery task form renders, changes and validates', async () => {
+    const onChange = vi.fn();
+    const onValidate = vi.fn();
+
+    render(
+      <DeliveryTaskForm
+        taskDesc={makeDefaultDeliveryTaskDescription()}
+        pickupPoints={mockPickupPoints}
+        dropoffPoints={mockDropoffPoints}
+        onChange={onChange}
+        onValidate={onValidate}
+      />,
+    );
+
+    let triggerCount = 1;
+
+    const pickupPlace = screen.getByTestId('pickup-location');
+    let input = within(pickupPlace).getByLabelText(/pickup location/i);
+    pickupPlace.focus();
+    fireEvent.change(input, { target: { value: 'a' } });
+    fireEvent.keyDown(pickupPlace, { key: 'ArrowDown' });
+    fireEvent.keyDown(pickupPlace, { key: 'Enter' });
+    expect(onChange).toHaveBeenCalledTimes(triggerCount);
+    expect(onValidate).toHaveBeenCalledTimes(triggerCount);
+    triggerCount += 1;
+
+    const pickupPayload = screen.getByTestId('pickup-sku');
+    pickupPayload.focus();
+    input = within(pickupPayload).getByLabelText(/pickup sku/i);
+    fireEvent.change(input, { target: { value: 'coke' } });
+    expect(onChange).toHaveBeenCalledTimes(triggerCount);
+    expect(onValidate).toHaveBeenCalledTimes(triggerCount);
+    triggerCount += 1;
+
+    const pickupQuantity = screen.getByTestId('pickup-quantity');
+    pickupQuantity.focus();
+    input = within(pickupQuantity).getByLabelText(/quantity/i);
+    await userEvent.type(input, '1');
+    expect(onChange).toHaveBeenCalledTimes(triggerCount);
+    expect(onValidate).toHaveBeenCalledTimes(triggerCount);
+    triggerCount += 1;
+
+    const dropoffPlace = screen.getByTestId('dropoff-location');
+    dropoffPlace.focus();
+    input = within(dropoffPlace).getByLabelText(/dropoff location/i);
+    fireEvent.change(input, { target: { value: 'a' } });
+    fireEvent.keyDown(dropoffPlace, { key: 'ArrowDown' });
+    fireEvent.keyDown(dropoffPlace, { key: 'Enter' });
+    expect(onChange).toHaveBeenCalledTimes(triggerCount);
+    expect(onValidate).toHaveBeenCalledTimes(triggerCount);
+    triggerCount += 1;
+
+    const dropoffPayload = screen.getByTestId('dropoff-sku');
+    dropoffPayload.focus();
+    input = within(dropoffPayload).getByLabelText(/dropoff sku/i);
+    fireEvent.change(input, { target: { value: 'coke' } });
+    expect(onChange).toHaveBeenCalledTimes(triggerCount);
+    expect(onValidate).toHaveBeenCalledTimes(triggerCount);
+    triggerCount += 1;
+
+    const dropoffQuantity = screen.getByTestId('dropoff-quantity');
+    pickupQuantity.focus();
+    input = within(dropoffQuantity).getByLabelText(/quantity/i);
+    await userEvent.type(input, '1');
+    expect(onChange).toHaveBeenCalledTimes(triggerCount);
+    expect(onValidate).toHaveBeenCalledTimes(triggerCount);
+    triggerCount += 1;
+  });
+
+  it('booking label', () => {
+    const desc = makeDefaultDeliveryTaskDescription();
+    desc.pickup = {
+      handler: 'handler_1',
+      place: 'pickup_1',
+      payload: {
+        sku: 'coke',
+        quantity: 1,
+      },
+    };
+    desc.dropoff = {
+      handler: 'handler_3',
+      place: 'dropoff_1',
+      payload: {
+        sku: 'coke',
+        quantity: 1,
+      },
+    };
+    const label = makeDeliveryTaskBookingLabel(desc);
+    expect(label.task_definition_id).toBe(DeliveryTaskDefinition.taskDefinitionId);
+    expect(label.pickup).toBe('pickup_1');
+    expect(label.destination).toBe('dropoff_1');
+    expect(label.payload).toBe('coke');
+  });
+
+  it('validity', () => {
+    const desc = makeDefaultDeliveryTaskDescription();
+    expect(isDeliveryTaskDescriptionValid(desc)).not.toBeTruthy();
+
+    desc.pickup = {
+      handler: 'handler_1',
+      place: 'pickup_1',
+      payload: {
+        sku: 'coke',
+        quantity: 1,
+      },
+    };
+    desc.dropoff = {
+      handler: 'handler_3',
+      place: 'dropoff_1',
+      payload: {
+        sku: 'coke',
+        quantity: 1,
+      },
+    };
+    expect(isDeliveryTaskDescriptionValid(desc)).toBeTruthy();
+  });
+
+  it('short description', () => {
+    const desc = makeDefaultDeliveryTaskDescription();
+    desc.pickup = {
+      handler: 'handler_1',
+      place: 'pickup_1',
+      payload: {
+        sku: 'coke',
+        quantity: 1,
+      },
+    };
+    desc.dropoff = {
+      handler: 'handler_3',
+      place: 'dropoff_1',
+      payload: {
+        sku: 'coke',
+        quantity: 1,
+      },
+    };
+    expect(makeDeliveryTaskShortDescription(desc, undefined)).toBe(
+      '[Delivery] Pickup [coke] from [pickup_1], dropoff [coke] at [dropoff_1]',
+    );
+  });
+});

packages/rmf-dashboard-framework/src/components/tasks/types/delivery.tsx

@@ -34,7 +34,7 @@ export function makeDeliveryTaskBookingLabel(
     task_definition_id: DeliveryTaskDefinition.taskDefinitionId,
     pickup: task_description.pickup.place,
     destination: task_description.dropoff.place,
-    cart_id: task_description.pickup.payload.sku,
+    payload: task_description.pickup.payload.sku,
   };
 }
 
@@ -47,7 +47,7 @@ function isTaskPlaceValid(place: TaskPlace): boolean {
   );
 }
 
-function isDeliveryTaskDescriptionValid(taskDescription: DeliveryTaskDescription): boolean {
+export function isDeliveryTaskDescriptionValid(taskDescription: DeliveryTaskDescription): boolean {
   return isTaskPlaceValid(taskDescription.pickup) && isTaskPlaceValid(taskDescription.dropoff);
 }
 
@@ -107,6 +107,7 @@ export function DeliveryTaskForm({
       <Grid item xs={6}>
         <Autocomplete
           id="pickup-location"
+          data-testid="pickup-location"
           freeSolo
           fullWidth
           options={Object.keys(pickupPoints)}
@@ -143,6 +144,7 @@ export function DeliveryTaskForm({
       <Grid item xs={4}>
         <TextField
           id="pickup_sku"
+          data-testid="pickup-sku"
           fullWidth
           label="Pickup SKU"
           value={taskDesc.pickup.payload.sku}
@@ -164,6 +166,7 @@ export function DeliveryTaskForm({
       <Grid item xs={2}>
         <PositiveIntField
           id="pickup_quantity"
+          data-testid="pickup-quantity"
           label="Quantity"
           value={taskDesc.pickup.payload.quantity}
           onChange={(_ev, val) => {
@@ -183,6 +186,7 @@ export function DeliveryTaskForm({
       <Grid item xs={6}>
         <Autocomplete
           id="dropoff-location"
+          data-testid="dropoff-location"
           freeSolo
           fullWidth
           options={Object.keys(dropoffPoints)}
@@ -219,6 +223,7 @@ export function DeliveryTaskForm({
       <Grid item xs={4}>
         <TextField
           id="dropoff_sku"
+          data-testid="dropoff-sku"
           fullWidth
           label="Dropoff SKU"
           value={taskDesc.dropoff.payload.sku}
@@ -240,6 +245,7 @@ export function DeliveryTaskForm({
       <Grid item xs={2}>
         <PositiveIntField
           id="dropoff_quantity"
+          data-testid="dropoff-quantity"
           label="Quantity"
           value={taskDesc.dropoff.payload.quantity}
           onChange={(_ev, val) => {

packages/rmf-dashboard-framework/src/components/tasks/types/patrol.tsx

@@ -76,7 +76,6 @@ interface PlaceListProps {
 
 function PlaceList({ places, onClick }: PlaceListProps) {
   const theme = useTheme();
-  console.log(places);
   return (
     <List
       dense