v2-lab

src/approved-orders/approved-list.component.tsx

@@ -0,0 +1,155 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useSession,
+  usePagination,
+  formatDate,
+  parseDate,
+} from "@openmrs/esm-framework";
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  Pagination,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} 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();
+  const session = useSession();
+
+  const { patientQueueEntries, isLoading } = usePatientQueuesList(
+    session?.sessionLocation?.uuid,
+    status,
+    session.user.systemId
+  );
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const {
+    goTo,
+    results: paginatedQueueEntries,
+    currentPage,
+  } = usePagination(patientQueueEntries, currentPageSize);
+  const tableHeaders = useMemo(
+    () => [
+      { id: 0, header: t("patient", "Patient"), key: "name" },
+
+      { id: 1, header: t("orders", "Orders"), key: "orders" },
+      { id: 2, header: t("date", "Date"), key: "date" },
+      {
+        id: 3,
+        header: t("action", "Action"),
+        key: "action",
+      },
+    ],
+    [t]
+  );
+
+  const tableRows = useMemo(() => {
+    return patientQueueEntries.map((entry) => ({
+      ...entry,
+      name: {
+        content: <span>{entry?.name}</span>,
+      },
+      orders: "",
+      date: {
+        content: <span>{formatDate(parseDate(entry?.dateCreated))}</span>,
+      },
+      action: "",
+    }));
+  }, [patientQueueEntries]);
+
+  return (
+    <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
+      {({
+        rows,
+        headers,
+        getHeaderProps,
+        getTableProps,
+        getRowProps,
+        getExpandHeaderProps,
+        getTableContainerProps,
+      }) => (
+        <TableContainer
+          {...getTableContainerProps}
+          className={styles.tableContainer}
+        >
+          <Table {...getTableProps()} className={styles.activePatientsTable}>
+            <TableHead>
+              <TableRow>
+                <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>
+                    {header.header?.content ?? header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row, index) => {
+                return (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow {...getRowProps({ row })} key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>
+                          {cell.value?.content ?? cell.value}
+                        </TableCell>
+                      ))}
+                    </TableExpandRow>
+                    <TableExpandedRow colSpan={headers.length + 1}>
+                      <ApprovedTestOrders
+                        patientUuid={tableRows[index]?.patientUuid}
+                      />
+                    </TableExpandedRow>
+                  </React.Fragment>
+                );
+              })}
+            </TableBody>
+          </Table>
+          {rows.length === 0 ? (
+            <div className={styles.tileContainer}>
+              <Tile className={styles.tile}>
+                <div className={styles.tileContent}>
+                  <p className={styles.content}>
+                    {t("noPatientsToDisplay", "No patients to display")}
+                  </p>
+                </div>
+              </Tile>
+            </div>
+          ) : null}
+          <Pagination
+            forwardText="Next page"
+            backwardText="Previous page"
+            page={currentPage}
+            pageSize={currentPageSize}
+            pageSizes={pageSizes}
+            totalItems={paginatedQueueEntries?.length}
+            className={styles.pagination}
+            onChange={({ pageSize, page }) => {
+              if (pageSize !== currentPageSize) {
+                setPageSize(pageSize);
+              }
+              if (page !== currentPage) {
+                goTo(page);
+              }
+            }}
+          />
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default ApprovedList;

src/completed-list/completed-list.scss → src/approved-orders/approved-list.scss

@@ -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';
 
@@ -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;
@@ -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;
 }

src/approved-orders/approved-test-orders.component.tsx

@@ -0,0 +1,134 @@
+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>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id} className={styles.testCell}>
+                          {cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </>
+  );
+};
+
+export default ApprovedTestOrders;

src/approved-orders/print-order-results-menu-item.component.tsx

@@ -0,0 +1,33 @@
+import React, { useCallback } from "react";
+import { OverflowMenuItem } from "@carbon/react";
+import { Order } from "@openmrs/esm-patient-common-lib";
+import { useTranslation } from "react-i18next";
+
+interface PrintOrderResultsActionMenuProps {
+  order: Order;
+  closeModal: () => void;
+}
+
+const PrintResultsActionMenu: React.FC<PrintOrderResultsActionMenuProps> = ({
+  order,
+}) => {
+  const { t } = useTranslation();
+  // const launchPickLabRequestModal = useCallback(() => {
+  //   const dispose = showModal("add-to-worklist-dialog", {
+  //     closeModal: () => dispose(),
+  //     order,
+  //   });
+  // }, [order]);
+
+  return (
+    <OverflowMenuItem
+      itemText={"Print Results"}
+      onClick={() => {}}
+      style={{
+        maxWidth: "100vw",
+      }}
+    />
+  );
+};
+
+export default PrintResultsActionMenu;