From 005a1c08faacd942265828a7a70820d5c0bead8e Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Wed, 17 Sep 2025 21:05:50 +0200
Subject: [PATCH] feat:  tag autocomplete feature in search input

---
 frontend/src/pages/ItemsPage.tsx | 160 ++++++++++++++++++++++++++-----
 1 file changed, 135 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/ItemsPage.tsx b/frontend/src/pages/ItemsPage.tsx
index 9e75258..e9abc37 100644
--- a/frontend/src/pages/ItemsPage.tsx
+++ b/frontend/src/pages/ItemsPage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import {
   getItems,
   getTags,
@@ -41,6 +41,11 @@ export default function ItemsPage() {
   const [newItemTripId, setNewItemTripId] = useState<string>("");
   const [adding, setAdding] = useState(false);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [tagAutocomplete, setTagAutocomplete] = useState<{name: string, id: string}[]>([]);
+  const [autocompleteActive, setAutocompleteActive] = useState(false);
+  const [autocompleteIndex, setAutocompleteIndex] = useState(0);
+
   async function loadData() {
     setLoading(true);
     try {
@@ -102,10 +107,14 @@ export default function ItemsPage() {
   }
 
   // Filtern
+  const tagMatches = filterText.match(/#(\w+)/g) || [];
+  const tagNames = tagMatches.map(t => t.slice(1).toLowerCase());
+  const textOnly = filterText.replace(/#\w+/g, "").trim();
+
   const filteredItems = items.filter((item) => {
     const matchesText =
-      filterText === "" ||
-      item.name.toLowerCase().includes(filterText.toLowerCase());
+      textOnly === "" ||
+      item.name.toLowerCase().includes(textOnly.toLowerCase());
 
     const matchesTags =
       selectedTags.length === 0 ||
@@ -126,38 +135,133 @@ export default function ItemsPage() {
     );
   }
 
+  // Autocomplete-Logik
+  useEffect(() => {
+    const match = filterText.match(/#(\w*)$/);
+    if (match) {
+      const prefix = match[1].toLowerCase();
+      const suggestions = tags
+        .filter(tag => tag.name.toLowerCase().startsWith(prefix) && !selectedTags.includes(tag.id));
+      setTagAutocomplete(suggestions);
+      setAutocompleteActive(suggestions.length > 0 && prefix.length > 0);
+      setAutocompleteIndex(0);
+    } else {
+      setTagAutocomplete([]);
+      setAutocompleteActive(false);
+      setAutocompleteIndex(0);
+    }
+  }, [filterText, tags, selectedTags]);
+
+  function handleSearchInput(value: string) {
+    setFilterText(value);
+
+    // Tags aus dem Suchfeld extrahieren: #tag1 #tag2
+    const tagMatches = value.match(/#(\w+)/g) || [];
+    const tagNames = tagMatches.map(t => t.slice(1).toLowerCase());
+    const matchedTagIds = tags
+      .filter(tag => tagNames.includes(tag.name.toLowerCase()))
+      .map(tag => tag.id);
+
+    setSelectedTags(matchedTagIds);
+  }
+
+  function handleAutocompleteSelect(idx: number) {
+    const match = filterText.match(/#(\w*)$/);
+    if (!match) return;
+    const before = filterText.slice(0, match.index);
+    const tag = tagAutocomplete[idx];
+    // Tag einfügen und mit Leerzeichen abschließen
+    const completed = `${before}#${tag.name} `;
+    setFilterText(completed);
+    setAutocompleteActive(false);
+    setTagAutocomplete([]);
+    setAutocompleteIndex(0);
+    // Tags neu setzen
+    handleSearchInput(completed);
+    // Fokus zurück aufs Input
+    inputRef.current?.focus();
+  }
+
+  function handleInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (autocompleteActive && tagAutocomplete.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setAutocompleteIndex(i => (i + 1) % tagAutocomplete.length);
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setAutocompleteIndex(i => (i - 1 + tagAutocomplete.length) % tagAutocomplete.length);
+      }
+      if (e.key === "Tab" || e.key === "Enter") {
+        e.preventDefault();
+        handleAutocompleteSelect(autocompleteIndex);
+      }
+    }
+  }
+
   return (
     <div className="p-2">
       <h1 className="text-2xl font-bold mb-4">Items</h1>
 
-      {/* Suche */}
-      <div className="mb-4">
+      {/* Suche + Tag-Filter im Suchfeld */}
+      <div className="mb-4 relative">
         <input
+          ref={inputRef}
           type="text"
-          placeholder="🔍 Suchen..."
+          placeholder="🔍 Suchen... (#tag möglich)"
           value={filterText}
-          onChange={(e) => setFilterText(e.target.value)}
+          onChange={e => handleSearchInput(e.target.value)}
+          onKeyDown={handleInputKeyDown}
           className="border rounded px-3 py-2 w-full shadow focus:outline-none focus:ring-2 focus:ring-blue-300"
+          autoComplete="off"
         />
+        {/* Autocomplete-Dropdown: schon bei "#" anzeigen */}
+        {(() => {
+          const match = filterText.match(/#(\w*)$/);
+          if (match && (autocompleteActive || match[1] === "")) {
+            return (
+              <ul className="absolute left-0 top-full mt-1 bg-white border rounded shadow z-10 w-full max-h-40 overflow-auto">
+                {tagAutocomplete.length === 0 && match[1] === "" ? (
+                  tags.map((tag, idx) => (
+                    <li
+                      key={tag.id}
+                      className="px-3 py-1 cursor-pointer flex items-center"
+                      onMouseDown={() => handleAutocompleteSelect(idx)}
+                      onMouseEnter={() => setAutocompleteIndex(idx)}
+                    >
+                      #{tag.name}
+                      {tag.mandatory && <span className="text-red-500 font-bold ml-1">!</span>}
+                    </li>
+                  ))
+                ) : (
+                  tagAutocomplete.map((tag, idx) => (
+                    <li
+                      key={tag.id}
+                      className={
+                        "px-3 py-1 cursor-pointer flex items-center " +
+                        (idx === autocompleteIndex ? "bg-blue-100 font-bold" : "")
+                      }
+                      onMouseDown={() => handleAutocompleteSelect(idx)}
+                      onMouseEnter={() => setAutocompleteIndex(idx)}
+                    >
+                      #{tag.name}
+                      {tag.mandatory && <span className="text-red-500 font-bold ml-1">!</span>}
+                    </li>
+                  ))
+                )}
+              </ul>
+            );
+          }
+          return null;
+        })()}
       </div>
 
-      {/* Tag-Filter */}
-      <div className="mb-4 p-2 rounded bg-blue-50 border border-blue-200 shadow-sm">
-        <TagFilter
-          tags={tags}
-          selected={selectedTags}
-          onToggle={handleTagToggle}
-        />
-      </div>
-
-      {/* Neue ItemRow als erste Zeile */}
-      <ul className="divide-y">
-        <li className="flex flex-wrap items-center gap-2 py-2 border-b bg-gray-50 rounded shadow-sm">
-          <input
-            className="border rounded px-2 py-1 flex-1 min-w-[120px] shadow focus:outline-none focus:ring-2 focus:ring-green-300"
-            value={newItemName}
-            onChange={e => setNewItemName(e.target.value)}
-            placeholder="Neues Item..."
+      <div className="flex flex-wrap items-center gap-2 p-2 border rounded shadow">
+        <input
+          className="border rounded px-2 py-1 flex-1 min-w-[120px] shadow focus:outline-none focus:ring-2 focus:ring-green-300"
+          value={newItemName}
+          onChange={e => setNewItemName(e.target.value)}
+          placeholder="Neues Item..."
             onKeyDown={e => {
               if (e.key === "Enter") handleAddItem();
             }}
@@ -181,7 +285,7 @@ export default function ItemsPage() {
           </select>
           {/* Tags-Auswahl, nur wenn kein Trip gewählt */}
           {!newItemTripId && (
-            <div className="flex flex-wrap gap-1 p-1 bg-white rounded border border-gray-200">
+            <div className="flex flex-wrap gap-2 bg-white rounded ">
               {tags.map((tag) => (
                 <span
                   key={tag.id}
@@ -212,6 +316,12 @@ export default function ItemsPage() {
           >
             Hinzufügen
           </button>
+      </div>
+
+      {/* Neue ItemRow als erste Zeile */}
+      <ul className="divide-y">
+        <li className="flex flex-wrap items-center gap-2 py-2 border-b bg-blue-150 rounded shadow-sm">
+ 
         </li>
         <ItemList
           items={sortedItems}