ft : add table orders search

openmrs · Oct 3, 2023 · 8d5da67 · 8d5da67
1 parent 66189f4
commit 8d5da67
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 34 deletions.
diff --git a/src/patient-chart/laboratory-order.component.tsx b/src/patient-chart/laboratory-order.component.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { EmptyState } from "@ohri/openmrs-esm-ohri-commons-lib";
 import styles from "./laboratory-order.scss";
@@ -19,6 +19,7 @@ import {
   Layer,
   Tag,
   DataTableHeader,
+  Tile,
 } from "@carbon/react";
 import ViewLaboratoryItemActionMenu from "./laboratory-item/view-laboratory-item.component";
 
@@ -50,22 +51,25 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
   //   currentPage,
   // } = usePagination(patientQueueEntries, currentPageSize);
 
-  const items = [
-    {
-      id: 1,
-      encounterDate: "2023-04-01",
-      orders: ["Crag", "CBC", "MalariaRDT", "CD4", "RFT", "Unalysis"],
-      location: session.sessionLocation.display,
-      results: "tests returned",
-    },
-    {
-      id: 2,
-      encounterDate: "2023-04-05",
-      orders: ["Crag", "CBC", "CD4", "RFT", "Unalysis", "LFTs"],
-      location: session.sessionLocation.display,
-      results: "tests returned",
-    },
-  ];
+  const initialItems = useMemo(() => {
+    const items = [
+      {
+        id: 1,
+        encounterDate: "2023-04-01",
+        orders: ["Crag", "CBC", "MalariaRDT", "CD4", "RFT", "Unalysis"],
+        location: session.sessionLocation.display,
+        results: "tests returned",
+      },
+      {
+        id: 2,
+        encounterDate: "2023-04-05",
+        orders: ["Crag", "CBC", "CD4", "RFT", "Unalysis", "LFTs"],
+        location: session.sessionLocation.display,
+        results: "tests returned",
+      },
+    ];
+    return items;
+  }, [session.sessionLocation.display]);
 
   let columns = [
     {
@@ -79,6 +83,32 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
     { id: 4, header: t("actions", "Action"), key: "actions" },
   ];
 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [items, setItems] = useState(initialItems);
+
+  const handleChange = useCallback(
+    (val) => {
+      setSearchTerm(val?.target?.value);
+      if (searchTerm == null && val?.target?.value) {
+        setItems(initialItems);
+      }
+      // const filteredItems = items.filter((item) => item.orders.length === 100);
+      let filteredItems = [];
+      items.map((item) => {
+        const newArray = item?.orders.filter(
+          (order) => order.toLowerCase().startsWith(val?.target?.value) == true
+        );
+        if (newArray.length >= 1) {
+          filteredItems.push(item);
+        }
+      });
+
+      console.info(filteredItems);
+      setItems(filteredItems);
+    },
+    [initialItems, items, searchTerm]
+  );
+
   const tableRows = useMemo(() => {
     return items?.map((entry) => ({
       ...entry,
@@ -124,18 +154,11 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
     return <DataTableSkeleton role="progressbar" />;
   }
 
-  if (items?.length) {
+  if (items?.length >= 0) {
     return (
       <div>
-        <DataTable rows={tableRows} headers={columns} isSortable useZebraStyles>
-          {({
-            rows,
-            headers,
-            getHeaderProps,
-            getTableProps,
-            getRowProps,
-            onInputChange,
-          }) => (
+        <DataTable rows={tableRows} headers={columns} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
             <TableContainer className={styles.tableContainer}>
               <TableToolbar
                 style={{
@@ -148,7 +171,8 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
                 <TableToolbarContent>
                   <Layer>
                     <TableToolbarSearch
-                      onChange={onInputChange}
+                      value={searchTerm}
+                      onChange={handleChange}
                       placeholder={t("searchThisList", "Search this list")}
                       size="sm"
                     />
@@ -184,6 +208,24 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
                   })}
                 </TableBody>
               </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {t(
+                          "noTestOrdersToDisplay",
+                          "No test orders to display"
+                        )}
+                      </p>
+                      <p className={styles.helper}>
+                        {t("checkFilters", "Check the filters above")}
+                      </p>
+                    </div>
+                    <p className={styles.separator}>{t("or", "or")}</p>
+                  </Tile>
+                </div>
+              ) : null}
               {/* <Pagination
                 forwardText="Next page"
                 backwardText="Previous page"
@@ -208,12 +250,12 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
     );
   }
 
-  return (
-    <div>
-      <div className={styles.headerBtnContainer}></div>
-      <EmptyState displayText={"Tests Ordered"} headerTitle={"Tests Ordered"} />
-    </div>
-  );
+  // return (
+  //   <div>
+  //     {/* <div className={styles.headerBtnContainer}></div> */}
+  //     <EmptyState displayText={"Tests Ordered"} headerTitle={"Tests Ordered"} />
+  //   </div>
+  // );
 };
 
 export default LaboratoryOrder;
diff --git a/src/patient-chart/laboratory-order.scss b/src/patient-chart/laboratory-order.scss
@@ -6,4 +6,61 @@
     background-color: $ui-background;
     padding: spacing.$spacing-05;
     text-align: right;
+  }
+
+  .tileContainer {
+    background-color: $ui-02;
+    border-top: 1px solid $ui-03;
+    padding: 5rem 0;
+  }
+
+  .tile {
+    margin: auto;
+    width: fit-content;
+  }
+
+  .tileContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .content {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+    margin-bottom: 0.5rem;
+  }
+
+  .helper {
+    @include type.type-style('body-compact-01');
+    color: $text-02;
+  }
+
+  .separator {
+    @include type.type-style('body-compact-02');
+    color: $text-02;
+    width: 80%;
+    margin: 1.5rem auto;
+    overflow: hidden;
+    text-align: center;
+
+    &::before,
+    &::after {
+      background-color: $text-03;
+      content: '';
+      display: inline-block;
+      height: 1px;
+      position: relative;
+      vertical-align: middle;
+      width: 50%;
+    }
+
+    &::before {
+      right: 0.5rem;
+      margin-left: -50%;
+    }
+
+    &::after {
+      left: 0.5rem;
+      margin-right: -50%;
+    }
   }