Skip to content

Commit

Permalink
clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
jabahum committed Jul 11, 2024
1 parent 05a3697 commit f3cba62
Show file tree
Hide file tree
Showing 18 changed files with 1,242 additions and 128 deletions.
7 changes: 5 additions & 2 deletions src/approved-orders/approved-list.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
} from "@carbon/react";
import styles from "./approved-list.scss";
import { usePatientQueuesList } from "../ordered-orders/tests-ordered-list.resource";
import ApprovedTestOrders from "./approved-test-orders.component";

const ApprovedList: React.FC = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -97,7 +98,7 @@ const ApprovedList: React.FC = () => {
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => {
{rows.map((row, index) => {
return (
<React.Fragment key={row.id}>
<TableExpandRow {...getRowProps({ row })} key={row.id}>
Expand All @@ -108,7 +109,9 @@ const ApprovedList: React.FC = () => {
))}
</TableExpandRow>
<TableExpandedRow colSpan={headers.length + 1}>
{/* <TestOrder testOrder={row} /> */}
<ApprovedTestOrders
patientUuid={tableRows[index]?.patientUuid}
/>
</TableExpandedRow>
</React.Fragment>
);
Expand Down
33 changes: 18 additions & 15 deletions src/approved-orders/approved-list.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use '@carbon/styles/scss/spacing';
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/colors';
@import "~@openmrs/esm-styleguide/src/vars";
@import '../root.scss';

Expand Down Expand Up @@ -184,21 +185,6 @@ title {
}
}

.tableLayerSearch {
margin: 5px;
padding: 10px;
}

.dropDownContainer {
padding: 10px;
}

.toolbar {
position: static;
height: 3rem;
overflow: visible;
background-color: color;
}

.tileContainer {
background-color: $ui-02;
Expand All @@ -221,4 +207,21 @@ title {
@include type.type-style('heading-compact-02');
color: $text-02;
margin-bottom: 0.5rem;
}

.testOrder {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid colors.$gray-20;
margin-top: 1rem;
border-bottom: none;
}

.testCell {
padding-left: spacing.$spacing-05 !important;
}

.testType {
color: colors.$blue-60;
}
140 changes: 140 additions & 0 deletions src/approved-orders/approved-test-orders.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React, { useMemo } from "react";
import {
DataTable,
DataTableSkeleton,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow,
TableSelectAll,
TableSelectRow,
} from "@carbon/react";
import { OverflowMenuVertical } from "@carbon/react/icons";

import { useTranslation } from "react-i18next";
import { ExtensionSlot, useLayoutType } from "@openmrs/esm-framework";
import styles from "./approved-list.scss";
import OrderCustomOverflowMenuComponent from "../ui-components/overflow-menu.component";
import { usePatientLabOrders } from "../patient-test-orders/patient-test-orders.resource";

interface TestOrderProps {
patientUuid: string;
}

const ApprovedTestOrders: React.FC<TestOrderProps> = ({ patientUuid }) => {
const { t } = useTranslation();
const isTablet = useLayoutType() === "tablet";

const { orders, isLoading } = usePatientLabOrders(patientUuid);

const testOrderHeaders: Array<{ key: string; header: string }> = [
{
key: "orderNo",
header: t("orderNo", "Order No."),
},
{
key: "test",
header: t("test", "Test"),
},
{
key: "status",
header: t("status", "Status"),
},
{
key: "actions",
header: t("actions", "Action"),
},
];

const testRows = useMemo(() => {
return orders?.map((order, index) => ({
...orders,
id: order?.uuid,
sampleId: order?.accessionNumber,
date: order.dateActivated,
tests: order?.display,
status: order?.fulfillerStatus,
actions: (
<OrderCustomOverflowMenuComponent
menuTitle={
<>
<OverflowMenuVertical
size={16}
style={{ marginLeft: "0.3rem" }}
/>
</>
}
>
<ExtensionSlot
className={styles.menuLink}
state={{ order: orders[index] }}
name="approved-order-actions-slot"
/>
</OrderCustomOverflowMenuComponent>
),
}));
}, [orders]);

if (isLoading) {
return <DataTableSkeleton />;
}

return (
<>
<div className={styles.testOrder}>
<DataTable
rows={testRows}
headers={testOrderHeaders}
size={isTablet ? "lg" : "sm"}
useZebraStyles
>
{({
rows,
headers,
getHeaderProps,
getRowProps,
getTableProps,
getTableContainerProps,
getSelectionProps,
}) => (
<TableContainer {...getTableContainerProps()}>
<Table {...getTableProps()} aria-label="testorders">
<TableHead>
<TableRow>
<TableSelectAll {...getSelectionProps()} />
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow {...getRowProps({ row })}>
<TableSelectRow
{...getSelectionProps({
row,
})}
/>
{row.cells.map((cell) => (
<TableCell key={cell.id} className={styles.testCell}>
{cell.value}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</DataTable>
</div>
</>
);
};

export default ApprovedTestOrders;
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ import { OverflowMenuVertical } from "@carbon/react/icons";

import { useTranslation } from "react-i18next";
import { ExtensionSlot, useLayoutType } from "@openmrs/esm-framework";
import { usePatientLabOrders } from "./patient-test-orders.resource";
import styles from "./patient-test-orders.scss";
import { usePatientLabOrders } from "../patient-test-orders/patient-test-orders.resource";
import styles from "./tests-ordered.scss";
import OrderCustomOverflowMenuComponent from "../ui-components/overflow-menu.component";
import ScheduleTestOrdersButton from "../ordered-orders/schedule-test-orders.component";
import ScheduleTestOrdersButton from "./schedule-test-orders.component";

interface TestOrderProps {
patientUuid: string;
Expand Down Expand Up @@ -62,7 +62,7 @@ const TestOrders: React.FC<TestOrderProps> = ({ patientUuid }) => {
<ExtensionSlot
className={styles.menuLink}
state={{ order: orders[index] }}
name="order-actions-slot"
name="tests-ordered-actions-slot"
/>
</OrderCustomOverflowMenuComponent>
),
Expand Down
4 changes: 2 additions & 2 deletions src/ordered-orders/tests-ordered-list.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
import styles from "./tests-ordered.scss";
import { usePatientQueuesList } from "./tests-ordered-list.resource";
import { formatWaitTime, trimVisitNumber } from "../utils/functions";
import TestOrders from "../patient-test-orders/patient-test-orders.component";
import TestOrders from "./patient-test-orders.component";

const TestsOrderedList: React.FC = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -128,7 +128,7 @@ const TestsOrderedList: React.FC = () => {
getTableContainerProps,
}) => (
<TableContainer
{...getTableContainerProps}
{...getTableContainerProps()}
className={styles.tableContainer}
>
<Table {...getTableProps()} className={styles.activePatientsTable}>
Expand Down
19 changes: 18 additions & 1 deletion src/ordered-orders/tests-ordered.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@use '@carbon/styles/scss/spacing';
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/colors';
@import "~@openmrs/esm-styleguide/src/vars";
@import '../root.scss';


title {
width: 6.938rem;
height: 1.75rem;
Expand Down Expand Up @@ -223,4 +223,21 @@ title {
svg {
margin-right: 0.5rem;
}
}

.testOrder {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid colors.$gray-20;
margin-top: 1rem;
border-bottom: none;
}

.testCell {
padding-left: spacing.$spacing-05 !important;
}

.testType {
color: colors.$blue-60;
}
21 changes: 0 additions & 21 deletions src/patient-test-orders/patient-test-orders.scss

This file was deleted.

8 changes: 6 additions & 2 deletions src/referred-orders/referred-orders.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
import { getStatusColor } from "../utils/functions";
import styles from "./referred-orders.scss";
import { usePatientQueuesList } from "../ordered-orders/tests-ordered-list.resource";
import TestOrders from "../ordered-orders/patient-test-orders.component";
import ReferredTestOrders from "./referred-test-orders.component";

const ReferredList: React.FC = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -84,7 +86,7 @@ const ReferredList: React.FC = () => {
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => {
{rows.map((row, index) => {
return (
<React.Fragment key={row.id}>
<TableExpandRow {...getRowProps({ row })} key={row.id}>
Expand All @@ -95,7 +97,9 @@ const ReferredList: React.FC = () => {
))}
</TableExpandRow>
<TableExpandedRow colSpan={headers.length + 1}>
{/* <TestOrder testOrder={row} /> */}
<ReferredTestOrders
patientUuid={tableRows[index]?.patientUuid}
/>
</TableExpandedRow>
</React.Fragment>
);
Expand Down
Loading

0 comments on commit f3cba62

Please sign in to comment.