From b0903f7f7c9dbc46914e38a3b5ff36cfb534458c Mon Sep 17 00:00:00 2001 From: McCarthy Date: Sun, 6 Oct 2024 21:43:30 +0300 Subject: [PATCH 1/2] fix: fix error-cannot read property length --- packages/esm-patient-common-lib/src/orders/useOrders.ts | 2 +- .../src/components/orders-details-table.component.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/esm-patient-common-lib/src/orders/useOrders.ts b/packages/esm-patient-common-lib/src/orders/useOrders.ts index 7afb8611a9..82a6bbcd76 100644 --- a/packages/esm-patient-common-lib/src/orders/useOrders.ts +++ b/packages/esm-patient-common-lib/src/orders/useOrders.ts @@ -33,7 +33,7 @@ export function usePatientOrders(patientUuid: string, status?: 'ACTIVE' | 'any', () => data?.data?.results ? data.data.results?.sort((order1, order2) => (order2.dateActivated > order1.dateActivated ? 1 : -1)) - : null, + : [], [data], ); 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..77bc0539c3 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 @@ -318,7 +318,7 @@ const OrderDetailsTable: React.FC = ({ patientUuid, showAddBu if (orderTypes && orderTypes?.length > 0) { return ( <> - {!tableRows.length ? ( + {!tableRows?.length ? ( // FIXME: The displayText translation is not working as expected Date: Mon, 14 Oct 2024 21:18:16 +0300 Subject: [PATCH 2/2] Additional tweaks --- .../src/orders/useOrders.ts | 11 +-- .../src/components/order-details-table.scss | 4 + .../orders-details-table.component.tsx | 81 ++++++++++--------- 3 files changed, 51 insertions(+), 45 deletions(-) diff --git a/packages/esm-patient-common-lib/src/orders/useOrders.ts b/packages/esm-patient-common-lib/src/orders/useOrders.ts index 82a6bbcd76..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,14 +27,14 @@ 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( () => data?.data?.results ? data.data.results?.sort((order1, order2) => (order2.dateActivated > order1.dateActivated ? 1 : -1)) - : [], + : null, [data], ); @@ -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 77bc0539c3..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" /> @@ -319,7 +321,6 @@ const OrderDetailsTable: React.FC = ({ patientUuid, showAddBu return ( <> {!tableRows?.length ? ( - // FIXME: The displayText translation is not working as expected = ({ 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, })