From 34bb54f8b1b962ac6c113c0d358fd97be3ea3004 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sat, 16 Dec 2023 15:46:26 +0800
Subject: [PATCH] Added a search bar for filtering results in equipment
 instance list page

---
 .../EquipmentInstancesListPage.tsx            | 127 +++++++++++++-----
 1 file changed, 90 insertions(+), 37 deletions(-)

diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
index 2de21a2..e3b0ee8 100644
--- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
+++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
@@ -14,6 +14,7 @@ import { colors } from "../../styles";
 import EditItemModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
 import { useState } from "react";
 import Popup from "reactjs-popup";
+import Autocomplete from "@mui/material/Autocomplete";
 
 export default function EquipmentInstancesListPage() {
   const [editmodalOpen, SetEditModalOpen] = useState(false);
@@ -22,6 +23,7 @@ export default function EquipmentInstancesListPage() {
     queryKey: ["equipment_instances"],
     queryFn: EquipmentInstancesAPI,
   });
+  const [filter, setFilter] = useState<string | null>(null);
   if (equipment_instances.isLoading) {
     return (
       <div style={styles.background}>
@@ -65,6 +67,37 @@ export default function EquipmentInstancesListPage() {
           flexWrap: "wrap",
         }}
       >
+        <div
+          style={{
+            ...styles.flex_row,
+            ...{ alignItems: "center", justifyContent: "flex-start" },
+          }}
+        >
+          <p style={{ ...styles.text_dark, ...styles.text_M }}>Filter: </p>
+          <Autocomplete
+            sx={{
+              display: "inline-block",
+              "& input": {
+                width: "256x",
+                bgcolor: "background.paper",
+                color: (theme) =>
+                  theme.palette.getContrastText(theme.palette.background.paper),
+              },
+            }}
+            value={filter}
+            onChange={(_event, newValue) => {
+              setFilter(newValue);
+            }}
+            freeSolo
+            id="custom-input-demo"
+            options={["Available", "Broken", "Glassware", "Miscellaneous"]}
+            renderInput={(params) => (
+              <div ref={params.InputProps.ref}>
+                <input type="text" {...params.inputProps} />
+              </div>
+            )}
+          />
+        </div>
         <TableContainer
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
           component={Paper}
@@ -89,45 +122,65 @@ export default function EquipmentInstancesListPage() {
             </TableHead>
             <TableBody>
               {equipment_instances.data ? (
-                equipment_instances.data.map((equipment) => (
-                  <TableRow
-                    key={equipment.id}
-                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                    onClick={() => {
-                      SetSelectedItem(equipment.id);
-                      SetEditModalOpen(true);
-                    }}
-                  >
-                    <TableCell align="center" component="th" scope="row">
-                      {equipment.id}
-                    </TableCell>
-                    <TableCell align="center" component="th" scope="row">
-                      {equipment.equipment_name}
-                    </TableCell>
+                equipment_instances.data
+                  .filter((equipment) =>
+                    filter !== null
+                      ? // If filter is not null, we filter if it matches any criteria
+                        equipment.equipment_name
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
+                        equipment.category
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
+                        equipment.remarks
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
+                        equipment.last_updated
+                          .toLowerCase()
+                          .includes(filter.toLowerCase()) ||
+                        equipment.status.toLowerCase() == filter.toLowerCase()
+                      : // If filter keyword is null then we just pass through everything as if we did not filter at all
+                        true
+                  )
+                  .map((equipment) => (
+                    <TableRow
+                      key={equipment.id}
+                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                      onClick={() => {
+                        SetSelectedItem(equipment.id);
+                        SetEditModalOpen(true);
+                      }}
+                    >
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.id}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.equipment_name}
+                      </TableCell>
 
-                    <TableCell align="center" component="th" scope="row">
-                      {equipment.status}
-                    </TableCell>
-                    <TableCell align="center" component="th" scope="row">
-                      {equipment.category}
-                    </TableCell>
-                    <TableCell align="right">
-                      <div
-                        style={{
-                          ...styles.flex_column,
-                          ...{ alignItems: "center" },
-                        }}
-                      >
-                        <div>{equipment.last_updated}</div>
-                        <div>
-                          {equipment.last_updated_by
-                            ? "by " + equipment.last_updated_by
-                            : ""}
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.status}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.category}
+                      </TableCell>
+                      <TableCell align="right">
+                        <div
+                          style={{
+                            ...styles.flex_column,
+                            ...{ alignItems: "center" },
+                          }}
+                        >
+                          <div>{equipment.last_updated}</div>
+                          <div>
+                            {equipment.last_updated_by
+                              ? "by " + equipment.last_updated_by
+                              : ""}
+                          </div>
                         </div>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
+                      </TableCell>
+                    </TableRow>
+                  ))
               ) : (
                 <></>
               )}