214 lines
16 KiB
Plaintext
214 lines
16 KiB
Plaintext
<%= form_with(model: item, class: "space-y-6 max-w-4xl mx-auto bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8") do |form| %>
|
|
|
|
<%= render "layouts/form_header",
|
|
model: @item,
|
|
new_title: "Artikel anlegen",
|
|
new_description: "Erfasse ein neues Gerät mitsamt SKU, Seriennummer und Sticker-ID.",
|
|
edit_title: "Artikel bearbeiten",
|
|
edit_description: "Aktualisiere die Gerätedaten, den Anschaffungspreis oder den Zustand." %>
|
|
|
|
<hr class="border-gray-200">
|
|
|
|
<%= render "layouts/form_errors", model: item %>
|
|
|
|
<!-- Stammdaten (Name und SKU) -->
|
|
<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 focus:border-blue-500 focus:ring-blue-500" %>
|
|
</div>
|
|
|
|
<div data-controller="scanner" >
|
|
<%= form.label :sku, "SKU (Artikelnummer)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
|
|
<div class="relative flex rounded-lg shadow-sm">
|
|
<%= form.text_field :sku, 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">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0 1 3.75 7.125v-2.25ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125v-2.25ZM14.625 4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25c-.621 0-1.125-.504-1.125-1.125v-2.25ZM11.25 3.75a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V4.5a.75.75 0 0 1 .75-.75ZM4.5 11.25a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5H5.25a.75.75 0 0 1-.75-.75ZM11.25 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM10.5 18.75a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5h-2.25a.75.75 0 0 1-.75-.75ZM18.75 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM14.625 14.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125v-2.25ZM18.75 4.5a.75.75 0 0 1 .75-.75h.75c.621 0 1.125.504 1.125 1.125V5.25a.75.75 0 0 1-1.5 0V4.5h-.375a.75.75 0 0 1-.75-.75ZM19.5 18.75a.75.75 0 0 1 .75-.75h.375V17.25a.75.75 0 0 1 1.5 0v1.5c0 .621-.504 1.125-1.125 1.125h-1.5a.75.75 0 0 1-.75-.75ZM4.5 19.5v-.375a.75.75 0 0 1 1.5 0v.375h.375a.75.75 0 0 1 0 1.5h-1.5A1.125 1.125 0 0 1 3.75 19.5Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<%= render "layouts/scanner" %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Herstelldaten & Preise -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div class="sm:col-span-2">
|
|
|
|
<div data-controller="scanner" >
|
|
<%= form.label :serial_number, "Seriennummer (Hersteller)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
|
|
<div class="relative flex rounded-lg shadow-sm">
|
|
<%= form.text_field :serial_number, data: { scanner_target: "input" }, class: "py-2 px-3 blck 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">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0 1 3.75 7.125v-2.25ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125v-2.25ZM14.625 4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25c-.621 0-1.125-.504-1.125-1.125v-2.25ZM11.25 3.75a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V4.5a.75.75 0 0 1 .75-.75ZM4.5 11.25a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5H5.25a.75.75 0 0 1-.75-.75ZM11.25 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM10.5 18.75a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5h-2.25a.75.75 0 0 1-.75-.75ZM18.75 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM14.625 14.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125v-2.25ZM18.75 4.5a.75.75 0 0 1 .75-.75h.75c.621 0 1.125.504 1.125 1.125V5.25a.75.75 0 0 1-1.5 0V4.5h-.375a.75.75 0 0 1-.75-.75ZM19.5 18.75a.75.75 0 0 1 .75-.75h.375V17.25a.75.75 0 0 1 1.5 0v1.5c0 .621-.504 1.125-1.125 1.125h-1.5a.75.75 0 0 1-.75-.75ZM4.5 19.5v-.375a.75.75 0 0 1 1.5 0v.375h.375a.75.75 0 0 1 0 1.5h-1.5A1.125 1.125 0 0 1 3.75 19.5Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<%= render "layouts/scanner" %>
|
|
</div>
|
|
</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 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 focus:border-blue-500 focus:ring-blue-500" } %>
|
|
</div>
|
|
|
|
<!-- 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 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">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0 1 3.75 7.125v-2.25ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125v-2.25ZM14.625 4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25c-.621 0-1.125-.504-1.125-1.125v-2.25ZM11.25 3.75a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V4.5a.75.75 0 0 1 .75-.75ZM4.5 11.25a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5H5.25a.75.75 0 0 1-.75-.75ZM11.25 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM10.5 18.75a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5h-2.25a.75.75 0 0 1-.75-.75ZM18.75 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM14.625 14.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125v-2.25ZM18.75 4.5a.75.75 0 0 1 .75-.75h.75c.621 0 1.125.504 1.125 1.125V5.25a.75.75 0 0 1-1.5 0V4.5h-.375a.75.75 0 0 1-.75-.75ZM19.5 18.75a.75.75 0 0 1 .75-.75h.375V17.25a.75.75 0 0 1 1.5 0v1.5c0 .621-.504 1.125-1.125 1.125h-1.5a.75.75 0 0 1-.75-.75ZM4.5 19.5v-.375a.75.75 0 0 1 1.5 0v.375h.375a.75.75 0 0 1 0 1.5h-1.5A1.125 1.125 0 0 1 3.75 19.5Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<%= render "layouts/scanner" %>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<!-- Rails schreibt das Label automatisch über die de.yml -->
|
|
<%= form.label :condition, Item.human_attribute_name(:condition), class: "block text-sm font-semibold text-gray-700" %>
|
|
<div class="relative">
|
|
<!-- PURE RAILS KONVENTION: Sicher, verständlich und stabil -->
|
|
<%= form.select :condition,
|
|
Item.conditions.keys.map { |cond| [Item.human_attribute_name("conditions.#{cond}"), cond] },
|
|
{},
|
|
class: "py-2.5 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 appearance-none pr-10" %>
|
|
|
|
<!-- Kleiner Custom-Pfeil rechts -->
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-gray-200">
|
|
|
|
<!-- ========================================================================= -->
|
|
<!-- 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>
|
|
|
|
<%= 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
|
|
%>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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.order(:first_name, :last_name).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.order(:name).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 focus:border-blue-500 focus:ring-blue-500" %>
|
|
</div>
|
|
|
|
<hr class="border-gray-200">
|
|
|
|
<!-- 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 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 %>
|