added search fuctionality to the logTable component

Co-authored-by: Asbjørn Christensen <[email protected]>
JonasGLund99 · Mar 18, 2024 · 59d1335 · 59d1335
1 parent b1dad40
commit 59d1335
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/TimeTrace/src/components/LogTable.tsx b/TimeTrace/src/components/LogTable.tsx
@@ -1,11 +1,17 @@
+import { useState } from "react";
+
 type LogTableProps = {
-    mappingsAreEditable: boolean | undefined;
+    mappingsAreEditable: boolean;
     events: string[];
     mappings: Map<string, string>;
     setMappings: React.Dispatch<React.SetStateAction<Map<string, string>>> | undefined;
+    searchLog: (searchQuery: string) => void;
 };
 
 function LogTable(props: LogTableProps) {
+
+    const [searchQuery, setSearchQuery] = useState<string>("");
+
     function handleMappingChange(eventText: string, mappingIndex: number): void {
         const inputValue = eventText;
 
@@ -28,13 +34,21 @@ function LogTable(props: LogTableProps) {
     }
 
     return (
-        <div className="relative w-[60%] h-[92%] overflow-auto border-2 border-gray-300 p-5 rounded-md">
-            <div className="flex flex-col overflow-auto log-table">
+        <div id="log-table" className="relative w-[60%] h-[92%] overflow-auto border-2 border-gray-300 p-5 rounded-md">
+            <div className="flex justify-between">
+                <h2>Event</h2>
+                <input type="text" className="border border-gray-600 " placeholder="Search for event" value={searchQuery} onChange={(e) => { setSearchQuery(e.target.value); props.searchLog(e.target.value) }}></input>
+                <h2>Mapped value</h2>
+            </div>
+            <div className="flex flex-col pt-3 overflow-auto log-table">
+                <div>
+                </div>
+                {props.events.length === 0 ? (<h3 className="self-center text-2xl font-medium text-center align">No events were found.</h3>) : null}
                 {props.events.map((event: string, i: number) => {
-                    return <pre className="w-full py-2">{`Line ${i}: ` + event}      </pre>;
+                    return <pre className="w-full py-2">{`${i}: ` + event}      </pre>;
                 })}
 
-                <div className="absolute top-0 right-0 flex flex-col pt-5 bg-white mapping-container">
+                <div className="absolute top-0 right-0 flex flex-col bg-white mt-14 mapping-container">
                     {props.events.map((event: string, i: number) => {
                         return (
                             <div className="flex items-center justify-end gap-1 py-2 pr-1">
@@ -65,7 +79,7 @@ function LogTable(props: LogTableProps) {
                                             d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
                                         />
                                     </svg>
-                                ) : null }
+                                ) : null}
                             </div>
                         );
                     })}

diff --git a/TimeTrace/src/pages/LogPage.tsx b/TimeTrace/src/pages/LogPage.tsx
@@ -9,6 +9,7 @@ function LogPage() {
     queryHandler.TREBuilder.TREString = TRE;
     queryHandler.search(TRE);
   }
+
   return (
     <div>
       <h1 className="flex justify-center pb-5 text-4xl ">Search logfile</h1>

diff --git a/TimeTrace/src/pages/MappingsPage.tsx b/TimeTrace/src/pages/MappingsPage.tsx
@@ -3,39 +3,45 @@ import { useState } from "react";
 import LogTable from "../components/LogTable";
 
 function MappingsPage() {
-    const events: string[] = [];
+    const events: string[] = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
     const [filteredEvents, setFilteredEvents] = useState<string[]>(events);
     const [mappings, setMapping] = useState<Map<string, string>>(new Map(events.map((event) => [event, ""])))
     const [uploadedFile, setUploadedFile] = useState<File | null>(null);
 
+
     // Callback function to receive the file
     const handleFileChange = (file: File | null) => {
         setUploadedFile(file);
     };
 
-    function searchLog(query: string, ) {
-
+    function searchLog(query: string) {
+        if (query === "") {
+            setFilteredEvents(events);
+            return;
+        };
+        const filteredEvents = events.filter((event) => event.toLowerCase().includes(query.toLowerCase()));
+        setFilteredEvents(filteredEvents);
     }
 
     return (
-      <div className="flex flex-row h-full mappings-page" >
-        <div className="w-[40%]">
-        {
-                uploadedFile ?
-                    <div>
-                        <p>File uploaded: {uploadedFile.name}</p>
-                    </div>
-                    :
-                    <div>
-                        <p>Choose a file</p>
-                    </div>
-            }
-            <FileUploadButton onFileChange={handleFileChange} />
+        <div className="flex flex-row h-full mappings-page" >
+            <div className="w-[40%]">
+                {
+                    uploadedFile ?
+                        <div>
+                            <p>File uploaded: {uploadedFile.name}</p>
+                        </div>
+                        :
+                        <div>
+                            <p>Choose a file</p>
+                        </div>
+                }
+                <FileUploadButton onFileChange={handleFileChange} />
 
+            </div>
+            <LogTable mappings={mappings} setMappings={setMapping} mappingsAreEditable={true} events={filteredEvents} searchLog={searchLog} />
         </div>
-        <LogTable mappings={mappings} setMappings={setMapping} mappingsAreEditable={true} events={events}/>
-      </div>
-
+
     );
 }