Skip to content

Commit

Permalink
ft : setup dynamic search
Browse files Browse the repository at this point in the history
  • Loading branch information
@jabahum
jabahum committed Nov 16, 2023
1 parent 021b392 commit fc8a3a5
Show file tree
Hide file tree
Showing 10 changed files with 302 additions and 80 deletions.
78 changes: 59 additions & 19 deletions src/completed-list/completed-list.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<CompletedlistProps> = ({
careSetting,
activatedOnOrAfterDate,
fulfillerStatus,
}) => {
const CompletedList: React.FC<CompletedlistProps> = ({ 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
);
Expand Down Expand Up @@ -83,16 +90,8 @@ const CompletedList: React.FC<CompletedlistProps> = ({
if (isLoading) {
return <DataTableSkeleton role="progressbar" />;
}
if (isError) {
return (
<ErrorState
error={`Error returning completed list` + isError.message}
headerTitle={"Completed list Error"}
/>
);
}

if (paginatedWorkListEntries?.length) {
if (paginatedWorkListEntries?.length >= 0) {
return (
<div>
<div className={styles.headerBtnContainer}></div>
Expand All @@ -114,8 +113,48 @@ const CompletedList: React.FC<CompletedlistProps> = ({
backgroundColor: "color",
}}
>
<TableToolbarContent>
<Layer>
<TableToolbarContent className={styles.toolbar}>
<Layer style={{ margin: "5px" }}>
<Select
labelText={""}
id="care-setting"
value={selectedCareSetting}
onChange={(event) =>
setSelectedCareSetting(event.target.value)
}
>
{!selectedCareSetting ? (
<SelectItem
text={t("selectCareSetting", "Select CareSetting...")}
value=""
/>
) : null}
{careSettings?.length > 0 &&
careSettings.map((careSetting) => (
<SelectItem
key={careSetting}
text={careSetting}
value={careSetting}
>
{careSetting}
</SelectItem>
))}
</Select>
</Layer>
<Layer style={{ margin: "5px" }}>
<DatePicker datePickerType="single">
<DatePickerInput
labelText={""}
id="activatedOnOrAfterDate"
placeholder="mm/dd/yyyy"
onChange={(event) =>
setActivatedOnOrAfterDate(event.target.value)
}
type="date"
/>
</DatePicker>
</Layer>
<Layer style={{ margin: "5px" }}>
<TableToolbarSearch
onChange={onInputChange}
placeholder={t("searchThisList", "Search this list")}
Expand All @@ -124,6 +163,7 @@ const CompletedList: React.FC<CompletedlistProps> = ({
</Layer>
</TableToolbarContent>
</TableToolbar>
<br />
<Table
{...getTableProps()}
className={styles.activePatientsTable}
Expand Down
46 changes: 44 additions & 2 deletions src/completed-list/completed-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ title {
border-bottom: none;
}
}

.headerBtnContainer {
background-color: $ui-background;
padding: spacing.$spacing-05;
Expand Down Expand Up @@ -178,13 +179,54 @@ 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;
}
}

.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;
}
24 changes: 16 additions & 8 deletions src/queue-list/laboratory-patient-list.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
Layer,
Tag,
TableExpandedRow,
Tile,
} from "@carbon/react";
import { useTranslation } from "react-i18next";
import {
Expand Down Expand Up @@ -150,7 +151,7 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
return <DataTableSkeleton role="progressbar" />;
}

if (patientQueueEntries?.length) {
if (patientQueueEntries?.length >= 0) {
return (
<div>
<div className={styles.headerBtnContainer}></div>
Expand Down Expand Up @@ -230,6 +231,20 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
})}
</TableBody>
</Table>
{rows.length === 0 ? (
<div className={styles.tileContainer}>
<Tile className={styles.tile}>
<div className={styles.tileContent}>
<p className={styles.content}>
{t(
"noWorklistsToDisplay",
"No workists orders to display"
)}
</p>
</div>
</Tile>
</div>
) : null}
<Pagination
forwardText="Next page"
backwardText="Previous page"
Expand All @@ -253,13 +268,6 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => {
</div>
);
}

return (
<div>
<div className={styles.headerBtnContainer}></div>
<EmptyState displayText={"Tests Ordered"} headerTitle={"Tests Ordered"} />
</div>
);
};

export default LaboratoryPatientList;
23 changes: 23 additions & 0 deletions src/queue-list/laboratory-queue.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
19 changes: 3 additions & 16 deletions src/queue-list/laboratory-tabs.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,7 @@ const LaboratoryQueueTabs: React.FC = () => {
<TabPanel style={{ padding: 0 }}>
<div>
<div className={styles.headerBtnContainer}></div>

<WorkList
careSetting={"6f0c9a92-6f24-11e3-af88-005056821db0"}
activatedOnOrAfterDate={"2023-11-04 00:00:00"}
fulfillerStatus={"IN_PROGRESS"}
/>
<WorkList fulfillerStatus={"IN_PROGRESS"} />
</div>
</TabPanel>
<TabPanel style={{ padding: 0 }}>
Expand All @@ -68,11 +63,7 @@ const LaboratoryQueueTabs: React.FC = () => {
<TabPanel style={{ padding: 0 }}>
<div>
<div className={styles.headerBtnContainer}></div>
<ReviewList
careSetting={"6f0c9a92-6f24-11e3-af88-005056821db0"}
activatedOnOrAfterDate={"2023-11-04 00:00:00"}
fulfillerStatus={"IN_PROGRESS"}
/>
<ReviewList fulfillerStatus={"IN_PROGRESS"} />
</div>
</TabPanel>
<TabPanel style={{ padding: 0 }}>
Expand All @@ -87,11 +78,7 @@ const LaboratoryQueueTabs: React.FC = () => {
<TabPanel style={{ padding: 0 }}>
<div>
<div className={styles.headerBtnContainer}></div>
<CompletedList
careSetting={"6f0c9a92-6f24-11e3-af88-005056821db0"}
activatedOnOrAfterDate={"2023-11-04 00:00:00"}
fulfillerStatus={"IN_PROGRESS"}
/>
<CompletedList fulfillerStatus={"COMPLETED"} />
</div>
</TabPanel>
</TabPanels>
Expand Down
Loading

0 comments on commit fc8a3a5

Please sign in to comment.