grouped radiology orders by patient

src/hooks/useOrdersWorklist.ts

@@ -59,6 +59,7 @@ export function useOrdersWorklist(
       );
     }
   });
+
   const sortedOrders = orders?.sort(
     (a, b) =>
       new Date(a.dateActivated).getTime() - new Date(b.dateActivated).getTime()

src/hooks/useSearchGroupedResults.ts

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+import { GroupedOrders } from "../radiology-tabs/common/radiologyProps.resource";
+
+export function useSearchGroupedResults(
+  data: Array<GroupedOrders>,
+  searchString: string
+) {
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== "") {
+      // Normalize the search string to lowercase
+      const lowerSearchString = searchString.toLowerCase();
+      return data.filter((orderGroup) =>
+        orderGroup.orders.some(
+          (order) =>
+            order.orderNumber.toLowerCase().includes(lowerSearchString) ||
+            order.patient.display.toLowerCase().includes(lowerSearchString)
+        )
+      );
+    }
+
+    return data;
+  }, [searchString, data]);
+
+  return searchResults;
+}

src/radiology-tabs/approved/approved-orders.component.tsx

@@ -1,134 +1,27 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableHeader,
-  TableBody,
-  TableCell,
-  DataTable,
-  Pagination,
-  DataTableSkeleton,
-  TableContainer,
-  TableToolbar,
-  TableToolbarContent,
-  TableToolbarSearch,
-} from "@carbon/react";
+import { DataTableSkeleton } from "@carbon/react";
 import { useOrdersWorklist } from "../../hooks/useOrdersWorklist";
-import { formatDate, parseDate, usePagination } from "@openmrs/esm-framework";
-import { useSearchResults } from "../../hooks/useSearchResults";
-import styles from "../test-ordered/tests-ordered.scss";
+import GroupedOrdersTable from "../common/groupedOrdersTable.component";
 
 export const ApprovedOrders: React.FC = () => {
   const { t } = useTranslation();
-  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
   const { workListEntries, isLoading } = useOrdersWorklist("", "ON_HOLD");
-  const [searchString, setSearchString] = useState<string>("");
 
-  const searchResults = useSearchResults(workListEntries, searchString);
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
 
-  const {
-    goTo,
-    results: paginatedResults,
-    currentPage,
-  } = usePagination(searchResults, currentPageSize);
-
-  const pageSizes = [10, 20, 30, 40, 50];
-
-  const rows = useMemo(() => {
-    return paginatedResults
-      ?.filter((item) => item.action === "NEW")
-      .map((entry) => ({
-        ...entry,
-        date: (
-          <span className={styles["single-line-display"]}>
-            {formatDate(parseDate(entry?.dateActivated))}
-          </span>
-        ),
-      }));
-  }, [paginatedResults]);
-
-  const tableColums = [
-    { id: 0, header: t("date", "Date"), key: "date" },
-    { id: 1, header: t("orderNumber", "Order Number"), key: "orderNumber" },
-    { id: 2, header: t("patient", "Patient"), key: "patient" },
-    { id: 4, header: t("procedure", "Procedure"), key: "procedure" },
-    { id: 5, header: t("orderType", "Order type"), key: "action" },
-    { id: 6, header: t("status", "Status"), key: "status" },
-    { id: 8, header: t("orderer", "Orderer"), key: "orderer" },
-    { id: 9, header: t("urgency", "Urgency"), key: "urgency" },
-  ];
-
-  return isLoading ? (
-    <DataTableSkeleton />
-  ) : (
+  return (
     <div>
-      <DataTable
-        rows={rows}
-        headers={tableColums}
-        useZebraStyles
-        overflowMenuOnHover={true}
-      >
-        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
-          <>
-            <TableContainer>
-              <TableToolbar
-                style={{
-                  position: "static",
-                  height: "3rem",
-                  overflow: "visible",
-                  margin: 0,
-                  // TODO: add background color to the toolbar
-                }}
-              >
-                <TableToolbarContent style={{ margin: 0 }}>
-                  <TableToolbarSearch
-                    style={{ backgroundColor: "#f4f4f4" }}
-                    onChange={(event) => setSearchString(event.target.value)}
-                  />
-                </TableToolbarContent>
-              </TableToolbar>
-              <Table {...getTableProps()}>
-                <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}>{cell.value}</TableCell>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-              <Pagination
-                forwardText="Next page"
-                backwardText="Previous page"
-                page={currentPage}
-                pageSize={currentPageSize}
-                pageSizes={pageSizes}
-                totalItems={workListEntries?.length}
-                onChange={({ pageSize, page }) => {
-                  if (pageSize !== currentPageSize) {
-                    setCurrentPageSize(pageSize);
-                  }
-                  if (page !== currentPage) {
-                    goTo(page);
-                  }
-                }}
-              />
-            </TableContainer>
-          </>
-        )}
-      </DataTable>
+      <GroupedOrdersTable
+        orders={workListEntries}
+        showStatus={false}
+        showStartButton={false}
+        showActions={false}
+        showOrderType={true}
+        actions={[]}
+      />
     </div>
   );
 };

src/radiology-tabs/common/groupedOrdersTable.component.tsx

@@ -0,0 +1,171 @@
+import React, { useMemo, useState } from "react";
+import styles from "./groupedOrdersTable.scss";
+import { useTranslation } from "react-i18next";
+import { formatDate, parseDate, usePagination } from "@openmrs/esm-framework";
+import { GroupedOrdersTableProps } from "./radiologyProps.resource";
+import { useSearchGroupedResults } from "../../hooks/useSearchGroupedResults";
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableExpandRow,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableCell,
+  DataTable,
+  Pagination,
+  TableContainer,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+} from "@carbon/react";
+import ListOrderDetails from "./listOrderDetails.component";
+
+//  render Grouped by patient Orders in radiology module
+const GroupedOrdersTable: React.FC<GroupedOrdersTableProps> = (props) => {
+  const workListEntries = props.orders;
+  const { t } = useTranslation();
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+  const [searchString, setSearchString] = useState<string>("");
+
+  function groupOrdersById(orders) {
+    if (orders && orders.length > 0) {
+      const groupedOrders = orders.reduce((acc, item) => {
+        if (!acc[item.patient.uuid]) {
+          acc[item.patient.uuid] = [];
+        }
+        acc[item.patient.uuid].push(item);
+        return acc;
+      }, {});
+
+      // Convert the result to an array of objects with patientId and orders
+      return Object.keys(groupedOrders).map((patientId) => ({
+        patientId: patientId,
+        orders: groupedOrders[patientId],
+      }));
+    } else {
+      return [];
+    }
+  }
+  const groupedOrdersByPatient = groupOrdersById(workListEntries);
+  const searchResults = useSearchGroupedResults(
+    groupedOrdersByPatient,
+    searchString
+  );
+  const {
+    goTo,
+    results: paginatedResults,
+    currentPage,
+  } = usePagination(searchResults, currentPageSize);
+
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const rowsdata = useMemo(() => {
+    return paginatedResults.map((patient) => ({
+      id: patient.patientId,
+      patientname: patient.orders[0].patient?.display?.split("-")[1],
+      orders: patient.orders,
+      totalorders: patient.orders?.length,
+    }));
+  }, [paginatedResults]);
+
+  const tableColumns = [
+    { id: 0, header: t("patient", "Patient"), key: "patientname" },
+    { id: 1, header: t("totalorders", "Total Orders"), key: "totalorders" },
+  ];
+  return (
+    <div>
+      <DataTable
+        rows={rowsdata}
+        headers={tableColumns}
+        overflowMenuOnHover={true}
+      >
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <>
+            <TableContainer>
+              <TableToolbar className={styles.ordersTableToolbar}>
+                <TableToolbarContent style={{ margin: 0 }}>
+                  <TableToolbarSearch
+                    className={styles.ordersToolbarSearchBar}
+                    onChange={(event) => setSearchString(event.target.value)}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.length > 0 ? (
+                    rows.map((row) => (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.id.endsWith("created")
+                                ? formatDate(parseDate(cell.value))
+                                : cell.value}
+                            </TableCell>
+                          ))}
+                        </TableExpandRow>
+                        <TableExpandedRow colSpan={headers.length + 1}>
+                          <ListOrderDetails
+                            actions={props.actions}
+                            groupedOrders={groupedOrdersByPatient.find(
+                              (item) => item.patientId === row.id
+                            )}
+                            showActions={props.showActions}
+                            showOrderType={props.showOrderType}
+                            showStartButton={props.showStartButton}
+                            showStatus={props.showStatus}
+                          />
+                        </TableExpandedRow>
+                      </React.Fragment>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={headers.length + 1}
+                        style={{ textAlign: "center" }}
+                        className={styles.noOrdersDiv}
+                      >
+                        {t("noOrderAvailable", "No Orders Availalble")}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+              <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={workListEntries?.length}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setCurrentPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          </>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default GroupedOrdersTable;

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 ;
+  }
+