Merge branch 'openmrs:main' into O3-2801/O3-4025

openmrs · Oct 16, 2024 · bf2ed96 · bf2ed96
2 parents 7a42d97 + c49d112
commit bf2ed96
Show file tree

Hide file tree

Showing 8 changed files with 903 additions and 154 deletions.
diff --git 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
@@ -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
@@ -177,43 +177,45 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
     },
   ];
 
-  const tableRows = useMemo(() => {
-    return allOrders?.map((order) => ({
-      id: order.uuid,
-      dateActivated: order.dateActivated,
-      orderNumber: order.orderNumber,
-      dateOfOrder: <div className={styles.singleLineText}>{formatDate(new Date(order.dateActivated))}</div>,
-      orderType: capitalize(order.orderType?.display ?? '--'),
-      order: order.display,
-      priority: (
-        <div className={styles.priorityPill} data-priority={lowerCase(order.urgency)}>
-          {
-            // t('ON_SCHEDULED_DATE', 'On scheduled date')
-            // t('ROUTINE', 'Routine')
-            // t('STAT', 'STAT')
-          }
-          {t(order.urgency, capitalize(order.urgency.replace('_', ' ')))}
-        </div>
-      ),
-      orderedBy: order.orderer?.display,
-      status: order.fulfillerStatus ? (
-        <div className={styles.statusPill} data-status={lowerCase(order.fulfillerStatus.replace('_', ' '))}>
-          {
-            // 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('_', ' ')))}
-        </div>
-      ) : (
-        '--'
-      ),
-    }));
-  }, [allOrders, t]);
+  const tableRows = useMemo(
+    () =>
+      allOrders?.map((order) => ({
+        id: order.uuid,
+        dateActivated: order.dateActivated,
+        orderNumber: order.orderNumber,
+        dateOfOrder: <div className={styles.singleLineText}>{formatDate(new Date(order.dateActivated))}</div>,
+        orderType: capitalize(order.orderType?.display ?? '--'),
+        order: order.display,
+        priority: (
+          <div className={styles.priorityPill} data-priority={lowerCase(order.urgency)}>
+            {
+              // t('ON_SCHEDULED_DATE', 'On scheduled date')
+              // t('ROUTINE', 'Routine')
+              // t('STAT', 'STAT')
+            }
+            {t(order.urgency, capitalize(order.urgency.replace('_', ' ')))}
+          </div>
+        ),
+        orderedBy: order.orderer?.display,
+        status: order.fulfillerStatus ? (
+          <div className={styles.statusPill} data-status={lowerCase(order.fulfillerStatus.replace('_', ' '))}>
+            {
+              // 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('_', ' ')))}
+          </div>
+        ) : (
+          '--'
+        ),
+      })) ?? [],
+    [allOrders, t],
+  );
 
   const { results: paginatedOrders, goTo, currentPage } = usePagination(tableRows, defaultPageSize);
 
@@ -301,7 +303,7 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ 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"
         />
       </div>
@@ -318,16 +320,15 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
         if (orderTypes && orderTypes?.length > 0) {
           return (
             <>
-              {!tableRows.length ? (
-                // FIXME: The displayText translation is not working as expected
+              {!tableRows?.length ? (
                 <EmptyState
                   headerTitle={headerTitle}
                   displayText={
                     selectedOrderTypeUuid === null
                       ? 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,
                         })

diff --git a/packages/esm-patient-orders-app/src/lab-results/lab-results-form-field.component.tsx b/packages/esm-patient-orders-app/src/lab-results/lab-results-form-field.component.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
 import { NumberInput, Select, SelectItem, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { type Control, Controller } from 'react-hook-form';
+import { type Control, Controller, type FieldErrors } from 'react-hook-form';
 import { type LabOrderConcept } from './lab-results.resource';
 import styles from './lab-results-form.scss';
 
 interface ResultFormFieldProps {
   concept: LabOrderConcept;
   control: Control<any, any>;
   defaultValue: any;
+  errors: FieldErrors;
 }
 
-const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, defaultValue }) => {
+const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, defaultValue, errors }) => {
   const { t } = useTranslation();
 
   const isCoded = (concept: LabOrderConcept) => concept.datatype?.display === 'Coded';
@@ -42,12 +43,14 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, def
           name={concept.uuid}
           render={({ field }) => (
             <TextInput
+              {...field}
               className={styles.textInput}
               id={concept.uuid}
               key={concept.uuid}
               labelText={concept?.display ?? ''}
               type="text"
-              {...field}
+              invalidText={errors[concept.uuid]?.message}
+              invalid={!!errors[concept.uuid]}
             />
           )}
         />
@@ -66,8 +69,10 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, def
               id={concept.uuid}
               key={concept.uuid}
               label={concept?.display + printValueRange(concept)}
-              onChange={(event) => field.onChange(event.target.value)}
+              onChange={(event) => field.onChange(parseFloat(event.target.value))}
               value={field.value || ''}
+              invalidText={errors[concept.uuid]?.message}
+              invalid={!!errors[concept.uuid]}
             />
           )}
         />
@@ -85,6 +90,8 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, def
               id={`select-${concept.uuid}`}
               key={concept.uuid}
               labelText={concept?.display}
+              invalidText={errors[concept.uuid]?.message}
+              invalid={!!errors[concept.uuid]}
             >
               <SelectItem text={t('chooseAnOption', 'Choose an option')} value="" />
               {concept?.answers?.length &&
@@ -113,6 +120,8 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, def
                     key={member.uuid}
                     labelText={member?.display ?? ''}
                     type="text"
+                    invalidText={errors[member.uuid]?.message}
+                    invalid={!!errors[member.uuid]}
                   />
                 )}
               />
@@ -130,8 +139,10 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, def
                     id={`number-${member.uuid}`}
                     key={member.uuid}
                     label={member?.display + printValueRange(member)}
-                    onChange={(event) => field.onChange(event.target.value)}
+                    onChange={(event) => field.onChange(parseFloat(event.target.value))}
                     value={field.value || ''}
+                    invalidText={errors[member.uuid]?.message}
+                    invalid={!!errors[member.uuid]}
                   />
                 )}
               />
@@ -149,6 +160,8 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, def
                     key={member.uuid}
                     labelText={member?.display}
                     type="text"
+                    invalidText={errors[member.uuid]?.message}
+                    invalid={!!errors[member.uuid]}
                   >
                     <SelectItem text={t('chooseAnOption', 'Choose an option')} value="" />