salam/nuhodds_fi4
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
salam committed 2026-09-05 08:19:49 +02:00
1 parent c2e0e0b89b
commit 9f1650572c
2 files changed
+205 -106
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/Livewire/BoardDispatcher.php
+74 -24
View File
@@ -8,21 +8,25 @@ class BoardDispatcher extends Component
{ {
public array $lists = []; public array $lists = [];
public string $boardVersion = '';
public function mount() public function mount()
{ {
$this->lists['source-attack'] = [ $this->boardVersion = uniqid();
['id' => '1', 'name' => 'Source Item A', 'origin' => 'source-attack'],
['id' => '2', 'name' => 'Source Item B', 'origin' => 'source-attack'], $this->lists['source-1'] = [
['id' => '1', 'name' => 'Source Item A', 'origin' => 'source-1'],
['id' => '2', 'name' => 'Source Item B', 'origin' => 'source-1'],
]; ];
$this->lists['source-midfield'] = [ $this->lists['source-2'] = [
['id' => '3', 'name' => 'Source Item C', 'origin' => 'source-midfield'], ['id' => '3', 'name' => 'Source Item C', 'origin' => 'source-2'],
]; ];
$this->lists['source-defence'] = [ $this->lists['source-3'] = [
['id' => '4', 'name' => 'Source Item D', 'origin' => 'source-defence'], ['id' => '4', 'name' => 'Source Item D', 'origin' => 'source-3'],
['id' => '5', 'name' => 'Source Item E', 'origin' => 'source-defence'], ['id' => '5', 'name' => 'Source Item E', 'origin' => 'source-3'],
]; ];
$this->lists['source-goalkeeper'] = [ $this->lists['source-4'] = [
['id' => '6', 'name' => 'Source Item F', 'origin' => 'source-goalkeeper'], ['id' => '6', 'name' => 'Source Item F', 'origin' => 'source-4'],
]; ];
for ($i = 1; $i <= 21; $i++) { for ($i = 1; $i <= 21; $i++) {
@@ -35,29 +39,35 @@ class BoardDispatcher extends Component
$itemId = (string) $itemId; $itemId = (string) $itemId;
$newIndex = (int) $newIndex; $newIndex = (int) $newIndex;
// Abbrechen falls kein Ziel vorhanden ist oder die Position unverändert blieb if (! $toList || $fromList === $toList || ! isset($this->lists[$fromList]) || ! isset($this->lists[$toList])) {
if (! $toList || $fromList === $toList) { $this->boardVersion = uniqid();
return;
}
// Limit-Guard: Wenn das Ziel bereits ein Element enthält, abbrechen
if (count($this->lists[$toList]) >= 1) {
$this->boardVersion = uniqid();
return; return;
} }
$foundItem = null; $foundItem = null;
// 1. Element aus der alten Liste entfernen foreach ($this->lists[$fromList] as $key => $item) {
if (isset($this->lists[$fromList])) { if ((string) $item['id'] === $itemId) {
foreach ($this->lists[$fromList] as $key => $item) { $foundItem = $item;
if ((string) $item['id'] === $itemId) { unset($this->lists[$fromList][$key]);
$foundItem = $item; $this->lists[$fromList] = array_values($this->lists[$fromList]);
unset($this->lists[$fromList][$key]); break;
$this->lists[$fromList] = array_values($this->lists[$fromList]); // Array-Keys korrigieren
break;
}
} }
} }
// 2. Element in die neue Zielliste am exakten Index einfügen if ($foundItem) {
if ($foundItem && isset($this->lists[$toList])) {
array_splice($this->lists[$toList], $newIndex, 0, [$foundItem]); array_splice($this->lists[$toList], $newIndex, 0, [$foundItem]);
} }
$this->boardVersion = uniqid();
} }
public function returnToOrigin($itemId, $currentListId) public function returnToOrigin($itemId, $currentListId)
@@ -65,6 +75,8 @@ class BoardDispatcher extends Component
$itemId = (string) $itemId; $itemId = (string) $itemId;
if (! isset($this->lists[$currentListId])) { if (! isset($this->lists[$currentListId])) {
$this->boardVersion = uniqid();
return; return;
} }
@@ -80,8 +92,46 @@ class BoardDispatcher extends Component
} }
if ($foundItem && isset($this->lists[$foundItem['origin']])) { if ($foundItem && isset($this->lists[$foundItem['origin']])) {
array_unshift($this->lists[$foundItem['origin']], $foundItem); // Nur zurücklegen, wenn die Quelle wirklich frei ist
if (count($this->lists[$foundItem['origin']]) < 1) {
array_unshift($this->lists[$foundItem['origin']], $foundItem);
} else {
// Ausfallsicherheit gegen Datenverlust: Zurück in die Bucht schieben
array_unshift($this->lists[$currentListId], $foundItem);
}
} }
$this->boardVersion = uniqid();
}
public function resetBoard()
{
// Alle 21 Zielbays durchlaufen
for ($i = 1; $i <= 21; $i++) {
$bayKey = "dest-{$i}";
if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
foreach ($this->lists[$bayKey] as $item) {
$targetOrigin = $item['origin'];
// Element zurück in sein Original-Quell-Tab schieben
if (isset($this->lists[$targetOrigin])) {
array_unshift($this->lists[$targetOrigin], $item);
}
}
// Die Zielbucht komplett leeren
$this->lists[$bayKey] = [];
}
}
// Falls Sie die boardVersion-Logik nutzen, erneuern wir sie hier für den DOM-Refresh:
if (property_exists($this, 'boardVersion')) {
$this->boardVersion = uniqid();
}
// Falls Sie die Javascript-Event/ignore-Logik nutzen, feuern wir das Refresh-Event:
$this->dispatch('refreshBoard', lists: $this->lists);
} }
public function render() public function render()
resources/views/livewire/board-dispatcher.blade.php
+131 -82
View File
@@ -1,112 +1,119 @@
<!-- Ermittelt dynamisch die erste verfügbare Quelle als Start-Tab -->
<div class="space-y-6 max-h-[75vh] overflow-y-auto p-1" <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-')) }}' }"> x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }"
id="dispatcher-board-root">
<!-- 🌟 SEKTION 1: DIE 4 SOURCE-CONTAINER IN NATIVEN FILAMENT TABS --> <!-- 🌟 SPLIT HEADER -->
<div wire:key="sources-tab-container"> <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">
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 mb-4" wire:key="header-split-zone"> <x-filament::tabs class="border-none p-0 m-0 flex items-center space-x-1">
<!-- Native Filament Tabs-Leiste -->
<x-filament::tabs wire:key="filament-tabs-bar">
@foreach($lists as $listId => $items) @foreach($lists as $listId => $items)
@if(str_starts_with($listId, 'source-')) @if(str_starts_with($listId, 'source-'))
<x-filament::tabs.item icon="heroicon-m-bell" <x-filament::tabs.item
:alpine-active="'activeTab === \'' . $listId . '\''" :alpine-active="'activeTab === \'' . $listId . '\''"
x-on:click="activeTab = '{{ $listId }}'" x-on:click="activeTab = '{{ $listId }}'"
wire:key="tab-button-{{ $listId }}" wire:key="tab-button-{{ $listId }}"
class="cursor-pointer"> class="cursor-pointer !px-2 !py-1 !min-h-0 text-[11px] font-medium tracking-tight rounded-md">
<div class="flex items-center space-x-1.5 leading-none">
<div class="flex items-center space-x-2"> <span class="uppercase">{{ str_replace('source-', 'S', $listId) }}</span>
<span>{{ ucwords(str_replace('source-', '', $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">
<!-- Kleiner Zähler direkt im Tab-Titel -->
<x-filament::badge size="xs" color="gray">
{{ count($items) }} {{ count($items) }}
</x-filament::badge> </span>
</div> </div>
</x-filament::tabs.item> </x-filament::tabs.item>
@endif @endif
@endforeach @endforeach
</x-filament::tabs> </x-filament::tabs>
<div class="flex items-center pl-4 shrink-0" wire:key="modal-close-right-side">
<x-filament::icon-button
icon="heroicon-m-x-mark"
color="gray"
size="md"
label="Schließen"
tooltip="Modal schließen"
x-on:click="close()"
class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
/>
</div>
</div> </div>
<!-- RECHTE SEITE DES HEADERS: AKTIONEN -->
<div class="flex items-center space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
<!-- Tab-Inhalte (Die Listen selbst) --> <!-- Reset-Button -->
<div class="mt-4" wire:key="sources-lists-loop"> <x-filament::icon-button
@foreach($lists as $listId => $items) icon="heroicon-m-arrow-path"
@if(str_starts_with($listId, 'source-')) color="warning"
<div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}"> size="md"
<x-filament::section compact> label="Reset"
<!-- SortableJS Container für die aktive Quelle --> tooltip="Alle Elemente zurücksetzen"
<div x-init="new Sortable($el, { @click.stop="
group: 'master-board', if (confirm('Möchten Sie wirklich alle Elemente in ihre Quell-Tabs zurücksetzen?')) {
animation: 150, // 💡 ALLE AKTIVEN SORTABLE-INSTANZEN IM BROWSER ZERSTÖREN, UM DEN CODELOCK ZU LÖSCHEN
onEnd: function(evt) { document.querySelectorAll('.sortable-zone').forEach(el => {
$wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex); if (el._sortableInstance) {
} try {
})" el._sortableInstance.destroy();
id="{{ $listId }}" el._sortableInstance = null;
class="space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-30 transition duration-200 hover:border-primary-500"> } catch(err) {
// Ignoriert verwaiste Instanzen geräuschlos
}
}
});
@foreach($items as $item) // 💡 ERST JETZT DEN SERVER-RESET AUSFÜHREN
<div data-id="{{ $item['id'] }}" $wire.resetBoard();
wire:key="item-source-{{ $item['id'] }}" }
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 hover:border-primary-500 dark:hover:border-primary-500 transition-all"> "
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span> class="cursor-pointer"
<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> <!-- Schließen-Button -->
</div> <x-filament::icon-button
@endforeach icon="heroicon-m-x-mark"
</div> color="gray"
</x-filament::section> size="md"
</div> label="Schließen"
@endif x-on:click="close()"
@endforeach class="cursor-pointer"
/>
</div> </div>
</div> </div>
<!-- 🌟 SEKTION 2: DIE 21 DESTINATION BAYS --> <!-- 🌟 SEKTION 1: SOURCES -->
<div wire:key="destinations-main-container"> <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-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 }}">
<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]">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3" wire:key="destations-grid-loop"> @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
</div>
</x-filament::section>
</div>
@endif
@endforeach
</div>
<!-- 🌟 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="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
@foreach($lists as $listId => $items) @foreach($lists as $listId => $items)
@if(str_starts_with($listId, 'dest-')) @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="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"> <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"> <x-filament::badge color="success" size="xs">{{ count($items) }}</x-filament::badge>
{{ count($items) }}
</x-filament::badge>
</div> </div>
<!-- SortableJS Container für das Zielgebiet --> <!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
<div x-init="new Sortable($el, { <div id="{{ $listId }}"
group: 'master-board', 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]">
animation: 150,
onEnd: function(evt) {
$wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
}
})"
id="{{ $listId }}"
class="flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px] transition-colors duration-200 hover:border-success-500">
@foreach($items as $item) @foreach($items as $item)
<div data-id="{{ $item['id'] }}" <div data-id="{{ $item['id'] }}"
wire:key="item-dest-{{ $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="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"> <span class="truncate font-medium text-gray-900 dark:text-gray-100 flex-1">
@@ -114,16 +121,15 @@
</span> </span>
<div class="flex items-center space-x-1 shrink-0"> <div class="flex items-center space-x-1 shrink-0">
<!-- Return Button --> <!-- Zuverlässiger, direkter Livewire-Löschcall -->
<button type="button" <button type="button"
title="Return to {{ str_replace('-', ' ', $item['origin']) }}" title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
@click.stop="$wire.returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')" 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"> 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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
</svg> </svg>
@@ -137,3 +143,46 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 🌟 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);
}
}
});
});
}
// 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', () => {
setupSortableZones();
});
</script>
@endscript