From e4507493f4875db27a5b83366921ad0391bb53a0 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Thu, 9 Mar 2023 17:48:58 +0800
Subject: [PATCH] Fixed search terms being limitted to 20 characters and added
 search functionality to logs page

---
 src/Components/ProductsPage/ViewManager.tsx |   1 -
 src/Routes/Logs/Logs.tsx                    | 105 ++++++++++++++++----
 2 files changed, 85 insertions(+), 21 deletions(-)

diff --git a/src/Components/ProductsPage/ViewManager.tsx b/src/Components/ProductsPage/ViewManager.tsx
index fd10bfc..725bb1a 100644
--- a/src/Components/ProductsPage/ViewManager.tsx
+++ b/src/Components/ProductsPage/ViewManager.tsx
@@ -89,7 +89,6 @@ export default function ViewManager(props: ProductList) {
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 setSearchTerm(e.target.value);
               }}
-              maxLength={20}
             />
           </div>
         </div>
diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx
index 12d23d9..621dab1 100644
--- a/src/Routes/Logs/Logs.tsx
+++ b/src/Routes/Logs/Logs.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
 import styles from "../../styles";
 import {
+  Switch,
   Table,
   TableBody,
   TableCell,
@@ -13,7 +14,11 @@ import { SampleLogData } from "../../Components/SampleData/SampleData";
 import LoginChecker from "../../Components/LoginChecker/LoginChecker";
 import { useQuery } from "react-query";
 import { GetLogs, UserInfo } from "../../Components/Api/Api";
-import { OldSessionState, ProductLog } from "../../Interfaces/Interfaces";
+import {
+  OldSessionState,
+  ProductLog,
+  ProductLogEntry,
+} from "../../Interfaces/Interfaces";
 import { useState } from "react";
 import { useSelector } from "react-redux";
 
@@ -22,6 +27,19 @@ export default function Logs() {
   const old_session_checked = useSelector(
     (state: OldSessionState) => state.old_session_checked.value
   );
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchToday, setSearchToday] = useState(true);
+  function getToday() {
+    const current = new Date();
+    const date =
+      ("0" + (current.getMonth() + 1)).slice(-2) +
+      "-" +
+      ("0" + current.getDate()).slice(-2) +
+      "-" +
+      current.getFullYear();
+    console.log("Today is " + date);
+    return date;
+  }
   if (logs.isLoading || !old_session_checked) {
     return (
       <div>
@@ -60,6 +78,46 @@ export default function Logs() {
         <LogsIcon size={64} color="white" />
         <p style={{ ...styles.text_white, ...styles.text_XL }}>Logs</p>
       </div>
+      <div style={styles.content_row}>
+        <div style={{ ...{ flex: 2 }, ...styles.content_row }}>
+          <p style={{ ...styles.text_white, ...styles.text_S }}>Show today</p>
+          <Switch
+            style={{ flex: 1 }}
+            onClick={() => {
+              setSearchToday(!searchToday);
+              if (searchTerm != getToday()) {
+                setSearchTerm(getToday());
+              } else {
+                setSearchTerm("");
+              }
+            }}
+          />
+        </div>
+
+        <div style={{ flex: 6 }} />
+        <div
+          style={{
+            ...styles.content_row,
+            ...{ flex: 2, justifyContent: "flex-end" },
+          }}
+        >
+          <p style={{ ...styles.text_white, ...styles.text_S }}>Search&nbsp;</p>
+          <input
+            style={{
+              ...{
+                flex: 5,
+                height: "2rem",
+              },
+              ...styles.text_S,
+            }}
+            value={searchTerm}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSearchToday(false);
+              setSearchTerm(e.target.value);
+            }}
+          />
+        </div>
+      </div>
       <TableContainer
         style={{
           backgroundColor: "#1d3b33",
@@ -84,25 +142,32 @@ export default function Logs() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {logs.data.map((row: ProductLog, index: number) => (
-              <TableRow
-                key={row.id}
-                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-              >
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.name}
-                </TableCell>
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.quantity}
-                </TableCell>
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.history_user}
-                </TableCell>
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.history_date}
-                </TableCell>
-              </TableRow>
-            ))}
+            {logs.data
+              .filter(
+                (Log: ProductLog) =>
+                  Log.name.toLowerCase().includes(searchTerm) ||
+                  Log.history_user.toLowerCase().includes(searchTerm) ||
+                  Log.history_date.toLowerCase().includes(searchTerm)
+              )
+              .map((row: ProductLog, index: number) => (
+                <TableRow
+                  key={index}
+                  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                >
+                  <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                    {row.name}
+                  </TableCell>
+                  <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                    {row.quantity}
+                  </TableCell>
+                  <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                    {row.history_user}
+                  </TableCell>
+                  <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                    {row.history_date}
+                  </TableCell>
+                </TableRow>
+              ))}
           </TableBody>
         </Table>
       </TableContainer>