(fix) O3-3589: Enable data table to search based on all table columns (…

…#76) * revamped search bar * cleanup
openmrs · Jul 19, 2024 · 7f0ce7c · 7f0ce7c
1 parent 235af9a
commit 7f0ce7c
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 23 deletions.
diff --git a/src/components/orders-table/orders-data-table.component.tsx b/src/components/orders-table/orders-data-table.component.tsx
@@ -28,6 +28,7 @@ import {
   formatDate,
   parseDate,
   useConfig,
+  useDebounce,
   usePagination,
 } from "@openmrs/esm-framework";
 import styles from "./orders-data-table.scss";
@@ -36,7 +37,7 @@ import { FulfillerStatus } from "../../types";
 import { useLabOrders } from "../../laboratory-resource";
 import dayjs from "dayjs";
 import { isoDateTimeString } from "../../constants";
-
+import useSearchResults from "./orders-data-table.resource";
 interface OrdersDataTableProps {
   useFilter?: boolean;
   actionsSlotName?: string;
@@ -58,15 +59,39 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
   const {
     targetPatientDashboard: { redirectToResultsViewer, redirectToOrders },
   } = useConfig();
+
   const [filter, setFilter] = useState<FulfillerStatus>(null);
   const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState<string>(
     dayjs().startOf("day").format(isoDateTimeString)
   );
+  const [searchString, setSearchString] = useState<string>("");
+
   const { labOrders, isLoading } = useLabOrders(
     useFilter ? filter : fulfillerStatus,
     excludeCanceledAndDiscontinuedOrders,
     activatedOnOrAfterDate
   );
+
+  const flattenedLabOrders = useMemo(() => {
+    return labOrders.map((eachObject) => {
+      return {
+        ...eachObject,
+        dateActivated: formatDate(parseDate(eachObject.dateActivated)),
+        patient: eachObject.patient?.display.split("-")[1],
+        patientUuid: eachObject.patient?.uuid,
+        status: eachObject.fulfillerStatus ?? "--",
+        orderer: eachObject.orderer?.display.split("-")[1],
+      };
+    });
+  }, [labOrders]);
+
+  const debouncedSearchString = useDebounce(searchString);
+
+  const searchResults = useSearchResults(
+    flattenedLabOrders,
+    debouncedSearchString
+  );
+
   const orderStatuses = [
     {
       value: null,
@@ -124,7 +149,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
     goTo,
     results: paginatedLabOrders,
     currentPage,
-  } = usePagination(labOrders, currentPageSize);
+  } = usePagination(searchResults, currentPageSize);
 
   const handleOrderStatusChange = ({ selectedItem }) =>
     setFilter(selectedItem.value);
@@ -138,19 +163,17 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
     return paginatedLabOrders.map((order, index) => ({
       id: order.uuid,
       date: (
-        <span className={styles.singleLineDisplay}>
-          {formatDate(parseDate(order.dateActivated))}
-        </span>
+        <span className={styles.singleLineDisplay}>{order.dateActivated}</span>
       ),
       patient: (
         <ConfigurableLink
-          to={`\${openmrsSpaBase}/patient/${order.patient?.uuid}/chart/${
+          to={`\${openmrsSpaBase}/patient/${order?.patientUuid}/chart/${
             fulfillerStatus == "COMPLETED"
               ? redirectToResultsViewer
               : redirectToOrders
           }`}
         >
-          {order.patient?.display.split("-")[1]}
+          {order.patient}
         </ConfigurableLink>
       ),
       orderNumber: order.orderNumber,
@@ -163,7 +186,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
           {order.fulfillerStatus}
         </span>
       ),
-      orderedBy: order.orderer.display.split("-")[1],
+      orderedBy: order.orderer,
       urgency: order.urgency,
       actions: (
         <CustomOverflowMenu menuTitle={<OverflowMenuVertical />}>
@@ -192,14 +215,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
       useZebraStyles
       overflowMenuOnHover={true}
     >
-      {({
-        rows,
-        headers,
-        getHeaderProps,
-        getTableProps,
-        getRowProps,
-        onInputChange,
-      }) => (
+      {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
         <TableContainer className={styles.tableContainer}>
           <TableToolbar>
             <TableToolbarContent>
@@ -255,7 +271,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
               <Layer className={styles.toolbarItem}>
                 <TableToolbarSearch
                   expanded
-                  onChange={onInputChange}
+                  onChange={(e) => setSearchString(e.target.value)}
                   placeholder={t("searchThisList", "Search this list")}
                   size="sm"
                 />

diff --git a/src/components/orders-table/orders-data-table.resource.ts b/src/components/orders-table/orders-data-table.resource.ts
@@ -0,0 +1,28 @@
+import { Order } from "@openmrs/esm-patient-common-lib";
+import { useMemo } from "react";
+
+interface CustomOrder extends Omit<Order, "orderer" | "patient"> {
+  patient: string;
+  patientUuid: string;
+  orderer: string;
+}
+
+export default function useSearchResults(
+  tableEntries: CustomOrder[],
+  searchString
+): CustomOrder[] {
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== "") {
+      const search = searchString.toLowerCase();
+      return tableEntries.filter((eachDataRow) =>
+        Object.entries(eachDataRow).some(([header, value]) => {
+          return `${value}`.toLowerCase().includes(search);
+        })
+      );
+    }
+
+    return tableEntries;
+  }, [searchString, tableEntries]);
+
+  return searchResults;
+}
diff --git a/translations/am.json b/translations/am.json
@@ -9,6 +9,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "errorMarkingOrderFulfillStatus": "Error occurred while marking order fulfill status",
   "errorPickingAnOrder', 'Error picking an order": "",
   "errorRejectingRequest', 'Error Rejecting a lab request": "",
   "errorUpdatingEncounter', 'Error occurred while updating test results": "",
@@ -21,11 +22,12 @@
   "laboratory": "Laboratory",
   "labResultsForm": "Lab Results Form",
   "loading": "Loading",
-  "modification": "Modification",
+  "markOrderFulfillStatus": "Test order completed",
   "newStatus": "NEW",
   "nextPage": "Next page",
   "noLabRequestsFoundCheckFilters": "No lab requests found. Please check your filters and try again.",
   "onHoldStatus": "ON_HOLD",
+  "onOrAfterDateFilter": "Filter orders on or after : ",
   "option": "Choose an Option",
   "orderedBy": "Ordered By",
   "orderNumber": "Order Number",
@@ -48,6 +50,7 @@
   "status": "Status",
   "tabletOverlay": "Tablet overlay",
   "test": "Test",
+  "testOrderCompletedSuccessfully": "You have successfully completed the test order",
   "testsOrdered": "Tests ordered",
   "testType": "Test Type",
   "updateEncounter": "Update lab results",

diff --git a/translations/en.json b/translations/en.json
@@ -9,6 +9,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "errorMarkingOrderFulfillStatus": "Error occurred while marking order fulfill status",
   "errorPickingAnOrder', 'Error picking an order": "",
   "errorRejectingRequest', 'Error Rejecting a lab request": "",
   "errorUpdatingEncounter', 'Error occurred while updating test results": "",
@@ -21,11 +22,12 @@
   "laboratory": "Laboratory",
   "labResultsForm": "Lab Results Form",
   "loading": "Loading",
-  "modification": "Modification",
+  "markOrderFulfillStatus": "Test order completed",
   "newStatus": "NEW",
   "nextPage": "Next page",
   "noLabRequestsFoundCheckFilters": "No lab requests found. Please check your filters and try again.",
   "onHoldStatus": "ON_HOLD",
+  "onOrAfterDateFilter": "Filter orders on or after : ",
   "option": "Choose an Option",
   "orderedBy": "Ordered By",
   "orderNumber": "Order Number",
@@ -48,6 +50,7 @@
   "status": "Status",
   "tabletOverlay": "Tablet overlay",
   "test": "Test",
+  "testOrderCompletedSuccessfully": "You have successfully completed the test order",
   "testsOrdered": "Tests ordered",
   "testType": "Test Type",
   "updateEncounter": "Update lab results",

diff --git a/translations/es.json b/translations/es.json
@@ -9,6 +9,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "errorMarkingOrderFulfillStatus": "Error occurred while marking order fulfill status",
   "errorPickingAnOrder', 'Error picking an order": "",
   "errorRejectingRequest', 'Error Rejecting a lab request": "",
   "errorUpdatingEncounter', 'Error occurred while updating test results": "",
@@ -21,11 +22,12 @@
   "laboratory": "Laboratory",
   "labResultsForm": "Lab Results Form",
   "loading": "Cargando",
-  "modification": "Modification",
+  "markOrderFulfillStatus": "Test order completed",
   "newStatus": "NEW",
   "nextPage": "Next page",
   "noLabRequestsFoundCheckFilters": "No lab requests found. Please check your filters and try again.",
   "onHoldStatus": "ON_HOLD",
+  "onOrAfterDateFilter": "Filter orders on or after : ",
   "option": "Choose an Option",
   "orderedBy": "Ordered By",
   "orderNumber": "Order Number",
@@ -48,6 +50,7 @@
   "status": "Status",
   "tabletOverlay": "Tablet overlay",
   "test": "Test",
+  "testOrderCompletedSuccessfully": "You have successfully completed the test order",
   "testsOrdered": "Tests ordered",
   "testType": "Test Type",
   "updateEncounter": "Update lab results",

diff --git a/translations/fr.json b/translations/fr.json
@@ -9,6 +9,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "errorMarkingOrderFulfillStatus": "Error occurred while marking order fulfill status",
   "errorPickingAnOrder', 'Error picking an order": "",
   "errorRejectingRequest', 'Error Rejecting a lab request": "",
   "errorUpdatingEncounter', 'Error occurred while updating test results": "",
@@ -21,11 +22,12 @@
   "laboratory": "Laboratory",
   "labResultsForm": "Lab Results Form",
   "loading": "Chargement",
-  "modification": "Modification",
+  "markOrderFulfillStatus": "Test order completed",
   "newStatus": "NEW",
   "nextPage": "Next page",
   "noLabRequestsFoundCheckFilters": "No lab requests found. Please check your filters and try again.",
   "onHoldStatus": "ON_HOLD",
+  "onOrAfterDateFilter": "Filter orders on or after : ",
   "option": "Choose an Option",
   "orderedBy": "Ordered By",
   "orderNumber": "Order Number",
@@ -48,6 +50,7 @@
   "status": "Status",
   "tabletOverlay": "Tablet overlay",
   "test": "Test",
+  "testOrderCompletedSuccessfully": "You have successfully completed the test order",
   "testsOrdered": "Tests ordered",
   "testType": "Test Type",
   "updateEncounter": "Update lab results",

diff --git a/translations/he.json b/translations/he.json
@@ -9,6 +9,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "errorMarkingOrderFulfillStatus": "Error occurred while marking order fulfill status",
   "errorPickingAnOrder', 'Error picking an order": "",
   "errorRejectingRequest', 'Error Rejecting a lab request": "",
   "errorUpdatingEncounter', 'Error occurred while updating test results": "",
@@ -21,11 +22,12 @@
   "laboratory": "Laboratory",
   "labResultsForm": "Lab Results Form",
   "loading": "Loading",
-  "modification": "Modification",
+  "markOrderFulfillStatus": "Test order completed",
   "newStatus": "NEW",
   "nextPage": "Next page",
   "noLabRequestsFoundCheckFilters": "No lab requests found. Please check your filters and try again.",
   "onHoldStatus": "ON_HOLD",
+  "onOrAfterDateFilter": "Filter orders on or after : ",
   "option": "Choose an Option",
   "orderedBy": "Ordered By",
   "orderNumber": "Order Number",
@@ -48,6 +50,7 @@
   "status": "Status",
   "tabletOverlay": "Tablet overlay",
   "test": "Test",
+  "testOrderCompletedSuccessfully": "You have successfully completed the test order",
   "testsOrdered": "Tests ordered",
   "testType": "Test Type",
   "updateEncounter": "Update lab results",

diff --git a/translations/km.json b/translations/km.json
@@ -9,6 +9,7 @@
   "date": "Date",
   "declinedStatus": "DECLINED",
   "discard": "Discard",
+  "errorMarkingOrderFulfillStatus": "Error occurred while marking order fulfill status",
   "errorPickingAnOrder', 'Error picking an order": "",
   "errorRejectingRequest', 'Error Rejecting a lab request": "",
   "errorUpdatingEncounter', 'Error occurred while updating test results": "",
@@ -21,11 +22,12 @@
   "laboratory": "Laboratory",
   "labResultsForm": "Lab Results Form",
   "loading": "Loading",
-  "modification": "Modification",
+  "markOrderFulfillStatus": "Test order completed",
   "newStatus": "NEW",
   "nextPage": "Next page",
   "noLabRequestsFoundCheckFilters": "No lab requests found. Please check your filters and try again.",
   "onHoldStatus": "ON_HOLD",
+  "onOrAfterDateFilter": "Filter orders on or after : ",
   "option": "Choose an Option",
   "orderedBy": "Ordered By",
   "orderNumber": "Order Number",
@@ -48,6 +50,7 @@
   "status": "Status",
   "tabletOverlay": "Tablet overlay",
   "test": "Test",
+  "testOrderCompletedSuccessfully": "You have successfully completed the test order",
   "testsOrdered": "Tests ordered",
   "testType": "Test Type",
   "updateEncounter": "Update lab results",