tile:adding summary tiles as extesnions (#38)

* tile:adding summary tiles as extesnions * tile:adding summary tiles as extesnions * tile:adding summary tiles as extesnions with a diferrent rendering * tiles:comments in the read-me file
openmrs · Jan 31, 2024 · 45c189c · 45c189c
1 parent e5418e6
commit 45c189c
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,9 @@ Implementers can add or remove laboratory tab panels via extension configuration
 
 <img src="https://raw.githubusercontent.com/openmrs/openmrs-esm-laboratory/main/assets/screenshots/labs_enter_results.png" />
 
+### Adding or removing summary tiles
+Implementers can add or remove summary tiles via extension configuration in the [routes.js](https://github.com/openmrs/openmrs-esm-laboratory/blob/main/src/routes.json) json file 
+
 # Getting Started
 
 ```sh

diff --git a/src/index.ts b/src/index.ts
@@ -118,6 +118,26 @@ export const rejectOrderButton = getAsyncLifecycle(
   options
 );
 
+export const worklistTileComponent = getAsyncLifecycle(
+  () => import("./lab-tiles/worklist-tile.component"),
+  options
+);
+
+export const referredTileComponent = getAsyncLifecycle(
+  () => import("./lab-tiles/referred-tile.component"),
+  options
+);
+
+export const completedTileComponent = getAsyncLifecycle(
+  () => import("./lab-tiles/completed-tile.component"),
+  options
+);
+
+export const testOrderedTileComponent = getAsyncLifecycle(
+  () => import("./lab-tiles/tests-ordered-tile.component"),
+  options
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
diff --git a/src/lab-tiles/completed-tile.component.tsx b/src/lab-tiles/completed-tile.component.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import CompletedList from "../completed-list/completed-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+import { useTranslation } from "react-i18next";
+import SummaryTile from "../summary-tiles/summary-tile.component";
+import { useLabTestsStats } from "../summary-tiles/laboratory-summary.resource";
+
+const ReferredTileComponent = () => {
+  const { t } = useTranslation();
+
+  const { count: completedCount } = useLabTestsStats("COMPLETED");
+
+  return (
+    <SummaryTile
+      label={t("completed", "Completed")}
+      value={completedCount}
+      headerLabel={t("results", "Results")}
+    />
+  );
+};
+
+export default ReferredTileComponent;
diff --git a/src/lab-tiles/referred-tile.component.tsx b/src/lab-tiles/referred-tile.component.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import CompletedList from "../completed-list/completed-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+import { useTranslation } from "react-i18next";
+import SummaryTile from "../summary-tiles/summary-tile.component";
+
+const ReferredTileComponent = () => {
+  const { t } = useTranslation();
+
+  return (
+    <SummaryTile
+      label={t("transferred", "Transferred")}
+      value={0}
+      headerLabel={t("referredTests", "Ex-Referred tests")}
+    />
+  );
+};
+
+export default ReferredTileComponent;
diff --git a/src/lab-tiles/tests-ordered-tile.component.tsx b/src/lab-tiles/tests-ordered-tile.component.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import CompletedList from "../completed-list/completed-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+import { useTranslation } from "react-i18next";
+import SummaryTile from "../summary-tiles/summary-tile.component";
+import { useLabTestsStats } from "../summary-tiles/laboratory-summary.resource";
+
+const ReferredTileComponent = () => {
+  const { t } = useTranslation();
+
+  const { count: testOrderedCount } = useLabTestsStats("");
+
+  return (
+    <SummaryTile
+      label={t("orders", "Orders")}
+      value={testOrderedCount}
+      headerLabel={t("testsOrdered", "Tests ordered")}
+    />
+  );
+};
+
+export default ReferredTileComponent;
diff --git a/src/lab-tiles/worklist-tile.component.tsx b/src/lab-tiles/worklist-tile.component.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import CompletedList from "../completed-list/completed-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+import { useTranslation } from "react-i18next";
+import SummaryTile from "../summary-tiles/summary-tile.component";
+import { useLabTestsStats } from "../summary-tiles/laboratory-summary.resource";
+
+const WorklistTileComponent = () => {
+  const { t } = useTranslation();
+
+  const { count: worklistCount } = useLabTestsStats("IN_PROGRESS");
+
+  return (
+    <SummaryTile
+      label={t("inProgress", "In progress")}
+      value={worklistCount}
+      headerLabel={t("worklist", "Ex-Worklist")}
+    />
+  );
+};
+
+export default WorklistTileComponent;
diff --git a/src/routes.json b/src/routes.json
@@ -4,6 +4,7 @@
         "fhir2": "^1.2.0",
         "webservices.rest": "^2.24.0"
     },
+
     "pages": [{
         "component": "root",
         "route": "laboratory"
@@ -101,6 +102,42 @@
                 "title": "Approved"
             }
         },
+                    {
+      "name": "tests-ordered-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "testOrderedTileComponent",
+      "meta": {
+        "name": "testsOrderedTileSlot",
+        "title": "Ordered tests"
+      }
+    },
+    {
+      "name": "completed-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "completedTileComponent",
+      "meta": {
+        "name": "completedTileSlot",
+        "title": "Completed"
+      }
+    },
+    {
+      "name": "worklist-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "worklistTileComponent",
+      "meta": {
+        "name": "worklisTileSlot",
+        "title": "Worklist"
+      }
+    },
+    {
+      "name": "referred-tile-component",
+      "slot": "lab-tiles-slot",
+      "component": "referredTileComponent",
+      "meta": {
+        "name": "referredTileSlot",
+        "title": "Referred tests"
+      }
+    },
         {
             "name": "pick-lab-request-button",
             "component": "pickLabRequestButton",
@@ -112,4 +149,5 @@
             "slot": "order-actions-slot"
         }
     ]
-}
+}
+
diff --git a/src/summary-tiles/laboratory-summary-tiles.component.tsx b/src/summary-tiles/laboratory-summary-tiles.component.tsx
@@ -1,52 +1,51 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLabTestsStats, useMetrics } from "./laboratory-summary.resource";
-import SummaryTile from "./summary-tile.component";
 import styles from "./laboratory-summary-tiles.scss";
-import { useSession } from "@openmrs/esm-framework";
-import { usePatientQueuesList } from "../queue-list/laboratory-patient-list.resource";
+import {
+  AssignedExtension,
+  ExtensionSlot,
+  useConnectedExtensions,
+  useSession,
+  attach,
+  detachAll,
+  Extension,
+} from "@openmrs/esm-framework";
+import { ComponentContext } from "@openmrs/esm-framework/src/internal";
+import SummaryTile from "./summary-tile.component";
 
 const LaboratorySummaryTiles: React.FC = () => {
   const { t } = useTranslation();
 
   const session = useSession();
 
-  // get tests ordered
-  const { count: testOrderedCount } = useLabTestsStats("");
-
-  // get worklists
-  const { count: worklistCount } = useLabTestsStats("IN_PROGRESS");
-
-  // get refered lists
+  const labTileSlot = "lab-tiles-slot";
 
-  // get approved
-  const { count: completedCount } = useLabTestsStats("COMPLETED");
+  const tilesExtensions = useConnectedExtensions(
+    labTileSlot
+  ) as AssignedExtension[];
 
   return (
-    <>
-      <div className={styles.cardContainer}>
-        <SummaryTile
-          label={t("orders", "Orders")}
-          value={testOrderedCount}
-          headerLabel={t("testsOrdered", "Tests ordered")}
-        />
-        <SummaryTile
-          label={t("inProgress", "In progress")}
-          value={worklistCount}
-          headerLabel={t("worklist", "Worklist")}
-        />
-        <SummaryTile
-          label={t("transferred", "Transferred")}
-          value={0}
-          headerLabel={t("referredTests", "Referred tests")}
-        />
-        <SummaryTile
-          label={t("completed", "Completed")}
-          value={completedCount}
-          headerLabel={t("results", "Results")}
-        />
-      </div>
-    </>
+    <div className={styles.cardContainer}>
+      {tilesExtensions
+        .filter((extension) => Object.keys(extension.meta).length > 0)
+        .map((extension, index) => {
+          return (
+            <ComponentContext.Provider
+              key={extension.id}
+              value={{
+                moduleName: extension.moduleName,
+                extension: {
+                  extensionId: extension.id,
+                  extensionSlotName: labTileSlot,
+                  extensionSlotModuleName: extension.moduleName,
+                },
+              }}
+            >
+              <Extension />
+            </ComponentContext.Provider>
+          );
+        })}
+    </div>
   );
 };
 

diff --git a/src/summary-tiles/laboratory-summary-tiles.scss b/src/summary-tiles/laboratory-summary-tiles.scss
@@ -5,7 +5,7 @@
 .cardContainer {
   background-color: $ui-02 ;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03;
   flex-flow: row wrap;
   margin-top: - spacing.$spacing-03;