104 lines
5.6 KiB
PHP
104 lines
5.6 KiB
PHP
<x-filament-panels::page>
|
|
<!-- Zentraler Alpine-Zustand für das Modal-Handling -->
|
|
<div x-data="{ isOpen: false }" @open-kanban-modal.window="isOpen = true" class="space-y-6">
|
|
|
|
<!-- Steuerungsbar -->
|
|
<div
|
|
class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white dark:bg-gray-900 p-5 rounded-xl border border-gray-200 dark:border-gray-800 shadow-xs">
|
|
<div>
|
|
<h2 class="text-base font-bold text-gray-900 dark:text-white">Elemente-Kopierer (v5)</h2>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Ziehe einen Eintrag aus der Tabelle. Das Ziel-Modal
|
|
öffnet sich synchron beim Ziehen.</p>
|
|
</div>
|
|
|
|
<x-filament::button type="button" icon="heroicon-o-squares-2x2" @click="isOpen = true">
|
|
Slots manuell öffnen (21 Boxen)
|
|
</x-filament::button>
|
|
</div>
|
|
|
|
<!-- Filament v5 Datenquelle -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-xs border border-gray-200 dark:border-gray-800 p-4">
|
|
{{ $this->table }}
|
|
</div>
|
|
|
|
<!-- Filament v5 Modal-Komponente -->
|
|
<x-filament::modal id="kanban-boxes-modal" x-model="isOpen" width="7xl">
|
|
<x-slot name="heading">
|
|
<div class="flex items-center gap-2 text-gray-900 dark:text-white">
|
|
<x-heroicon-o-tray class="h-5 w-5 text-gray-400" />
|
|
<span>Ziel-Matrix (21 Slots)</span>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<x-slot name="description">
|
|
Lass das gezogene Element über der gewünschten Box los, um eine Kopie zuzuweisen.
|
|
</x-slot>
|
|
|
|
<!-- 21 Boxen Grid (Verwendet optimierte Responsive-Spalten) -->
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-3 my-4 max-h-[65vh] overflow-y-auto p-1">
|
|
@foreach ($boxes as $boxNumber => $items)
|
|
<div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
|
|
@dragleave.prevent="isOver = false"
|
|
@drop.prevent="
|
|
isOver = false;
|
|
const rawData = $event.dataTransfer.getData('text/plain');
|
|
if (rawData) {
|
|
const elementData = JSON.parse(rawData);
|
|
// Nutzt die direkte Livewire v4 Brücke über das Proxy-Objekt ($wire)
|
|
$wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
|
|
}
|
|
"
|
|
:class="isOver ? 'border-primary-500 bg-primary-500/10 ring-2 ring-primary-500/50 scale-[1.03]' :
|
|
'border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-950/50'"
|
|
class="border rounded-xl p-3 min-h-[110px] transition-all flex flex-col justify-between shadow-2xs transform">
|
|
<!-- Box Kopfzeile -->
|
|
<div
|
|
class="flex justify-between items-center border-b border-gray-200/50 dark:border-gray-800 pb-1 mb-2">
|
|
<span
|
|
class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 text-gray-500 dark:text-gray-400">
|
|
Box {{ $boxNumber }}
|
|
</span>
|
|
|
|
@if (count($items) > 0)
|
|
<button type="button" wire:click="clearBox({{ $boxNumber }})"
|
|
class="text-[10px] text-danger-600 hover:text-danger-500 font-semibold transition-colors">
|
|
Leeren
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Listen-Inhalt der Box -->
|
|
<div class="space-y-1 flex-grow overflow-y-auto max-h-[80px]">
|
|
@forelse($items as $item)
|
|
<div
|
|
class="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800/80 rounded shadow-3xs text-[10px] flex flex-col">
|
|
<span class="font-medium text-gray-800 dark:text-gray-200 truncate">
|
|
{{ $item['title'] }}
|
|
</span>
|
|
<span class="text-[9px] text-gray-400 dark:text-gray-500">ID:
|
|
{{ $item['id'] }}</span>
|
|
</div>
|
|
@empty
|
|
<div
|
|
class="h-full flex items-center justify-center py-4 text-center text-gray-400 dark:text-gray-600 text-[10px] italic">
|
|
Bereit
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<x-slot name="footer">
|
|
<div class="flex justify-end">
|
|
<x-filament::button color="gray" @click="isOpen = false">
|
|
Schließen
|
|
</x-filament::button>
|
|
</div>
|
|
</x-slot>
|
|
</x-filament::modal>
|
|
|
|
</div>
|
|
</x-filament-panels::page>
|