From 11a4f2f3eb0729c7cc708022c369279c2bea7ab1 Mon Sep 17 00:00:00 2001
From: CynthiaKamau <cynthiakamau54@gmail.com>
Date: Mon, 4 Nov 2024 14:58:33 +0300
Subject: [PATCH] (feat) O3-3839 Allowing of printing lab request (#2063)

---
 .../src/components/order-details-table.scss   | 15 ++++
 .../orders-details-table.component.tsx        | 82 ++++++++++++-------
 .../src/config-schema.ts                      |  7 ++
 .../orders-summary.component.tsx              |  9 +-
 .../translations/en.json                      |  2 +
 5 files changed, 83 insertions(+), 32 deletions(-)

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 cea68c18c..7c4ef3007 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
@@ -161,3 +161,18 @@
 .helperText {
   @include type.type-style('helper-text-02');
 }
+
+.printButton {
+  margin-left: 1.25rem;
+}
+
+@media print {
+  html,
+  body {
+    margin: 0 !important;
+    width: fit-content;
+    padding: 0 !important;
+    overflow: hidden;
+    page-break-inside: avoid;
+  }
+}
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 80df0067a..7d19f57e0 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,6 +177,14 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
     },
   ];
 
+  if (isPrinting) {
+    tableHeaders.push({
+      key: 'dosage',
+      header: t('dosage', 'Dosage'),
+      isSortable: true,
+    });
+  }
+
   const tableRows = useMemo(
     () =>
       allOrders?.map((order) => ({
@@ -184,7 +192,15 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
         dateActivated: order.dateActivated,
         orderNumber: order.orderNumber,
         dateOfOrder: <div className={styles.singleLineText}>{formatDate(new Date(order.dateActivated))}</div>,
-        orderType: capitalize(order.orderType?.display ?? '--'),
+        orderType: capitalize(order.orderType?.display ?? '-'),
+        dosage:
+          order.type === 'drugorder' ? (
+            <div className={styles.singleLineText}>{`${t('indication', 'Indication').toUpperCase()}
+            ${order.orderReasonNonCoded} ${'-'} ${t('quantity', 'Quantity').toUpperCase()} ${order.quantity} ${order
+              ?.quantityUnits?.display} `}</div>
+          ) : (
+            '--'
+          ),
         order: order.display,
         priority: (
           <div className={styles.priorityPill} data-priority={lowerCase(order.urgency)}>
@@ -255,15 +271,15 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
     if (isPrinting && onBeforeGetContentResolve.current) {
       onBeforeGetContentResolve.current();
     }
-  }, [isPrinting, onBeforeGetContentResolve]);
+  }, [isPrinting]);
 
   const handlePrint = useReactToPrint({
     content: () => contentToPrintRef.current,
     documentTitle: `OpenMRS - ${patientDetails.name} - ${title}`,
-    onBeforeGetContent: () =>
+    onBeforeGetContent: (): Promise<void> =>
       new Promise((resolve) => {
-        if (patient && patient?.patient && title) {
-          onBeforeGetContentResolve.current = resolve;
+        if (patient && title) {
+          onBeforeGetContentResolve.current = resolve();
           setIsPrinting(true);
         }
       }),
@@ -347,8 +363,8 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
                       {showPrintButton && (
                         <Button
                           kind="ghost"
-                          renderIcon={(props) => <PrinterIcon {...props} size={16} />}
-                          iconDescription={t('print', 'Print')}
+                          renderIcon={PrinterIcon}
+                          iconDescription={t('printOrder', 'Print order')}
                           className={styles.printButton}
                           onClick={handlePrint}
                         >
@@ -358,7 +374,7 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
                       {showAddButton && (
                         <Button
                           kind="ghost"
-                          renderIcon={(props) => <AddIcon {...props} size={16} />}
+                          renderIcon={AddIcon}
                           iconDescription={t('launchOrderBasket', 'Launch order basket')}
                           onClick={launchOrderBasket}
                         >
@@ -392,18 +408,20 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
                       }) => (
                         <>
                           <TableContainer {...getTableContainerProps}>
-                            <div className={styles.toolBarContent}>
-                              <TableToolbarContent>
-                                <Layer>
-                                  <Search
-                                    expanded
-                                    onChange={onInputChange}
-                                    placeholder={t('searchTable', 'Search table')}
-                                    size="lg"
-                                  />
-                                </Layer>
-                              </TableToolbarContent>
-                            </div>
+                            {!isPrinting && (
+                              <div className={styles.toolBarContent}>
+                                <TableToolbarContent>
+                                  <Layer>
+                                    <Search
+                                      expanded
+                                      onChange={onInputChange}
+                                      placeholder={t('searchTable', 'Search table')}
+                                      size="lg"
+                                    />
+                                  </Layer>
+                                </TableToolbarContent>
+                              </div>
+                            )}
                             <Table className={styles.table} {...getTableProps()}>
                               <TableHead>
                                 <TableRow>
@@ -425,19 +443,21 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
                                       <TableExpandRow className={styles.row} {...getRowProps({ row })}>
                                         {row.cells.map((cell) => (
                                           <TableCell className={styles.tableCell} key={cell.id}>
-                                            {cell.value['content'] ?? cell.value}
+                                            {cell.value?.['content'] ?? cell.value}
                                           </TableCell>
                                         ))}
-                                        <TableCell className="cds--table-column-menu">
-                                          <OrderBasketItemActions
-                                            items={orders}
-                                            openOrderBasket={launchOrderBasket}
-                                            openOrderForm={() => openOrderForm(matchingOrder)}
-                                            orderItem={matchingOrder}
-                                            setOrderItems={setOrders}
-                                            responsiveSize={responsiveSize}
-                                          />
-                                        </TableCell>
+                                        {!isPrinting && (
+                                          <TableCell className="cds--table-column-menu">
+                                            <OrderBasketItemActions
+                                              items={orders}
+                                              openOrderBasket={launchOrderBasket}
+                                              openOrderForm={() => openOrderForm(matchingOrder)}
+                                              orderItem={matchingOrder}
+                                              setOrderItems={setOrders}
+                                              responsiveSize={responsiveSize}
+                                            />
+                                          </TableCell>
+                                        )}
                                       </TableExpandRow>
                                       {row.isExpanded ? (
                                         <TableExpandedRow
diff --git a/packages/esm-patient-orders-app/src/config-schema.ts b/packages/esm-patient-orders-app/src/config-schema.ts
index 465dd0781..67dbe9d7c 100644
--- a/packages/esm-patient-orders-app/src/config-schema.ts
+++ b/packages/esm-patient-orders-app/src/config-schema.ts
@@ -6,8 +6,15 @@ export const configSchema = {
     _description: 'The encounter type of the encounter encapsulating orders',
     _default: '39da3525-afe4-45ff-8977-c53b7b359158',
   },
+  showPrintButton: {
+    _type: Type.Boolean,
+    _default: false,
+    _description:
+      'Determines whether or not to display a Print button in the Orders details table. If set to true, a Print button gets shown in both the orders table headers. When clicked, this button enables the user to print out the contents of the table',
+  },
 };
 
 export interface ConfigObject {
   orderEncounterType: string;
+  showPrintButton: boolean;
 }
diff --git a/packages/esm-patient-orders-app/src/orders-summary/orders-summary.component.tsx b/packages/esm-patient-orders-app/src/orders-summary/orders-summary.component.tsx
index faf9c2e38..f3182da98 100644
--- a/packages/esm-patient-orders-app/src/orders-summary/orders-summary.component.tsx
+++ b/packages/esm-patient-orders-app/src/orders-summary/orders-summary.component.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import OrderDetailsTable from '../components/orders-details-table.component';
+import { type ConfigObject, useConfig } from '@openmrs/esm-framework';
 
 export interface OrdersSummaryProps {
   patientUuid: string;
@@ -9,10 +10,16 @@ export interface OrdersSummaryProps {
 const OrdersSummary: React.FC<OrdersSummaryProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const ordersDisplayText = t('orders', 'Orders');
+  const { showPrintButton } = useConfig<ConfigObject>();
 
   return (
     <div style={{ marginBottom: '1.5rem' }}>
-      <OrderDetailsTable patientUuid={patientUuid} showAddButton showPrintButton={false} title={ordersDisplayText} />
+      <OrderDetailsTable
+        patientUuid={patientUuid}
+        showAddButton
+        showPrintButton={showPrintButton}
+        title={ordersDisplayText}
+      />
     </div>
   );
 };
diff --git a/packages/esm-patient-orders-app/translations/en.json b/packages/esm-patient-orders-app/translations/en.json
index 1ac3c7740..4e3f28edb 100644
--- a/packages/esm-patient-orders-app/translations/en.json
+++ b/packages/esm-patient-orders-app/translations/en.json
@@ -14,6 +14,7 @@
   "dateOfOrder": "Date of order",
   "discard": "Discard",
   "discontinued": "Discontinued",
+  "dosage": "Dosage",
   "dose": "Dose",
   "editResults": "Edit results",
   "endDate": "End date",
@@ -51,6 +52,7 @@
   "pleaseFillRequiredFields": "Please fill all the required fields",
   "print": "Print",
   "printedBy": "Printed by",
+  "printOrder": "Print order",
   "priority": "Priority",
   "quantity": "Quantity",
   "reasonForCancellation": "Reason for cancellation",