Added Search function for items and fixed javascript controller

app/javascript/controllers/assignment_controller.js

@@ -1,27 +1,29 @@
-import { Controller } from "@hotwire/stimulus"
+// Wird der controller überhaupt gebraucht? Funktioniert auch ohne.. ;)
+
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = [ "userSection", "roomSection" ]
+  static targets = ["userSection", "roomSection"];
 
   toggle(event) {
-    const value = event.target.value
-    const userDropdown = this.userSectionTarget.querySelector('select')
-    const roomDropdown = this.roomSectionTarget.querySelector('select')
+    const value = event.target.value;
+    const userDropdown = this.userSectionTarget.querySelector("select");
+    const roomDropdown = this.roomSectionTarget.querySelector("select");
 
     if (value === "user") {
-      this.userSectionTarget.classList.remove("hidden")
-      this.roomSectionTarget.classList.add("hidden")
-      roomDropdown.value = "" // Raum-ID löschen, da ein Artikel nur einen Inhaber haben kann
+      this.userSectionTarget.classList.remove("hidden");
+      this.roomSectionTarget.classList.add("hidden");
+      roomDropdown.value = ""; // Raum-ID löschen, da ein Artikel nur einen Inhaber haben kann
     } else if (value === "room") {
-      this.roomSectionTarget.classList.remove("hidden")
-      this.userSectionTarget.classList.add("hidden")
-      userDropdown.value = "" // User-ID löschen
+      this.roomSectionTarget.classList.remove("hidden");
+      this.userSectionTarget.classList.add("hidden");
+      userDropdown.value = ""; // User-ID löschen
     } else {
       // Hauptlager ausgewählt -> Beide ausblenden und Werte in der DB nullen
-      this.userSectionTarget.classList.add("hidden")
-      this.roomSectionTarget.classList.add("hidden")
-      userDropdown.value = ""
-      roomDropdown.value = ""
+      this.userSectionTarget.classList.add("hidden");
+      this.roomSectionTarget.classList.add("hidden");
+      userDropdown.value = "";
+      roomDropdown.value = "";
     }
   }
 }

app/javascript/controllers/scanner_controller.js

@@ -1,49 +1,58 @@
-import { Controller } from "@hotwire/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = [ "input", "preview", "modal" ]
+  static targets = ["input", "preview", "modal"];
 
   connect() {
-    this.html5QrCode = null
+    this.html5QrCode = null;
   }
 
   // Öffnet das Modal und startet den Kamera-Stream
   startCamera(event) {
-    event.preventDefault()
-    
+    event.preventDefault();
+
     // Modal anzeigen
-    this.modalTarget.classList.remove("hidden")
+    this.modalTarget.classList.remove("hidden");
 
     // Neue Instanz auf dem Preview-Div mit der ID des Elements erzeugen
-    this.html5QrCode = new Html5Qrcode(this.previewTarget.id)
+    this.html5QrCode = new Html5Qrcode(this.previewTarget.id);
 
     // FPS-Rate und Scan-Rahmen (250x250px) festlegen
-    const config = { fps: 10, qrbox: { width: 250, height: 250 } }
+    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
 
-    this.html5QrCode.start(
-      { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
-      config,
-      (decodedText, decodedResult) => {
-        // SUCCESS: Code erkannt!
-        this.inputTarget.value = decodedText // Trägt die ID (z.B. 10024) ins Textfeld ein
-        this.stopCamera()                     // Stoppt die Kamera und schließt das Fenster
-      },
-      (errorMessage) => {
-        // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
-      }
-    ).catch((err) => {
-      console.error("Kamera-Zugriff verweigert oder blockiert:", err)
-    })
+    this.html5QrCode
+      .start(
+        { facingMode: "environment" }, // Erzwingt die rückseitige Hauptkamera bei Handys
+        config,
+        (decodedText, decodedResult) => {
+          // SUCCESS: Code erkannt!
+          this.inputTarget.value = decodedText; // Trägt die ID (z.B. 10024) ins Textfeld ein
+
+          // NEU: Simuliert das Tippen, damit dein search-form Controller die Live-Suche sofort startet!
+          this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }));
+
+          this.stopCamera(); // Stoppt die Kamera und schließt das Fenster
+        },
+        (errorMessage) => {
+          // Kontinuierlicher Scan-Loop (Fehler ignorieren, wenn kein QR-Code im Bild ist)
+        },
+      )
+      .catch((err) => {
+        console.error("Kamera-Zugriff verweigert oder blockiert:", err);
+      });
   }
 
   // Schließt das Modal und beendet den Stream sauber
   stopCamera() {
     if (this.html5QrCode && this.html5QrCode.isScanning) {
-      this.html5QrCode.stop().then(() => {
-        this.modalTarget.classList.add("hidden")
-      }).catch((err) => console.error("Fehler beim Beenden des Streams:", err))
+      this.html5QrCode
+        .stop()
+        .then(() => {
+          this.modalTarget.classList.add("hidden");
+        })
+        .catch((err) => console.error("Fehler beim Beenden des Streams:", err));
     } else {
-      this.modalTarget.classList.add("hidden")
+      this.modalTarget.classList.add("hidden");
     }
   }
 }

app/javascript/controllers/search_form_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  submit() {
+    clearTimeout(this.timeout);
+    // Wartet 200ms nach dem letzten Tastendruck, bevor gesucht wird
+    this.timeout = setTimeout(() => {
+      this.element.requestSubmit();
+    }, 200);
+  }
+}