141 lines
10 KiB
Plaintext
141 lines
10 KiB
Plaintext
<div class="w-full space-y-4">
|
|
|
|
<% content_for :title, "Räume" %>
|
|
|
|
<% content_for :top_bar_actions do %>
|
|
<%= link_to new_room_path, data: { turbo_frame: "_top" }, class: "py-2 px-4 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-1.5 shadow-sm transition" do %>
|
|
<!-- Heroicon: plus -->
|
|
<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="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
<div class="hidden md:inline">
|
|
Raum anlegen
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<!-- 1. Suchleiste steht außerhalb des Frames (CSV-Export bleibt hier aus) -->
|
|
<%= render "items/search_bar", show_csv: false %>
|
|
|
|
<!-- 2. NUR DIE TABELLE WIRD IN DEN TURBO-FRAME GEPAKT -->
|
|
<%= turbo_frame_tag "items_list_frame" do %>
|
|
<% if @rooms.any? %>
|
|
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
|
|
|
|
<!-- ========================================================================= -->
|
|
<!-- 1. HANDY-ANSICHT: KOMPAKTE CARDS MIT KLEINEN BUTTONS (Bis md:) -->
|
|
<!-- ========================================================================= -->
|
|
<div class="block md:hidden divide-y divide-gray-200 bg-white">
|
|
<% @rooms.each do |room| %>
|
|
<div class="p-3 hover:bg-gray-50/50 transition space-y-2">
|
|
|
|
<!-- OBERE ZEILE: Icon + Name & Geräte-Badge -->
|
|
<div class="flex items-start justify-between gap-3 w-full">
|
|
<div class="flex items-start gap-2 text-gray-500 min-w-0 flex-1">
|
|
<svg class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
|
|
</svg>
|
|
<div class="min-w-0">
|
|
<h4 class="font-black text-gray-900 text-base leading-tight truncate"><%= room.name %></h4>
|
|
<div class="flex items-center gap-1.5 text-xs font-semibold text-gray-400 font-sans mt-0.5">
|
|
<span><%= room.building %></span>
|
|
<span class="text-gray-300">•</span>
|
|
<span>Etage <%= room.floor %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shrink-0">
|
|
<span class="inline-flex items-center py-0.5 px-2 rounded-full text-xs font-bold <%= room.items.count > 0 ? 'bg-blue-50 text-blue-800 border border-blue-200' : 'bg-gray-100 text-gray-500 border border-gray-200' %>">
|
|
<%= room.items.count %> <%= room.items.count == 1 ? "Gerät" : "Geräte" %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UNTERE ZEILE: RECHTSBÜNDIGE, QUADRATISCHE BUTTONS (WICHTIG: 'w-auto' erzwingt Kompaktheit) -->
|
|
<div class="flex items-center justify-end gap-1.5 w-full">
|
|
|
|
<!-- DETAILS BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
|
|
<%= link_to room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Inventar anzeigen" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
|
|
<% end %>
|
|
|
|
<!-- BEARBEITEN BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
|
|
<%= link_to edit_room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Bearbeiten" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- ========================================================================= -->
|
|
<!-- 2. DESKTOP-ANSICHT: STICKY-RÄUME-TABELLE -->
|
|
<!-- ========================================================================= -->
|
|
<div class="hidden md:block overflow-x-auto max-h-[calc(100vh-12rem)]">
|
|
<table class="min-w-full divide-y divide-gray-200 text-sm">
|
|
<thead class="bg-gray-50 sticky top-0 z-20 shadow-[0_1px_0_0_rgba(229,231,235,1)]">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Raum</th>
|
|
<th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Gebäudeteil</th>
|
|
<th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Etage</th>
|
|
<th scope="col" class="px-6 py-3 text-center font-semibold text-gray-500 uppercase tracking-wider">Aktiver Bestand</th>
|
|
<th scope="col" class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<% @rooms.each do |room| %>
|
|
<tr class="hover:bg-gray-50/50 transition">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center gap-3 text-gray-400">
|
|
<svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
|
|
</svg>
|
|
<div class="font-semibold text-gray-900"><%= room.name %></div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-gray-700 font-medium"><%= room.building %></td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-gray-500 font-mono text-xs"><%= room.floor %></td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center">
|
|
<span class="inline-flex items-center py-0.5 px-2.5 rounded-full text-xs font-semibold <%= room.items.count > 0 ? 'bg-blue-50 text-blue-800 border border-blue-200' : 'bg-gray-100 text-gray-500 border border-gray-200' %>">
|
|
<%= room.items.count %> <%= room.items.count == 1 ? "Gerät" : "Geräte" %>
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-end font-medium text-xs">
|
|
<!-- KORREKTUR FÜR DIE RÄUME-ÜBERSICHT (Mobil-Bereich) -->
|
|
<div class="flex items-center justify-end gap-2 shrink-0">
|
|
<!-- DETAILS BUTTON im edlen weißen Design -->
|
|
<%= link_to room_path(room), data: { turbo_frame: "_top" },
|
|
class: "p-2.5 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center",
|
|
title: "Inventar öffnen" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
|
|
<% end %>
|
|
|
|
<!-- BEARBEITEN BUTTON im edlen weißen Design -->
|
|
<%= link_to edit_room_path(room), data: { turbo_frame: "_top" },
|
|
class: "p-2.5 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center",
|
|
title: "Bearbeiten" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
<% else %>
|
|
<div class="text-center py-16 text-gray-400 bg-white border border-gray-200 rounded-xl shadow-sm">
|
|
<p class="text-sm font-medium">Keine passenden Gebäude oder Büros gefunden.</p>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
</div>
|