From 45c189c97df05cfd8336487834fd5aa32162f2c7 Mon Sep 17 00:00:00 2001
From: gitcliff <46714226+gitcliff@users.noreply.github.com>
Date: Wed, 31 Jan 2024 11:27:12 +0300
Subject: [PATCH] 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
---
README.md | 3 +
src/index.ts | 20 +++++
src/lab-tiles/completed-tile.component.tsx | 22 ++++++
src/lab-tiles/referred-tile.component.tsx | 19 +++++
.../tests-ordered-tile.component.tsx | 22 ++++++
src/lab-tiles/worklist-tile.component.tsx | 22 ++++++
src/routes.json | 40 +++++++++-
.../laboratory-summary-tiles.component.tsx | 75 +++++++++----------
.../laboratory-summary-tiles.scss | 2 +-
9 files changed, 185 insertions(+), 40 deletions(-)
create mode 100644 src/lab-tiles/completed-tile.component.tsx
create mode 100644 src/lab-tiles/referred-tile.component.tsx
create mode 100644 src/lab-tiles/tests-ordered-tile.component.tsx
create mode 100644 src/lab-tiles/worklist-tile.component.tsx
diff --git a/README.md b/README.md
index 09c29f81..cc133c46 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,9 @@ Implementers can add or remove laboratory tab panels via extension configuration
+### 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
index 363d2493..12313d9c 100644
--- 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
new file mode 100644
index 00000000..ae943f0f
--- /dev/null
+++ 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 (
+
+ );
+};
+
+export default ReferredTileComponent;
diff --git a/src/lab-tiles/referred-tile.component.tsx b/src/lab-tiles/referred-tile.component.tsx
new file mode 100644
index 00000000..c3c25a89
--- /dev/null
+++ 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 (
+
+ );
+};
+
+export default ReferredTileComponent;
diff --git a/src/lab-tiles/tests-ordered-tile.component.tsx b/src/lab-tiles/tests-ordered-tile.component.tsx
new file mode 100644
index 00000000..2c65e041
--- /dev/null
+++ 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 (
+
+ );
+};
+
+export default ReferredTileComponent;
diff --git a/src/lab-tiles/worklist-tile.component.tsx b/src/lab-tiles/worklist-tile.component.tsx
new file mode 100644
index 00000000..dd65c8c7
--- /dev/null
+++ 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 (
+
+ );
+};
+
+export default WorklistTileComponent;
diff --git a/src/routes.json b/src/routes.json
index 3032c9bb..e4171ec2 100644
--- 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"
}
]
-}
\ No newline at end of file
+}
+
diff --git a/src/summary-tiles/laboratory-summary-tiles.component.tsx b/src/summary-tiles/laboratory-summary-tiles.component.tsx
index a99b692c..1c323767 100644
--- 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 (
- <>
-
-
-
-
-
-
- >
+
+ {tilesExtensions
+ .filter((extension) => Object.keys(extension.meta).length > 0)
+ .map((extension, index) => {
+ return (
+
+
+
+ );
+ })}
+
);
};
diff --git a/src/summary-tiles/laboratory-summary-tiles.scss b/src/summary-tiles/laboratory-summary-tiles.scss
index c698e19e..8fea1ef0 100644
--- 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;