Fixed search terms being limitted to 20 characters and added search functionality to logs page

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>

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,9 +142,16 @@ export default function Logs() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {logs.data.map((row: ProductLog, index: number) => (
+            {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={row.id}
+                  key={index}
                   sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                 >
                   <TableCell style={{ ...styles.text_white, ...styles.text_S }}>