@openmrs/esm-patient-orders-app 11.3.1-pre.9452 → 11.3.1-pre.9458

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

@@ -1,53 +1,40 @@
-import React, { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { type ComponentProps, useCallback, useMemo, useRef, useState } from 'react';
 import { Button, Search } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import {
   ArrowLeftIcon,
-  launchWorkspace,
   ResponsiveWrapper,
   useConfig,
   useDebounce,
   useLayoutType,
-  type DefaultWorkspaceProps,
+  type Visit,
+  Workspace2,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
-import {
-  type DefaultPatientWorkspaceProps,
-  type OrderBasketItem,
-  useOrderBasket,
-  useOrderType,
-} from '@openmrs/esm-patient-common-lib';
+import { type OrderBasketItem, useOrderBasket, useOrderType } from '@openmrs/esm-patient-common-lib';
 import { OrderForm } from '../general-order-form/general-order-form.component';
 import { prepOrderPostData } from '../resources';
 import { type ConfigObject } from '../../../config-schema';
 import OrderableConceptSearchResults from './search-results.component';
 import styles from './orderable-concept-search.scss';
 
-interface OrderableConceptSearchWorkspaceProps extends DefaultPatientWorkspaceProps {
-  order: OrderBasketItem;
+interface AddGeneralOrderProps {
+  initialOrder: OrderBasketItem;
   orderTypeUuid: string;
-  orderableConceptClasses: Array<string>;
-  orderableConceptSets: Array<string>;
-}
-
-export const careSettingUuid = '6f0c9a92-6f24-11e3-af88-005056821db0';
-
-type DrugsOrOrders = Pick<OrderBasketItem, 'action' | 'concept'>;
-
-export function ordersEqual(order1: DrugsOrOrders, order2: DrugsOrOrders) {
-  return order1.action === order2.action && order1.concept.uuid === order2.concept.uuid;
+  patient: fhir.Patient;
+  visitContext: Visit;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
 }
 
-const OrderableConceptSearchWorkspace: React.FC<OrderableConceptSearchWorkspaceProps> = ({
-  order: initialOrder,
+/**
+ * This workspace displays the drug order form for adding or editing a general order.
+ */
+const AddGeneralOrder: React.FC<AddGeneralOrderProps> = ({
+  initialOrder,
   orderTypeUuid,
-  closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
-  setTitle,
-  patientUuid,
   patient,
   visitContext,
-  mutateVisitContext,
+  closeWorkspace,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -55,16 +42,23 @@ const OrderableConceptSearchWorkspace: React.FC<OrderableConceptSearchWorkspaceP
   const { orderTypes } = useConfig<ConfigObject>();
   const [currentOrder, setCurrentOrder] = useState(initialOrder);
   const { orderType } = useOrderType(orderTypeUuid);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  useEffect(() => {
+  const title = useMemo(() => {
     if (orderType) {
-      setTitle(
-        t(`addOrderableForOrderType`, 'Add {{orderTypeDisplay}}', {
+      if (initialOrder?.action == 'REVISE') {
+        return t(`editOrderableForOrderType`, 'Edit {{orderTypeDisplay}}', {
           orderTypeDisplay: orderType.display.toLocaleLowerCase(),
-        }),
-      );
+        });
+      } else {
+        return t(`addOrderableForOrderType`, 'Add {{orderTypeDisplay}}', {
+          orderTypeDisplay: orderType.display.toLocaleLowerCase(),
+        });
+      }
+    } else {
+      return '';
     }
-  }, [orderType, t, setTitle]);
+  }, [orderType, t, initialOrder?.action]);
 
   const orderableConceptSets = useMemo(
     () => orderTypes.find((orderType) => orderType.orderTypeUuid === orderTypeUuid).orderableConceptSets,
@@ -72,10 +66,7 @@ const OrderableConceptSearchWorkspace: React.FC<OrderableConceptSearchWorkspaceP
   );
 
   const cancelDrugOrder = useCallback(() => {
-    closeWorkspace({
-      onWorkspaceClose: () => launchWorkspace('order-basket'),
-      closeWorkspaceGroup: false,
-    });
+    closeWorkspace();
   }, [closeWorkspace]);
 
   const openOrderForm = useCallback(
@@ -91,53 +82,51 @@ const OrderableConceptSearchWorkspace: React.FC<OrderableConceptSearchWorkspaceP
   );
 
   return (
-    <div className={styles.workspaceWrapper}>
-      {!isTablet && (
-        <div className={styles.backButton}>
-          <Button
-            iconDescription="Return to order basket"
-            kind="ghost"
-            onClick={cancelDrugOrder}
-            renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
-            size="sm"
-          >
-            <span>{t('backToOrderBasket', 'Back to order basket')}</span>
-          </Button>
-        </div>
-      )}
-      {currentOrder ? (
-        <OrderForm
-          initialOrder={currentOrder}
-          closeWorkspace={closeWorkspace}
-          closeWorkspaceWithSavedChanges={closeWorkspaceWithSavedChanges}
-          promptBeforeClosing={promptBeforeClosing}
-          orderTypeUuid={orderTypeUuid}
-          orderableConceptSets={orderableConceptSets}
-          patientUuid={patientUuid}
-          patient={patient}
-          visitContext={visitContext}
-          mutateVisitContext={mutateVisitContext}
-          setTitle={() => {}}
-        />
-      ) : (
-        <ConceptSearch
-          openOrderForm={openOrderForm}
-          closeWorkspace={closeWorkspace}
-          orderableConceptSets={orderableConceptSets}
-          orderTypeUuid={orderTypeUuid}
-          patient={patient}
-        />
-      )}
-    </div>
+    <Workspace2 title={title} hasUnsavedChanges={hasUnsavedChanges}>
+      <div className={styles.workspaceWrapper}>
+        {!isTablet && (
+          <div className={styles.backButton}>
+            <Button
+              iconDescription="Return to order basket"
+              kind="ghost"
+              onClick={cancelDrugOrder}
+              renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
+              size="sm"
+            >
+              <span>{t('backToOrderBasket', 'Back to order basket')}</span>
+            </Button>
+          </div>
+        )}
+        {currentOrder ? (
+          <OrderForm
+            initialOrder={currentOrder}
+            closeWorkspace={closeWorkspace}
+            setHasUnsavedChanges={setHasUnsavedChanges}
+            orderTypeUuid={orderTypeUuid}
+            patient={patient}
+          />
+        ) : (
+          <ConceptSearch
+            openOrderForm={openOrderForm}
+            closeWorkspace={closeWorkspace}
+            orderableConceptSets={orderableConceptSets}
+            orderTypeUuid={orderTypeUuid}
+            patient={patient}
+            visit={visitContext}
+          />
+        )}
+      </div>
+    </Workspace2>
   );
 };
 
 interface ConceptSearchProps {
-  closeWorkspace: DefaultWorkspaceProps['closeWorkspace'];
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
   openOrderForm: (search: OrderBasketItem) => void;
   orderTypeUuid: string;
   orderableConceptSets: Array<string>;
   patient: fhir.Patient;
+  visit: Visit;
 }
 
 function ConceptSearch({
@@ -146,6 +135,7 @@ function ConceptSearch({
   openOrderForm,
   orderableConceptSets,
   patient,
+  visit,
 }: ConceptSearchProps) {
   const { t } = useTranslation();
   const { orderType } = useOrderType(orderTypeUuid);
@@ -155,9 +145,7 @@ function ConceptSearch({
   const searchInputRef = useRef(null);
 
   const cancelDrugOrder = useCallback(() => {
-    closeWorkspace({
-      onWorkspaceClose: () => launchWorkspace('order-basket'),
-    });
+    closeWorkspace();
   }, [closeWorkspace]);
 
   const focusAndClearSearchInput = () => {
@@ -191,11 +179,12 @@ function ConceptSearch({
         searchTerm={debouncedSearchTerm}
         openOrderForm={openOrderForm}
         focusAndClearSearchInput={focusAndClearSearchInput}
-        closeWorkspace={closeWorkspace}
         orderTypeUuid={orderTypeUuid}
         cancelOrder={() => {}}
         orderableConceptSets={orderableConceptSets}
+        closeWorkspace={closeWorkspace}
         patient={patient}
+        visit={visit}
       />
       {isTablet && (
         <div className={styles.separatorContainer}>
@@ -209,4 +198,10 @@ function ConceptSearch({
   );
 }
 
-export default OrderableConceptSearchWorkspace;
+type DrugsOrOrders = Pick<OrderBasketItem, 'action' | 'concept'>;
+
+function ordersEqual(order1: DrugsOrOrders, order2: DrugsOrOrders) {
+  return order1.action === order2.action && order1.concept.uuid === order2.concept.uuid;
+}
+
+export default AddGeneralOrder;

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

@@ -0,0 +1,38 @@
+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 order form for adding or editing a general order.
+ *
+ * This workspace must only be used within the patient chart.
+ * @see exported-add-general-order.workspace.tsx
+ */
+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,35 @@
+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.
+ *
+ * This workspace is meant for use outside the patient chart.
+ * @see exported-add-general-order.workspace.tsx
+ */
+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,8 +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> = ({
@@ -40,6 +41,7 @@ const OrderableConceptSearchResults: React.FC<OrderableConceptSearchResultsProps
   orderTypeUuid,
   closeWorkspace,
   patient,
+  visit,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -92,6 +94,7 @@ const OrderableConceptSearchResults: React.FC<OrderableConceptSearchResultsProps
                 orderTypeUuid={orderTypeUuid}
                 closeWorkspace={closeWorkspace}
                 patient={patient}
+                visit={visit}
               />
             ))}
           </div>
@@ -156,8 +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> = ({
@@ -166,6 +170,7 @@ const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({
   orderTypeUuid,
   closeWorkspace,
   patient,
+  visit,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -178,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));
@@ -232,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,37 +32,39 @@ import {
   useConfig,
   ExtensionSlot,
   OpenmrsDatePicker,
-  launchWorkspace,
+  type Workspace2DefinitionProps,
+  showSnackbar,
 } 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({
-  initialOrder,
-  closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
   patient,
+  initialOrder,
   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>(patient, 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(
     () =>
@@ -108,7 +111,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,
@@ -131,22 +134,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);
@@ -164,20 +200,24 @@ 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}>
             <Column lg={16} md={8} sm={4}>
               <InputWrapper>
-                <span className={styles.testTypeLabel}>{t('testType', 'Test type')}</span>
+                <label className={styles.testTypeLabel}>{t('testType', 'Test type')}</label>
                 <p className={styles.testType}>{initialOrder?.concept?.display}</p>
               </InputWrapper>
             </Column>
@@ -294,7 +334,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">