Vasyka/autocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix kanban: use Alpine @drag* + $wire (DOM ondrop has no $wire access)

Browse Source
This commit is contained in:
Vasyka
2026-05-07 11:29:21 +00:00
parent cbc66b13c3
commit f12bf17948
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/filament/tenant/pages/kanban.blade.php
+19 -11
View File
@@ -1,26 +1,34 @@
<x-filament-panels::page> <x-filament-panels::page>
@php $columns = $this->getColumns(); @endphp @php $columns = $this->getColumns(); @endphp
<div class="overflow-x-auto pb-4"> <div class="overflow-x-auto pb-4" x-data="{ dragId: null }">
<div class="flex gap-3 min-w-max" id="kanban-board"> <div class="flex gap-3 min-w-max" id="kanban-board">
@foreach ($columns as $status => $col) @foreach ($columns as $status => $col)
<div class="w-72 flex-shrink-0 bg-gray-50 dark:bg-gray-800 rounded-lg p-3" <div
data-status="{{ $status }}" class="w-72 flex-shrink-0 bg-gray-50 dark:bg-gray-800 rounded-lg p-3 transition"
ondragover="event.preventDefault(); this.classList.add('ring-2','ring-primary-500')" :class="{ 'ring-2 ring-primary-500': false }"
ondragleave="this.classList.remove('ring-2','ring-primary-500')" @dragover.prevent="$el.classList.add('ring-2','ring-primary-500')"
ondrop="event.preventDefault(); this.classList.remove('ring-2','ring-primary-500'); @dragleave="$el.classList.remove('ring-2','ring-primary-500')"
const id = event.dataTransfer.getData('cardId'); @drop.prevent="
$wire.moveCard(parseInt(id), '{{ $status }}')"> $el.classList.remove('ring-2','ring-primary-500');
if (dragId) {
$wire.moveCard(parseInt(dragId), '{{ $status }}');
dragId = null;
}
"
>
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-3">
<h3 class="font-semibold text-sm">{{ $col['label'] }}</h3> <h3 class="font-semibold text-sm">{{ $col['label'] }}</h3>
<span class="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded-full">{{ $col['count'] }}</span> <span class="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded-full">{{ $col['count'] }}</span>
</div> </div>
<div class="space-y-2 min-h-[100px]"> <div class="space-y-2 min-h-[100px]">
@forelse ($col['cards'] as $wo) @forelse ($col['cards'] as $wo)
<div class="bg-white dark:bg-gray-900 rounded-md p-3 border border-gray-200 dark:border-gray-700 cursor-move hover:shadow-md transition" <div
class="bg-white dark:bg-gray-900 rounded-md p-3 border border-gray-200 dark:border-gray-700 cursor-move hover:shadow-md transition"
draggable="true" draggable="true"
ondragstart="event.dataTransfer.setData('cardId', '{{ $wo->id }}'); this.classList.add('opacity-50')" @dragstart="dragId = '{{ $wo->id }}'; $el.classList.add('opacity-50')"
ondragend="this.classList.remove('opacity-50')"> @dragend="$el.classList.remove('opacity-50')"
>
<div class="text-xs font-mono text-gray-500">{{ $wo->number }}</div> <div class="text-xs font-mono text-gray-500">{{ $wo->number }}</div>
<div class="text-sm font-semibold mt-1 truncate">{{ $wo->client?->name ?? '—' }}</div> <div class="text-sm font-semibold mt-1 truncate">{{ $wo->client?->name ?? '—' }}</div>
<div class="text-xs text-gray-600 dark:text-gray-400 mt-1 truncate"> <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 truncate">