Merge pull request #4692 from msupply-foundation/3797-hotfix-internal-order-toolbar-layout

lache-melvin · web-flow · commit cc6e4e246d03 · 2024-08-27T11:30:52.000+05:45
3797 move internal order toolbar content to side panel
diff --git a/client/packages/common/src/hooks/useDetailPanel/useDetailPanel.tsx b/client/packages/common/src/hooks/useDetailPanel/useDetailPanel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { create } from 'zustand';
 import { useTranslation } from '@common/intl';
 import { SidebarIcon, ButtonWithIcon } from '../../ui';
@@ -8,31 +8,43 @@ type DetailPanelController = {
   hasUserSet: boolean;
   isOpen: boolean;
   shouldPersist: boolean;
+  enabled: boolean;
   open: () => void;
   close: () => void;
+  setEnabled: (enabled: boolean) => void;
 };
 
 export const useDetailPanelStore = create<DetailPanelController>(set => {
   const initialValue = LocalStorage.getItem('/detailpanel/open');
 
   return {
+    enabled: false,
     hasUserSet: initialValue !== null,
     isOpen: false,
     shouldPersist: true,
     open: () =>
-      set(state => ({
-        ...state,
-        isOpen: true,
-        hasUserSet: true,
-        shouldPersist: true,
-      })),
+      set(state =>
+        state.enabled
+          ? {
+              ...state,
+              isOpen: true,
+              hasUserSet: true,
+              shouldPersist: true,
+            }
+          : state
+      ),
     close: () =>
-      set(state => ({
-        ...state,
-        isOpen: false,
-        hasUserSet: true,
-        shouldPersist: true,
-      })),
+      set(state =>
+        state.enabled
+          ? {
+              ...state,
+              isOpen: false,
+              hasUserSet: true,
+              shouldPersist: true,
+            }
+          : state
+      ),
+    setEnabled: (enabled: boolean) => set(state => ({ ...state, enabled })),
   };
 });
 
@@ -43,7 +55,7 @@ interface DetailPanel {
 }
 export const useDetailPanel = (): DetailPanel => {
   const t = useTranslation();
-  const { isOpen, open, close } = useDetailPanelStore();
+  const { isOpen, open, close, setEnabled } = useDetailPanelStore();
   const OpenButton = isOpen ? null : (
     <ButtonWithIcon
       Icon={<SidebarIcon />}
@@ -52,6 +64,11 @@ export const useDetailPanel = (): DetailPanel => {
     />
   );
 
+  useEffect(() => {
+    setEnabled(true);
+    return () => setEnabled(false);
+  }, []);
+
   return { OpenButton, open, close };
 };
 
diff --git a/client/packages/common/src/intl/locales/en/app.json b/client/packages/common/src/intl/locales/en/app.json
@@ -32,6 +32,8 @@
   "cmdk.goto-stock": "Go to: Stock",
   "cmdk.goto-stocktakes": "Go to: Stocktakes",
   "cmdk.goto-suppliers": "Go to: Suppliers",
+  "cmdk.more-info-close": "Close the more info panel",
+  "cmdk.more-info-open": "Open the more info panel",
   "cmdk.placeholder": "Type a command or search",
   "customer-requisition": "Requisitions",
   "customers": "Customers",
diff --git a/client/packages/common/src/intl/locales/en/common.json b/client/packages/common/src/intl/locales/en/common.json
@@ -127,7 +127,7 @@
   "heading.404": "Feeling lost?",
   "heading.actions": "Actions",
   "heading.add-item": "Add Item",
-  "heading.additional-info": "Additional Info",
+  "heading.additional-info": "Additional info",
   "heading.are-you-sure": "Are you sure?",
   "heading.barcode-scanners": "Barcode Scanners",
   "heading.comment": "Comment",
diff --git a/client/packages/common/src/intl/locales/en/replenishment.json b/client/packages/common/src/intl/locales/en/replenishment.json
@@ -36,6 +36,8 @@
   "heading.charges": "Charges",
   "heading.consumption-history": "Consumption History (monthly)",
   "heading.edit-tax-rate": "Edit tax rate percentage",
+  "heading.order-info": "Order info",
+  "heading.program-info": "Program info",
   "heading.related-documents": "Related documents",
   "heading.requested-to-suggested": "Request Suggested",
   "heading.return-items": "Return Items",
@@ -48,7 +50,7 @@
   "heading.total": "Total",
   "info.automatic-shipment": "This shipment was created automatically, as the result of an Outbound Shipment in another store.",
   "info.automatic-shipment-no-edit": "You are unable to edit details until the status is confirmed as Delivered.",
-  "info.cannot-edit-program-requisition": "Cannot edit supplier, minimum MOS, maximum MOS or add items in a program requisition.",
+  "info.cannot-edit-program-requisition": "Cannot edit supplier, reorder threshold MOS, target MOS or add items in a program requisition.",
   "info.manual-shipment": "This shipment was created manually. The delivery status will not be automatically updated.",
   "label.add-batch": "Add batch",
   "label.add-charges": "Add charges",
diff --git a/client/packages/host/src/CommandK.tsx b/client/packages/host/src/CommandK.tsx
@@ -19,6 +19,7 @@ import {
   StoreModeNodeType,
   useRegisterActions,
   useConfirmationModal,
+  useDetailPanelStore,
 } from '@openmsupply-client/common';
 import { AppRoute } from '@openmsupply-client/config';
 import { Action } from 'kbar/lib/types';
@@ -97,12 +98,13 @@ const Actions = () => {
     message: t('messages.logout-confirm'),
     title: t('heading.logout-confirm'),
   });
+  const { close, open } = useDetailPanelStore();
 
   const actions = [
     {
       id: 'navigation-drawer:toggle',
-      name: `${t('cmdk.drawer-toggle')} (m)`,
-      shortcut: ['m'],
+      name: `${t('cmdk.drawer-toggle')} (n)`,
+      shortcut: ['n'],
       keywords: 'drawer, close',
       perform: () => drawer.toggle(),
     },
@@ -304,6 +306,23 @@ const Actions = () => {
         ),
     });
 
+    actions.push(
+      {
+        id: 'action:more-open',
+        name: `${t('cmdk.more-info-close')} (m+o)`,
+        keywords: 'more open',
+        shortcut: ['m', 'o'],
+        perform: open,
+      },
+      {
+        id: 'action:more-close',
+        name: `${t('cmdk.more-info-close')} (m+c)`,
+        keywords: 'more close',
+        shortcut: ['m', 'c'],
+        perform: close,
+      }
+    );
+
     if (store?.preferences.vaccineModule ?? false) {
       actions.push({
         id: 'navigation:coldchain-monitoring',
diff --git a/client/packages/requisitions/src/RequestRequisition/DetailView/OrderInfoSection.tsx b/client/packages/requisitions/src/RequestRequisition/DetailView/OrderInfoSection.tsx
@@ -1,23 +1,31 @@
 import React from 'react';
 import {
-  Switch,
   Grid,
   Autocomplete,
-  InputWithLabelRow,
   useTranslation,
   useConfirmationModal,
+  DetailPanelSection,
+  PanelRow,
+  PanelLabel,
+  PanelField,
 } from '@openmsupply-client/common';
-import { useRequest, useHideOverStocked } from '../../api';
+import { useRequest } from '../api';
+import { getApprovalStatusKey } from '../../utils';
 
 const months = [1, 2, 3, 4, 5, 6];
 
-export const ToolbarActions = () => {
-  const { on, toggle } = useHideOverStocked();
+export const OrderInfoSection = () => {
   const t = useTranslation('replenishment');
   const isDisabled = useRequest.utils.isDisabled();
   const isProgram = useRequest.utils.isProgram();
-  const { minMonthsOfStock, maxMonthsOfStock, update } =
-    useRequest.document.fields(['minMonthsOfStock', 'maxMonthsOfStock']);
+  const { minMonthsOfStock, maxMonthsOfStock, linkedRequisition, update } =
+    useRequest.document.fields([
+      'minMonthsOfStock',
+      'maxMonthsOfStock',
+      'programName',
+      'linkedRequisition',
+    ]);
+  const { usesRemoteAuthorisation } = useRequest.utils.isRemoteAuthorisation();
 
   const getMinMOSConfirmation = useConfirmationModal({
     title: t('heading.are-you-sure'),
@@ -35,12 +43,19 @@ export const ToolbarActions = () => {
   });
 
   return (
-    <Grid container gap={1} direction="column">
-      <Grid item>
-        <InputWithLabelRow
-          labelWidth="150px"
-          label={t('label.min-months-of-stock')}
-          Input={
+    <DetailPanelSection title={t('heading.order-info')}>
+      <Grid container gap={0.5} key="order-info">
+        {usesRemoteAuthorisation && (
+          <PanelRow>
+            <PanelLabel>{t('label.auth-status')}</PanelLabel>
+            <PanelField>
+              {t(getApprovalStatusKey(linkedRequisition?.approvalStatus))}
+            </PanelField>
+          </PanelRow>
+        )}
+        <PanelRow>
+          <PanelLabel>{t('label.min-months-of-stock')}</PanelLabel>
+          <PanelField>
             <Autocomplete
               disabled={isDisabled || isProgram}
               clearIcon={null}
@@ -78,14 +93,11 @@ export const ToolbarActions = () => {
               }}
               getOptionDisabled={option => option.value > maxMonthsOfStock}
             />
-          }
-        />
-      </Grid>
-      <Grid item>
-        <InputWithLabelRow
-          labelWidth="150px"
-          label={t('label.max-months-of-stock')}
-          Input={
+          </PanelField>
+        </PanelRow>
+        <PanelRow>
+          <PanelLabel>{t('label.max-months-of-stock')}</PanelLabel>
+          <PanelField>
             <Autocomplete
               disabled={isDisabled || isProgram}
               clearIcon={null}
@@ -107,23 +119,9 @@ export const ToolbarActions = () => {
               }
               getOptionDisabled={option => option.value < minMonthsOfStock}
             />
-          }
-        />
-      </Grid>
-      <Grid item>
-        <InputWithLabelRow
-          labelWidth="225px"
-          label={t('label.hide-stock-over-minimum')}
-          Input={
-            <Switch
-              onChange={toggle}
-              checked={on}
-              color="secondary"
-              size="small"
-            />
-          }
-        />
+          </PanelField>
+        </PanelRow>
       </Grid>
-    </Grid>
+    </DetailPanelSection>
   );
 };
diff --git a/client/packages/requisitions/src/RequestRequisition/DetailView/SidePanel.tsx b/client/packages/requisitions/src/RequestRequisition/DetailView/SidePanel.tsx
@@ -26,6 +26,37 @@ import {
 } from '@openmsupply-client/common';
 import { useRequest } from '../api';
 import { AppRoute } from '@openmsupply-client/config';
+import { OrderInfoSection } from './OrderInfoSection';
+
+const ProgramInfoSection: FC = () => {
+  const { orderType, programName, period } = useRequest.document.fields([
+    'orderType',
+    'programName',
+    'period',
+  ]);
+  const t = useTranslation('replenishment');
+
+  return programName ? (
+    <DetailPanelSection title={t('heading.program-info')}>
+      <Grid container gap={0.5} key="program-info">
+        <PanelRow>
+          <PanelLabel>{t('label.order-type')}</PanelLabel>
+          <PanelField>{orderType ?? ''}</PanelField>
+        </PanelRow>
+        <PanelRow>
+          <PanelLabel>{t('label.program')}</PanelLabel>
+          <PanelField>{programName ?? ''}</PanelField>
+        </PanelRow>
+        <PanelRow>
+          <PanelLabel>{t('label.period')}</PanelLabel>
+          <PanelField>{period?.name ?? ''}</PanelField>
+        </PanelRow>
+      </Grid>
+    </DetailPanelSection>
+  ) : (
+    <></>
+  );
+};
 
 const AdditionalInfoSection: FC = () => {
   const isDisabled = useRequest.utils.isDisabled();
@@ -189,6 +220,8 @@ export const SidePanel: FC = () => {
         </>
       }
     >
+      <OrderInfoSection />
+      <ProgramInfoSection />
       <AdditionalInfoSection />
       <RelatedDocumentsSection />
     </DetailPanelPortal>
diff --git a/client/packages/requisitions/src/RequestRequisition/DetailView/Toolbar/Toolbar.tsx b/client/packages/requisitions/src/RequestRequisition/DetailView/Toolbar/Toolbar.tsx
