From cdb8bbd6f392df50f2cded26edf84c3d7533a856 Mon Sep 17 00:00:00 2001 From: Usama Idriss Kakumba <53287480+usamaidrsk@users.noreply.github.com> Date: Mon, 23 Sep 2024 19:33:03 +0300 Subject: [PATCH] (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 --- .../config-schema-pending-items-extension.ts | 29 +++++++++++ .../config-schema-pending-orders-extension.ts | 25 ---------- packages/esm-ward-app/src/config-schema.ts | 16 +++--- packages/esm-ward-app/src/index.ts | 8 +-- packages/esm-ward-app/src/routes.json | 4 +- .../pending-items-car-row.extension.tsx | 50 +++++++++++++++++++ .../card-rows/pending-orders.extension.tsx | 28 ----------- .../ward-patient-pending-order.component.tsx | 16 +++++- .../ward-patient-card.component.tsx | 32 ++++-------- .../ward-patient-card/ward-patient-card.scss | 11 ++-- 10 files changed, 127 insertions(+), 92 deletions(-) create mode 100644 packages/esm-ward-app/src/config-schema-pending-items-extension.ts delete mode 100644 packages/esm-ward-app/src/config-schema-pending-orders-extension.ts create mode 100644 packages/esm-ward-app/src/ward-patient-card/card-rows/pending-items-car-row.extension.tsx delete mode 100644 packages/esm-ward-app/src/ward-patient-card/card-rows/pending-orders.extension.tsx diff --git a/packages/esm-ward-app/src/config-schema-pending-items-extension.ts b/packages/esm-ward-app/src/config-schema-pending-items-extension.ts new file mode 100644 index 000000000..985b5a1b2 --- /dev/null +++ b/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, + }, +}; diff --git a/packages/esm-ward-app/src/config-schema-pending-orders-extension.ts b/packages/esm-ward-app/src/config-schema-pending-orders-extension.ts deleted file mode 100644 index ed6ebc540..000000000 --- a/packages/esm-ward-app/src/config-schema-pending-orders-extension.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Type } from '@openmrs/esm-framework'; - -export const pendingOrdersExtensionConfigSchema = { - 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, - }, - }, - }, - enabled: { - _type: Type.Boolean, - _description: 'Optional. Enable pending order visibility on ward card pending items', - _default: true, - }, -}; diff --git a/packages/esm-ward-app/src/config-schema.ts b/packages/esm-ward-app/src/config-schema.ts index c574313ca..a4dfb5945 100644 --- a/packages/esm-ward-app/src/config-schema.ts +++ b/packages/esm-ward-app/src/config-schema.ts @@ -185,18 +185,20 @@ export interface WardConfigObject { export interface WardPatientCardsConfig { obsElementDefinitions: Array; - pendingOrderTypesDefinitions: Array; + pendingItemsDefinitions: Array; identifierElementDefinitions: Array; addressElementDefinitions: Array; cardDefinitions: Array; } -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 { diff --git a/packages/esm-ward-app/src/index.ts b/packages/esm-ward-app/src/index.ts index 06a6a344d..7474a605e 100644 --- a/packages/esm-ward-app/src/index.ts +++ b/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', diff --git a/packages/esm-ward-app/src/routes.json b/packages/esm-ward-app/src/routes.json index 9b5690071..77f9d532a 100644 --- a/packages/esm-ward-app/src/routes.json +++ b/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" } ], diff --git a/packages/esm-ward-app/src/ward-patient-card/card-rows/pending-items-car-row.extension.tsx b/packages/esm-ward-app/src/ward-patient-card/card-rows/pending-items-car-row.extension.tsx new file mode 100644 index 000000000..4cded2d6f --- /dev/null +++ b/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(); + 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 ( +
+ {showPendingItems && hasPendingItems ? ( + <> + : + + ) : null} + {orders?.orderTypes.map(({ uuid, label }) => ( + + ))} + {wardPatient?.inpatientRequest ? : null} +
+ ); +}; + +export default PendingItemsCarRowExtension; diff --git a/packages/esm-ward-app/src/ward-patient-card/card-rows/pending-orders.extension.tsx b/packages/esm-ward-app/src/ward-patient-card/card-rows/pending-orders.extension.tsx deleted file mode 100644 index fb7291508..000000000 --- a/packages/esm-ward-app/src/ward-patient-card/card-rows/pending-orders.extension.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { type WardPatientCard } from '../../types'; -import { useConfig } from '@openmrs/esm-framework'; -import type { PendingOrderTypesDefinition } from '../../config-schema'; -import { WardPatientPendingOrder } from '../row-elements/ward-patient-pending-order.component'; - -const PendingOrdersExtension: WardPatientCard = (wardPatient) => { - const { orderTypes, enabled } = useConfig(); - - if (!enabled || !orderTypes) { - return <>; - } - - return ( - <> - {orderTypes.map(({ uuid, label }) => ( - - ))} - - ); -}; - -export default PendingOrdersExtension; diff --git a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-order.component.tsx b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-order.component.tsx index ca73df645..dbaa9129a 100644 --- a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-order.component.tsx +++ b/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,9 +9,15 @@ export interface WardPatientPendingOrderProps { wardPatient: WardPatient; orderUuid: string; label: string; + onOrderCount: (count: number) => void; // New prop for notifying parent } -export const WardPatientPendingOrder: React.FC = ({ wardPatient, orderUuid, label }) => { +export const WardPatientPendingOrder: React.FC = ({ + wardPatient, + orderUuid, + label, + onOrderCount, +}) => { const { t } = useTranslation(); const { count, isLoading } = usePatientPendingOrders( wardPatient?.patient?.uuid, @@ -19,6 +25,12 @@ export const WardPatientPendingOrder: React.FC = ( 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; } diff --git a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx b/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx index 35bf1e1e0..d7b87084a 100644 --- a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx +++ b/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(); const headerExtensionSlotName = id == 'default' ? 'ward-patient-card-header-slot' : `ward-patient-card-header-${id}-slot`; @@ -36,6 +32,16 @@ const WardPatientCard: WardPatientCard = (wardPatient) => { ))} + +
{footerRowElements.map((elementId, i) => ( { ))}
- {wardPatient?.inpatientRequest || showPendingOrders ? ( -
- : - - {wardPatient?.inpatientRequest ? : null} -
- ) : null} -