diff --git a/src/components/orders-table/listOrderDetails.component.tsx b/src/components/orders-table/list-order-details.component.tsx similarity index 91% rename from src/components/orders-table/listOrderDetails.component.tsx rename to src/components/orders-table/list-order-details.component.tsx index 159aabc0..b3654e4a 100644 --- a/src/components/orders-table/listOrderDetails.component.tsx +++ b/src/components/orders-table/list-order-details.component.tsx @@ -1,13 +1,12 @@ import React from "react"; -import styles from "./listOrderDetails.scss"; - import { useTranslation } from "react-i18next"; -import { showModal } from "@openmrs/esm-framework"; import { Button, Tile } from "@carbon/react"; -import { OrderDetail } from "./orderDetail.component"; -import { ListOrdersDetailsProps } from "../../types"; +import { showModal } from "@openmrs/esm-framework"; import { launchOverlay } from "../overlay/store"; +import { ListOrdersDetailsProps } from "../../types"; +import { OrderDetail } from "./order-detail.component"; import ResultForm from "../../results/result-form.component"; +import styles from "./list-order-details.scss"; const ListOrderDetails: React.FC = (props) => { const orders = props.groupedOrders?.orders; @@ -42,7 +41,7 @@ const ListOrderDetails: React.FC = (props) => { ); }} > - {t("pickupLabRequest", "PickUp Lab Request")} + {t("pickupLabRequest", "Pick up lab request")} ); } @@ -52,12 +51,12 @@ const ListOrderDetails: React.FC = (props) => { kind="primary" onClick={() => { launchOverlay( - t("labResultsForm", "Lab Results form"), + t("labResultsForm", "Lab results form"), ); }} > - {t("labResultsForm", "Lab Results Form")} + {t("labResultsForm", "Lab results form")} ); } @@ -87,7 +86,7 @@ const ListOrderDetails: React.FC = (props) => { value={row.dateActivated} /> = ({ label, diff --git a/src/components/orders-table/orderDetail.scss b/src/components/orders-table/order-detail.scss similarity index 100% rename from src/components/orders-table/orderDetail.scss rename to src/components/orders-table/order-detail.scss diff --git a/src/components/orders-table/orders-data-table.component.tsx b/src/components/orders-table/orders-data-table.component.tsx index fc7ca01d..d788def5 100644 --- a/src/components/orders-table/orders-data-table.component.tsx +++ b/src/components/orders-table/orders-data-table.component.tsx @@ -3,41 +3,41 @@ import { useTranslation } from "react-i18next"; import { DataTable, DataTableSkeleton, + DatePicker, + DatePickerInput, + Dropdown, + Layer, Pagination, Table, TableBody, TableCell, TableContainer, - TableHead, - TableHeader, + TableExpandedRow, TableExpandHeader, TableExpandRow, - TableExpandedRow, + TableHead, + TableHeader, TableRow, - Tile, - Dropdown, TableToolbar, TableToolbarContent, - Layer, TableToolbarSearch, - DatePicker, - DatePickerInput, + Tile, } from "@carbon/react"; +import dayjs from "dayjs"; import { formatDate, parseDate, useConfig, usePagination, } from "@openmrs/esm-framework"; -import styles from "./orders-data-table.scss"; import { FulfillerStatus, OrdersDataTableProps } from "../../types"; import { useLabOrders, useSearchGroupedResults, } from "../../laboratory-resource"; -import dayjs from "dayjs"; import { isoDateTimeString } from "../../constants"; -import ListOrderDetails from "./listOrderDetails.component"; +import ListOrderDetails from "./list-order-details.component"; +import styles from "./orders-data-table.scss"; const OrdersDataTable: React.FC = (props) => { const { t } = useTranslation(); @@ -133,7 +133,7 @@ const OrdersDataTable: React.FC = (props) => { const columns = useMemo(() => { return [ { id: 0, header: t("patient", "Patient"), key: "patientName" }, - { id: 1, header: t("totalorders", "Total Orders"), key: "totalOrders" }, + { id: 1, header: t("totalOrders", "Total Orders"), key: "totalOrders" }, ]; }, [t]); @@ -160,19 +160,21 @@ const OrdersDataTable: React.FC = (props) => { orders: patient.orders, totalOrders: patient.orders?.length, })); - }, [ - paginatedLabOrders, - redirectToResultsViewer, - redirectToOrders, - props.actionsSlotName, - ]); + }, [paginatedLabOrders]); if (isLoading) { - return ; + return ; } return ( - {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => ( + {({ + getExpandHeaderProps, + getHeaderProps, + getRowProps, + getTableProps, + headers, + rows, + }) => ( @@ -201,10 +203,7 @@ const OrdersDataTable: React.FC = (props) => { {props.useActivatedOnOrAfterDateFilter && ( <>

- {t( - "onOrAfterDateFilter", - "Filter orders on or after : " - )} + {t("onOrAfterDateFilter", "Filter orders on or after")}:

@@ -238,7 +237,7 @@ const OrdersDataTable: React.FC = (props) => { - + {headers.map((header) => ( {header.header?.content ?? header.header} @@ -257,14 +256,21 @@ const OrdersDataTable: React.FC = (props) => { ))} - - item.patientId === row.id - )} + {row.isExpanded ? ( + + item.patientId === row.id + )} + /> + + ) : ( + - + )} ); })} @@ -275,9 +281,12 @@ const OrdersDataTable: React.FC = (props) => {

+ {t("noLabRequestsFoundC", "No lab requests found")} +

+

{t( - "noLabRequestsFoundCheckFilters", - "No lab requests found. Please check your filters and try again." + "checkFilters", + "Please check the filters above and try again" )}

diff --git a/src/components/orders-table/orders-data-table.scss b/src/components/orders-table/orders-data-table.scss index 3a4d6b57..eb139651 100644 --- a/src/components/orders-table/orders-data-table.scss +++ b/src/components/orders-table/orders-data-table.scss @@ -3,8 +3,9 @@ @use '@carbon/colors'; .tableContainer { + border: 1px solid colors.$gray-20; background-color: colors.$gray-10; - margin: 0 spacing.$spacing-05; + margin: spacing.$spacing-05; padding: 0; :global(.cds--data-table-content) { @@ -32,12 +33,20 @@ width: 75%; } + :global(.cds--pagination) { + border-top: none; + } + .toolbarContent { height: spacing.$spacing-07; margin-bottom: spacing.$spacing-02; } } +.loader { + margin: spacing.$spacing-05; +} + .toolbarItem { display: flex; margin: 5px 10px; @@ -83,4 +92,13 @@ .singleLineDisplay { white-space: nowrap; -} \ No newline at end of file +} + +.emptyStateHelperText { + @include type.type-style('helper-text-02'); +} + +.hiddenRow { + display: none; +} + diff --git a/src/components/overlay/overlay.component.tsx b/src/components/overlay/overlay.component.tsx index 368dd492..594838f6 100644 --- a/src/components/overlay/overlay.component.tsx +++ b/src/components/overlay/overlay.component.tsx @@ -1,10 +1,10 @@ import React from "react"; import { Button, Header } from "@carbon/react"; import { ArrowLeft, Close } from "@carbon/react/icons"; -import { useLayoutType } from "@openmrs/esm-framework"; -import styles from "./overlay.scss"; import { useTranslation } from "react-i18next"; +import { useLayoutType } from "@openmrs/esm-framework"; import { closeOverlay, useOverlay } from "./store"; +import styles from "./overlay.scss"; const Overlay: React.FC = () => { const { header, component, isOverlayOpen } = useOverlay(); diff --git a/src/components/summary-tile/lab-summary-tile.component.tsx b/src/components/summary-tile/lab-summary-tile.component.tsx index 243d3931..ffdb67de 100644 --- a/src/components/summary-tile/lab-summary-tile.component.tsx +++ b/src/components/summary-tile/lab-summary-tile.component.tsx @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"; import { Tile, Button } from "@carbon/react"; import { ArrowRight } from "@carbon/react/icons"; import styles from "./lab-summary-tile.scss"; +import { ConfigurableLink } from "@openmrs/esm-framework"; interface LabSummaryTileProps { label: string; @@ -20,23 +21,18 @@ const LabSummaryTile: React.FC = ({ const { t } = useTranslation(); return ( - +
{children}
-
- + {/*
+ + {t("view", "View")} + + +
*/}
diff --git a/src/components/summary-tile/lab-summary-tile.scss b/src/components/summary-tile/lab-summary-tile.scss index 54ff875c..46b2d9b7 100644 --- a/src/components/summary-tile/lab-summary-tile.scss +++ b/src/components/summary-tile/lab-summary-tile.scss @@ -1,24 +1,23 @@ -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; +@use '@carbon/layout'; +@use '@carbon/type'; @import "~@openmrs/esm-styleguide/src/vars"; .tileContainer { border: 0.0625rem solid $ui-03; - flex-grow: 1; height: 7.875rem; - padding: 0 spacing.$spacing-05; - margin: spacing.$spacing-03 spacing.$spacing-03; + padding: layout.$spacing-05; + margin: layout.$spacing-03 layout.$spacing-03; } .tileHeader { display: flex; justify-content: space-between; align-items: center; - margin-bottom: spacing.$spacing-03; + margin-bottom: layout.$spacing-03; } .headerLabel { - @include type.type-style("heading-01"); + @include type.type-style("heading-compact-01"); color: $text-02; } @@ -35,9 +34,31 @@ .headerLabelContainer { display: flex; align-items: center; - height: spacing.$spacing-07; + height: layout.$spacing-07; } .arrowIcon { fill: var(--cds-link-primary, #0f62fe) !important; } + +.link { + text-decoration: none; + display: flex; + align-items: center; + color: $interactive-01; + + svg { + margin-left: layout.$spacing-03; + } +} + +// Overriding styles for RTL support +html[dir='rtl'] { + .link { + svg { + margin-right: layout.$spacing-03; + margin-left: unset; + transform: scale(-1, 1); + } + } +} diff --git a/src/index.ts b/src/index.ts index f9137c33..4578bee9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -69,7 +69,7 @@ export const completedLabRequestsTable = getAsyncLifecycle( ); export const worklistTile = getAsyncLifecycle( - () => import("./lab-tiles/inprogress-lab-requests-tile.component"), + () => import("./lab-tiles/in-progress-lab-requests-tile.component"), options ); diff --git a/src/lab-tabs/actions/add-lab-request-results-action.component.tsx b/src/lab-tabs/actions/add-lab-request-results-action.component.tsx index 2539dd7e..3718c58d 100644 --- a/src/lab-tabs/actions/add-lab-request-results-action.component.tsx +++ b/src/lab-tabs/actions/add-lab-request-results-action.component.tsx @@ -1,9 +1,9 @@ -import { Order } from "@openmrs/esm-patient-common-lib"; import React from "react"; +import { useTranslation } from "react-i18next"; import { OverflowMenuItem } from "@carbon/react"; +import { Order } from "@openmrs/esm-patient-common-lib"; import { launchOverlay } from "../../components/overlay/store"; import ResultForm from "../../results/result-form.component"; -import { useTranslation } from "react-i18next"; import styles from "./actions.scss"; interface AddLabRequestResultsActionProps { @@ -16,10 +16,10 @@ const AddLabRequestResultsAction: React.FC = ({ return ( { launchOverlay( - t("labResultsForm", "Lab Results Form"), + t("labResultsForm", "Lab results form"), ); }} diff --git a/src/lab-tabs/actions/pickup-lab-request-action.component.tsx b/src/lab-tabs/actions/pickup-lab-request-action.component.tsx index de340d8b..4c570c46 100644 --- a/src/lab-tabs/actions/pickup-lab-request-action.component.tsx +++ b/src/lab-tabs/actions/pickup-lab-request-action.component.tsx @@ -1,8 +1,8 @@ +import React, { useCallback } from "react"; +import { useTranslation } from "react-i18next"; import { OverflowMenuItem } from "@carbon/react"; import { showModal } from "@openmrs/esm-framework"; import { Order } from "@openmrs/esm-patient-common-lib"; -import React, { useCallback } from "react"; -import { useTranslation } from "react-i18next"; import styles from "./actions.scss"; interface PickLabRequestActionMenuProps { @@ -24,7 +24,7 @@ const PickupLabRequestAction: React.FC = ({ return ( = ({ return ( ); }; diff --git a/src/lab-tabs/data-table-extensions/completed-lab-requests-table.extension.tsx b/src/lab-tabs/data-table-extensions/completed-lab-requests-table.extension.tsx index dbdd1c6d..37c9728d 100644 --- a/src/lab-tabs/data-table-extensions/completed-lab-requests-table.extension.tsx +++ b/src/lab-tabs/data-table-extensions/completed-lab-requests-table.extension.tsx @@ -6,7 +6,7 @@ const CompletedLabRequestsTable: React.FC = () => { diff --git a/src/lab-tabs/data-table-extensions/in-progress-lab-requests-table.extension.tsx b/src/lab-tabs/data-table-extensions/in-progress-lab-requests-table.extension.tsx index ab9ce918..f0ddfd18 100644 --- a/src/lab-tabs/data-table-extensions/in-progress-lab-requests-table.extension.tsx +++ b/src/lab-tabs/data-table-extensions/in-progress-lab-requests-table.extension.tsx @@ -6,7 +6,7 @@ const InProgressLabRequestsTable: React.FC = () => { void; @@ -55,7 +55,7 @@ const PickupLabRequestModal: React.FC = ({ (error) => { setIsSubmitting(false); showNotification({ - title: t(`errorPickingAnOrder', 'Error picking an order`), + title: t(`errorPickingOrder', 'Error picking order`), kind: "error", critical: true, description: error?.message, @@ -68,7 +68,7 @@ const PickupLabRequestModal: React.FC = ({

@@ -83,7 +83,7 @@ const PickupLabRequestModal: React.FC = ({ {t("discard", "Discard")}

diff --git a/src/lab-tabs/modals/reject-lab-request-modal.component.tsx b/src/lab-tabs/modals/reject-lab-request-modal.component.tsx index cdfc2e63..b35ac588 100644 --- a/src/lab-tabs/modals/reject-lab-request-modal.component.tsx +++ b/src/lab-tabs/modals/reject-lab-request-modal.component.tsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; - import { Button, Form, @@ -10,7 +9,6 @@ import { Layer, } from "@carbon/react"; import { useTranslation } from "react-i18next"; -import styles from "./reject-lab-request-modal.scss"; import { showNotification, showSnackbar, @@ -18,6 +16,7 @@ import { } from "@openmrs/esm-framework"; import { Order } from "@openmrs/esm-patient-common-lib"; import { rejectLabOrder } from "../../laboratory-resource"; +import styles from "./reject-lab-request-modal.scss"; interface RejectLabRequestModalProps { order: Order; @@ -37,23 +36,24 @@ const RejectLabRequestModal: React.FC = ({ event.preventDefault(); setIsSubmitting(true); rejectLabOrder(order.uuid, fulfillerComment, abortController).then( - (resp) => { + () => { setIsSubmitting(false); closeModal(); showSnackbar({ isLowContrast: true, - title: t("rejectLabRequestTitle", "Lab Request Rejected"), + title: t("rejectLabRequestTitle", "Lab request rejected"), kind: "success", subtitle: t( "rejectLabRequestSuccessMessage", - `You have successfully rejected a lab request with Order Number: ${order.orderNumber}.` + 'Lab request with order number "{{orderNumber}}" rejected successfully', + { orderNumber: order.orderNumber } ), }); }, (err) => { setIsSubmitting(false); showNotification({ - title: t(`errorRejectingRequest', 'Error Rejecting a lab request.`), + title: t("errorRejectingRequest", "Error rejecting lab request"), kind: "error", critical: true, description: err?.message, @@ -63,43 +63,41 @@ const RejectLabRequestModal: React.FC = ({ }; return ( -
-
- - -
- -

- {`${t("testType", "Test Type")}: ${order.concept?.display}`} -

-
-
- -