From fc8a3a5bb2d5d40511bb301d9d3960710608c275 Mon Sep 17 00:00:00 2001 From: jabahum Date: Thu, 16 Nov 2023 12:06:23 +0300 Subject: [PATCH] ft : setup dynamic search --- .../completed-list.component.tsx | 78 ++++++++++++++----- src/completed-list/completed-list.scss | 46 ++++++++++- .../laboratory-patient-list.component.tsx | 24 ++++-- src/queue-list/laboratory-queue.scss | 23 ++++++ src/queue-list/laboratory-tabs.component.tsx | 19 +---- src/review-list/review-list.component.tsx | 69 ++++++++++++---- src/review-list/review-list.scss | 23 ++++++ src/work-list/work-list.component.tsx | 69 ++++++++++++---- src/work-list/work-list.resource.ts | 2 +- src/work-list/work-list.scss | 29 ++++++- 10 files changed, 302 insertions(+), 80 deletions(-) diff --git a/src/completed-list/completed-list.component.tsx b/src/completed-list/completed-list.component.tsx index ade54a4..46264e0 100644 --- a/src/completed-list/completed-list.component.tsx +++ b/src/completed-list/completed-list.component.tsx @@ -18,24 +18,31 @@ import { TableToolbarSearch, Layer, Tile, + DatePicker, + DatePickerInput, + Select, + SelectItem, + Dropdown, } from "@carbon/react"; import styles from "./completed-list.scss"; interface CompletedlistProps { - careSetting: string; - activatedOnOrAfterDate: string; fulfillerStatus: string; } -const CompletedList: React.FC = ({ - careSetting, - activatedOnOrAfterDate, - fulfillerStatus, -}) => { +const CompletedList: React.FC = ({ fulfillerStatus }) => { const { t } = useTranslation(); + // const [careSetting, setCareSetting] = useState(); + + const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState(); + + const [selectedCareSetting, setSelectedCareSetting] = useState(); + + const careSettings = ["INPATIENT", "OUTPATIENT"]; + const { workListEntries, isLoading, isError } = useGetOrdersWorklist( - careSetting, + selectedCareSetting, activatedOnOrAfterDate, fulfillerStatus ); @@ -83,16 +90,8 @@ const CompletedList: React.FC = ({ if (isLoading) { return ; } - if (isError) { - return ( - - ); - } - if (paginatedWorkListEntries?.length) { + if (paginatedWorkListEntries?.length >= 0) { return (
@@ -114,8 +113,48 @@ const CompletedList: React.FC = ({ backgroundColor: "color", }} > - - + + + + + + + + setActivatedOnOrAfterDate(event.target.value) + } + type="date" + /> + + + = ({ +
div { + >div { max-height: max-content !important; background-color: $ui-02; } } - th[colspan] td[colspan] > div:first-child { + th[colspan] td[colspan]>div:first-child { padding: 0 1rem; } +} + +.tableLayerSearch { + margin: 5px; + padding: 10px; + +} + +.dropDownContainer { + padding: 10px; +} + +.toolbar { + display: flex; + align-items: center; + padding: 5px; + margin: 10px; +} + + +.tileContainer { + background-color: $ui-02; + border-top: 1px solid $ui-03; + padding: 5rem 0; +} + +.tile { + margin: auto; + width: fit-content; +} + +.tileContent { + display: flex; + flex-direction: column; + align-items: center; +} + +.content { + @include type.type-style('heading-compact-02'); + color: $text-02; + margin-bottom: 0.5rem; } \ No newline at end of file diff --git a/src/queue-list/laboratory-patient-list.component.tsx b/src/queue-list/laboratory-patient-list.component.tsx index ef84e08..8215e5d 100644 --- a/src/queue-list/laboratory-patient-list.component.tsx +++ b/src/queue-list/laboratory-patient-list.component.tsx @@ -20,6 +20,7 @@ import { Layer, Tag, TableExpandedRow, + Tile, } from "@carbon/react"; import { useTranslation } from "react-i18next"; import { @@ -150,7 +151,7 @@ const LaboratoryPatientList: React.FC = () => { return ; } - if (patientQueueEntries?.length) { + if (patientQueueEntries?.length >= 0) { return (
@@ -230,6 +231,20 @@ const LaboratoryPatientList: React.FC = () => { })}
+ {rows.length === 0 ? ( +
+ +
+

+ {t( + "noWorklistsToDisplay", + "No workists orders to display" + )} +

+
+ +
+ ) : null} = () => {
); } - - return ( -
-
- -
- ); }; export default LaboratoryPatientList; diff --git a/src/queue-list/laboratory-queue.scss b/src/queue-list/laboratory-queue.scss index 2d854c6..fbb6275 100644 --- a/src/queue-list/laboratory-queue.scss +++ b/src/queue-list/laboratory-queue.scss @@ -187,4 +187,27 @@ title { th[colspan] td[colspan] > div:first-child { padding: 0 1rem; } +} + +.tileContainer { + background-color: $ui-02; + border-top: 1px solid $ui-03; + padding: 5rem 0; +} + +.tile { + margin: auto; + width: fit-content; +} + +.tileContent { + display: flex; + flex-direction: column; + align-items: center; +} + +.content { + @include type.type-style('heading-compact-02'); + color: $text-02; + margin-bottom: 0.5rem; } \ No newline at end of file diff --git a/src/queue-list/laboratory-tabs.component.tsx b/src/queue-list/laboratory-tabs.component.tsx index 9298ed7..66016ec 100644 --- a/src/queue-list/laboratory-tabs.component.tsx +++ b/src/queue-list/laboratory-tabs.component.tsx @@ -48,12 +48,7 @@ const LaboratoryQueueTabs: React.FC = () => {
- - +
@@ -68,11 +63,7 @@ const LaboratoryQueueTabs: React.FC = () => {
- +
@@ -87,11 +78,7 @@ const LaboratoryQueueTabs: React.FC = () => {
- +
diff --git a/src/review-list/review-list.component.tsx b/src/review-list/review-list.component.tsx index 1f59c34..467f1d7 100644 --- a/src/review-list/review-list.component.tsx +++ b/src/review-list/review-list.component.tsx @@ -18,28 +18,35 @@ import { TableToolbarSearch, Layer, Tile, + DatePicker, + DatePickerInput, + Select, + SelectItem, } from "@carbon/react"; import styles from "./review-list.scss"; interface ReviewlistProps { - careSetting: string; - activatedOnOrAfterDate: string; fulfillerStatus: string; } -const ReviewList: React.FC = ({ - careSetting, - activatedOnOrAfterDate, - fulfillerStatus, -}) => { +const ReviewList: React.FC = ({ fulfillerStatus }) => { const { t } = useTranslation(); + + const [careSetting, setCareSetting] = useState(); + + const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState(); + + const [selectedCareSetting, setSelectedCareSetting] = useState(); + const { workListEntries, isLoading, isError } = useGetOrdersWorklist( careSetting, activatedOnOrAfterDate, fulfillerStatus ); + const careSettings = ["INPATIENT", "OUTPATIENT"]; + const pageSizes = [10, 20, 30, 40, 50]; const [page, setPage] = useState(1); const [currentPageSize, setPageSize] = useState(10); @@ -83,15 +90,6 @@ const ReviewList: React.FC = ({ if (isLoading) { return ; } - if (isError) { - return ( - - ); - } - if (paginatedWorkListEntries?.length >= 0) { return (
@@ -115,6 +113,45 @@ const ReviewList: React.FC = ({ }} > + + + + + + + setActivatedOnOrAfterDate(event.target.value) + } + type="date" + /> + + div:first-child { padding: 0 1rem; } +} + + +.tileContainer { + background-color: $ui-02; + border-top: 1px solid $ui-03; + padding: 5rem 0; +} + +.tile { + margin: auto; + width: fit-content; +} + +.tileContent { + display: flex; + flex-direction: column; + align-items: center; +} +.content { + @include type.type-style('heading-compact-02'); + color: $text-02; + margin-bottom: 0.5rem; } \ No newline at end of file diff --git a/src/work-list/work-list.component.tsx b/src/work-list/work-list.component.tsx index 32ead22..09f92e4 100644 --- a/src/work-list/work-list.component.tsx +++ b/src/work-list/work-list.component.tsx @@ -26,6 +26,10 @@ import { TableExpandedRow, Button, Tile, + DatePicker, + DatePickerInput, + Select, + SelectItem, } from "@carbon/react"; import { Result, useGetOrdersWorklist } from "./work-list.resource"; import styles from "./work-list.scss"; @@ -34,8 +38,6 @@ import { launchOverlay } from "../components/overlay/hook"; import ResultForm from "../results/result-form.component"; interface WorklistProps { - careSetting: string; - activatedOnOrAfterDate: string; fulfillerStatus: string; } @@ -44,14 +46,18 @@ interface ResultsOrderProps { patientUuid: string; } -const WorkList: React.FC = ({ - careSetting, - activatedOnOrAfterDate, - fulfillerStatus, -}) => { +const WorkList: React.FC = ({ fulfillerStatus }) => { const { t } = useTranslation(); - const { workListEntries, isLoading, isError } = useGetOrdersWorklist( + const [careSetting, setCareSetting] = useState(); + + const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState(); + + const [selectedCareSetting, setSelectedCareSetting] = useState(); + + const careSettings = ["INPATIENT", "OUTPATIENT"]; + + const { workListEntries, isLoading } = useGetOrdersWorklist( careSetting, activatedOnOrAfterDate, fulfillerStatus @@ -127,14 +133,6 @@ const WorkList: React.FC = ({ if (isLoading) { return ; } - if (isError) { - return ( - - ); - } if (paginatedWorkListEntries?.length >= 0) { return ( @@ -159,6 +157,45 @@ const WorkList: React.FC = ({ }} > + + + + + + + setActivatedOnOrAfterDate(event.target.value) + } + type="date" + /> + + } }, Error - >(apiUrl, openmrsFetch, { refreshInterval: 3000 }); + >(apiUrl, openmrsFetch); return { workListEntries: data?.data ? data.data.results : [], diff --git a/src/work-list/work-list.scss b/src/work-list/work-list.scss index 2d854c6..6730120 100644 --- a/src/work-list/work-list.scss +++ b/src/work-list/work-list.scss @@ -122,6 +122,7 @@ title { border-bottom: none; } } + .headerBtnContainer { background-color: $ui-background; padding: spacing.$spacing-05; @@ -178,13 +179,37 @@ title { td { padding: 0.5rem; - > div { + >div { max-height: max-content !important; background-color: $ui-02; } } - th[colspan] td[colspan] > div:first-child { + th[colspan] td[colspan]>div:first-child { padding: 0 1rem; } +} + + +.tileContainer { + background-color: $ui-02; + border-top: 1px solid $ui-03; + padding: 5rem 0; +} + +.tile { + margin: auto; + width: fit-content; +} + +.tileContent { + display: flex; + flex-direction: column; + align-items: center; +} + +.content { + @include type.type-style('heading-compact-02'); + color: $text-02; + margin-bottom: 0.5rem; } \ No newline at end of file