panel:Add an extensionSlot for lab tab panels (#28)

* panel:Add an extensionSlot for lab tab panels

* panel:Add an extensionSlot for lab tab panels

* panel:Adding a check for existence of extensions so that a blank panel isn't rendered

* panel:minor fixes

* pannel:tab panel changes

* panel:chnages in the lab tabs components

* Revert "panel:chnages in the lab tabs components"

This reverts commit 33021b0.

* panel:fixes in tabs

* panel:tab fixes

* panel:adding the tab panels via extensions

---------

Co-authored-by: Pius Rubangakene <[email protected]>

src/index.ts

@@ -88,6 +88,26 @@ export const rejectOrderDialog = getAsyncLifecycle(
   options
 );
 
+export const reviewComponent = getAsyncLifecycle(
+  () => import("./lab-tabs/review-tab.component"),
+  options
+);
+
+export const approvedComponent = getAsyncLifecycle(
+  () => import("./lab-tabs/approved-tab.component"),
+  options
+);
+
+export const referredTestComponent = getAsyncLifecycle(
+  () => import("./lab-tabs/referred-tab.component"),
+  options
+);
+
+export const worklistComponent = getAsyncLifecycle(
+  () => import("./lab-tabs/work-list-tab.component"),
+  options
+);
+
 export const pickLabRequestButton = getAsyncLifecycle(
   () => import("./queue-list/pick-lab-request-menu.component"),
   options

src/lab-tabs/approved-tab.component.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import CompletedList from "../completed-list/completed-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const ApprovedComponent = () => {
+  return (
+    <div>
+      <div className={styles.headerBtnContainer}></div>
+      <CompletedList fulfillerStatus={"COMPLETED"} />
+    </div>
+  );
+};
+
+export default ApprovedComponent;

src/lab-tabs/referred-tab.component.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { EmptyState } from "@openmrs/esm-patient-common-lib";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const ReferredComponent = () => {
+  return (
+    <div>
+      <div className={styles.headerBtnContainer}></div>
+
+      <EmptyState
+        displayText={"referred tests"}
+        headerTitle={"Referred tests"}
+      />
+    </div>
+  );
+};
+
+export default ReferredComponent;

src/lab-tabs/review-tab.component.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ReviewList from "../review-list/review-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const ReviewComponent = () => {
+  return (
+    <div>
+      <div className={styles.headerBtnContainer}></div>
+      <ReviewList fulfillerStatus={"IN_PROGRESS"} />
+    </div>
+  );
+};
+
+export default ReviewComponent;

src/lab-tabs/work-list-tab.component.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import WorkList from "../work-list/work-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const WorkListComponent = () => {
+  return (
+    <div>
+      <div className={styles.headerBtnContainer}></div>
+      <WorkList fulfillerStatus={"IN_PROGRESS"} />
+    </div>
+  );
+};
+
+export default WorkListComponent;

src/queue-list/laboratory-tabs.component.tsx

@@ -1,4 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  type AssignedExtension,
+  Extension,
+  ExtensionSlot,
+  useConnectedExtensions,
+  attach,
+  detachAll,
+} from "@openmrs/esm-framework";
 import { Tab, Tabs, TabList, TabPanels, TabPanel, Search } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import styles from "./laboratory-queue.scss";
@@ -15,9 +23,57 @@ enum TabTypes {
   ALL,
 }
 
+const labPanelSlot = "lab-panels-slot";
+
 const LaboratoryQueueTabs: React.FC = () => {
   const { t } = useTranslation();
   const [selectedTab, setSelectedTab] = useState(0);
+  const tabExtensions = useConnectedExtensions(
+    labPanelSlot
+  ) as AssignedExtension[];
+
+  const [derivedSlots, setDerivedSlots] = useState<
+    { slot: string; extension: string }[]
+  >([]);
+
+  const extraPanels = useMemo(() => {
+    const filteredExtensions = tabExtensions.filter(
+      (extension) => Object.keys(extension.meta).length > 0
+    );
+    const derivedSlotsBuffer = [];
+    return filteredExtensions.map((extension, index) => {
+      const slotName = `${labPanelSlot}-${index}`;
+      derivedSlotsBuffer.push({
+        slot: slotName,
+        extension: extension.name,
+      });
+      if (filteredExtensions.length === index + 1) {
+        setDerivedSlots(derivedSlotsBuffer);
+      }
+
+      return (
+        <TabPanel key={extension.meta.name} style={{ padding: 0 }}>
+          <div>
+            <div className={styles.headerBtnContainer}></div>
+            <ExtensionSlot name={slotName} />
+          </div>
+        </TabPanel>
+      );
+    });
+  }, [tabExtensions?.length]);
+
+  useEffect(() => {
+    derivedSlots.forEach(({ slot, extension }) => {
+      attach(slot, extension);
+    });
+
+    return () => {
+      derivedSlots.forEach(({ slot }) => {
+        detachAll(slot);
+      });
+    };
+  }, [derivedSlots]);
+
   return (
     <main className={`omrs-main-content`}>
       <section className={styles.orderTabsContainer}>
@@ -32,10 +88,28 @@ const LaboratoryQueueTabs: React.FC = () => {
             contained
           >
             <Tab>{t("testedOrders", "Tests ordered")}</Tab>
-            <Tab>{t("worklist", "Worklist")}</Tab>
-            <Tab>{t("referredTests", "Referred tests")}</Tab>
-            <Tab>{t("reviewList", "Review")}</Tab>
-            <Tab>{t("approveList", "Approved")}</Tab>
+            {tabExtensions
+              .filter((extension) => Object.keys(extension.meta).length > 0)
+              .map((extension, index) => {
+                const { name, title } = extension.meta;
+
+                if (name && title) {
+                  return (
+                    <Tab
+                      key={index}
+                      className={styles.tab}
+                      id={`${title || index}-tab`}
+                    >
+                      {t(title, {
+                        ns: extension.moduleName,
+                        defaultValue: title,
+                      })}
+                    </Tab>
+                  );
+                } else {
+                  return null;
+                }
+              })}
           </TabList>
           <TabPanels>
             <TabPanel style={{ padding: 0 }}>
@@ -44,33 +118,7 @@ const LaboratoryQueueTabs: React.FC = () => {
                 <LaboratoryPatientList />
               </div>
             </TabPanel>
-            <TabPanel style={{ padding: 0 }}>
-              <div>
-                <div className={styles.headerBtnContainer}></div>
-                <WorkList fulfillerStatus={"IN_PROGRESS"} />
-              </div>
-            </TabPanel>
-            <TabPanel style={{ padding: 0 }}>
-              <div>
-                <div className={styles.headerBtnContainer}></div>
-                <EmptyState
-                  displayText={"referred tests"}
-                  headerTitle={"Referred tests"}
-                />
-              </div>
-            </TabPanel>
-            <TabPanel style={{ padding: 0 }}>
-              <div>
-                <div className={styles.headerBtnContainer}></div>
-                <ReviewList fulfillerStatus={"IN_PROGRESS"} />
-              </div>
-            </TabPanel>
-            <TabPanel style={{ padding: 0 }}>
-              <div>
-                <div className={styles.headerBtnContainer}></div>
-                <CompletedList fulfillerStatus={"COMPLETED"} />
-              </div>
-            </TabPanel>
+            {extraPanels}
           </TabPanels>
         </Tabs>
       </section>

src/routes.json

@@ -68,6 +68,42 @@
       "name" : "reject-order-dialog",
       "component": "rejectOrderDialog"
     },
+    {
+      "name": "worklist-panel-component",
+      "slot": "lab-panels-slot",
+      "component": "worklistComponent",
+      "meta": {
+        "name": "worklistPanelSlot",
+        "title": "Worklist"
+      }
+    },
+    {
+      "name": "referred-panel-component",
+      "slot": "lab-panels-slot",
+      "component": "referredTestComponent",
+      "meta": {
+        "name": "referredPanleSlot",
+        "title": "Referred tests"
+      }
+    },
+    {
+      "name": "review-panel-component",
+      "slot": "lab-panels-slot",
+      "component": "reviewComponent",
+      "meta": {
+        "name": "reviewPanelSlot",
+        "title": "Review"
+      }
+    },
+    {
+      "name": "approved-panel-component",
+      "slot": "lab-panels-slot",
+      "component": "approvedComponent",
+      "meta": {
+        "name": "approvedPanelSlot",
+        "title": "Approved"
+      }
+    },
     {
       "name": "pick-lab-request-button",
       "component": "pickLabRequestButton",