wip
This commit is contained in:
salam committed
1 parent
9f1650572c
commit
3d3748c353
7 files changed
+97
-259
No files matched your search
Generated
+12
-8
@@ -4705,24 +4705,24 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "mongodb/mongodb",
|
"name": "mongodb/mongodb",
|
||||||
"version": "2.3.0",
|
"version": "2.2.0",
|
||||||
"source": {
|
"source": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/mongodb/mongo-php-library",
|
"url": "https://github.com/mongodb/mongo-php-library.git",
|
||||||
"reference": "12e56461166d915e3dd8e4969ad0940ed5207d88"
|
"reference": "bbb13f969e37e047fd822527543df55fdc1c9298"
|
||||||
},
|
},
|
||||||
"dist": {
|
"dist": {
|
||||||
"type": "zip",
|
"type": "zip",
|
||||||
"url": "https://api.github.com/repos/mongodb/mongo-php-library/zipball/12e56461166d915e3dd8e4969ad0940ed5207d88",
|
"url": "https://api.github.com/repos/mongodb/mongo-php-library/zipball/bbb13f969e37e047fd822527543df55fdc1c9298",
|
||||||
"reference": "12e56461166d915e3dd8e4969ad0940ed5207d88",
|
"reference": "bbb13f969e37e047fd822527543df55fdc1c9298",
|
||||||
"shasum": ""
|
"shasum": ""
|
||||||
},
|
},
|
||||||
"require": {
|
"require": {
|
||||||
"composer-runtime-api": "^2.0",
|
"composer-runtime-api": "^2.0",
|
||||||
"ext-mongodb": "^2.3",
|
"ext-mongodb": "^2.2",
|
||||||
"php": "^8.1",
|
"php": "^8.1",
|
||||||
"psr/log": "^1.1.4|^2|^3",
|
"psr/log": "^1.1.4|^2|^3",
|
||||||
"symfony/polyfill-php85": "^1.33"
|
"symfony/polyfill-php85": "^1.32"
|
||||||
},
|
},
|
||||||
"replace": {
|
"replace": {
|
||||||
"mongodb/builder": "*"
|
"mongodb/builder": "*"
|
||||||
@@ -4774,7 +4774,11 @@
|
|||||||
"mongodb",
|
"mongodb",
|
||||||
"persistence"
|
"persistence"
|
||||||
],
|
],
|
||||||
"time": "2026-04-28T12:50:06+00:00"
|
"support": {
|
||||||
|
"issues": "https://github.com/mongodb/mongo-php-library/issues",
|
||||||
|
"source": "https://github.com/mongodb/mongo-php-library/tree/2.2.0"
|
||||||
|
},
|
||||||
|
"time": "2026-02-11T11:39:56+00:00"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "monolog/monolog",
|
"name": "monolog/monolog",
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
(() => { function l(f) { f.directive("sort", (m, { modifiers: E, expression: I }, { Alpine: g, effect: v, evaluateLater: w }) => { let a = m.closest("[x-data]"); if (!a) return; let x = w(I), o = g.$data(a), [r] = E; v(() => { x(e => { let n = [...o[r]]; if (["asc", "desc"].includes(e)) { let c = e === "asc" ? n.sort((s, t) => s > t ? 1 : -1) : n.sort((s, t) => s < t ? 1 : -1); o[r] = c; return } let [y, ...p] = e.split("."), A = n.sort((c, s) => { let t = p.reduce((i, d) => i[d], c), u = p.reduce((i, d) => i[d], s); return y === "asc" ? t > u ? 1 : -1 : t < u ? 1 : -1 }); o[r] = A }) }) }) } document.addEventListener("alpine:init", () => window.Alpine.plugin(l)); })();
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import sort from '@alpinejs/sort';
|
|
||||||
|
|
||||||
// Intercept the global document event before Filament initializes its engine
|
|
||||||
document.addEventListener('alpine:init', () => {
|
|
||||||
window.Alpine.plugin(sort);
|
|
||||||
});
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
{{--
|
|
||||||
<div class="h-full grid grid-cols-10 gap-3" x-data="{
|
|
||||||
activeTab: 'tab1';
|
|
||||||
|
|
||||||
// Übergibt das PHP Array sicher an JavaScript
|
|
||||||
sources: [
|
|
||||||
{ id: 'source-1', name: 'Kader', items: @js($players) }
|
|
||||||
],
|
|
||||||
dropzones: Array.from({ length: 21 }, (_, i) => ({ id: i + 1 })),
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const allContainers = this.$el.querySelectorAll('.drag-container');
|
|
||||||
const drake = dragula(Array.from(allContainers), { revertOnSpill: true });
|
|
||||||
|
|
||||||
drake.on('drop', (el, target, source) => {
|
|
||||||
const playerId = el.getAttribute('data-item-id');
|
|
||||||
const targetZone = target.getAttribute('data-container-id');
|
|
||||||
console.log('Spieler ID ' + playerId + ' ist jetzt in Zone ' + targetZone);
|
|
||||||
|
|
||||||
// Optional: Sende die Daten zurück an PHP/Livewire
|
|
||||||
// $wire.updatePlayerPosition(playerId, targetZone);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}">
|
|
||||||
<div class="col-span-4 bg-gray-100 p-3 border border-gray-300">
|
|
||||||
<!-- Tab Navigation -->
|
|
||||||
<x-filament::tabs label="Content tabs">
|
|
||||||
<x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'">
|
|
||||||
ATTACK
|
|
||||||
</x-filament::tabs.item>
|
|
||||||
<x-filament::tabs.item alpine-active="activeTab === 'tab2'" x-on:click="activeTab = 'tab2'">
|
|
||||||
MIDFIELD
|
|
||||||
</x-filament::tabs.item>
|
|
||||||
<x-filament::tabs.item alpine-active="activeTab === 'tab3'" x-on:click="activeTab = 'tab3'">
|
|
||||||
DEFENCE
|
|
||||||
</x-filament::tabs.item>
|
|
||||||
<x-filament::tabs.item alpine-active="activeTab === 'tab4'" x-on:click="activeTab = 'tab4'">
|
|
||||||
GOALKEEPER
|
|
||||||
</x-filament::tabs.item>
|
|
||||||
</x-filament::tabs>
|
|
||||||
|
|
||||||
<!-- Tab Content -->
|
|
||||||
<div class="mt-4">
|
|
||||||
<div x-show="activeTab === 'tab1'" class="grid grid-cols-4 gap-1 h-full justify-center"
|
|
||||||
x-ref="drag-container">
|
|
||||||
<!-- Die Filament-Komponente rendert das HTML, Alpine bindet die ID dynamisch -->
|
|
||||||
<template x-for="player in sources[0].items" :key="player.player_id">
|
|
||||||
<!-- Der Wrapper, den Dragula greift -->
|
|
||||||
<div class="drag-item mb-2" :data-item-id="player.player_id">
|
|
||||||
<!-- Die Filament-Komponente für das Styling -->
|
|
||||||
<x-filament::button size="sm" color="gray"
|
|
||||||
class="w-full pointer-events-none text-left justify-start">
|
|
||||||
⚽️ <span x-text="player.player_name"></span>
|
|
||||||
</x-filament::button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
{{-- @foreach ($grid as $key => $ele)
|
|
||||||
@if (isset($ele['player_id']) && $ele['position'] == 'ATTACK')
|
|
||||||
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
|
|
||||||
tooltip="{{ $ele['info'] }}">
|
|
||||||
<div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
||||||
{{ $ele['position'] }}
|
|
||||||
</div>
|
|
||||||
<div class="text-wrap font-bold mt-5">
|
|
||||||
{{ $ele['name'] }}
|
|
||||||
</div>
|
|
||||||
</x-filament::button>
|
|
||||||
@endif
|
|
||||||
@endforeach --}}
|
|
||||||
</div>
|
|
||||||
<div x-show="activeTab === 'tab2'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
|
|
||||||
{{-- @foreach ($grid as $key => $ele)
|
|
||||||
@if (isset($ele['player_id']) && $ele['position'] == 'MIDFIELD')
|
|
||||||
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
|
|
||||||
tooltip="{{ $ele['info'] }}">
|
|
||||||
<div
|
|
||||||
class="dragable absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
||||||
{{ $ele['position'] }}</div>
|
|
||||||
<div class="text-wrap font-bold mt-5">
|
|
||||||
{{ $ele['name'] }}
|
|
||||||
</div>
|
|
||||||
</x-filament::button>
|
|
||||||
@endif
|
|
||||||
@endforeach --}}
|
|
||||||
</div>
|
|
||||||
<div x-show="activeTab === 'tab3'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
|
|
||||||
{{-- @foreach ($grid as $key => $ele)
|
|
||||||
@if (isset($ele['player_id']) && $ele['position'] == 'DEFENCE')
|
|
||||||
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
|
|
||||||
tooltip="{{ $ele['info'] }}">
|
|
||||||
<div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
||||||
{{ $ele['position'] }}</div>
|
|
||||||
<div class="text-wrap font-bold mt-5">
|
|
||||||
{{ $ele['name'] }}
|
|
||||||
</div>
|
|
||||||
</x-filament::button>
|
|
||||||
@endif
|
|
||||||
@endforeach --}}
|
|
||||||
</div>
|
|
||||||
<div x-show="activeTab === 'tab4'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
|
|
||||||
{{-- @foreach ($grid as $key => $ele)
|
|
||||||
@if (isset($ele['player_id']) && $ele['position'] == 'GOALKEEPER')
|
|
||||||
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-24" tooltip="{{ $ele['info'] }}">
|
|
||||||
<div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
||||||
{{ $ele['position'] }}</div>
|
|
||||||
<div class="text-wrap font-bold mt-5">
|
|
||||||
{{ $ele['name'] }}
|
|
||||||
</div>
|
|
||||||
</x-filament::button>
|
|
||||||
@endif
|
|
||||||
@endforeach --}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-6 h-full flex flex-col gap-5">
|
|
||||||
<div class="py-2 w-full text-center">
|
|
||||||
<x-filament::button color="gray" icon="phosphor-arrows-counter-clockwise">
|
|
||||||
Reset
|
|
||||||
</x-filament::button>
|
|
||||||
<x-filament::button color="gray" icon="phosphor-copy">
|
|
||||||
Copy
|
|
||||||
</x-filament::button>
|
|
||||||
<x-filament::button color="gray" icon="phosphor-calculator">
|
|
||||||
Calculate
|
|
||||||
</x-filament::button>
|
|
||||||
<x-filament::button color="gray" icon="phosphor-floppy-disk">
|
|
||||||
Store
|
|
||||||
</x-filament::button>
|
|
||||||
<x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
|
|
||||||
Close
|
|
||||||
</x-filament::button>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-5 grid-rows-7 w-full bg-cover bg-center border h-full"
|
|
||||||
style="background-image:url({{ asset('svg/soccerfield.svg') }})">
|
|
||||||
{{-- first row --}}
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
<div x-ref="drag-container" :data-container-id="a1" class="dropper">SW</div>
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
{{-- second row --}}
|
|
||||||
<div x-ref="drag-container" :data-container-id="b1" class="dropper">DR</div>
|
|
||||||
<div x-ref="drag-container" :data-container-id="b2" class="dropper">DC</div>
|
|
||||||
<div x-ref="drag-container" :data-container-id="b3" class="dropper">DC</div>
|
|
||||||
<div x-ref="drag-container" :data-container-id="b4" class="dropper">DC</div>
|
|
||||||
<div x-ref="drag-container" :data-container-id="b5" class="dropper">DL</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> --}}
|
|
||||||
@@ -1,21 +1,17 @@
|
|||||||
<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-')) }}' }" id="dispatcher-board-root">
|
||||||
x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }"
|
|
||||||
id="dispatcher-board-root">
|
|
||||||
|
|
||||||
<!-- 🌟 SPLIT HEADER -->
|
<!-- 🌟 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 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-1 overflow-x-auto min-w-0">
|
||||||
<x-filament::tabs class="border-none p-0 m-0 flex items-center space-x-1">
|
<x-filament::tabs class="border-none p-0 m-0 flex items-center space-x-1">
|
||||||
@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
|
<x-filament::tabs.item :alpine-active="'activeTab === \'' . $listId . '\''" x-on:click="activeTab = '{{ $listId }}'"
|
||||||
:alpine-active="'activeTab === \'' . $listId . '\''"
|
wire:key="tab-button-{{ $listId }}" class="cursor-pointer">
|
||||||
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">
|
|
||||||
<div class="flex items-center space-x-1.5 leading-none">
|
<div class="flex items-center space-x-1.5 leading-none">
|
||||||
<span class="uppercase">{{ str_replace('source-', 'S', $listId) }}</span>
|
<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) }}
|
{{ count($items) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,11 +24,7 @@
|
|||||||
<div class="flex items-center space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
|
<div class="flex items-center space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
|
||||||
|
|
||||||
<!-- Reset-Button -->
|
<!-- Reset-Button -->
|
||||||
<x-filament::icon-button
|
<x-filament::icon-button icon="heroicon-m-arrow-path" color="warning" size="md" label="Reset"
|
||||||
icon="heroicon-m-arrow-path"
|
|
||||||
color="warning"
|
|
||||||
size="md"
|
|
||||||
label="Reset"
|
|
||||||
tooltip="Alle Elemente zurücksetzen"
|
tooltip="Alle Elemente zurücksetzen"
|
||||||
@click.stop="
|
@click.stop="
|
||||||
if (confirm('Möchten Sie wirklich alle Elemente in ihre Quell-Tabs zurücksetzen?')) {
|
if (confirm('Möchten Sie wirklich alle Elemente in ihre Quell-Tabs zurücksetzen?')) {
|
||||||
@@ -52,39 +44,36 @@
|
|||||||
$wire.resetBoard();
|
$wire.resetBoard();
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer" />
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Schließen-Button -->
|
<!-- Schließen-Button -->
|
||||||
<x-filament::icon-button
|
<x-filament::icon-button icon="heroicon-m-x-mark" color="gray" size="md" label="Schließen"
|
||||||
icon="heroicon-m-x-mark"
|
x-on:click="close()" class="cursor-pointer" />
|
||||||
color="gray"
|
|
||||||
size="md"
|
|
||||||
label="Schließen"
|
|
||||||
x-on:click="close()"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 🌟 SEKTION 1: SOURCES -->
|
<!-- 🌟 SEKTION 1: SOURCES -->
|
||||||
<div>
|
<div>
|
||||||
<div class="text-xs font-bold uppercase tracking-wider text-primary-500 mb-3">Available Sources</div>
|
<div class="text-xs font-bold uppercase tracking-wider text-primary-500 mb-3">Available Sources</div>
|
||||||
@foreach($lists as $listId => $items)
|
@foreach ($lists as $listId => $items)
|
||||||
@if(str_starts_with($listId, 'source-'))
|
@if (str_starts_with($listId, 'source-'))
|
||||||
<div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}">
|
<div x-show="activeTab === '{{ $listId }}'" class="transition-all"
|
||||||
|
wire:key="tab-panel-{{ $listId }}">
|
||||||
<x-filament::section compact>
|
<x-filament::section compact>
|
||||||
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
||||||
<div id="{{ $listId }}"
|
<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]">
|
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)
|
@foreach ($items as $item)
|
||||||
<div data-id="{{ $item['id'] }}"
|
<div data-id="{{ $item['id'] }}"
|
||||||
wire:key="item-src-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
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">
|
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>
|
<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">
|
class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
<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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
@@ -97,24 +86,27 @@
|
|||||||
|
|
||||||
<!-- 🌟 SEKTION 2: DESTINATIONS (21 BAYS) -->
|
<!-- 🌟 SEKTION 2: DESTINATIONS (21 BAYS) -->
|
||||||
<div>
|
<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">
|
<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">{{ count($items) }}</x-filament::badge>
|
<x-filament::badge color="success" size="xs">{{ count($items) }}</x-filament::badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
||||||
<div id="{{ $listId }}"
|
<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]">
|
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)
|
@foreach ($items as $item)
|
||||||
<div data-id="{{ $item['id'] }}"
|
<div data-id="{{ $item['id'] }}"
|
||||||
wire:key="item-dst-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
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">
|
||||||
{{ $item['name'] }}
|
{{ $item['name'] }}
|
||||||
@@ -123,15 +115,19 @@
|
|||||||
<div class="flex items-center space-x-1 shrink-0">
|
<div class="flex items-center space-x-1 shrink-0">
|
||||||
<!-- Zuverlässiger, direkter Livewire-Löschcall -->
|
<!-- 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']) }}"
|
||||||
wire:click="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"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
stroke-width="2.5" stroke="currentColor">
|
||||||
|
<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"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -146,43 +142,44 @@
|
|||||||
|
|
||||||
<!-- 🌟 ZENTRALE AUTOMATISCHE INITIALISIERUNG NACH JEDEM RENDERING -->
|
<!-- 🌟 ZENTRALE AUTOMATISCHE INITIALISIERUNG NACH JEDEM RENDERING -->
|
||||||
@script
|
@script
|
||||||
<script>
|
<script>
|
||||||
function setupSortableZones() {
|
function setupSortableZones() {
|
||||||
document.querySelectorAll('.sortable-zone').forEach(el => {
|
document.querySelectorAll('.sortable-zone').forEach(el => {
|
||||||
// Falls für dieses Element bereits eine Instanz existiert, zerstören wir sie sauber vor dem Neuaufbau
|
// Falls für dieses Element bereits eine Instanz existiert, zerstören wir sie sauber vor dem Neuaufbau
|
||||||
if (el._sortableInstance) {
|
if (el._sortableInstance) {
|
||||||
el._sortableInstance.destroy();
|
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
// 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();
|
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
|
@endscript
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
<!-- Inside your Custom Filament Page Blade Template -->
|
|
||||||
<x-filament-panels::page>
|
|
||||||
<livewire:board-dispatcher />
|
|
||||||
</x-filament-panels::page>
|
|
||||||
+1
-2
@@ -8,7 +8,6 @@ export default defineConfig({
|
|||||||
input: [
|
input: [
|
||||||
"resources/css/app.css",
|
"resources/css/app.css",
|
||||||
"resources/js/app.js",
|
"resources/js/app.js",
|
||||||
'resources/js/filament-sort.js',
|
|
||||||
"resources/css/filament/admin/theme.css",
|
"resources/css/filament/admin/theme.css",
|
||||||
],
|
],
|
||||||
refresh: true,
|
refresh: true,
|
||||||
@@ -16,6 +15,6 @@ export default defineConfig({
|
|||||||
tailwindcss(),
|
tailwindcss(),
|
||||||
],
|
],
|
||||||
define: {
|
define: {
|
||||||
global: 'window',
|
global: "window",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
Reference in new issue
Block a user