(feat) Various refactors

openmrs · Aug 17, 2024 · a0cdf08 · a0cdf08
1 parent b90646d
commit a0cdf08
Show file tree

Hide file tree

Showing 24 changed files with 215 additions and 168 deletions.
diff --git a/...ders-table/listOrderDetails.component.tsx → ...rs-table/list-order-details.component.tsx b/...ders-table/listOrderDetails.component.tsx → ...rs-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<ListOrdersDetailsProps> = (props) => {
   const orders = props.groupedOrders?.orders;
@@ -42,7 +41,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                             );
                           }}
                         >
-                          {t("pickupLabRequest", "PickUp Lab Request")}
+                          {t("pickupLabRequest", "Pick up lab request")}
                         </Button>
                       );
                     }
@@ -52,12 +51,12 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                           kind="primary"
                           onClick={() => {
                             launchOverlay(
-                              t("labResultsForm", "Lab Results form"),
+                              t("labResultsForm", "Lab results form"),
                               <ResultForm patientUuid={patientId} order={row} />
                             );
                           }}
                         >
-                          {t("labResultsForm", "Lab Results Form")}
+                          {t("labResultsForm", "Lab results form")}
                         </Button>
                       );
                     }
@@ -87,7 +86,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
                   value={row.dateActivated}
                 />
                 <OrderDetail
-                  label={t("orderNumber", "Order Number").toUpperCase()}
+                  label={t("orderNumber", "Order number").toUpperCase()}
                   value={row.orderNumber}
                 />
                 <OrderDetail

diff --git a/...onents/orders-table/listOrderDetails.scss → ...ents/orders-table/list-order-details.scss b/...onents/orders-table/listOrderDetails.scss → ...ents/orders-table/list-order-details.scss
diff --git a/...ts/orders-table/orderDetail.component.tsx → ...s/orders-table/order-detail.component.tsx b/...ts/orders-table/orderDetail.component.tsx → ...s/orders-table/order-detail.component.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./orderDetail.scss";
+import styles from "./order-detail.scss";
 
 export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({
   label,

diff --git a/src/components/orders-table/orderDetail.scss → ...components/orders-table/order-detail.scss b/src/components/orders-table/orderDetail.scss → ...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
@@ -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<OrdersDataTableProps> = (props) => {
   const { t } = useTranslation();
@@ -133,7 +133,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (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<OrdersDataTableProps> = (props) => {
       orders: patient.orders,
       totalOrders: patient.orders?.length,
     }));
-  }, [
-    paginatedLabOrders,
-    redirectToResultsViewer,
-    redirectToOrders,
-    props.actionsSlotName,
-  ]);
+  }, [paginatedLabOrders]);
 
   if (isLoading) {
-    return <DataTableSkeleton role="progressbar" />;
+    return <DataTableSkeleton className={styles.loader} role="progressbar" />;
   }
   return (
     <DataTable rows={tableRows} headers={columns} useZebraStyles>
-      {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+      {({
+        getExpandHeaderProps,
+        getHeaderProps,
+        getRowProps,
+        getTableProps,
+        headers,
+        rows,
+      }) => (
         <TableContainer className={styles.tableContainer}>
           <TableToolbar>
             <TableToolbarContent>
@@ -201,10 +203,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
                   {props.useActivatedOnOrAfterDateFilter && (
                     <>
                       <p>
-                        {t(
-                          "onOrAfterDateFilter",
-                          "Filter orders on or after : "
-                        )}
+                        {t("onOrAfterDateFilter", "Filter orders on or after")}:
                       </p>
                       <DatePicker
                         onChange={([date]) =>
@@ -238,7 +237,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
           <Table {...getTableProps()} className={styles.tableWrapper}>
             <TableHead>
               <TableRow>
-                <TableExpandHeader />
+                <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
                 {headers.map((header) => (
                   <TableHeader {...getHeaderProps({ header })}>
                     {header.header?.content ?? header.header}
@@ -257,14 +256,21 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
                         </TableCell>
                       ))}
                     </TableExpandRow>
-                    <TableExpandedRow colSpan={headers.length + 1}>
-                      <ListOrderDetails
-                        actions={props.actions}
-                        groupedOrders={groupedOrdersByPatient.find(
-                          (item) => item.patientId === row.id
-                        )}
+                    {row.isExpanded ? (
+                      <TableExpandedRow colSpan={headers.length + 1}>
+                        <ListOrderDetails
+                          actions={props.actions}
+                          groupedOrders={groupedOrdersByPatient.find(
+                            (item) => item.patientId === row.id
+                          )}
+                        />
+                      </TableExpandedRow>
+                    ) : (
+                      <TableExpandedRow
+                        className={styles.hiddenRow}
+                        colSpan={headers.length + 2}
                       />
-                    </TableExpandedRow>
+                    )}
                   </React.Fragment>
                 );
               })}
@@ -275,9 +281,12 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
               <Tile className={styles.tile}>
                 <div className={styles.tileContent}>
                   <p className={styles.content}>
+                    {t("noLabRequestsFoundC", "No lab requests found")}
+                  </p>
+                  <p className={styles.emptyStateHelperText}>
                     {t(
-                      "noLabRequestsFoundCheckFilters",
-                      "No lab requests found. Please check your filters and try again."
+                      "checkFilters",
+                      "Please check the filters above and try again"
                     )}
                   </p>
                 </div>

diff --git 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;
-}
+}
+
+.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
@@ -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
@@ -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<LabSummaryTileProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Tile className={styles.tileContainer} light={true}>
+    <Tile className={styles.tileContainer} light>
       <div className={styles.tileHeader}>
         <div className={styles.headerLabelContainer}>
           <label className={styles.headerLabel}>{headerLabel}</label>
           {children}
         </div>
-        <div></div>
-        <Button
-          kind="ghost"
-          renderIcon={(props) => (
-            <ArrowRight size={16} className={styles.arrowIcon} />
-          )}
-          iconDescription={t("view", "View ")}
-        >
-          {t("view", "View ")}
-          &nbsp;
-        </Button>
+        {/* <div className={styles.link}>
+          <ConfigurableLink className={styles.link} to="">
+            {t("view", "View")}
+          </ConfigurableLink>
+          <ArrowRight size={16} />
+        </div> */}
       </div>
       <div>
         <label className={styles.totalsLabel}>{label}</label>

diff --git 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
@@ -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
 );