diff --git a/packages/esm-patient-common-lib/src/orders/useOrders.ts b/packages/esm-patient-common-lib/src/orders/useOrders.ts index 7afb8611a9..87de8cf147 100644 --- a/packages/esm-patient-common-lib/src/orders/useOrders.ts +++ b/packages/esm-patient-common-lib/src/orders/useOrders.ts @@ -1,8 +1,9 @@ +import { useCallback, useMemo } from 'react'; import useSWR, { useSWRConfig } from 'swr'; import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework'; -import { useCallback, useMemo } from 'react'; import { type OrderTypeFetchResponse, type PatientOrderFetchResponse } from '@openmrs/esm-patient-common-lib'; +export type Status = 'ACTIVE' | 'any'; export const careSettingUuid = '6f0c9a92-6f24-11e3-af88-005056821db0'; export const drugCustomRepresentation = @@ -13,7 +14,7 @@ export const drugCustomRepresentation = 'frequency:ref,asNeeded,asNeededCondition,quantity,quantityUnits:ref,numRefills,dosingInstructions,' + 'duration,durationUnits:ref,route:ref,brandName,dispenseAsWritten)'; -export function usePatientOrders(patientUuid: string, status?: 'ACTIVE' | 'any', orderType?: string) { +export function usePatientOrders(patientUuid: string, status?: Status, orderType?: string) { const { mutate } = useSWRConfig(); const baseOrdersUrl = `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&v=full&status=${status}`; const ordersUrl = orderType ? `${baseOrdersUrl}&orderType=${orderType}` : baseOrdersUrl; @@ -26,7 +27,7 @@ export function usePatientOrders(patientUuid: string, status?: 'ACTIVE' | 'any', const mutateOrders = useCallback( () => mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/order?patient=${patientUuid}`), data), - [patientUuid, data, mutate], + [data, mutate, patientUuid], ); const orders = useMemo( @@ -54,7 +55,7 @@ export function useOrderTypes() { ); return { - data: data?.data?.results, + data: data?.data?.results ?? null, error, isLoading, isValidating, diff --git a/packages/esm-patient-orders-app/src/components/order-details-table.scss b/packages/esm-patient-orders-app/src/components/order-details-table.scss index c081f81c53..cea68c18c7 100644 --- a/packages/esm-patient-orders-app/src/components/order-details-table.scss +++ b/packages/esm-patient-orders-app/src/components/order-details-table.scss @@ -31,6 +31,10 @@ .dropdownContainer { min-width: max-content; + + :global(.cds--dropdown__wrapper--inline) { + grid-gap: 0 0.5rem; + } } .buttons { diff --git a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx index 3493800e92..80df0067a4 100644 --- a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx +++ b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx @@ -177,43 +177,45 @@ const OrderDetailsTable: React.FC = ({ patientUuid, showAddBu }, ]; - const tableRows = useMemo(() => { - return allOrders?.map((order) => ({ - id: order.uuid, - dateActivated: order.dateActivated, - orderNumber: order.orderNumber, - dateOfOrder:
{formatDate(new Date(order.dateActivated))}
, - orderType: capitalize(order.orderType?.display ?? '--'), - order: order.display, - priority: ( -
- { - // t('ON_SCHEDULED_DATE', 'On scheduled date') - // t('ROUTINE', 'Routine') - // t('STAT', 'STAT') - } - {t(order.urgency, capitalize(order.urgency.replace('_', ' ')))} -
- ), - orderedBy: order.orderer?.display, - status: order.fulfillerStatus ? ( -
- { - // t('RECEIVED', 'Received') - // t('IN_PROGRESS', 'In progress') - // t('EXCEPTION', 'Exception') - // t('ON_HOLD', 'On hold') - // t('DECLINED', 'Declined') - // t('COMPLETED', 'Completed') - // t('DISCONTINUED', 'Discontinued') - } - {t(order.fulfillerStatus, capitalize(order.fulfillerStatus.replace('_', ' ')))} -
- ) : ( - '--' - ), - })); - }, [allOrders, t]); + const tableRows = useMemo( + () => + allOrders?.map((order) => ({ + id: order.uuid, + dateActivated: order.dateActivated, + orderNumber: order.orderNumber, + dateOfOrder:
{formatDate(new Date(order.dateActivated))}
, + orderType: capitalize(order.orderType?.display ?? '--'), + order: order.display, + priority: ( +
+ { + // t('ON_SCHEDULED_DATE', 'On scheduled date') + // t('ROUTINE', 'Routine') + // t('STAT', 'STAT') + } + {t(order.urgency, capitalize(order.urgency.replace('_', ' ')))} +
+ ), + orderedBy: order.orderer?.display, + status: order.fulfillerStatus ? ( +
+ { + // t('RECEIVED', 'Received') + // t('IN_PROGRESS', 'In progress') + // t('EXCEPTION', 'Exception') + // t('ON_HOLD', 'On hold') + // t('DECLINED', 'Declined') + // t('COMPLETED', 'Completed') + // t('DISCONTINUED', 'Discontinued') + } + {t(order.fulfillerStatus, capitalize(order.fulfillerStatus.replace('_', ' ')))} +
+ ) : ( + '--' + ), + })) ?? [], + [allOrders, t], + ); const { results: paginatedOrders, goTo, currentPage } = usePagination(tableRows, defaultPageSize); @@ -301,7 +303,7 @@ const OrderDetailsTable: React.FC = ({ patientUuid, showAddBu setSelectedOrderTypeUuid(e.selectedItem.uuid); }} selectedItem={orderTypes?.find((x) => x.uuid === selectedOrderTypeUuid)} - titleText={t('selectOrderType', 'Select order type')} + titleText={t('selectOrderType', 'Select order type') + ':'} type="inline" /> @@ -318,8 +320,7 @@ const OrderDetailsTable: React.FC = ({ patientUuid, showAddBu if (orderTypes && orderTypes?.length > 0) { return ( <> - {!tableRows.length ? ( - // FIXME: The displayText translation is not working as expected + {!tableRows?.length ? ( = ({ patientUuid, showAddBu ? t('orders', 'Orders') : // t('Drug Order_few', 'Drug Orders') // t('Test Order_few', 'Test Orders') - t(selectedOrderName, { + t(selectedOrderName?.toLowerCase() ?? 'orders', { count: 3, default: selectedOrderName, })