(fix) O3-3737: Fix pending items configuration on ward patient card (#…

…1324)

* feat: configure pending orders

* rename pending-orders to pending-items slot name

* (fix): fix pendingItems config

packages/esm-ward-app/src/config-schema-pending-items-extension.ts

@@ -0,0 +1,29 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const pendingItemsExtensionConfigSchema = {
+  orders: {
+    orderTypes: {
+      _type: Type.Array,
+      _description: 'Defines order types displayed on the ward patient card pending items section.',
+      _default: [{ label: 'Labs', uuid: '52a447d3-a64a-11e3-9aeb-50e549534c5e' }],
+      _elements: {
+        uuid: {
+          _type: Type.UUID,
+          _description: 'Identifies the order type.',
+        },
+        label: {
+          _type: Type.String,
+          _description:
+            "The label or i18n key to the translated label to display. If not provided, defaults to 'Orders'",
+          _default: null,
+        },
+      },
+    },
+  },
+  showPendingItems: {
+    _type: Type.Boolean,
+    _description:
+      'Optional. If true, pending items (e.g., number of pending orders) will be displayed on the patient card.',
+    _default: true,
+  },
+};

packages/esm-ward-app/src/config-schema.ts

@@ -185,18 +185,20 @@ export interface WardConfigObject {
 
 export interface WardPatientCardsConfig {
   obsElementDefinitions: Array<ObsElementDefinition>;
-  pendingOrderTypesDefinitions: Array<PendingOrderTypesDefinition>;
+  pendingItemsDefinitions: Array<PendingItemsDefinition>;
   identifierElementDefinitions: Array<IdentifierElementDefinition>;
   addressElementDefinitions: Array<AddressElementDefinition>;
   cardDefinitions: Array<WardPatientCardDefinition>;
 }
 
-export interface PendingOrderTypesDefinition {
-  enabled: boolean;
-  orderTypes: Array<{
-    label?: string;
-    uuid: string;
-  }>;
+export interface PendingItemsDefinition {
+  showPendingItems: boolean;
+  orders: {
+    orderTypes: Array<{
+      label?: string;
+      uuid: string;
+    }>;
+  };
 }
 
 export interface ObsElementDefinition {

packages/esm-ward-app/src/index.ts

@@ -13,7 +13,7 @@ import { moduleName } from './constant';
 import { createDashboardLink } from './createDashboardLink.component';
 import rootComponent from './root.component';
 import { motherChildRowConfigSchema } from './config-schema-mother-child-row';
-import { pendingOrdersExtensionConfigSchema } from './config-schema-pending-orders-extension';
+import { pendingItemsExtensionConfigSchema } from './config-schema-pending-items-extension';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -74,8 +74,8 @@ export const motherChildRowExtension = getAsyncLifecycle(
   options,
 );
 
-export const pendingOrdersExtension = getAsyncLifecycle(
-  () => import('./ward-patient-card/card-rows/pending-orders.extension'),
+export const pendingItemsCardRowExtension = getAsyncLifecycle(
+  () => import('./ward-patient-card/card-rows/pending-items-car-row.extension'),
   options,
 );
 
@@ -113,7 +113,7 @@ export function startupApp() {
   defineExtensionConfigSchema('colored-obs-tags-card-row', coloredObsTagsCardRowConfigSchema);
   defineExtensionConfigSchema('admission-request-note-card-row', admissionRequestNoteRowConfigSchema);
   defineExtensionConfigSchema('mother-child-card-row', motherChildRowConfigSchema);
-  defineExtensionConfigSchema('ward-patient-pending-orders', pendingOrdersExtensionConfigSchema);
+  defineExtensionConfigSchema('ward-patient-pending-items-card-row', pendingItemsExtensionConfigSchema);
 
   registerFeatureFlag(
     'bedmanagement-module',

packages/esm-ward-app/src/routes.json

@@ -66,8 +66,8 @@
       "slot": "ward-patient-card-slot"
     },
     {
-      "component": "pendingOrdersExtension",
-      "name": "ward-patient-pending-orders",
+      "component": "pendingItemsCardRowExtension",
+      "name": "ward-patient-pending-items-card-row",
       "slot": "ward-patient-card-pending-items-slot"
     }
   ],

packages/esm-ward-app/src/ward-patient-card/card-rows/pending-items-car-row.extension.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect } from 'react';
+import { type WardPatientCard } from '../../types';
+import { Hourglass } from '@carbon/react/icons';
+
+import { useConfig } from '@openmrs/esm-framework';
+import type { PendingItemsDefinition } from '../../config-schema';
+import { WardPatientPendingOrder } from '../row-elements/ward-patient-pending-order.component';
+import styles from '../ward-patient-card.scss';
+import WardPatientPendingTransfer from '../row-elements/ward-patient-pending-transfer';
+
+const PendingItemsCarRowExtension: WardPatientCard = (wardPatient) => {
+  const { orders, showPendingItems } = useConfig<PendingItemsDefinition>();
+  const [hasPendingOrders, setHasPendingOrders] = React.useState(false);
+
+  const hasPendingItems = !!wardPatient?.inpatientRequest || hasPendingOrders;
+
+  const handlePendingOrderCount = useCallback((count: number) => {
+    if (count > 0) {
+      setHasPendingOrders(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!orders?.orderTypes?.length) {
+      setHasPendingOrders(false);
+    }
+  }, [orders]);
+
+  return (
+    <div className={styles.wardPatientCardPendingItemsRow}>
+      {showPendingItems && hasPendingItems ? (
+        <>
+          <Hourglass className={styles.hourGlassIcon} size="16" />:
+        </>
+      ) : null}
+      {orders?.orderTypes.map(({ uuid, label }) => (
+        <WardPatientPendingOrder
+          key={`pending-order-type-${uuid}`}
+          wardPatient={wardPatient}
+          orderUuid={uuid}
+          label={label}
+          onOrderCount={handlePendingOrderCount}
+        />
+      ))}
+      {wardPatient?.inpatientRequest ? <WardPatientPendingTransfer wardPatient={wardPatient} /> : null}
+    </div>
+  );
+};
+
+export default PendingItemsCarRowExtension;

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-order.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ChemistryReference } from '@carbon/react/icons';
 import styles from '../ward-patient-card.scss';
 import { useTranslation } from 'react-i18next';
@@ -9,16 +9,28 @@ export interface WardPatientPendingOrderProps {
   wardPatient: WardPatient;
   orderUuid: string;
   label: string;
+  onOrderCount: (count: number) => void; // New prop for notifying parent
 }
 
-export const WardPatientPendingOrder: React.FC<WardPatientPendingOrderProps> = ({ wardPatient, orderUuid, label }) => {
+export const WardPatientPendingOrder: React.FC<WardPatientPendingOrderProps> = ({
+  wardPatient,
+  orderUuid,
+  label,
+  onOrderCount,
+}) => {
   const { t } = useTranslation();
   const { count, isLoading } = usePatientPendingOrders(
     wardPatient?.patient?.uuid,
     orderUuid,
     wardPatient?.visit?.startDatetime.split('T')[0],
   );
 
+  useEffect(() => {
+    if (!isLoading) {
+      onOrderCount(count); // Notify parent when count is available
+    }
+  }, [count, isLoading, onOrderCount]);
+
   if (isLoading || !count || count == 0) {
     return null;
   }

packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx

@@ -1,20 +1,16 @@
-import { ExtensionSlot, getPatientName, launchWorkspace, useConfig } from '@openmrs/esm-framework';
+import { ExtensionSlot, getPatientName, launchWorkspace } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 import React from 'react';
-import { Hourglass } from '@carbon/react/icons';
 import { useCurrentWardCardConfig } from '../hooks/useCurrentWardCardConfig';
 import { type WardPatientCard, type WardPatientWorkspaceProps } from '../types';
 import WardPatientBedNumber from './row-elements/ward-patient-bed-number';
 import WardPatientName from './row-elements/ward-patient-name';
 import { WardPatientCardElement } from './ward-patient-card-element.component';
 import styles from './ward-patient-card.scss';
-import WardPatientPendingTransfer from './row-elements/ward-patient-pending-transfer';
-import { type PendingOrderTypesDefinition } from '../config-schema';
 
 const WardPatientCard: WardPatientCard = (wardPatient) => {
   const { patient, bed } = wardPatient;
   const { id, headerRowElements, footerRowElements } = useCurrentWardCardConfig();
-  const { enabled: showPendingOrders } = useConfig<PendingOrderTypesDefinition>();
 
   const headerExtensionSlotName =
     id == 'default' ? 'ward-patient-card-header-slot' : `ward-patient-card-header-${id}-slot`;
@@ -36,6 +32,16 @@ const WardPatientCard: WardPatientCard = (wardPatient) => {
         ))}
         <ExtensionSlot name={headerExtensionSlotName} state={wardPatient} />
       </div>
+      <ExtensionSlot
+        name="ward-patient-card-pending-items-slot"
+        state={wardPatient}
+        className={styles.wardPatientCardExtensionSlot}
+      />
+      <ExtensionSlot
+        name={rowsExtensionSlotName}
+        state={wardPatient}
+        className={classNames(styles.wardPatientCardRow, styles.wardPatientCardExtensionSlot)}
+      />
       <div className={styles.wardPatientCardRow}>
         {footerRowElements.map((elementId, i) => (
           <WardPatientCardElement
@@ -46,22 +52,6 @@ const WardPatientCard: WardPatientCard = (wardPatient) => {
         ))}
         <ExtensionSlot name={footerExtensionSlotName} state={wardPatient} />
       </div>
-      {wardPatient?.inpatientRequest || showPendingOrders ? (
-        <div className={styles.wardPatientCardPendingItemsRow}>
-          <Hourglass className={styles.hourGlassIcon} size="16" />:
-          <ExtensionSlot
-            name="ward-patient-card-pending-items-slot"
-            state={wardPatient}
-            className={classNames(styles.wardPatientPendingOrdersRow, styles.wardPatientCardExtensionSlot)}
-          />
-          {wardPatient?.inpatientRequest ? <WardPatientPendingTransfer wardPatient={wardPatient} /> : null}
-        </div>
-      ) : null}
-      <ExtensionSlot
-        name={rowsExtensionSlotName}
-        state={wardPatient}
-        className={classNames(styles.wardPatientCardExtensionSlot)}
-      />
       <button
         className={styles.wardPatientCardButton}
         onClick={() => {

packages/esm-ward-app/src/ward-patient-card/ward-patient-card.scss

@@ -77,9 +77,9 @@
   }
 }
 
-.wardPatientCardHeader {
-  @extend .dotSeparatedChildren;
-  border-top: 0;
+.wardPatientCardPendingItemsRow:empty {
+  display: none;
+  margin-left: layout.$spacing-04;
 }
 
 .wardPatientCardPendingItemsRow {
@@ -91,6 +91,11 @@
   background-color: colors.$gray-80;
 }
 
+.wardPatientCardHeader {
+  @extend .dotSeparatedChildren;
+  border-top: 0;
+}
+
 .wardPatientCardDispositionTypeContainer {
   display: flex;
   flex-flow: row;