(feat) O3-4181 Display Patient Age and Implement View/Edit Results Fu…

…nctionality for Lab Technicians (#99)

* (feat) added the UI improvements

* (feat) added a extension slot for completed order for lab results

* (fix) fixed build failure

* (refactor) revert to the old UI

* (refactor) updated en.json

* (feat) updated the custom representation

* (chore) removed patientAge hook

src/components/orders-table/list-order-details.component.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Tile } from '@carbon/react';
+import { Button, Tile, Accordion, AccordionItem } from '@carbon/react';
 import { ExtensionSlot, launchWorkspace, showModal } from '@openmrs/esm-framework';
 import { ListOrdersDetailsProps } from '../../types';
-import { OrderDetail } from './order-detail.component';
 import styles from './list-order-details.scss';
+import { OrderDetail } from './order-detail.component';
 
 const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
   const { t } = useTranslation();
@@ -24,6 +24,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
               <OrderDetail label={t('orderer', 'Orderer').toUpperCase()} value={row.orderer?.display} />
               <OrderDetail label={t('instructions', 'Instructions').toUpperCase()} value={row.instructions ?? '--'} />
             </div>
+
             <div className={styles.actionButtons}>
               {row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
                 <ExtensionSlot className={styles.menuLink} state={{ order: row }} name="tests-ordered-actions-slot" />
@@ -33,9 +34,28 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                   state={{ order: row }}
                   name="inprogress-tests-actions-slot"
                 />
+              ) : row.fulfillerStatus === 'COMPLETED' ? (
+                <ExtensionSlot
+                  className={styles.menuLink}
+                  state={{ order: row }}
+                  name="completed-ordered-actions-slot"
+                />
               ) : (
                 <div></div>
               )}
+              {row.fulfillerStatus === 'COMPLETED' && (
+                <div className={styles.accordionContainer}>
+                  <Accordion>
+                    <AccordionItem title={t('results', 'Results')}>
+                      <ExtensionSlot
+                        className={styles.labResultSlot}
+                        state={{ order: row }}
+                        name="completed-lab-order-results-slot"
+                      />
+                    </AccordionItem>
+                  </Accordion>
+                </div>
+              )}
             </div>
           </Tile>
         ))}

src/components/orders-table/list-order-details.scss

@@ -55,3 +55,7 @@
   margin-left: layout.$spacing-05;
   margin-top: layout.$spacing-07;
 }
+
+.accordionContainer {
+  margin-top: layout.$spacing-03;
+}

src/components/orders-table/orders-data-table.component.tsx

@@ -46,6 +46,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
         dateActivated: formatDate(parseDate(order.dateActivated)),
         patientName: order.patient?.display.split('-')[1],
         patientUuid: order.patient?.uuid,
+        patientAge: order.patient?.person?.age,
         status: order.fulfillerStatus ?? '--',
         orderer: order.orderer,
       };
@@ -113,7 +114,8 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const columns = useMemo(() => {
     return [
       { id: 0, header: t('patient', 'Patient'), key: 'patientName' },
-      { id: 1, header: t('totalOrders', 'Total Orders'), key: 'totalOrders' },
+      { id: 1, header: t('age', 'Age'), key: 'patientAge' }, // Age is now included as a column
+      { id: 2, header: t('totalOrders', 'Total Orders'), key: 'totalOrders' },
     ];
   }, [t]);
 
@@ -124,11 +126,12 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const handleOrderStatusChange = ({ selectedItem }) => setFilter(selectedItem.value);
 
   const tableRows = useMemo(() => {
-    return paginatedLabOrders.map((patient) => ({
-      id: patient.patientId,
-      patientName: patient.orders[0].patient?.display?.split('-')[1],
-      orders: patient.orders,
-      totalOrders: patient.orders?.length,
+    return paginatedLabOrders.map((order) => ({
+      id: order.patientId,
+      patientName: order.orders[0].patient?.display?.split('-')[1],
+      orders: order.orders,
+      totalOrders: order.orders?.length,
+      patientAge: order.orders[0].patient?.person?.age,
     }));
   }, [paginatedLabOrders]);
 

src/index.ts

@@ -81,6 +81,11 @@ export const rejectLabRequestAction = getAsyncLifecycle(
   options,
 );
 
+export const editLabRequestAction = getAsyncLifecycle(
+  () => import('./lab-tabs/actions/edit-lab-request-results-action.component'),
+  options,
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

src/lab-tabs/actions/edit-lab-request-results-action.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './actions.scss';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { Order } from '@openmrs/esm-patient-common-lib';
+
+type EditButtonProps = {
+  order: Order;
+};
+
+const EditButton: React.FC<EditButtonProps> = ({ order }) => {
+  const { t } = useTranslation();
+  return (
+    <Button
+      kind="secondary"
+      className={styles.actionButton}
+      onClick={() => launchWorkspace('test-results-form-workspace', { order })}
+    >
+      {t('editResults', 'Edit results')}
+    </Button>
+  );
+};
+
+export default EditButton;

src/laboratory-resource.ts

@@ -1,4 +1,4 @@
-import { openmrsFetch, restBaseUrl, useAppContext, useConfig } from '@openmrs/esm-framework';
+import { FetchResponse, openmrsFetch, restBaseUrl, useAppContext, useConfig } from '@openmrs/esm-framework';
 import { Order } from '@openmrs/esm-patient-common-lib';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -19,7 +19,9 @@ export function useLabOrders(status: 'NEW' | FulfillerStatus = null, excludeCanc
   const { laboratoryOrderTypeUuid } = useConfig();
   const fulfillerStatus = useMemo(() => (status === 'NEW' ? null : status), [status]);
   const newOrdersOnly = status === 'NEW';
-  let url = `${restBaseUrl}/order?orderTypes=${laboratoryOrderTypeUuid}&v=full`;
+  const customRepresentation =
+    'custom:(uuid,orderNumber,patient:(uuid,display,person:(uuid,display,age)),concept:(uuid,display),action,careSetting:(uuid,display,description,careSettingType,display),previousOrder,dateActivated,scheduledDate,dateStopped,autoExpireDate,encounter:(uuid,display),orderer:(uuid,display),orderReason,orderReasonNonCoded,orderType:(uuid,display,name,description,conceptClasses,parent),urgency,instructions,commentToFulfiller,display,fulfillerStatus,fulfillerComment,specimenSource,laterality,clinicalHistory,frequency,numberOfRepeats)';
+  let url = `${restBaseUrl}/order?orderTypes=${laboratoryOrderTypeUuid}&v=${customRepresentation}`;
   url = fulfillerStatus ? url + `&fulfillerStatus=${fulfillerStatus}` : url;
   url = excludeCanceled ? `${url}&excludeCanceledAndExpired=true&excludeDiscontinueOrders=true` : url;
   // The usage of SWR's mutator seems to only suffice for cases where we don't apply a status filter

src/routes.json

@@ -97,6 +97,11 @@
       "component": "rejectLabRequestAction",
       "slot": "tests-ordered-actions-slot"
     },
+    {
+      "name": "edit-lab-request-tests-ordered-action",
+      "component": "editLabRequestAction",
+      "slot": "completed-ordered-actions-slot"
+    },
     {
       "name": "add-lab-request-results-action",
       "component": "addLabRequestResultsAction",

translations/en.json

@@ -1,4 +1,5 @@
 {
+  "age": "Age",
   "all": "All",
   "cancel": "Cancel",
   "checkFilters": "Please check the filters above and try again",
@@ -7,6 +8,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "editResults": "Edit results",
   "errorPickingOrder', 'Error picking order": "",
   "errorRejectingRequest": "Error rejecting lab request",
   "exceptionStatus": "EXCEPTION",
@@ -22,7 +24,7 @@
   "nextPage": "Next page",
   "noLabRequestsFoundC": "No lab requests found",
   "onHoldStatus": "ON_HOLD",
-  "orderer": "orderer",
+  "orderer": "Orderer",
   "orderNumber": "Order number",
   "orderPickedSuccessfully": "You have successfully picked an order",
   "orders": "Orders",
@@ -33,7 +35,7 @@
   "pickRequestConfirmationText": "Continuing will update the request status to \"In Progress\" and advance it to the next stage. Are you sure you want to proceed?",
   "pickupLabRequest": "Pick up lab request",
   "previousPage": "Previous page",
-  "procedure": "procedure",
+  "procedure": "Procedure",
   "receivedStatus": "RECEIVED",
   "reject": "Reject",
   "rejectLabRequest": "Reject lab request",