Merge pull request #20 from JohanGrims:feature-match-link

Refactor search functionality in Answers component
JohanGrims · Oct 18, 2024 · 4832b1d · 4832b1d
2 parents 4a3ca34 + f9f335b
commit 4832b1d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git a/src/admin/vote/Answers.jsx b/src/admin/vote/Answers.jsx
@@ -13,10 +13,29 @@ import { db } from "../../firebase";
 export default function Answers() {
   const { vote, options, answers } = useLoaderData();
 
-  const [mode, setMode] = React.useState("by-option");
+  const search = new URLSearchParams(window.location.search).get("search");
+
+  const [mode, setMode] = React.useState(search ? "by-name" : "by-option");
 
   const grades = [...new Set(answers.map((answer) => answer.grade))];
 
+  React.useEffect(() => {
+    if (search) {
+      const query = search.toLowerCase();
+      const elements = document.querySelectorAll("tbody tr");
+      elements.forEach((element) => {
+        if (element.textContent.toLowerCase().includes(query)) {
+          element.style.display = "";
+        } else {
+          element.style.display = "none";
+        }
+      });
+      // write search query to search field
+      const searchField = document.querySelector("mdui-text-field");
+      searchField.value = search;
+    }
+  }, []);
+
   return (
     <div className="mdui-prose">
       <h2>Antworten</h2>
@@ -192,7 +211,7 @@ export default function Answers() {
             label="Suchen"
             onInput={(e) => {
               const query = e.target.value.toLowerCase();
-              const elements = document.querySelectorAll("tr");
+              const elements = document.querySelectorAll("tbody tr");
               elements.forEach((element) => {
                 if (element.textContent.toLowerCase().includes(query)) {
                   element.style.display = "";

diff --git a/src/admin/vote/Match.tsx b/src/admin/vote/Match.tsx
@@ -1,6 +1,6 @@
 import { collection, getDocs } from "firebase/firestore/lite";
 import React from "react";
-import { useLoaderData } from "react-router-dom";
+import { Link, useLoaderData } from "react-router-dom";
 import { db } from "../../firebase";
 import { Class } from "../../types";
 
@@ -40,26 +40,36 @@ export default function Match() {
                         <td>{s.name}</td>
                         <td>{s.listIndex}</td>
                         <td>
-                          {
-                            choices.filter(
-                              (choice) =>
-                                choice.listIndex === s.listIndex.toString() &&
-                                choice.grade === c.grade.toString()
-                            )[0]?.name
-                          }
+                          <Link
+                            to={`../answers?search=${
+                              choices.filter(
+                                (choice) =>
+                                  choice.listIndex === s.listIndex.toString() &&
+                                  choice.grade === c.grade.toString()
+                              )[0]?.id
+                            }`}
+                          >
+                            {
+                              choices.filter(
+                                (choice) =>
+                                  choice.listIndex === s.listIndex.toString() &&
+                                  choice.grade === c.grade.toString()
+                              )[0]?.name
+                            }
+                          </Link>
                           {choices.filter(
                             (choice) =>
                               choice.listIndex === s.listIndex.toString() &&
                               choice.grade === c.grade.toString()
                           ).length > 1 &&
-                            "+ " +
+                            " + " +
                               (choices.filter(
                                 (choice) =>
                                   choice.listIndex === s.listIndex.toString() &&
                                   choice.grade === c.grade.toString()
                               ).length -
                                 1) +
-                              " weitere"}
+                              " weitere"}{" "}
                         </td>
                       </tr>
                     ))}