@openmrs/esm-patient-orders-app 11.3.1-patch.9064 → 11.3.1-patch.9310

package/src/order-basket/general-order-type/add-general-order/add-general-order.workspace.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  type OrderBasketItem,
+  type OrderBasketWindowProps,
+  type PatientWorkspace2DefinitionProps,
+} from '@openmrs/esm-patient-common-lib';
+import AddGeneralOrder from './add-general-order.component';
+
+interface OrderableConceptSearchWorkspaceProps {
+  order: OrderBasketItem;
+  orderTypeUuid: string;
+}
+
+/**
+ * This workspace displays the drug order form for adding or editing a general order.
+ */
+const AddGeneralOrderWorkspace: React.FC<
+  PatientWorkspace2DefinitionProps<OrderableConceptSearchWorkspaceProps, OrderBasketWindowProps>
+> = ({
+  workspaceProps: { order: initialOrder, orderTypeUuid },
+  groupProps: { patient, visitContext, mutateVisitContext },
+  closeWorkspace,
+}) => {
+  return (
+    <AddGeneralOrder
+      initialOrder={initialOrder}
+      orderTypeUuid={orderTypeUuid}
+      patient={patient}
+      visitContext={visitContext}
+      closeWorkspace={closeWorkspace}
+    />
+  );
+};
+
+export default AddGeneralOrderWorkspace;

package/src/order-basket/general-order-type/add-general-order/exported-add-general-order.workspace.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { type ExportedOrderBasketWindowProps, type OrderBasketItem } from '@openmrs/esm-patient-common-lib';
+import AddGeneralOrder from './add-general-order.component';
+
+interface OrderableConceptSearchWorkspaceProps {
+  order: OrderBasketItem;
+  orderTypeUuid: string;
+}
+
+/**
+ * This workspace displays the drug order form for adding or editing a general order.
+ */
+const ExportedAddGeneralOrderWorkspace: React.FC<
+  Workspace2DefinitionProps<OrderableConceptSearchWorkspaceProps, ExportedOrderBasketWindowProps, {}>
+> = ({
+  workspaceProps: { order: initialOrder, orderTypeUuid },
+  windowProps: { patient, visitContext },
+  closeWorkspace,
+}) => {
+  return (
+    <AddGeneralOrder
+      initialOrder={initialOrder}
+      orderTypeUuid={orderTypeUuid}
+      patient={patient}
+      visitContext={visitContext}
+      closeWorkspace={closeWorkspace}
+    />
+  );
+};
+
+export default ExportedAddGeneralOrderWorkspace;

package/src/order-basket/general-order-type/{orderable-concept-search → add-general-order}/search-results.component.tsx

@@ -4,12 +4,12 @@ import { ShoppingCartArrowUp } from '@carbon/react/icons';
 import { Tile, Button, SkeletonText, ButtonSkeleton } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import {
+  type Workspace2DefinitionProps,
   ArrowRightIcon,
-  type DefaultWorkspaceProps,
   ShoppingCartArrowDownIcon,
   useLayoutType,
   useSession,
-  launchWorkspace,
+  type Visit,
 } from '@openmrs/esm-framework';
 import {
   useOrderBasket,
@@ -27,7 +27,9 @@ interface OrderableConceptSearchResultsProps {
   cancelOrder: () => void;
   orderableConceptSets: Array<string>;
   orderTypeUuid: string;
-  closeWorkspace: DefaultWorkspaceProps['closeWorkspace'];
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+  patient: fhir.Patient;
+  visit: Visit;
 }
 
 const OrderableConceptSearchResults: React.FC<OrderableConceptSearchResultsProps> = ({
@@ -38,6 +40,8 @@ const OrderableConceptSearchResults: React.FC<OrderableConceptSearchResultsProps
   orderableConceptSets,
   orderTypeUuid,
   closeWorkspace,
+  patient,
+  visit,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -89,6 +93,8 @@ const OrderableConceptSearchResults: React.FC<OrderableConceptSearchResultsProps
                 concept={concept}
                 orderTypeUuid={orderTypeUuid}
                 closeWorkspace={closeWorkspace}
+                patient={patient}
+                visit={visit}
               />
             ))}
           </div>
@@ -153,7 +159,9 @@ interface TestTypeSearchResultItemProps {
   concept: OrderableConcept;
   openOrderForm: (searchResult: OrderBasketItem) => void;
   orderTypeUuid: string;
-  closeWorkspace: DefaultWorkspaceProps['closeWorkspace'];
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+  patient: fhir.Patient;
+  visit: Visit;
 }
 
 const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({
@@ -161,11 +169,13 @@ const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({
   openOrderForm,
   orderTypeUuid,
   closeWorkspace,
+  patient,
+  visit,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
-  const { orders, setOrders } = useOrderBasket<OrderBasketItem>(orderTypeUuid, prepOrderPostData);
+  const { orders, setOrders } = useOrderBasket<OrderBasketItem>(patient, orderTypeUuid, prepOrderPostData);
 
   const orderAlreadyInBasket = useMemo(
     () => orders?.some((order) => order.concept.uuid === concept.uuid),
@@ -173,22 +183,18 @@ const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({
   );
 
   const createOrderBasketItem = useCallback(
-    (testType: OrderableConcept) => {
-      return createEmptyOrder(testType, session.currentProvider?.uuid);
+    (testType: OrderableConcept, visit: Visit) => {
+      return createEmptyOrder(testType, session.currentProvider?.uuid, visit);
     },
     [session.currentProvider.uuid],
   );
 
   const addToBasket = useCallback(() => {
-    const orderBasketItem = createOrderBasketItem(concept);
+    const orderBasketItem = createOrderBasketItem(concept, visit);
     orderBasketItem.isOrderIncomplete = true;
     setOrders([...orders, orderBasketItem]);
-    closeWorkspace({
-      ignoreChanges: true,
-      onWorkspaceClose: () => launchWorkspace('order-basket'),
-      closeWorkspaceGroup: false,
-    });
-  }, [orders, setOrders, createOrderBasketItem, concept, closeWorkspace]);
+    closeWorkspace({ discardUnsavedChanges: true });
+  }, [orders, setOrders, createOrderBasketItem, concept, closeWorkspace, visit]);
 
   const removeFromBasket = useCallback(() => {
     setOrders(orders.filter((order) => order?.concept?.uuid !== concept?.uuid));
@@ -227,7 +233,7 @@ const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({
         <Button
           kind="ghost"
           renderIcon={(props: ComponentProps<typeof ArrowRightIcon>) => <ArrowRightIcon size={16} {...props} />}
-          onClick={() => openOrderForm(createOrderBasketItem(concept))}
+          onClick={() => openOrderForm(createOrderBasketItem(concept, visit))}
         >
           {t('goToDrugOrderForm', 'Order form')}
         </Button>

package/src/order-basket/general-order-type/general-order-form/general-order-form.component.tsx

@@ -19,11 +19,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import {
   priorityOptions,
-  type DefaultPatientWorkspaceProps,
   type OrderBasketItem,
   type OrderUrgency,
   useOrderBasket,
   useOrderType,
+  postOrder,
+  useMutatePatientOrders,
 } from '@openmrs/esm-patient-common-lib';
 import {
   useLayoutType,
@@ -31,36 +32,40 @@ import {
   useConfig,
   ExtensionSlot,
   OpenmrsDatePicker,
-  launchWorkspace,
+  type Workspace2DefinitionProps,
+  showSnackbar,
+  useAbortController,
 } from '@openmrs/esm-framework';
 import { ordersEqual, prepOrderPostData } from '../resources';
 import { type ConfigObject } from '../../../config-schema';
 import styles from './general-order-form.scss';
 
-export interface OrderFormProps extends DefaultPatientWorkspaceProps {
+export interface OrderFormProps {
   initialOrder: OrderBasketItem;
   orderTypeUuid: string;
-  orderableConceptSets: Array<string>;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+  setHasUnsavedChanges: (hasUnsavedChanges: boolean) => void;
+  patient: fhir.Patient;
 }
 
 // Designs:
 //   https://app.zeplin.io/project/60d5947dd636aebbd63dce4c/screen/640b06c440ee3f7af8747620
 //   https://app.zeplin.io/project/60d5947dd636aebbd63dce4c/screen/640b06d286e0aa7b0316db4a
 export function OrderForm({
+  patient,
   initialOrder,
-  closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
   orderTypeUuid,
+  closeWorkspace,
+  setHasUnsavedChanges,
 }: OrderFormProps) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
-  const isEditing = useMemo(() => initialOrder && initialOrder.action === 'REVISE', [initialOrder]);
-  const { orders, setOrders } = useOrderBasket<OrderBasketItem>(orderTypeUuid, prepOrderPostData);
+  const { orders, setOrders, clearOrders } = useOrderBasket<OrderBasketItem>(patient, orderTypeUuid, prepOrderPostData);
   const [showErrorNotification, setShowErrorNotification] = useState(false);
   const { orderType } = useOrderType(orderTypeUuid);
   const config = useConfig<ConfigObject>();
+  const { mutate: mutateOrders } = useMutatePatientOrders(patient.id);
 
   const OrderFormSchema = useMemo(
     () =>
@@ -107,7 +112,7 @@ export function OrderForm({
     return menu?.item?.value?.toLowerCase().includes(menu?.inputValue?.toLowerCase());
   }, []);
 
-  const handleFormSubmission = useCallback(
+  const saveOrderToBasket = useCallback(
     (data: OrderBasketItem) => {
       const finalizedOrder: OrderBasketItem = {
         ...initialOrder,
@@ -130,22 +135,55 @@ export function OrderForm({
 
       setOrders(newOrders);
 
-      closeWorkspaceWithSavedChanges({
-        onWorkspaceClose: () => launchWorkspace('order-basket'),
-        closeWorkspaceGroup: false,
-      });
+      closeWorkspace({ discardUnsavedChanges: true });
     },
-    [orders, setOrders, session?.currentProvider?.uuid, closeWorkspaceWithSavedChanges, initialOrder],
+    [orders, setOrders, session?.currentProvider?.uuid, initialOrder, closeWorkspace],
+  );
+
+  const submitDrugOrderToServer = useCallback(
+    (data: OrderBasketItem) => {
+      const finalizedOrder: OrderBasketItem = {
+        ...initialOrder,
+        ...data,
+      };
+      finalizedOrder.orderer = session.currentProvider.uuid;
+
+      postOrder(prepOrderPostData(finalizedOrder, patient.id, finalizedOrder?.encounterUuid))
+        .then(() => {
+          clearOrders();
+          mutateOrders();
+          showSnackbar({
+            isLowContrast: false,
+            kind: 'success',
+            title: t('successSavingDrugOrder', 'Order saved'),
+          });
+          closeWorkspace({ discardUnsavedChanges: true });
+        })
+        .catch((error) => {
+          showSnackbar({
+            isLowContrast: false,
+            kind: 'error',
+            title: t('errorSavingDrugOrder', 'Error saving order'),
+            subtitle: error,
+          });
+        });
+    },
+    [clearOrders, closeWorkspace, initialOrder, mutateOrders, patient.id, session.currentProvider.uuid, t],
   );
 
   const cancelOrder = useCallback(() => {
-    setOrders(orders.filter((order) => order.concept.uuid !== defaultValues.concept.conceptUuid));
-    closeWorkspace({
-      onWorkspaceClose: () => launchWorkspace('order-basket'),
-      closeWorkspaceGroup: false,
+    closeWorkspace().then((didClose: boolean) => {
+      if (didClose) {
+        setOrders(orders.filter((order) => order.concept.uuid !== defaultValues.concept.conceptUuid));
+      }
     });
   }, [closeWorkspace, orders, setOrders, defaultValues]);
 
+  const closeModifyOrderWorkspace = useCallback(() => {
+    clearOrders();
+    closeWorkspace();
+  }, [clearOrders, closeWorkspace]);
+
   const onError = (errors: FieldErrors<OrderBasketItem>) => {
     if (errors) {
       setShowErrorNotification(true);
@@ -163,14 +201,18 @@ export function OrderForm({
   };
 
   useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
+    setHasUnsavedChanges(isDirty);
+  }, [isDirty, setHasUnsavedChanges]);
 
   const responsiveSize = isTablet ? 'lg' : 'sm';
 
   return (
     <>
-      <Form className={styles.orderForm} onSubmit={handleSubmit(handleFormSubmission, onError)} id="drugOrderForm">
+      <Form
+        className={styles.orderForm}
+        onSubmit={handleSubmit(initialOrder?.action == 'REVISE' ? submitDrugOrderToServer : saveOrderToBasket, onError)}
+        id="drugOrderForm"
+      >
         <div className={styles.form}>
           <ExtensionSlot name="top-of-lab-order-form-slot" state={{ order: initialOrder }} />
           <Grid className={styles.gridRow}>
@@ -293,7 +335,12 @@ export function OrderForm({
           <ButtonSet
             className={classNames(styles.buttonSet, isTablet ? styles.tabletButtonSet : styles.desktopButtonSet)}
           >
-            <Button className={styles.button} kind="secondary" onClick={cancelOrder} size="xl">
+            <Button
+              className={styles.button}
+              kind="secondary"
+              onClick={initialOrder?.action == 'REVISE' ? closeModifyOrderWorkspace : cancelOrder}
+              size="xl"
+            >
               {t('discard', 'Discard')}
             </Button>
             <Button className={styles.button} kind="primary" size="xl" type="submit">

package/src/order-basket/general-order-type/{general-order-type.component.tsx → general-order-panel.component.tsx}

@@ -1,15 +1,7 @@
 import React, { type ComponentProps, useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Tile } from '@carbon/react';
 import classNames from 'classnames';
-import {
-  AddIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  type DefaultWorkspaceProps,
-  MaybeIcon,
-  useLayoutType,
-  launchWorkspace,
-} from '@openmrs/esm-framework';
+import { AddIcon, ChevronDownIcon, ChevronUpIcon, MaybeIcon, useLayoutType } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { type OrderBasketItem, useOrderBasket, useOrderType } from '@openmrs/esm-patient-common-lib';
 import { type OrderTypeDefinition } from '../../config-schema';
@@ -18,15 +10,29 @@ import OrderBasketItemTile from './order-basket-item-tile.component';
 import styles from './general-order-panel.scss';
 
 interface GeneralOrderTypeProps extends OrderTypeDefinition {
-  closeWorkspace: DefaultWorkspaceProps['closeWorkspace'];
+  patient: fhir.Patient;
+  orderTypeUuid: string;
+  launchGeneralOrderForm(orderTypeUuid: string, order?: OrderBasketItem): void;
 }
 
-const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, closeWorkspace, label, icon }) => {
+/**
+ * The extension is slotted into order-basket-slot in the main Order Basket workspace by default.
+ * It renders the "Add +" button for general orders, and lists pending general orders in the order basket.
+ *
+ * Designs: https://app.zeplin.io/project/60d59321e8100b0324762e05/screen/62c6bb9500e7671a618efa56
+ */
+const GeneralOrderPanel: React.FC<GeneralOrderTypeProps> = ({
+  patient,
+  orderTypeUuid,
+  label,
+  icon,
+  launchGeneralOrderForm,
+}) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const { orderType, isLoadingOrderType } = useOrderType(orderTypeUuid);
 
-  const { orders, setOrders } = useOrderBasket<OrderBasketItem>(orderTypeUuid, prepOrderPostData);
+  const { orders, setOrders } = useOrderBasket<OrderBasketItem>(patient, orderTypeUuid, prepOrderPostData);
   const [isExpanded, setIsExpanded] = useState(orders.length > 0);
   const {
     incompleteOrderBasketItems,
@@ -64,29 +70,6 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
     };
   }, [orders]);
 
-  const openConceptSearch = () => {
-    closeWorkspace({
-      ignoreChanges: true,
-      onWorkspaceClose: () =>
-        launchWorkspace('orderable-concept-workspace', {
-          orderTypeUuid,
-        }),
-      closeWorkspaceGroup: false,
-    });
-  };
-
-  const openOrderForm = (order: OrderBasketItem) => {
-    closeWorkspace({
-      ignoreChanges: true,
-      onWorkspaceClose: () =>
-        launchWorkspace('orderable-concept-workspace', {
-          order,
-          orderTypeUuid,
-        }),
-      closeWorkspaceGroup: false,
-    });
-  };
-
   const removeOrder = useCallback(
     (order: OrderBasketItem) => {
       const newOrders = [...orders];
@@ -119,7 +102,7 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
             kind="ghost"
             renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
             iconDescription={t('addMedication', 'Add medication')}
-            onClick={openConceptSearch}
+            onClick={() => launchGeneralOrderForm(orderTypeUuid)}
             size={isTablet ? 'md' : 'sm'}
           >
             {t('add', 'Add')}
@@ -147,7 +130,7 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
                 <OrderBasketItemTile
                   key={`incomplete-${order.action}-${order.concept?.uuid}-${index}`}
                   orderBasketItem={order}
-                  onItemClick={() => openOrderForm(order)}
+                  onItemClick={() => launchGeneralOrderForm(orderTypeUuid, order)}
                   onRemoveClick={() => removeOrder(order)}
                 />
               ))}
@@ -159,7 +142,7 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
                 <OrderBasketItemTile
                   key={`new-${order.action}-${order.concept?.uuid}-${index}`}
                   orderBasketItem={order}
-                  onItemClick={() => openOrderForm(order)}
+                  onItemClick={() => launchGeneralOrderForm(orderTypeUuid, order)}
                   onRemoveClick={() => removeOrder(order)}
                 />
               ))}
@@ -172,7 +155,7 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
                 <OrderBasketItemTile
                   key={`renewed-${item.action}-${item.concept?.uuid}-${index}`}
                   orderBasketItem={item}
-                  onItemClick={() => openOrderForm(item)}
+                  onItemClick={() => launchGeneralOrderForm(orderTypeUuid, item)}
                   onRemoveClick={() => removeOrder(item)}
                 />
               ))}
@@ -185,7 +168,7 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
                 <OrderBasketItemTile
                   key={`revised-${item.action}-${item.concept?.uuid}-${index}`}
                   orderBasketItem={item}
-                  onItemClick={() => openOrderForm(item)}
+                  onItemClick={() => launchGeneralOrderForm(orderTypeUuid, item)}
                   onRemoveClick={() => removeOrder(item)}
                 />
               ))}
@@ -198,7 +181,7 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
                 <OrderBasketItemTile
                   key={`discontinued-${item.action}-${item.concept?.uuid}-${index}`}
                   orderBasketItem={item}
-                  onItemClick={() => openOrderForm(item)}
+                  onItemClick={() => launchGeneralOrderForm(orderTypeUuid, item)}
                   onRemoveClick={() => removeOrder(item)}
                 />
               ))}
@@ -210,4 +193,4 @@ const GeneralOrderType: React.FC<GeneralOrderTypeProps> = ({ orderTypeUuid, clos
   );
 };
 
-export default GeneralOrderType;
+export default GeneralOrderPanel;

package/src/order-basket/general-order-type/resources.ts

@@ -1,4 +1,4 @@
-import { toOmrsIsoString } from '@openmrs/esm-framework';
+import { toOmrsIsoString, type Visit } from '@openmrs/esm-framework';
 import {
   type OrderBasketItem,
   priorityOptions,
@@ -7,13 +7,14 @@ import {
   type OrderableConcept,
 } from '@openmrs/esm-patient-common-lib';
 
-export function createEmptyOrder(concept: OrderableConcept, orderer: string): OrderBasketItem {
+export function createEmptyOrder(concept: OrderableConcept, orderer: string, visit: Visit): OrderBasketItem {
   return {
     action: 'NEW',
     urgency: priorityOptions[0].value as OrderUrgency,
     display: concept.display,
     concept,
     orderer,
+    visit,
   };
 }