diff --git a/src/index.ts b/src/index.ts index 1548cb0..363d249 100644 --- a/src/index.ts +++ b/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 diff --git a/src/lab-tabs/approved-tab.component.tsx b/src/lab-tabs/approved-tab.component.tsx new file mode 100644 index 0000000..ffa78e4 --- /dev/null +++ b/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 ( +
+
+ +
+ ); +}; + +export default ApprovedComponent; diff --git a/src/lab-tabs/referred-tab.component.tsx b/src/lab-tabs/referred-tab.component.tsx new file mode 100644 index 0000000..375803c --- /dev/null +++ b/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 ( +
+
+ + +
+ ); +}; + +export default ReferredComponent; diff --git a/src/lab-tabs/review-tab.component.tsx b/src/lab-tabs/review-tab.component.tsx new file mode 100644 index 0000000..56496a9 --- /dev/null +++ b/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 ( +
+
+ +
+ ); +}; + +export default ReviewComponent; diff --git a/src/lab-tabs/work-list-tab.component.tsx b/src/lab-tabs/work-list-tab.component.tsx new file mode 100644 index 0000000..90fea60 --- /dev/null +++ b/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 ( +
+
+ +
+ ); +}; + +export default WorkListComponent; diff --git a/src/queue-list/laboratory-tabs.component.tsx b/src/queue-list/laboratory-tabs.component.tsx index bc6d126..bd2b173 100644 --- a/src/queue-list/laboratory-tabs.component.tsx +++ b/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 ( + +
+
+ +
+
+ ); + }); + }, [tabExtensions?.length]); + + useEffect(() => { + derivedSlots.forEach(({ slot, extension }) => { + attach(slot, extension); + }); + + return () => { + derivedSlots.forEach(({ slot }) => { + detachAll(slot); + }); + }; + }, [derivedSlots]); + return (
@@ -32,10 +88,28 @@ const LaboratoryQueueTabs: React.FC = () => { contained > {t("testedOrders", "Tests ordered")} - {t("worklist", "Worklist")} - {t("referredTests", "Referred tests")} - {t("reviewList", "Review")} - {t("approveList", "Approved")} + {tabExtensions + .filter((extension) => Object.keys(extension.meta).length > 0) + .map((extension, index) => { + const { name, title } = extension.meta; + + if (name && title) { + return ( + + {t(title, { + ns: extension.moduleName, + defaultValue: title, + })} + + ); + } else { + return null; + } + })} @@ -44,33 +118,7 @@ const LaboratoryQueueTabs: React.FC = () => { - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {extraPanels}
diff --git a/src/routes.json b/src/routes.json index ded6c0e..4d3badf 100644 --- a/src/routes.json +++ b/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",