5137.3 Requisition line edit + UI updates to line columns

client/packages/coldchain/src/Equipment/DetailView/UpdateStatusButton.tsx

@@ -145,7 +145,7 @@ export const UpdateStatusButtonComponent = ({
         nextButton={
           currentTab === Tabs.Status ? (
             <DialogButton
-              variant="next"
+              variant="next-and-ok"
               onClick={onNext}
               disabled={isInvalid()}
             />

client/packages/coldchain/src/Equipment/ImportAsset/EquipmentImportModal.tsx

@@ -255,7 +255,7 @@ export const EquipmentImportModal: FC<EquipmentImportModalProps> = ({
     <Modal
       okButton={
         <DialogButton
-          variant="next"
+          variant="next-and-ok"
           disabled={importNotReady}
           onClick={importAction}
         />

client/packages/common/src/hooks/useDialog/useDialog.stories.tsx

@@ -29,7 +29,7 @@ const Template: StoryFn = () => {
       <Modal
         title="Add Item"
         cancelButton={<DialogButton variant="cancel" onClick={onCancel} />}
-        nextButton={<DialogButton variant="next" onClick={onOkNext} />}
+        nextButton={<DialogButton variant="next-and-ok" onClick={onOkNext} />}
         okButton={<DialogButton variant="ok" onClick={onOk} />}
       >
         <div>This is an example dialog. There&apos;s nothing much to see</div>

client/packages/common/src/intl/locales/en/common.json

@@ -67,11 +67,13 @@
   "button.new-return": "New Return",
   "button.new-shipment": "New Shipment",
   "button.new-stock": "New Stock",
+  "button.next": "Next",
   "button.next-step": "Next step",
   "button.ok": "OK",
   "button.ok-and-next": "OK & Next",
   "button.open-the-menu": "Open the menu",
   "button.order-more": "Order more",
+  "button.previous": "Previous",
   "button.print": "Print",
   "button.print-qr": "Print QR code",
   "button.reduce-lines-to-zero": "Reduce lines to 0",
@@ -142,6 +144,7 @@
   "customers": "Customers",
   "dashboard": "Dashboard",
   "description.already-issued": "Quantity already issued in shipments.",
+  "description.available-stock": "The customer's initial stock on hand + incoming stock +/- inventory adjustments - outgoing stock",
   "description.average-monthly-consumption": "Average Monthly Consumption",
   "description.breach-type": "Ongoing breach type",
   "description.counted-num-of-packs": "Counted # of Packs",
@@ -155,7 +158,6 @@
   "description.fc-sell-price": "Foreign currency sell price per pack",
   "description.forecast-quantity": "Forecast Quantity to Reach Target",
   "description.initial-stock-on-hand": "Stock on hand on the first day of the program period",
-  "description.available-stock": "The customer's initial stock on hand + incoming stock +/- inventory adjustments - outgoing stock", 
   "description.invoice-number": "Shipment number",
   "description.last-reading-datetime": "Date and time of the last reading",
   "description.max-min-temperature": "Maximum or minimum temperature reading",
@@ -732,11 +734,11 @@
   "label.invoice-number": "Number",
   "label.is-vaccine": "Vaccine",
   "label.issue": "Issue",
+  "label.item-variant": "Item Variant",
   "label.item_few": "Items",
   "label.item_many": "Items",
   "label.item_one": "Item",
   "label.item_other": "Items",
-  "label.item-variant": "Item Variant",
   "label.items-expiring-before": "Items expiring before",
   "label.items-no-stock_few": "Items with no stock",
   "label.items-no-stock_many": "Items with no stock",

client/packages/common/src/types/schema.ts

@@ -2934,21 +2934,9 @@ export type InsertResponseRequisitionLineErrorInterface = {
 };
 
 export type InsertResponseRequisitionLineInput = {
-  additionInUnits?: InputMaybe<Scalars['Float']['input']>;
-  averageMonthlyConsumption?: InputMaybe<Scalars['Float']['input']>;
-  comment?: InputMaybe<Scalars['String']['input']>;
-  daysOutOfStock?: InputMaybe<Scalars['Float']['input']>;
-  expiringUnits?: InputMaybe<Scalars['Float']['input']>;
   id: Scalars['String']['input'];
-  incomingUnits?: InputMaybe<Scalars['Float']['input']>;
   itemId: Scalars['String']['input'];
-  lossInUnits?: InputMaybe<Scalars['Float']['input']>;
-  optionId?: InputMaybe<Scalars['String']['input']>;
-  outgoingUnits?: InputMaybe<Scalars['Float']['input']>;
-  requestedQuantity?: InputMaybe<Scalars['Float']['input']>;
   requisitionId: Scalars['String']['input'];
-  stockOnHand?: InputMaybe<Scalars['Float']['input']>;
-  supplyQuantity?: InputMaybe<Scalars['Float']['input']>;
 };
 
 export type InsertResponseRequisitionLineResponse = InsertResponseRequisitionLineError | RequisitionLineNode;
@@ -6469,6 +6457,7 @@ export type RequisitionLineNode = {
   remainingQuantityToSupply: Scalars['Float']['output'];
   /** Quantity requested */
   requestedQuantity: Scalars['Float']['output'];
+  requisitionNumber: Scalars['Int']['output'];
   /**
    * Calculated quantity
    * When months_of_stock < requisition.min_months_of_stock, calculated = average_monthly_consumption * requisition.max_months_of_stock - months_of_stock

client/packages/common/src/ui/components/buttons/ButtonShowcase.stories.tsx

@@ -115,7 +115,10 @@ const Template: StoryFn<{ color: 'primary' | 'secondary' }> = ({ color }) => {
         </Wrapper>
 
         <Wrapper text="Dialog OK & Next button">
-          <DialogButton variant="next" onClick={getOnClick('OK & Next!')} />
+          <DialogButton
+            variant="next-and-ok"
+            onClick={getOnClick('OK & Next!')}
+          />
         </Wrapper>
 
         <Wrapper text="Dialog cancel button">

client/packages/common/src/ui/components/buttons/standard/DialogButton.tsx

@@ -15,6 +15,8 @@ import { ButtonWithIcon } from './ButtonWithIcon';
 type DialogButtonVariant =
   | 'cancel'
   | 'back'
+  | 'previous'
+  | 'next-and-ok'
   | 'next'
   | 'ok'
   | 'save'
@@ -63,12 +65,18 @@ const getButtonProps = (
         labelKey: 'button.ok',
         variant: 'contained',
       };
-    case 'next':
+    case 'next-and-ok':
       return {
         icon: <ArrowRightIcon />,
         labelKey: 'button.ok-and-next',
         variant: 'contained',
       };
+    case 'next':
+      return {
+        icon: <ArrowRightIcon />,
+        labelKey: 'button.next',
+        variant: 'contained',
+      };
     case 'save':
       return {
         icon: <SaveIcon />,
@@ -99,6 +107,12 @@ const getButtonProps = (
         labelKey: 'button.close',
         variant: 'outlined',
       };
+    case 'previous':
+      return {
+        icon: <ArrowLeftIcon />,
+        labelKey: 'button.previous',
+        variant: 'outlined',
+      };
   }
 };
 

client/packages/common/src/ui/components/navigation/ListOptions/ListOptions.tsx

@@ -0,0 +1,81 @@
+import { CheckIcon, ChevronDownIcon } from '@common/icons';
+import {
+  List,
+  ListItemIcon,
+  ListItem,
+  ListItemText,
+  Divider,
+  Box,
+} from '@mui/material';
+import React from 'react';
+
+export type ListOptionValues = {
+  id: string;
+  value: string;
+};
+
+interface ListProps {
+  onClick: (id: string) => void;
+  options: ListOptionValues[];
+  currentId?: string;
+  enteredLineIds?: string[];
+}
+
+export const ListOptions = ({
+  onClick,
+  options,
+  currentId,
+  enteredLineIds,
+}: ListProps) => {
+  const startIcon = (
+    <CheckIcon
+      style={{
+        backgroundColor: '#33A901',
+        borderRadius: '50%',
+        padding: '2px',
+        color: 'white',
+        height: 18,
+        width: 18,
+      }}
+    />
+  );
+
+  const endIcon = (
+    <ChevronDownIcon
+      style={{ width: 17, height: 17, transform: 'rotate(-90deg)' }}
+    />
+  );
+
+  return (
+    <List sx={{ padding: 0 }}>
+      {options?.map((option, _) => (
+        <React.Fragment key={option.id}>
+          <ListItem
+            sx={{ padding: '5px 0px' }}
+            onClick={() => onClick(option.id)}
+          >
+            <ListItemIcon sx={{ padding: 0, minWidth: 25 }}>
+              {enteredLineIds?.includes(option.id) ? (
+                startIcon
+              ) : (
+                <Box style={{ visibility: 'hidden' }}>{startIcon}</Box>
+              )}
+            </ListItemIcon>
+            <ListItemText
+              primary={option.value}
+              sx={{ margin: 0, padding: 0 }}
+            />
+            <ListItemIcon sx={{ padding: 0, minWidth: 15 }}>
+              {option.id === currentId ? (
+                endIcon
+              ) : (
+                <Box style={{ visibility: 'hidden' }}>{endIcon}</Box>
+              )}
+            </ListItemIcon>
+          </ListItem>
+          <Divider component="li" />
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};

client/packages/common/src/ui/components/navigation/ListOptions/index.ts

@@ -0,0 +1 @@
+export * from './ListOptions';

client/packages/common/src/ui/components/navigation/index.ts

@@ -3,3 +3,4 @@ export * from './AppNavSection';
 export * from './Breadcrumbs';
 export * from './ExternalNavLink';
 export * from './Tabs';
+export * from './ListOptions';

client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx

@@ -38,7 +38,7 @@ export const StocktakeLineEditModal: FC<
       cancelButton={<DialogButton variant="cancel" onClick={onCancel} />}
       nextButton={
         <DialogButton
-          variant="next"
+          variant="next-and-ok"
           onClick={onNext}
           disabled={(!hasNext && mode === ModalMode.Update) || !isValid}
         />

client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx

@@ -155,7 +155,7 @@ export const InboundLineEdit: FC<InboundLineEditProps> = ({
         cancelButton={<DialogButton variant="cancel" onClick={onClose} />}
         nextButton={
           <DialogButton
-            variant="next"
+            variant="next-and-ok"
             disabled={okNextDisabled || zeroNumberOfPacks}
             onClick={async () => {
               await saveLines();

client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx

@@ -222,7 +222,7 @@ export const OutboundLineEdit: React.FC<ItemDetailsModalProps> = ({
       nextButton={
         <DialogButton
           disabled={okNextDisabled}
-          variant="next"
+          variant="next-and-ok"
           onClick={onNext}
         />
       }

client/packages/invoices/src/Prescriptions/DetailView/PrescriptionLineEdit/PrescriptionLineEdit.tsx

@@ -196,7 +196,7 @@ export const PrescriptionLineEdit: React.FC<PrescriptionLineEditModalProps> = ({
       nextButton={
         <DialogButton
           disabled={okNextDisabled}
-          variant="next"
+          variant="next-and-ok"
           onClick={onNext}
         />
       }

client/packages/invoices/src/Returns/modals/CustomerReturn/CustomerReturn.tsx

@@ -120,7 +120,7 @@ export const CustomerReturnEditModal = ({
   const NextStepButton = (
     <DialogButton
       onClick={handleNextStep}
-      variant="next"
+      variant="next-and-ok"
       disabled={!lines.length}
       customLabel={t('button.next-step')}
     />
@@ -129,7 +129,7 @@ export const CustomerReturnEditModal = ({
   const OkAndNextButton = (
     <DialogButton
       onClick={handleNextItem}
-      variant="next"
+      variant="next-and-ok"
       disabled={
         currentTab !== Tabs.Reason ||
         (isDisabled && !hasNextItem) ||

client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx

@@ -118,7 +118,7 @@ export const SupplierReturnEditModal = ({
   const NextStepButton = (
     <DialogButton
       onClick={handleNextStep}
-      variant="next"
+      variant="next-and-ok"
       disabled={!lines.length}
       customLabel={t('button.next-step')}
     />
@@ -127,7 +127,7 @@ export const SupplierReturnEditModal = ({
   const OkAndNextButton = (
     <DialogButton
       onClick={handleNextItem}
-      variant="next"
+      variant="next-and-ok"
       disabled={
         currentTab !== Tabs.Reason ||
         (isDisabled && !hasNextItem) ||

client/packages/requisitions/src/RequestRequisition/DetailView/RequestLineEdit/RequestLineEdit.tsx

@@ -76,7 +76,7 @@ export const RequestLineEdit = ({
       nextButton={
         <DialogButton
           disabled={nextDisabled}
-          variant="next"
+          variant="next-and-ok"
           onClick={async () => {
             await save();
             setPreviousItemLineId(null);

client/packages/requisitions/src/RequisitionService.tsx

@@ -7,6 +7,7 @@ import {
 import {
   ListView as ResponseRequisitionListView,
   DetailView as ResponseRequisitionDetailView,
+  ResponseLineEditPage,
 } from './ResponseRequisition';
 import { RouteBuilder, Routes, Route } from '@openmsupply-client/common';
 import { AppRoute } from '@openmsupply-client/config';
@@ -21,6 +22,13 @@ const customerRequisitionRoute = RouteBuilder.create(
   .addPart(':requisitionNumber')
   .build();
 
+const customerRequisitionLineRoute = RouteBuilder.create(
+  AppRoute.CustomerRequisition
+)
+  .addPart(':requisitionNumber')
+  .addPart(':itemId')
+  .build();
+
 const internalOrdersRoute = RouteBuilder.create(AppRoute.InternalOrder).build();
 const internalOrderRoute = RouteBuilder.create(AppRoute.InternalOrder)
   .addPart(':requisitionNumber')
@@ -43,6 +51,10 @@ export const RequisitionService: FC = () => {
         path={customerRequisitionRoute}
         element={<ResponseRequisitionDetailView />}
       />
+      <Route
+        path={customerRequisitionLineRoute}
+        element={<ResponseLineEditPage />}
+      />
       <Route
         path={internalOrdersRoute}
         element={<RequestRequisitionListView />}