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;