(feat) Change investigative results tables active tests and past tes…

…ts view to tab views (#62) * refactor investigative results * move styles to .scss * move styles to .scss
openmrs · Mar 14, 2024 · a164cb4 · a164cb4
1 parent c9b2847
commit a164cb4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/src/patient-chart/laboratory-tabs/laboratory-order-tabs.component.tsx b/src/patient-chart/laboratory-tabs/laboratory-order-tabs.component.tsx
@@ -3,7 +3,8 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@carbon/react";
 import styles from "./laboratory-order-tabs.scss";
 import { useTranslation } from "react-i18next";
 import PatientLaboratoryReferalResults from "../laboratory-order-referals/laboratory-order-referals.component";
-import PatientLaboratoryResults from "../patient-laboratory-results.component";
+import LaboratoryPastTestOrderResults from "../laboratory-past-test/laboratory-past-test-order-results.component";
+import LaboratoryActiveTestOrderResults from "../laboratory-active-test-order/laboratory-active-test-order-results.component";
 
 interface LaboratoryResultsTabsProps {
   patientUuid: string;
@@ -25,21 +26,31 @@ const LaboratoryResultsTabs: React.FC<LaboratoryResultsTabsProps> = ({
           className={styles.tabs}
         >
           <TabList
-            style={{ paddingLeft: "1rem" }}
+            className={styles.tabList}
             aria-label="laboratory results tabs"
             contained
           >
-            <Tab style={{ width: "150px" }}>
-              {t("pending", "Routine Tests")}
+            <Tab className={styles.tabWidth}>
+              {t("pending", "Active Tests")}
+            </Tab>
+            <Tab className={styles.tabWidth}>{t("pending", "Past Tests")}</Tab>
+            <Tab className={styles.tabWidth}>
+              {t("referals", "Referred Tests")}
             </Tab>
-            <Tab style={{ width: "150px" }}>{t("referals", "Referrals")}</Tab>
           </TabList>
           <TabPanels>
-            <TabPanel style={{ padding: 0 }}>
-              <PatientLaboratoryResults patientUuid={patientUuid} />
+            <TabPanel>
+              <div className={styles.panelContainer}>
+                <LaboratoryActiveTestOrderResults patientUuid={patientUuid} />
+              </div>
+            </TabPanel>
+            <TabPanel>
+              <div className={styles.panelContainer}>
+                <LaboratoryPastTestOrderResults patientUuid={patientUuid} />
+              </div>
             </TabPanel>
-            <TabPanel style={{ padding: 0 }}>
-              <div style={{ margin: "10px" }}>
+            <TabPanel>
+              <div className={styles.panelContainer}>
                 <PatientLaboratoryReferalResults patientUuid={patientUuid} />
               </div>
             </TabPanel>

diff --git a/src/patient-chart/laboratory-tabs/laboratory-order-tabs.scss b/src/patient-chart/laboratory-tabs/laboratory-order-tabs.scss
@@ -4,4 +4,16 @@
 
 .container {
     background-color: $ui-01;
+}
+
+.tabList {
+    padding-left: 2rem
+}
+
+.tabWidth {
+    width: 150px
+}
+
+.panelContainer {
+    margin: 10px
 }