Updated/Fixed Item form and item show

app/views/items/_form.html.erb

@@ -1,22 +1,3 @@
-<!--<%= form_with(model: item, class: "contents") do |form| %>
-  <% if item.errors.any? %>
-    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
-      <h2><%= pluralize(item.errors.count, "error") %> prohibited this item from being saved:</h2>
-
-      <ul class="list-disc ml-6">
-        <% item.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
-
-  <div class="inline">
-    <%= form.submit class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
-  </div>
-<% end %>
--->
-
 <%= form_with(model: item, class: "space-y-6 max-w-2xl mx-auto bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8") do |form| %>
 
   <% if item.errors.any? %>
@@ -30,16 +11,14 @@
     </div>
   <% end %>
 
-<div>
-  <!-- Ändert die Überschrift dynamisch je nach Zustand des Artikels -->
-  <h2 class="text-xl font-bold text-gray-800">
-    <%= item.new_record? ? "Artikel registrieren" : "Artikel bearbeiten" %>
-  </h2>
-  
-  <p class="text-sm text-gray-500 mt-1">
-    <%= item.new_record? ? "Trage hier die Unikat-Daten wie Seriennummer und Sticker-ID ein." : "Aktualisiere die Daten oder verändere den aktuellen Standort des Geräts." %>
-  </p>
-</div>
+  <div>
+    <h2 class="text-xl font-bold text-gray-800">
+      <%= item.new_record? ? "Artikel registrieren" : "Artikel bearbeiten" %>
+    </h2>
+    <p class="text-sm text-gray-500 mt-1">
+      <%= item.new_record? ? "Trage hier die Unikat-Daten wie Seriennummer und Sticker-ID ein." : "Aktualisiere die Daten oder verändere den aktuellen Standort des Geräts." %>
+    </p>
+  </div>
 
   <hr class="border-gray-200">
 
@@ -47,37 +26,37 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
     <div>
       <%= form.label :name, "Artikelname / Modell", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-      <%= form.text_field :name, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
+      <%= form.text_field :name, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
     </div>
     <div>
       <%= form.label :sku, "SKU (Artikelnummer)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-      <%= form.text_field :sku, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
+      <%= form.text_field :sku, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
     </div>
   </div>
 
-  <!-- Herstelldaten & Preise (Bereinigt um min_stock) -->
+  <!-- Herstelldaten & Preise -->
   <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
     <div class="sm:col-span-2">
       <%= form.label :serial_number, "Seriennummer (Hersteller)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-      <%= form.text_field :serial_number, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
+      <%= form.text_field :serial_number, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
     </div>
     <div>
       <%= form.label :price, "Einkaufspreis (€)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-      <%= form.text_field :price, placeholder: "0.00", class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
+      <%= form.text_field :price, placeholder: "0.00", class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
     </div>
   </div>
 
   <!-- Kategorie-Auswahl -->
   <div>
     <%= form.label :category_id, "Kategorie", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-    <%= form.collection_select :category_id, Category.all, :id, :name, { prompt: "Bitte wählen..." }, { class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white" } %>
+    <%= form.collection_select :category_id, Category.all, :id, :name, { prompt: "Bitte wählen..." }, { class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white focus:border-blue-500 focus:ring-blue-500" } %>
   </div>
 
-  <!-- QR STICKER-ID -->
+  <!-- QR STICKER-ID (Mit deinem funktionierenden Scanner) -->
   <div data-controller="scanner">
     <%= form.label :sticker_id, "Vorgedruckte Sticker-ID / QR-Nummer", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
     <div class="relative flex rounded-lg shadow-sm">
-      <%= form.text_field :sticker_id, data: { scanner_target: "input" }, class: "py-2 px-3 block w-full border border-gray-300 rounded-l-lg text-sm bg-gray-50/50" %>
+      <%= form.text_field :sticker_id, data: { scanner_target: "input" }, class: "py-2 px-3 block w-full border border-gray-300 rounded-l-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
       <button type="button" data-action="click->scanner#startCamera" class="py-2 px-4 border border-l-0 border-gray-300 bg-gray-50 text-gray-700 rounded-r-lg text-sm flex items-center gap-1.5 hover:bg-gray-100 transition">
         Scannen
       </button>
@@ -86,44 +65,108 @@
 
   <hr class="border-gray-200">
 
-  <!-- INTERAKTIVE ZUWEISUNGS-WEICHE (Variante 2) -->
-  <div data-controller="assignment" class="space-y-4">
+  <!-- ========================================================================= -->
+  <!-- REPARIERTER TURBO FRAME ZUWEISUNGSBEREICH (100% STABIL OHNE JS) -->
+  <!-- ========================================================================= -->
+  <div class="space-y-4">
     <label class="block text-sm font-semibold text-gray-800">Standort / Zuweisung festlegen</label>
     
-    <div class="flex flex-wrap gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
-      <label class="flex items-center gap-2 text-sm text-gray-700 font-medium cursor-pointer">
-        <input type="radio" name="assignment_type" value="storage" data-action="change->assignment#toggle" checked class="text-blue-600 focus:ring-blue-500 h-4 w-4 border-gray-300">
-        📦 Im Hauptlager belassen
-      </label>
-      <label class="flex items-center gap-2 text-sm text-gray-700 font-medium cursor-pointer">
-        <input type="radio" name="assignment_type" value="user" data-action="change->assignment#toggle" class="text-blue-600 focus:ring-blue-500 h-4 w-4 border-gray-300">
-        👤 Mitarbeiter zuweisen
-      </label>
-      <label class="flex items-center gap-2 text-sm text-gray-700 font-medium cursor-pointer">
-        <input type="radio" name="assignment_type" value="room" data-action="change->assignment#toggle" class="text-blue-600 focus:ring-blue-500 h-4 w-4 border-gray-300">
-        📍 Raum zuweisen
-      </label>
-    </div>
+    <%= turbo_frame_tag "item_assignment_frame" do %>
+      <% 
+        current_type = if item.user_id.present?
+                         "user"
+                       elsif item.room_id.present?
+                         "room"
+                       else
+                         "storage"
+                       end
+        type = params[:assignment_type] || current_type
+      %>
 
-    <!-- Dropdown: Mitarbeiter -->
-    <div data-assignment-target="userSection" class="hidden">
-      <%= form.label :user_id, "Mitarbeiter auswählen", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-      <%= form.collection_select :user_id, User.all, :id, :name_with_department, { prompt: "Mitarbeiter wählen..." }, { class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white" } %>
-    </div>
+      <!-- Button-Gruppe zur Typwahl -->
+      <div class="grid grid-cols-3 gap-2 p-1.5 bg-gray-100 rounded-lg border border-gray-200">
+        <%= link_to item.new_record? ? new_item_path(assignment_type: "storage") : edit_item_path(item, assignment_type: "storage"), 
+                    class: "py-2 px-3 text-xs font-medium rounded-md text-center transition flex items-center justify-center gap-1 #{type == 'storage' ? 'bg-white text-blue-600 shadow-sm font-semibold' : 'text-gray-600 hover:text-gray-900'}" do %>
+          📦 Lager
+        <% end %>
+        
+        <%= link_to item.new_record? ? new_item_path(assignment_type: "user") : edit_item_path(item, assignment_type: "user"), 
+                    class: "py-2 px-3 text-xs font-medium rounded-md text-center transition flex items-center justify-center gap-1 #{type == 'user' ? 'bg-white text-blue-600 shadow-sm font-semibold' : 'text-gray-600 hover:text-gray-900'}" do %>
+          👤 Mitarbeiter
+        <% end %>
+        
+        <%= link_to item.new_record? ? new_item_path(assignment_type: "room") : edit_item_path(item, assignment_type: "room"), 
+                    class: "py-2 px-3 text-xs font-medium rounded-md text-center transition flex items-center justify-center gap-1 #{type == 'room' ? 'bg-white text-blue-600 shadow-sm font-semibold' : 'text-gray-600 hover:text-gray-900'}" do %>
+          📍 Raum
+        <% end %>
+      </div>
 
-    <!-- Dropdown: Räume -->
-    <div data-assignment-target="roomSection" class="hidden">
-      <%= form.label :room_id, "Raum / Standort auswählen", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-      <%= form.collection_select :room_id, Room.all, :id, :name_with_building, { prompt: "Raum wählen..." }, { class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white" } %>
-    </div>
+      <!-- Live-Suche (Reiner Text, keine versteckten IDs) -->
+      <div class="mt-4">
+        <% if type == "user" %>
+          <!-- Signalisiert Rails, dass die room_id gelöscht werden soll -->
+          <input type="hidden" name="item[room_id]" value="">
+          
+          <label for="item_user_name" class="block text-sm font-medium mb-1.5 text-gray-700">Mitarbeiter suchen (Vorname, Nachname oder E-Mail)...</label>
+          <div class="relative">
+            <!-- Wir senden den Klartext-Namen an ein virtuelles Feld 'user_name' -->
+            <input type="text" 
+                   id="item_user_name"
+                   name="item[user_name]" 
+                   list="users_datalist" 
+                   value="<%= item.user&.name %>"
+                   class="py-2.5 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white focus:border-blue-500 focus:ring-blue-500"
+                   placeholder="Tippe den Namen ein...">
+            
+            <datalist id="users_datalist">
+              <% User.all.each do |user| %>
+                <!-- Hier nutzen wir den reinen Vor- und Nachnamen als Value -->
+                <option value="<%= user.name %>"></option>
+              <% end %>
+            </datalist>
+          </div>
+        
+        <% elsif type == "room" %>
+          <!-- Signalisiert Rails, dass die user_id gelöscht werden soll -->
+          <input type="hidden" name="item[user_id]" value="">
+          
+          <label for="item_room_name" class="block text-sm font-medium mb-1.5 text-gray-700">Raum suchen (Raumnummer)...</label>
+          <div class="relative">
+            <!-- Wir senden den Klartext-Namen an ein virtuelles Feld 'room_name' -->
+            <input type="text" 
+                   id="item_room_name"
+                   name="item[room_name]" 
+                   list="rooms_datalist" 
+                   value="<%= item.room&.name %>"
+                   class="py-2.5 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white focus:border-blue-500 focus:ring-blue-500"
+                   placeholder="Tippe die Raumnummer ein...">
+            
+            <datalist id="rooms_datalist">
+              <% Room.all.each do |room| %>
+                <option value="<%= room.name %>"></option>
+              <% end %>
+            </datalist>
+          </div>
+        
+        <% else %>
+          <!-- Hauptlager gewählt -> Beide IDs nullen -->
+          <input type="hidden" name="item[user_id]" value="">
+          <input type="hidden" name="item[room_id]" value="">
+          <div class="p-4 rounded-lg border border-dashed border-gray-200 bg-gray-50/50 text-center text-xs text-gray-500">
+            Das Gerät wird nach dem Speichern als „Verfügbar im Hauptlager“ eingebucht.
+          </div>
+        <% end %>
+      </div>
+    <% end %>
   </div>
 
+
   <hr class="border-gray-200">
 
   <!-- Notizen -->
   <div>
     <%= form.label :notes, "Zusätzliche Notizen / Details", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
-    <%= form.text_area :notes, rows: 3, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
+    <%= form.text_area :notes, rows: 3, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50 focus:border-blue-500 focus:ring-blue-500" %>
   </div>
 
   <hr class="border-gray-200">
@@ -131,7 +174,7 @@
   <!-- Buttons -->
   <div class="flex justify-end gap-x-3">
     <%= link_to "Abbrechen", items_path, class: "py-2.5 px-4 inline-flex items-center text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition shadow-sm" %>
-    <%= form.submit "Artikel speichern", class: "py-2.5 px-4 inline-flex items-center text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm transition cursor-pointer" %>
+    <%= form.submit item.new_record? ? "Artikel registrieren" : "Änderungen speichern", class: "py-2.5 px-4 inline-flex items-center text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm transition cursor-pointer" %>
   </div>
 
 <% end %>