(feat) O3-4181 Display Patient Age and Implement View/Edit Results Functionality for Lab Technicians

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,6 @@
   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

@@ -23,11 +23,12 @@ import { formatDate, parseDate, usePagination } from '@openmrs/esm-framework';
 import { Order } from '@openmrs/esm-patient-common-lib';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLabOrders, useSearchGroupedResults } from '../../laboratory-resource';
+import usePatientAge, { useLabOrders, useSearchGroupedResults } from '../../laboratory-resource';
 import { FulfillerStatus, OrdersDataTableProps } from '../../types';
 import ListOrderDetails from './list-order-details.component';
 import styles from './orders-data-table.scss';
 import { OrdersDateRangePicker } from './orders-date-range-picker';
+import { PatientAge } from './patient-age.component';
 
 const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const { t } = useTranslation();
@@ -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: 'age' },
+      { 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],
+      age: <PatientAge patientUuid={order.patientId} />,
+      orders: order.orders,
+      totalOrders: order.orders?.length,
     }));
   }, [paginatedLabOrders]);
 

src/components/orders-table/patient-age.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import usePatientAge from '../../laboratory-resource';
+import { InlineLoading } from '@carbon/react';
+
+export const PatientAge: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { patientAge, isLoading: isPatientAgeLoading } = usePatientAge(patientUuid);
+  if (isPatientAgeLoading) {
+    return <InlineLoading />;
+  }
+  return <p>{patientAge ?? '--'}</p>;
+};

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';
@@ -88,3 +88,12 @@ export function rejectLabOrder(orderId: string, comment: string, abortController
     },
   });
 }
+
+const usePatientAge = (uuid: string) => {
+  const customRepresentation = `custom:(person:(age))`;
+  const url = `${restBaseUrl}/patient/${uuid}?v=${customRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<{ person: { age: number } }>>(url, openmrsFetch);
+  return { isLoading, error, patientAge: data?.data?.person?.age };
+};
+
+export default usePatientAge;

src/routes.json

@@ -96,6 +96,11 @@
       "name": "reject-lab-request-tests-ordered-action",
       "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",

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",