Merge pull request #5856 from msupply-foundation/5825-add-switch-betw…

…een-packs-and-quantity Add switch for item packs
msupply-foundation · Dec 20, 2024 · e2a41b4 · e2a41b4
2 parents 473dc8a + 6ba6d0b
commit e2a41b4
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 1 deletion.
diff --git a/...ckages/requisitions/src/RequestRequisition/DetailView/RequestLineEdit/RequestEditPage.tsx b/...ckages/requisitions/src/RequestRequisition/DetailView/RequestLineEdit/RequestEditPage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   BasicSpinner,
   DetailContainer,
@@ -27,6 +27,8 @@ export const RequestLineEditPage = () => {
     lines,
     currentItem
   );
+  const isPacksEnabled = !!draft?.defaultPackSize;
+  const [isPacks, setIsPacks] = useState(isPacksEnabled);
   const enteredLineIds = lines
     ? lines
         .filter(line => line.requestedQuantity !== 0)
@@ -71,6 +73,9 @@ export const RequestLineEditPage = () => {
                 hasPrevious={hasPrevious}
                 previous={previous}
                 isProgram={!!data?.programName}
+                isPacksEnabled={isPacksEnabled}
+                isPacks={isPacks}
+                setIsPacks={setIsPacks}
               />
             </>
           }

diff --git a/...ckages/requisitions/src/RequestRequisition/DetailView/RequestLineEdit/RequestLineEdit.tsx b/...ckages/requisitions/src/RequestRequisition/DetailView/RequestLineEdit/RequestLineEdit.tsx
@@ -12,6 +12,7 @@ import {
   NumUtils,
   Popover,
   ReasonOptionNodeType,
+  Switch,
   TextArea,
   useAuthContext,
   useToggle,
@@ -33,6 +34,9 @@ interface RequestLineEditProps {
   hasPrevious: boolean;
   previous: ItemRowFragment | null;
   isProgram: boolean;
+  isPacksEnabled: boolean;
+  isPacks: boolean;
+  setIsPacks: (isPacks: boolean) => void;
 }
 
 export const RequestLineEdit = ({
@@ -44,6 +48,9 @@ export const RequestLineEdit = ({
   hasPrevious,
   previous,
   isProgram,
+  isPacksEnabled,
+  isPacks,
+  setIsPacks,
 }: RequestLineEditProps) => {
   const t = useTranslation();
   const { isOn, toggle } = useToggle();
@@ -180,12 +187,35 @@ export const RequestLineEdit = ({
         </Box>
         <Box>
           {/* Right column content */}
+          <Box
+            display="flex"
+            flexDirection="row"
+            justifyContent="flex-end"
+            paddingBottom={1}
+            paddingRight={2.5}
+          >
+            {isPacksEnabled && (
+              <Box display="flex">
+                <Switch
+                  label={t('label.units')}
+                  checked={isPacks}
+                  onChange={(_event, checked) => setIsPacks(checked)}
+                  size="small"
+                />
+                <Box paddingLeft={2} paddingRight={2}>
+                  {t('label.packs')}
+                </Box>
+              </Box>
+            )}
+          </Box>
+
           <Box display="flex" flexDirection="row">
             <InputWithLabelRow
               Input={
                 <NumericTextInput
                   width={INPUT_WIDTH}
                   value={draft?.requestedQuantity}
+                  disabled={isPacks}
                   onChange={value => {
                     if (draft?.suggestedQuantity === value) {
                       update({
@@ -231,6 +261,49 @@ export const RequestLineEdit = ({
               )}
             </Box>
           </Box>
+          <Box display="flex" flexDirection="row">
+            {isPacksEnabled && (
+              <InputWithLabelRow
+                Input={
+                  <NumericTextInput
+                    autoFocus
+                    disabled={!isPacks}
+                    value={NumUtils.round(
+                      (draft?.requestedQuantity ?? 0) /
+                        (draft?.defaultPackSize ?? 1),
+                      2
+                    )}
+                    decimalLimit={2}
+                    width={100}
+                    onChange={quantity => {
+                      update({
+                        requestedQuantity:
+                          (quantity ?? 0) * (draft?.defaultPackSize ?? 0),
+                      });
+                    }}
+                  />
+                }
+                labelWidth={LABEL_WIDTH}
+                sx={{ marginBottom: 1 }}
+                label={t('label.requested-packs')}
+              />
+            )}
+          </Box>
+          {isPacksEnabled ? (
+            <InputWithLabelRow
+              Input={
+                <NumericTextInput
+                  width={INPUT_WIDTH}
+                  value={draft?.defaultPackSize}
+                  disabled
+                />
+              }
+              labelWidth={LABEL_WIDTH}
+              label={t('label.default-pack-size')}
+              sx={{ marginBottom: 1 }}
+            />
+          ) : null}
+
           <InputWithLabelRow
             Input={
               <NumericTextInput

diff --git a/client/packages/requisitions/src/RequestRequisition/DetailView/RequestLineEdit/hooks.tsx b/client/packages/requisitions/src/RequestRequisition/DetailView/RequestLineEdit/hooks.tsx
@@ -13,6 +13,7 @@ export type DraftRequestLine = Omit<
 > & {
   isCreated: boolean;
   requisitionId: string;
+  defaultPackSize: number;
 };
 
 const createDraftFromItem = (
@@ -44,6 +45,7 @@ const createDraftFromItem = (
     additionInUnits: 0,
     daysOutOfStock: 0,
     expiringUnits: 0,
+    defaultPackSize: item.defaultPackSize,
   };
 };
 
@@ -58,6 +60,7 @@ const createDraftFromRequestLine = (
   suggestedQuantity: line.suggestedQuantity,
   isCreated: false,
   itemStats: line.itemStats,
+  defaultPackSize: line.item.defaultPackSize,
 });
 
 export const useDraftRequisitionLine = (