From ee3dac5ae519e62196e1ed303b409fc88cb9fc56 Mon Sep 17 00:00:00 2001 From: felix Date: Mon, 29 Jul 2024 11:05:03 +0300 Subject: [PATCH] reorganized styles in common folder --- src/hooks/useSearchGroupedResults.ts | 2 - .../common/groupedOrdersTable.component.tsx | 9 +- .../common/groupedOrdersTable.scss | 22 ++ .../common/listOrderDetails.component.tsx | 203 ++++++++++-------- .../common/listOrderDetails.scss | 20 +- .../common/orderDetail.component.tsx | 2 +- src/radiology-tabs/common/orderDetail.scss | 15 ++ .../common/radiologyProps.resource.ts | 1 + .../orders-not-done.component.tsx | 8 +- .../referred-ordered.component.tsx | 9 +- .../review-ordered.component.tsx | 4 +- .../radiology-instructions.component.tsx | 2 +- .../test-ordered/tests-ordered.component.tsx | 7 +- .../work-list/work-list.component.tsx | 7 +- 14 files changed, 174 insertions(+), 137 deletions(-) create mode 100644 src/radiology-tabs/common/groupedOrdersTable.scss create mode 100644 src/radiology-tabs/common/orderDetail.scss diff --git a/src/hooks/useSearchGroupedResults.ts b/src/hooks/useSearchGroupedResults.ts index fefca24..28ef7c8 100644 --- a/src/hooks/useSearchGroupedResults.ts +++ b/src/hooks/useSearchGroupedResults.ts @@ -7,8 +7,6 @@ export function useSearchGroupedResults( ) { const searchResults = useMemo(() => { if (searchString && searchString.trim() !== "") { - const search = searchString.toLowerCase(); - // Normalize the search string to lowercase const lowerSearchString = searchString.toLowerCase(); return data.filter((orderGroup) => diff --git a/src/radiology-tabs/common/groupedOrdersTable.component.tsx b/src/radiology-tabs/common/groupedOrdersTable.component.tsx index 67efb30..6541e3f 100644 --- a/src/radiology-tabs/common/groupedOrdersTable.component.tsx +++ b/src/radiology-tabs/common/groupedOrdersTable.component.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState } from "react"; -import styles from "./listOrderDetails.scss"; +import styles from "./groupedOrdersTable.scss"; import { useTranslation } from "react-i18next"; import { formatDate, parseDate, usePagination } from "@openmrs/esm-framework"; import { GroupedOrdersTableProps } from "./radiologyProps.resource"; @@ -15,19 +15,13 @@ import { TableExpandHeader, TableCell, DataTable, - DataTableSkeleton, Pagination, - OverflowMenu, - OverflowMenuItem, TableContainer, TableToolbar, TableToolbarContent, TableToolbarSearch, - Tile, - Button, } from "@carbon/react"; import ListOrderDetails from "./listOrderDetails.component"; -import { usePaginationInfo } from "@openmrs/esm-patient-common-lib"; // render Grouped by patient Orders in radiology module const GroupedOrdersTable: React.FC = (props) => { @@ -67,7 +61,6 @@ const GroupedOrdersTable: React.FC = (props) => { } = usePagination(searchResults, currentPageSize); const pageSizes = [10, 20, 30, 40, 50]; - const [expandedRows] = useState>(new Set()); const rowsdata = useMemo(() => { return paginatedResults.map((patient) => ({ diff --git a/src/radiology-tabs/common/groupedOrdersTable.scss b/src/radiology-tabs/common/groupedOrdersTable.scss new file mode 100644 index 0000000..15c4e73 --- /dev/null +++ b/src/radiology-tabs/common/groupedOrdersTable.scss @@ -0,0 +1,22 @@ +@use '@carbon/layout'; +@use '@carbon/colors'; +@use '@openmrs/esm-styleguide/src/vars' as *; + + .noOrdersDiv{ + background-color: #fff; + text-align: center; + font-weight:bold; + width: 100%; + } + + .ordersTableToolbar{ + position: static; + height: 3rem; + overflow: visible; + margin: 0; + } + + .ordersToolbarSearchBar{ + background-color:#f4f4f4 ; + } + \ No newline at end of file diff --git a/src/radiology-tabs/common/listOrderDetails.component.tsx b/src/radiology-tabs/common/listOrderDetails.component.tsx index cc60f35..19dd687 100644 --- a/src/radiology-tabs/common/listOrderDetails.component.tsx +++ b/src/radiology-tabs/common/listOrderDetails.component.tsx @@ -127,98 +127,117 @@ const ListOrderDetails: React.FC = (props) => { {props.showActions && (
- {props.actions.map((action) => { - if (action.actionName === "add-radiology-to-worklist-dialog") { - return ( - - ); - } - if (action.actionName === "procedureReportForm") { - return ( - - ); - } - if (action.actionName === "review-radilogy-report-dialog") { - return ( - - ); - } - if (action.actionName === "radiology-reject-reason-modal") { - return ( - - ); - } - if (action.actionName === "reject-radiology-order-dialog") { - return ( - - ); - } - })} + {props.actions + .sort((a, b) => { + // Replace 'property' with the actual property you want to sort by + if (a.displayPosition < b.displayPosition) return -1; + if (a.displayPosition > b.displayPosition) return 1; + return 0; + }) + .map((action) => { + if ( + action.actionName === "add-radiology-to-worklist-dialog" + ) { + return ( + + ); + } + if (action.actionName === "procedureReportForm") { + return ( + + ); + } + if (action.actionName === "review-radilogy-report-dialog") { + return ( + + ); + } + if (action.actionName === "radiology-reject-reason-modal") { + return ( + + ); + } + if (action.actionName === "reject-radiology-order-dialog") { + return ( + + ); + } + })}
)}
diff --git a/src/radiology-tabs/common/listOrderDetails.scss b/src/radiology-tabs/common/listOrderDetails.scss index e21b77e..644b8b5 100644 --- a/src/radiology-tabs/common/listOrderDetails.scss +++ b/src/radiology-tabs/common/listOrderDetails.scss @@ -52,22 +52,4 @@ float: right; margin-left: 1rem; margin-top: 2rem; - } - .noOrdersDiv{ - background-color: #fff; - text-align: center; - font-weight:bold; - width: 100%; - } - - .ordersTableToolbar{ - position: static; - height: 3rem; - overflow: visible; - margin: 0; - } - - .ordersToolbarSearchBar{ - background-color:#f4f4f4 ; - } - \ No newline at end of file + } \ No newline at end of file diff --git a/src/radiology-tabs/common/orderDetail.component.tsx b/src/radiology-tabs/common/orderDetail.component.tsx index 0b529b7..25b06ae 100644 --- a/src/radiology-tabs/common/orderDetail.component.tsx +++ b/src/radiology-tabs/common/orderDetail.component.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./listOrderDetails.scss"; +import styles from "./orderDetail.scss"; export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({ label, diff --git a/src/radiology-tabs/common/orderDetail.scss b/src/radiology-tabs/common/orderDetail.scss new file mode 100644 index 0000000..592dc15 --- /dev/null +++ b/src/radiology-tabs/common/orderDetail.scss @@ -0,0 +1,15 @@ +@use '@carbon/layout'; +@use '@carbon/colors'; +@use '@openmrs/esm-styleguide/src/vars' as *; + + .bodyLong01 { + font-size: 13px !important; + } + + .displayValue { + color: #525252; + font-weight: bold; + width: layout.$spacing-05; + height: layout.$spacing-05; + } + \ No newline at end of file diff --git a/src/radiology-tabs/common/radiologyProps.resource.ts b/src/radiology-tabs/common/radiologyProps.resource.ts index 1bf66c7..831a28d 100644 --- a/src/radiology-tabs/common/radiologyProps.resource.ts +++ b/src/radiology-tabs/common/radiologyProps.resource.ts @@ -41,4 +41,5 @@ export interface ListOrdersDetailsProps { export interface OrderAction { actionName: string; + displayPosition: 0 | number; } diff --git a/src/radiology-tabs/orders-not-done/orders-not-done.component.tsx b/src/radiology-tabs/orders-not-done/orders-not-done.component.tsx index f76caeb..a13c2ca 100644 --- a/src/radiology-tabs/orders-not-done/orders-not-done.component.tsx +++ b/src/radiology-tabs/orders-not-done/orders-not-done.component.tsx @@ -9,7 +9,6 @@ interface NotDoneProps { } export const OrdersNotDone: React.FC = ({ fulfillerStatus }) => { const { workListEntries, isLoading } = useOrdersWorklist("", fulfillerStatus); - const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState(""); if (isLoading) { return ; @@ -25,7 +24,12 @@ export const OrdersNotDone: React.FC = ({ fulfillerStatus }) => { showStartButton={false} showActions={true} showOrderType={false} - actions={[{ actionName: "radiology-reject-reason-modal" }]} + actions={[ + { + actionName: "radiology-reject-reason-modal", + displayPosition: 1, + }, + ]} />
diff --git a/src/radiology-tabs/referred-test/referred-ordered.component.tsx b/src/radiology-tabs/referred-test/referred-ordered.component.tsx index b4f654e..fab10d3 100644 --- a/src/radiology-tabs/referred-test/referred-ordered.component.tsx +++ b/src/radiology-tabs/referred-test/referred-ordered.component.tsx @@ -1,15 +1,10 @@ -import React, { useMemo, useState } from "react"; +import React from "react"; import { useTranslation } from "react-i18next"; -import { - DataTableSkeleton, - OverflowMenu, - OverflowMenuItem, -} from "@carbon/react"; +import { DataTableSkeleton } from "@carbon/react"; import { useOrdersWorklist } from "../../hooks/useOrdersWorklist"; import GroupedOrdersTable from "../common/groupedOrdersTable.component"; export const ReferredTests: React.FC = () => { - const { t } = useTranslation(); const { workListEntries, isLoading } = useOrdersWorklist("", "EXCEPTION"); return isLoading ? ( diff --git a/src/radiology-tabs/review-ordered/review-ordered.component.tsx b/src/radiology-tabs/review-ordered/review-ordered.component.tsx index 530eb26..759e0c4 100644 --- a/src/radiology-tabs/review-ordered/review-ordered.component.tsx +++ b/src/radiology-tabs/review-ordered/review-ordered.component.tsx @@ -16,7 +16,9 @@ export const Review: React.FC = () => { showStartButton={false} showActions={true} showOrderType={true} - actions={[{ actionName: "review-radilogy-report-dialog" }]} + actions={[ + { actionName: "review-radilogy-report-dialog", displayPosition: 1 }, + ]} /> ); diff --git a/src/radiology-tabs/test-ordered/radiology-instructions/radiology-instructions.component.tsx b/src/radiology-tabs/test-ordered/radiology-instructions/radiology-instructions.component.tsx index faebbb5..1ca1c33 100644 --- a/src/radiology-tabs/test-ordered/radiology-instructions/radiology-instructions.component.tsx +++ b/src/radiology-tabs/test-ordered/radiology-instructions/radiology-instructions.component.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import { Button, ModalBody, diff --git a/src/radiology-tabs/test-ordered/tests-ordered.component.tsx b/src/radiology-tabs/test-ordered/tests-ordered.component.tsx index e41fbf9..9562601 100644 --- a/src/radiology-tabs/test-ordered/tests-ordered.component.tsx +++ b/src/radiology-tabs/test-ordered/tests-ordered.component.tsx @@ -20,8 +20,11 @@ export const TestsOrdered: React.FC = () => { showActions={true} showOrderType={false} actions={[ - { actionName: "add-radiology-to-worklist-dialog" }, - { actionName: "reject-radiology-order-dialog" }, + { + actionName: "add-radiology-to-worklist-dialog", + displayPosition: 1, + }, + { actionName: "reject-radiology-order-dialog", displayPosition: 2 }, ]} /> diff --git a/src/radiology-tabs/work-list/work-list.component.tsx b/src/radiology-tabs/work-list/work-list.component.tsx index e05cb19..26d6644 100644 --- a/src/radiology-tabs/work-list/work-list.component.tsx +++ b/src/radiology-tabs/work-list/work-list.component.tsx @@ -31,8 +31,11 @@ const WorkList: React.FC = ({ fulfillerStatus }) => { showActions={true} showOrderType={false} actions={[ - { actionName: "reject-radiology-order-dialog" }, - { actionName: "procedureReportForm" }, + { actionName: "procedureReportForm", displayPosition: 1 }, + { + actionName: "reject-radiology-order-dialog", + displayPosition: 2, + }, ]} />