Skip to content

Commit e31adb9

Browse files
jabahumjabahum
authored
(fix) : fix the non display of the approved or completed table (#55)
* clean up * clean up * remove unneccesary code * remove unnecessary code * clean up * resolve issues * fix undefined * clean * approve table display * extract table from component * remove unnecessary code * filter table entries * fix refetch * clean * fix comments and refactor apiUrl * add search on tests ordered
1 parent b563fbd commit e31adb9

File tree

56 files changed

+654
-1434
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+654
-1434
lines changed

‎src/completed-list/completed-list.component.tsx

Lines changed: 129 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import React, { useMemo, useState } from "react";
22
import { useTranslation } from "react-i18next";
33
import { useGetOrdersWorklist } from "../work-list/work-list.resource";
44
import {
5-
ErrorState,
65
formatDate,
76
parseDate,
87
usePagination,
9-
isDesktop,
8+
ConfigurableLink,
109
} from "@openmrs/esm-framework";
1110
import {
1211
DataTable,
13-
DataTableSkeleton,
1412
Pagination,
1513
Table,
1614
TableBody,
@@ -19,17 +17,15 @@ import {
1917
TableHead,
2018
TableHeader,
2119
TableRow,
20+
Tile,
2221
TableToolbar,
2322
TableToolbarContent,
24-
TableToolbarSearch,
2523
Layer,
26-
Tile,
24+
TableToolbarSearch,
2725
DatePicker,
2826
DatePickerInput,
29-
Select,
30-
SelectItem,
27+
DataTableSkeleton,
3128
Tag,
32-
Dropdown,
3329
} from "@carbon/react";
3430
import styles from "./completed-list.scss";
3531
import { getStatusColor } from "../utils/functions";
@@ -38,97 +34,13 @@ interface CompletedListProps {
3834
fulfillerStatus: string;
3935
}
4036

41-
interface TableRowProps {
42-
entry: {
43-
uuid: string;
44-
orderNumber: string;
45-
accessionNumber: string;
46-
concept: { display: string };
47-
action: string;
48-
fulfillerStatus: string;
49-
orderer: { display: string };
50-
urgency: string;
51-
dateActivated: string;
52-
patient: { display: string };
53-
};
54-
}
55-
56-
const StatusTag: React.FC<{ fulfillerStatus: string }> = ({
57-
fulfillerStatus,
58-
}) => {
59-
return (
60-
<Tag>
61-
<span
62-
className={styles.statusContainer}
63-
style={{ color: `${getStatusColor(fulfillerStatus)}` }}
64-
>
65-
<span>{fulfillerStatus}</span>
66-
</span>
67-
</Tag>
68-
);
69-
};
70-
71-
const CustomTableRow: React.FC<TableRowProps> = ({ entry }) => {
72-
const {
73-
uuid,
74-
orderNumber,
75-
accessionNumber,
76-
concept,
77-
action,
78-
fulfillerStatus,
79-
orderer,
80-
urgency,
81-
dateActivated,
82-
patient,
83-
} = entry;
84-
85-
return (
86-
<TableRow key={uuid}>
87-
<TableCell>
88-
<span>{formatDate(parseDate(dateActivated))}</span>
89-
</TableCell>
90-
<TableCell>
91-
<span>{orderNumber}</span>
92-
</TableCell>
93-
<TableCell>
94-
<span>{patient.display.split("-")[1]}</span>
95-
</TableCell>
96-
<TableCell>
97-
<span>{accessionNumber}</span>
98-
</TableCell>
99-
<TableCell>
100-
<span>{concept.display}</span>
101-
</TableCell>
102-
<TableCell>
103-
<span className="single-line-content">{action}</span>
104-
</TableCell>
105-
<TableCell>
106-
<StatusTag fulfillerStatus={fulfillerStatus} />
107-
</TableCell>
108-
<TableCell>
109-
<span>{orderer.display}</span>
110-
</TableCell>
111-
<TableCell>
112-
<span>{urgency}</span>
113-
</TableCell>
114-
</TableRow>
115-
);
116-
};
117-
11837
const CompletedList: React.FC<CompletedListProps> = ({ fulfillerStatus }) => {
11938
const { t } = useTranslation();
12039

121-
const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState("");
40+
const { workListEntries, isLoading } = useGetOrdersWorklist(fulfillerStatus);
12241

123-
const { workListEntries, isLoading } = useGetOrdersWorklist(
124-
activatedOnOrAfterDate,
125-
fulfillerStatus
126-
);
127-
128-
const pageSizes = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50];
129-
const [page, setPage] = useState(1);
130-
const [currentPageSize, setPageSize] = useState(5);
131-
const [nextOffSet, setNextOffSet] = useState(0);
42+
const pageSizes = [10, 20, 30, 40, 50];
43+
const [currentPageSize, setPageSize] = useState(10);
13244

13345
const {
13446
goTo,
@@ -153,28 +65,134 @@ const CompletedList: React.FC<CompletedListProps> = ({ fulfillerStatus }) => {
15365
];
15466

15567
const tableRows = useMemo(() => {
156-
return paginatedWorkListEntries?.map((entry, index) => (
157-
<CustomTableRow key={index} entry={entry} />
158-
));
159-
}, [paginatedWorkListEntries]);
68+
return paginatedWorkListEntries
69+
?.filter(
70+
(item) =>
71+
(item.action === "DISCONTINUE" || item.action === "REVISE") &&
72+
item.fulfillerStatus === fulfillerStatus
73+
)
74+
.map((entry) => ({
75+
...entry,
76+
id: entry?.uuid,
77+
date: formatDate(parseDate(entry?.dateActivated)),
78+
79+
patient: (
80+
<ConfigurableLink
81+
to={`\${openmrsSpaBase}/patient/${entry?.patient?.uuid}/chart/laboratory-orders`}
82+
>
83+
{entry?.patient?.display.split("-")[1]}
84+
</ConfigurableLink>
85+
),
86+
orderNumber: entry?.orderNumber,
87+
accessionNumber: entry?.accessionNumber,
88+
test: entry?.concept?.display,
89+
action: entry?.action,
90+
status: (
91+
<span
92+
className={styles.statusContainer}
93+
style={{ color: `${getStatusColor(entry?.fulfillerStatus)}` }}
94+
>
95+
{entry?.fulfillerStatus}
96+
</span>
97+
),
98+
orderer: entry?.orderer?.display,
99+
orderType: entry?.orderType.display,
100+
urgency: entry?.urgency,
101+
}));
102+
}, [fulfillerStatus, paginatedWorkListEntries]);
160103

161104
if (isLoading) {
162105
return <DataTableSkeleton role="progressbar" />;
163106
}
164107

165-
if (paginatedWorkListEntries?.length > 0) {
166-
return <DataTable rows={tableRows} headers={tableColumns} useZebraStyles />;
167-
} else {
108+
if (paginatedWorkListEntries?.length >= 0) {
168109
return (
169-
<div className={styles.tileContainer}>
170-
<Tile className={styles.tile}>
171-
<div className={styles.tileContent}>
172-
<p className={styles.content}>
173-
{t("noCompletedListToDisplay", "No Completed List to display")}
174-
</p>
175-
</div>
176-
</Tile>
177-
</div>
110+
<DataTable rows={tableRows} headers={tableColumns} useZebraStyles>
111+
{({
112+
rows,
113+
headers,
114+
getHeaderProps,
115+
getTableProps,
116+
getRowProps,
117+
onInputChange,
118+
}) => (
119+
<TableContainer className={styles.tableContainer}>
120+
<TableToolbar
121+
style={{
122+
position: "static",
123+
}}
124+
>
125+
<TableToolbarContent>
126+
<Layer style={{ margin: "5px" }}>
127+
<TableToolbarSearch
128+
expanded
129+
onChange={onInputChange}
130+
placeholder={t("searchThisList", "Search this list")}
131+
size="sm"
132+
/>
133+
</Layer>
134+
</TableToolbarContent>
135+
</TableToolbar>
136+
<Table {...getTableProps()} className={styles.activePatientsTable}>
137+
<TableHead>
138+
<TableRow>
139+
{headers.map((header) => (
140+
<TableHeader {...getHeaderProps({ header })}>
141+
{header.header?.content ?? header.header}
142+
</TableHeader>
143+
))}
144+
</TableRow>
145+
</TableHead>
146+
<TableBody>
147+
{rows.map((row, index) => {
148+
return (
149+
<React.Fragment key={row.id}>
150+
<TableRow {...getRowProps({ row })} key={row.id}>
151+
{row.cells.map((cell) => (
152+
<TableCell key={cell.id}>
153+
{cell.value?.content ?? cell.value}
154+
</TableCell>
155+
))}
156+
</TableRow>
157+
</React.Fragment>
158+
);
159+
})}
160+
</TableBody>
161+
</Table>
162+
{rows.length === 0 ? (
163+
<div className={styles.tileContainer}>
164+
<Tile className={styles.tile}>
165+
<div className={styles.tileContent}>
166+
<p className={styles.content}>
167+
{t(
168+
"noWorklistsToDisplay",
169+
"No worklists orders to display"
170+
)}
171+
</p>
172+
</div>
173+
</Tile>
174+
</div>
175+
) : null}
176+
<Pagination
177+
forwardText="Next page"
178+
backwardText="Previous page"
179+
page={currentPage}
180+
pageSize={currentPageSize}
181+
pageSizes={pageSizes}
182+
totalItems={workListEntries?.length}
183+
className={styles.pagination}
184+
onChange={({ pageSize, page }) => {
185+
if (pageSize !== currentPageSize) {
186+
setPageSize(pageSize);
187+
}
188+
if (page !== currentPage) {
189+
goTo(page);
190+
}
191+
}}
192+
/>
193+
</TableContainer>
194+
)}
195+
</DataTable>
178196
);
179197
}
180198
};

‎src/completed-list/completed-list.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -194,10 +194,10 @@ title {
194194
}
195195

196196
.toolbar {
197-
display: flex;
198-
align-items: center;
199-
padding: 5px;
200-
margin: 10px;
197+
position: static;
198+
height: 3rem;
199+
overflow: visible;
200+
background-color: color;
201201
}
202202

203203
.tileContainer {
@@ -221,4 +221,4 @@ title {
221221
@include type.type-style('heading-compact-02');
222222
color: $text-02;
223223
margin-bottom: 0.5rem;
224-
}
224+
}

‎src/config-schema.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const configSchema = {
2323
},
2424
laboratoryOrderTypeUuid: {
2525
_type: Type.String,
26-
_default: "52a447d3-a64a-11e3-9aeb-50e549534c5e",
26+
_default: "",
2727
_description: "Uuid for orderType",
2828
},
2929
laboratoryReferalDestinationUuid: {

‎src/header/laboratory-header.component.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export const LaboratoryHeader: React.FC = () => {
1515
<div className={styles["left-justified-items"]}>
1616
<LaboratoryIllustration />
1717
<div className={styles["page-labels"]}>
18-
{/* <p>{t('laboratory', 'Laboratory')}</p> */}
1918
<p className={styles["page-name"]}>{t("laboratory", "Laboratory")}</p>
2019
</div>
2120
</div>

‎src/header/laboratory-header.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
color: $text-02;
88
height: spacing.$spacing-12;
99
background-color: $ui-02;
10+
border: 1px solid $ui-03;
11+
border-left: 0px;
1012
display: flex;
1113
justify-content: space-between;
14+
margin-bottom: 2rem;
1215
}
1316

1417
.left-justified-items {

0 commit comments

Comments
 (0)