Added item list with mobile view
Some checks failed
CI / scan_ruby (push) Has been cancelled
CI / scan_js (push) Has been cancelled
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
CI / system-test (push) Has been cancelled

This commit is contained in:
2026-05-22 04:35:04 +02:00
parent 44d019b4b5
commit e4bbb329b5
5 changed files with 369 additions and 179 deletions

View File

@@ -1,82 +1,35 @@
<% content_for :title, "Kategorie: #{@category.name}" %>
<div class="space-y-6">
<!-- Zurück-Link im Header -->
<% content_for :top_bar_actions do %>
<%= link_to categories_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
<!-- Heroicon: arrow-left -->
<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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
Alle Kategorien
<% end %>
<% content_for :top_bar_actions do %>
<%= link_to categories_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
<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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
Alle Kategorien
<% end %>
<% end %>
<div class="w-full space-y-6">
<!-- Beschreibungskarte -->
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<h2 class="text-sm font-bold text-gray-400 uppercase tracking-wider">Beschreibung</h2>
<p class="text-sm text-gray-600 mt-1 leading-relaxed"><%= @category.description.presence || "Keine Beschreibung hinterlegt für diese Kategorie." %></p>
<p class="text-sm text-gray-600 mt-1 leading-relaxed"><%= @category.description.presence || "Keine Beschreibung hinterlegt." %></p>
</div>
<!-- Tabelle der zugeordneten Artikel -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h3 class="font-bold text-gray-700 text-sm">Registrierte Unikate in dieser Kategorie</h3>
</div>
<div>
<!-- 1. Gleiche Suchleiste laden (CSV-Export bleibt hier deaktiviert!) -->
<%= render "items/search_bar", show_csv: false %>
<!-- 2. Artikelliste laden -->
<% if @items.any? %>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50/50">
<tr>
<th class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Artikel / Modell</th>
<th class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Seriennummer (SN)</th>
<th class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Aktueller Standort / Inhaber</th>
<th class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">QR-ID</th>
<th class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider">Wert</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<% @items.each do |item| %>
<tr class="hover:bg-gray-50/50 transition">
<td class="px-6 py-4 whitespace-nowrap">
<div class="font-semibold text-gray-900"><%= item.name %></div>
<div class="text-xs text-gray-400">SKU: <%= item.sku %></div>
</td>
<td class="px-6 py-4 whitespace-nowrap font-mono text-xs text-gray-600">
<%= item.serial_number %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-700">
<!-- Deine saubere Variante-2-Weiche für Inhaber vs. Raum -->
<% if item.user.present? %>
<span class="inline-flex items-center gap-1 text-gray-900 font-medium">
👤 <%= item.user.name %>
</span>
<% elsif item.room.present? %>
<span class="inline-flex items-center gap-1 text-gray-600">
📍 <%= item.room.name_with_building %>
</span>
<% else %>
<span class="inline-flex items-center py-0.5 px-2 rounded-full text-xs font-medium bg-amber-50 text-amber-800 border border-amber-200">
📦 Im Hauptlager
</span>
<% end %>
</td>
<td class="px-6 py-4 whitespace-nowrap font-mono text-xs font-bold text-blue-600">
#<%= item.sticker_id %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-end font-medium text-gray-900">
<%= number_to_currency(item.price, unit: "€", separator: ",", delimiter: ".", format: "%n %u") %>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
<%= render "items/list", items: @items %>
<% else %>
<!-- Empty State -->
<div class="text-center py-12 text-gray-400">
<svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /></svg>
<p class="text-sm mt-2">Bisher sind keine Artikel in dieser Kategorie registriert.</p>
<div class="text-center py-16 text-gray-400 bg-white border border-gray-200 rounded-xl shadow-sm">
<svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
</svg>
<p class="text-sm mt-3 font-medium">Bisher sind keine Inventargegenstände erfasst.</p>
<p class="text-xs text-gray-400 mt-1">Klicke oben rechts auf "Artikel hinzufügen", um das erste Gerät einzubuchen.</p>
</div>
<% end %>
</div>
</div>