wip
This commit is contained in:
salam committed
1 parent
9f1650572c
commit
3d3748c353
7 files changed
+104
-266
No files matched your search
@@ -1,21 +1,17 @@
|
||||
<div class="space-y-6 max-h-[75vh] overflow-y-auto p-1"
|
||||
x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }"
|
||||
id="dispatcher-board-root">
|
||||
|
||||
<div class="space-y-6 max-h-[75vh] overflow-y-auto p-1" x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }" id="dispatcher-board-root">
|
||||
|
||||
<!-- 🌟 SPLIT HEADER -->
|
||||
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 mb-4">
|
||||
<div class="flex-1 overflow-x-auto min-w-0">
|
||||
<x-filament::tabs class="border-none p-0 m-0 flex items-center space-x-1">
|
||||
@foreach($lists as $listId => $items)
|
||||
@if(str_starts_with($listId, 'source-'))
|
||||
<x-filament::tabs.item
|
||||
:alpine-active="'activeTab === \'' . $listId . '\''"
|
||||
x-on:click="activeTab = '{{ $listId }}'"
|
||||
wire:key="tab-button-{{ $listId }}"
|
||||
class="cursor-pointer !px-2 !py-1 !min-h-0 text-[11px] font-medium tracking-tight rounded-md">
|
||||
@foreach ($lists as $listId => $items)
|
||||
@if (str_starts_with($listId, 'source-'))
|
||||
<x-filament::tabs.item :alpine-active="'activeTab === \'' . $listId . '\''" x-on:click="activeTab = '{{ $listId }}'"
|
||||
wire:key="tab-button-{{ $listId }}" class="cursor-pointer">
|
||||
<div class="flex items-center space-x-1.5 leading-none">
|
||||
<span class="uppercase">{{ str_replace('source-', 'S', $listId) }}</span>
|
||||
<span class="inline-flex items-center justify-center px-1 py-0.5 text-[10px] font-mono font-bold bg-primary-500/10 text-primary-600 dark:text-primary-400 rounded-md">
|
||||
<span
|
||||
class="inline-flex items-center justify-center px-1 py-0.5 text-[10px] font-mono font-bold bg-primary-500/10 text-primary-600 dark:text-primary-400 rounded-md">
|
||||
{{ count($items) }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -26,13 +22,9 @@
|
||||
</div>
|
||||
<!-- RECHTE SEITE DES HEADERS: AKTIONEN -->
|
||||
<div class="flex items-center space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
|
||||
|
||||
|
||||
<!-- Reset-Button -->
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-arrow-path"
|
||||
color="warning"
|
||||
size="md"
|
||||
label="Reset"
|
||||
<x-filament::icon-button icon="heroicon-m-arrow-path" color="warning" size="md" label="Reset"
|
||||
tooltip="Alle Elemente zurücksetzen"
|
||||
@click.stop="
|
||||
if (confirm('Möchten Sie wirklich alle Elemente in ihre Quell-Tabs zurücksetzen?')) {
|
||||
@@ -52,39 +44,36 @@
|
||||
$wire.resetBoard();
|
||||
}
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
class="cursor-pointer" />
|
||||
|
||||
<!-- Schließen-Button -->
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-x-mark"
|
||||
color="gray"
|
||||
size="md"
|
||||
label="Schließen"
|
||||
x-on:click="close()"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<x-filament::icon-button icon="heroicon-m-x-mark" color="gray" size="md" label="Schließen"
|
||||
x-on:click="close()" class="cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🌟 SEKTION 1: SOURCES -->
|
||||
<div>
|
||||
<div class="text-xs font-bold uppercase tracking-wider text-primary-500 mb-3">Available Sources</div>
|
||||
@foreach($lists as $listId => $items)
|
||||
@if(str_starts_with($listId, 'source-'))
|
||||
<div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}">
|
||||
@foreach ($lists as $listId => $items)
|
||||
@if (str_starts_with($listId, 'source-'))
|
||||
<div x-show="activeTab === '{{ $listId }}'" class="transition-all"
|
||||
wire:key="tab-panel-{{ $listId }}">
|
||||
<x-filament::section compact>
|
||||
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
||||
<div id="{{ $listId }}"
|
||||
class="sortable-zone space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-[120px]">
|
||||
|
||||
@foreach($items as $item)
|
||||
<div data-id="{{ $item['id'] }}"
|
||||
wire:key="item-src-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 flex items-center justify-between shadow-sm cursor-grab active:cursor-grabbing">
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
|
||||
<svg class="h-4 w-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
||||
class="sortable-zone space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-[120px]">
|
||||
|
||||
@foreach ($items as $item)
|
||||
<div data-id="{{ $item['id'] }}"
|
||||
wire:key="item-src-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 flex items-center justify-between shadow-sm cursor-grab active:cursor-grabbing">
|
||||
<span
|
||||
class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
|
||||
<svg class="h-4 w-4 text-gray-400 pointer-events-none" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
||||
</svg>
|
||||
</div>
|
||||
@endforeach
|
||||
@@ -97,25 +86,28 @@
|
||||
|
||||
<!-- 🌟 SEKTION 2: DESTINATIONS (21 BAYS) -->
|
||||
<div>
|
||||
<div class="text-xs font-bold uppercase tracking-wider text-success-500 mb-3">Target Destination Slots (21)</div>
|
||||
<div class="text-xs font-bold uppercase tracking-wider text-success-500 mb-3">Target Destination Slots (21)
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
|
||||
@foreach($lists as $listId => $items)
|
||||
@if(str_starts_with($listId, 'dest-'))
|
||||
<div class="bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700/50 rounded-xl p-3 flex flex-col min-h-[140px]" wire:key="box-{{ $listId }}">
|
||||
@foreach ($lists as $listId => $items)
|
||||
@if (str_starts_with($listId, 'dest-'))
|
||||
<div class="bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700/50 rounded-xl p-3 flex flex-col min-h-[140px]"
|
||||
wire:key="box-{{ $listId }}">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-[11px] font-bold uppercase text-gray-500 dark:text-gray-400">Bay {{ str_replace('dest-', '', $listId) }}</span>
|
||||
<span class="text-[11px] font-bold uppercase text-gray-500 dark:text-gray-400">Bay
|
||||
{{ str_replace('dest-', '', $listId) }}</span>
|
||||
<x-filament::badge color="success" size="xs">{{ count($items) }}</x-filament::badge>
|
||||
</div>
|
||||
|
||||
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
||||
<div id="{{ $listId }}"
|
||||
class="sortable-zone flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px]">
|
||||
|
||||
@foreach($items as $item)
|
||||
<div data-id="{{ $item['id'] }}"
|
||||
wire:key="item-dst-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-xs rounded-md p-2 flex items-center justify-between gap-2 cursor-grab active:cursor-grabbing hover:border-danger-500 transition-all">
|
||||
|
||||
class="sortable-zone flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px]">
|
||||
|
||||
@foreach ($items as $item)
|
||||
<div data-id="{{ $item['id'] }}"
|
||||
wire:key="item-dst-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
||||
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-xs rounded-md p-2 flex items-center justify-between gap-2 cursor-grab active:cursor-grabbing hover:border-danger-500 transition-all">
|
||||
|
||||
<span class="truncate font-medium text-gray-900 dark:text-gray-100 flex-1">
|
||||
{{ $item['name'] }}
|
||||
</span>
|
||||
@@ -123,15 +115,19 @@
|
||||
<div class="flex items-center space-x-1 shrink-0">
|
||||
<!-- Zuverlässiger, direkter Livewire-Löschcall -->
|
||||
<button type="button"
|
||||
title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
|
||||
wire:click="returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')"
|
||||
class="p-1 rounded text-gray-400 hover:text-danger-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
|
||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
|
||||
wire:click="returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')"
|
||||
class="p-1 rounded text-gray-400 hover:text-danger-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
|
||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="2.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<svg class="h-3.5 w-3.5 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
||||
<svg class="h-3.5 w-3.5 text-gray-400 pointer-events-none" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,43 +142,44 @@
|
||||
|
||||
<!-- 🌟 ZENTRALE AUTOMATISCHE INITIALISIERUNG NACH JEDEM RENDERING -->
|
||||
@script
|
||||
<script>
|
||||
function setupSortableZones() {
|
||||
document.querySelectorAll('.sortable-zone').forEach(el => {
|
||||
// Falls für dieses Element bereits eine Instanz existiert, zerstören wir sie sauber vor dem Neuaufbau
|
||||
if (el._sortableInstance) {
|
||||
el._sortableInstance.destroy();
|
||||
}
|
||||
|
||||
el._sortableInstance = new Sortable(el, {
|
||||
group: {
|
||||
name: 'master-board',
|
||||
// Striktes Limit: Maximal 1 Kind-Element pro Box zulassen
|
||||
put: function(to, from) {
|
||||
if (from.el !== to.el) {
|
||||
return to.el.children.length < 1;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
animation: 150,
|
||||
onEnd: function(evt) {
|
||||
if (evt.from.id !== evt.to.id) {
|
||||
// Triggert den Server-Call absolut fehlerfrei
|
||||
$wire.call('moveItem', evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
|
||||
}
|
||||
<script>
|
||||
function setupSortableZones() {
|
||||
document.querySelectorAll('.sortable-zone').forEach(el => {
|
||||
// Falls für dieses Element bereits eine Instanz existiert, zerstören wir sie sauber vor dem Neuaufbau
|
||||
if (el._sortableInstance) {
|
||||
el._sortableInstance.destroy();
|
||||
}
|
||||
|
||||
el._sortableInstance = new Sortable(el, {
|
||||
group: {
|
||||
name: 'master-board',
|
||||
// Striktes Limit: Maximal 1 Kind-Element pro Box zulassen
|
||||
put: function(to, from) {
|
||||
if (from.el !== to.el) {
|
||||
return to.el.children.length < 1;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
animation: 150,
|
||||
onEnd: function(evt) {
|
||||
if (evt.from.id !== evt.to.id) {
|
||||
// Triggert den Server-Call absolut fehlerfrei
|
||||
$wire.call('moveItem', evt.item.getAttribute('data-id'), evt.from.id, evt.to
|
||||
.id, evt.newIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialer Aufruf beim Laden
|
||||
setupSortableZones();
|
||||
|
||||
// 💡 DER ENTSCHEIDENDE FIX: Jedes Mal, wenn Livewire das DOM nach einer Array-Änderung (Löschen/Verschieben) aktualisiert,
|
||||
// binden wir SortableJS sofort wieder frisch an alle 25 Container an!
|
||||
Livewire.hook('morph.updated', () => {
|
||||
// Initialer Aufruf beim Laden
|
||||
setupSortableZones();
|
||||
});
|
||||
</script>
|
||||
|
||||
// 💡 DER ENTSCHEIDENDE FIX: Jedes Mal, wenn Livewire das DOM nach einer Array-Änderung (Löschen/Verschieben) aktualisiert,
|
||||
// binden wir SortableJS sofort wieder frisch an alle 25 Container an!
|
||||
Livewire.hook('morph.updated', () => {
|
||||
setupSortableZones();
|
||||
});
|
||||
</script>
|
||||
@endscript
|
||||
Reference in new issue
Block a user