add drag and drop + responds to status change trait

mokhosh · Nov 28, 2023 · cbfb00a · cbfb00a
1 parent 0055216
commit cbfb00a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/resources/dist/filament-kanban.css b/resources/dist/filament-kanban.css
@@ -3422,6 +3422,11 @@ html {
   background-color: rgba(var(--gray-50), var(--tw-bg-opacity));
 }
 
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--gray-700), var(--tw-bg-opacity));
+}
+
 .bg-gray-950\/50 {
   background-color: rgba(var(--gray-950), 0.5);
 }

diff --git a/resources/views/pages/kanban-board.blade.php b/resources/views/pages/kanban-board.blade.php
@@ -1,12 +1,31 @@
 <x-filament-panels::page>
-    <div class="md:flex overflow-x-auto gap-6">
+    <div x-data class="md:flex overflow-x-auto">
         @foreach($statuses as $status)
             <div class="md:w-[24rem] flex-shrink-0">
-                <h3 class="font-semibold text-lg text-gray-400 mb-4">{{ $status['title'] }}</h3>
+                <h3 class="px-4 font-semibold text-lg text-gray-400">{{ $status['title'] }}</h3>
 
-                <div class="flex flex-col gap-2">
+                <div
+                    id="{{ $status['id'] }}"
+                    x-on:dragover.self.prevent="
+                        const dragged = document.querySelector('.is-dragging')
+                        const top = $event.target.querySelector('.record:not(.is-dragging)')
+                        $event.target.insertBefore(dragged, top)
+                    "
+                    class="flex flex-col gap-2 p-4"
+                >
                     @foreach($status['records'] as $record)
-                        <div class="bg-white rounded border px-4 py-2 cursor-grab active:cursor-grabbing font-medium text-gray-600">{{ $record['title'] }}</div>
+                        <div
+                            id="{{ $record['id'] }}"
+                            x-on:dragstart="$event.target.classList.add(...'!bg-gray-700 text-white is-dragging'.split(' '))"
+                            x-on:dragend="
+                                $event.target.classList.remove(...'!bg-gray-700 text-white is-dragging'.split(' '))
+                                $dispatch('status-changed', {record: $event.target.id, status: $event.target.parentElement.id})
+                            "
+                            draggable="true"
+                            class="record bg-white rounded border px-4 py-2 cursor-grab active:cursor-grabbing font-medium text-gray-600"
+                        >
+                            {{ $record['title'] }}
+                        </div>
                     @endforeach
                 </div>
             </div>

diff --git a/src/Concerns/RespondsToStatusChange.php b/src/Concerns/RespondsToStatusChange.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Mokhosh\FilamentKanban\Concerns;
+
+use Livewire\Attributes\On;
+
+trait RespondsToStatusChange
+{
+    #[On('status-changed')]
+    public function statusChanged($record, $status)
+    {
+        $this->onStatusChanged($record, $status);
+    }
+
+    protected function onStatusChanged($record, $status)
+    {
+        dd($record, $status);
+    }
+}
diff --git a/src/Pages/KanbanBoard.php b/src/Pages/KanbanBoard.php
@@ -4,9 +4,12 @@
 
 use Filament\Pages\Page;
 use Illuminate\Support\Collection;
+use Mokhosh\FilamentKanban\Concerns\RespondsToStatusChange;
 
 class KanbanBoard extends Page
 {
+    use RespondsToStatusChange;
+
     protected static ?string $navigationIcon = 'heroicon-o-document-text';
 
     protected static string $view = 'filament-kanban::pages.kanban-board';