Adding edit button for referred test results

openmrs · Jan 24, 2024 · 815db32 · 815db32
1 parent fa93be6
commit 815db32
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 59 deletions.
diff --git a/...ent-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx b/...ent-chart/laboratory-active-test-order/laboratory-active-test-order-results.component.tsx
@@ -30,6 +30,7 @@ import {
   Layer,
   Tag,
   Tile,
+  Tooltip,
   Pagination,
   TableExpandHeader,
   TableExpandRow,
@@ -182,12 +183,14 @@ const LaboratoryActiveTestOrderResults: React.FC<
             patient={patient}
           />
         </div>
-        <Button
-          kind="ghost"
-          size="sm"
-          onClick={handlePrint}
-          renderIcon={(props) => <Printer size={16} {...props} />}
-        />
+        <Tooltip align="bottom" label="Print out results">
+          <Button
+            kind="ghost"
+            size="sm"
+            onClick={handlePrint}
+            renderIcon={(props) => <Printer size={16} {...props} />}
+          />
+        </Tooltip>
       </div>
     );
   };
@@ -246,7 +249,7 @@ const LaboratoryActiveTestOrderResults: React.FC<
         actions: {
           content: (
             <div>
-              <PrintButtonAction encounter={laboratoryOrders[index]} />
+              <PrintButtonAction encounter={entry} />
               {/* <EmailButtonAction /> */}
             </div>
           ),
@@ -265,22 +268,24 @@ const LaboratoryActiveTestOrderResults: React.FC<
   if (items?.length >= 0) {
     return (
       <div className={styles.widgetCard}>
-        <CardHeader title={displayText}>
-          {isLoading ? (
-            <span>
-              <InlineLoading />
-            </span>
-          ) : null}
-          <div className={styles.buttons}>
-            <Button
-              kind="ghost"
-              renderIcon={(props) => <Add size={16} {...props} />}
-              iconDescription="Launch lab Request"
-            >
-              {t("add", "Add")}
-            </Button>
-          </div>
-        </CardHeader>
+        <div className={styles.cardHeaderDiv}>
+          <CardHeader title={displayText}>
+            {isLoading ? (
+              <span>
+                <InlineLoading />
+              </span>
+            ) : null}
+            <div className={styles.buttons}>
+              <Button
+                kind="ghost"
+                renderIcon={(props) => <Add size={16} {...props} />}
+                iconDescription="Launch lab Request"
+              >
+                {t("add", "Add")}
+              </Button>
+            </div>
+          </CardHeader>
+        </div>
 
         <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
           {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (

diff --git a/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.scss b/src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.scss
@@ -6,6 +6,9 @@
 .widgetCard {
     border: 1px solid colors.$gray-20;
     border-bottom: none;
+    .cardHeaderDiv {
+        border-bottom: 1px solid #e0e0e0;
+    }
 }
 
 .headerBtnContainer {

diff --git a/src/patient-chart/laboratory-order-referals/laboratory-order-referals.component.tsx b/src/patient-chart/laboratory-order-referals/laboratory-order-referals.component.tsx
@@ -40,7 +40,7 @@ import {
   InlineLoading,
 } from "@carbon/react";
 
-import { Printer, MailAll, Add, Edit } from "@carbon/react/icons";
+import { Printer, MailAll, Add } from "@carbon/react/icons";
 
 import TestsResults from "../results-summary/test-results-table.component";
 import { useReactToPrint } from "react-to-print";
@@ -53,6 +53,7 @@ import {
 } from "../patient-laboratory-order-results.resource";
 import { useLaboratoryOrderResultsPages } from "../patient-laboratory-order-results-table.resource";
 import { CardHeader } from "@openmrs/esm-patient-common-lib";
+import EditActionsMenu from "./edit-actions-menu.component";
 
 interface LaboratoryOrderReferalResultsProps {
   patientUuid: string;
@@ -68,8 +69,8 @@ const LaboratoryOrderReferalResults: React.FC<
   const { t } = useTranslation();
 
   const displayText = t(
-    "referalLaboratoryTestsDisplayTextTitle",
-    "Laboratory Referal Tests"
+    "referralLaboratoryTestsDisplayTextTitle",
+    "Laboratory Referral Tests"
   );
 
   const {
@@ -140,16 +141,6 @@ const LaboratoryOrderReferalResults: React.FC<
     );
   };
 
-  const EditReferalTestButton: React.FC = () => {
-    return (
-      <Button
-        kind="ghost"
-        size="sm"
-        renderIcon={(props) => <Edit size={16} {...props} />}
-      />
-    );
-  };
-
   const LaunchLabRequestForm: React.FC = () => {
     return (
       <IconButton label="Add">
@@ -250,10 +241,11 @@ const LaboratoryOrderReferalResults: React.FC<
       },
       actions: {
         content: (
-          <>
+          <div style={{ display: "flex" }}>
+            <EditActionsMenu />
             <PrintButtonAction encounter={entry} />
-            <EditReferalTestButton />
-          </>
+            {/* <EditReferalTestButton /> */}
+          </div>
         ),
       },
     }));
@@ -270,15 +262,24 @@ const LaboratoryOrderReferalResults: React.FC<
   if (items?.length >= 0) {
     return (
       <div className={styles.widgetCard}>
-        <CardHeader title={displayText}>
-          {isLoading ? (
-            <span>
-              <InlineLoading />
-            </span>
-          ) : null}
-        </CardHeader>
+        <div className={styles.cardHeaderDiv}>
+          <CardHeader title={displayText}>
+            {isLoading ? (
+              <span>
+                <InlineLoading />
+              </span>
+            ) : null}
+          </CardHeader>
+        </div>
         <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
-          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+          {({
+            rows,
+            headers,
+            getHeaderProps,
+            getTableProps,
+            getRowProps,
+            onInputChange,
+          }) => (
             <TableContainer className={styles.tableContainer}>
               <TableToolbar
                 style={{

diff --git a/src/patient-chart/laboratory-order-referals/laboratory-order-referals.scss b/src/patient-chart/laboratory-order-referals/laboratory-order-referals.scss
@@ -6,6 +6,9 @@
 .widgetCard {
     border: 1px solid colors.$gray-20;
     border-bottom: none;
+    .cardHeaderDiv {
+        border-bottom: 1px solid #e0e0e0;
+    }
 }
 
 .headerBtnContainer {

diff --git a/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx b/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.component.tsx
@@ -30,6 +30,7 @@ import {
   Layer,
   Tag,
   Tile,
+  Tooltip,
   Pagination,
   TableExpandHeader,
   TableExpandRow,
@@ -183,12 +184,14 @@ const LaboratoryPastTestOrderResults: React.FC<
             patient={patient}
           />
         </div>
-        <Button
-          kind="ghost"
-          size="sm"
-          onClick={handlePrint}
-          renderIcon={(props) => <Printer size={16} {...props} />}
-        />
+        <Tooltip align="bottom" label="Print out results">
+          <Button
+            kind="ghost"
+            size="sm"
+            onClick={handlePrint}
+            renderIcon={(props) => <Printer size={16} {...props} />}
+          />
+        </Tooltip>
       </div>
     );
   };
@@ -246,13 +249,13 @@ const LaboratoryPastTestOrderResults: React.FC<
         actions: {
           content: (
             <div>
-              <PrintButtonAction encounter={laboratoryOrders[index]} />
+              <PrintButtonAction encounter={entry} />
               {/* <EmailButtonAction /> */}
             </div>
           ),
         },
       }));
-  }, [laboratoryOrders, twentyFourHoursAgo]);
+  }, [laboratoryOrders]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
@@ -271,6 +274,15 @@ const LaboratoryPastTestOrderResults: React.FC<
               <InlineLoading />
             </span>
           ) : null}
+          <div className={styles.buttons}>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              iconDescription="Launch lab Request"
+            >
+              {t("add", "Add")}
+            </Button>
+          </div>
         </CardHeader>
         <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
           {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (

diff --git a/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.scss b/src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.scss
@@ -3,8 +3,6 @@
 @use '@carbon/styles/scss/type';
 @import "~@openmrs/esm-styleguide/src/vars";
 @import '../../root.scss';
-
-
 .widgetCard {
     border: 1px solid colors.$gray-20;
     border-bottom: none;
@@ -55,7 +53,6 @@
     margin: 1.5rem auto;
     overflow: hidden;
     text-align: center;
-
     &::before,
     &::after {
         background-color: $text-03;
@@ -66,13 +63,86 @@
         vertical-align: middle;
         width: 50%;
     }
-
     &::before {
         right: 0.5rem;
         margin-left: -50%;
     }
+    &::after {
+        left: 0.5rem;
+        margin-right: -50%;
+    }
+}
+
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../../root.scss';
+<<<<<<<< HEAD:src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.scss========>>>>>>>>a331a0b (U43X-360 Adding the text button):src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.scss .widgetCard {
+    border: 1px solid colors.$gray-20;
+    border-bottom: none;
+}
+
+.headerBtnContainer {
+    background-color: $ui-background;
+    padding: spacing.$spacing-05;
+    text-align: right;
+}
+
+.tileContainer {
+    background-color: $ui-02;
+    border-top: 1px solid $ui-03;
+    padding: 5rem 0;
+}
+
+.tile {
+    margin: auto;
+    width: fit-content;
+}
+
+.tileContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.content {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+    margin-bottom: 0.5rem;
+}
+
+.helper {
+    @include type.type-style('body-compact-01');
+    color: $text-02;
+}
+
+.container {
+    background-color: $ui-01;
+}
 
+.separator {
+    @include type.type-style('body-compact-02');
+    color: $text-02;
+    width: 80%;
+    margin: 1.5rem auto;
+    overflow: hidden;
+    text-align: center;
+    <<<<<<<< HEAD:src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.scss========>>>>>>>>a331a0b (U43X-360 Adding the text button):src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.scss &::before,
     &::after {
+        background-color: $text-03;
+        content: '';
+        display: inline-block;
+        height: 1px;
+        position: relative;
+        vertical-align: middle;
+        width: 50%;
+    }
+    <<<<<<<< HEAD:src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.scss========>>>>>>>>a331a0b (U43X-360 Adding the text button):src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.scss &::before {
+        right: 0.5rem;
+        margin-left: -50%;
+    }
+    <<<<<<<< HEAD:src/patient-chart/laboratory-active-test-order/laboratory-active-test-order-results.scss========>>>>>>>>a331a0b (U43X-360 Adding the text button):src/patient-chart/laboratory-past-test/laboratory-past-test-order-results.scss &::after {
         left: 0.5rem;
         margin-right: -50%;
     }

diff --git a/src/patient-chart/results-summary/test-print-results-table.component.tsx b/src/patient-chart/results-summary/test-print-results-table.component.tsx
@@ -16,6 +16,9 @@ import {
   TableExpandedRow,
 } from "@carbon/react";
 import styles from "./results-summary.scss";
+import RescendTestResultActionMenu from "./test-results-rescend-action-menu.component";
+import { Order } from "../patient-laboratory-order-results.resource";
+import DeleteTestResultActionMenu from "./test-results-delete-action-menu.component";
 import { Ob } from "../laboratory-item/view-laboratory-item.resource";
 import TestResultsChildren from "./test-children-results.component";