add click record behaviour

resources/views/components/edit-record-modal.blade.php

@@ -0,0 +1,21 @@
+<x-filament-panels::form wire:submit.prevent="onEditModalFormSubmit">
+    <x-filament::modal id="kanban--edit-modal-form" :width="$this->getEditModalWidth()">
+        <x-slot name="header">
+            <x-filament::modal.heading>
+                {{ $this->getEditModalTitle() }}
+            </x-filament::modal.heading>
+        </x-slot>
+
+        {{ $this->editModalForm }}
+
+        <x-slot name="footer">
+            <x-filament::button type="submit">
+                {{$this->getEditModalSaveButtonLabel()}}
+            </x-filament::button>
+
+            <x-filament::button color="gray" x-on:click="isOpen = false">
+                {{$this->getEditModalCancelButtonLabel()}}
+            </x-filament::button>
+        </x-slot>
+    </x-filament::modal>
+</x-filament-panels::form>

resources/views/kanban-board.blade.php

@@ -8,4 +8,6 @@
             @include('filament-kanban::kanban-scripts')
         </div>
     </div>
+
+    <x-filament-kanban::edit-record-modal/>
 </x-filament-panels::page>

resources/views/kanban-record.blade.php

@@ -1,5 +1,6 @@
 <div
     id="{{ $record['id'] }}"
+    wire:click="recordClicked('{{ $record['id'] }}', {{ @json_encode($record) }})"
     class="record bg-white rounded border px-4 py-2 cursor-grab font-medium text-gray-600"
 >
     {{ $record['title'] }}

src/Concerns/HasEditRecordModal.php

@@ -0,0 +1,94 @@
+<?php
+
+namespace Mokhosh\FilamentKanban\Concerns;
+
+trait HasEditRecordModal
+{
+    public array $editModalFormState = [];
+
+    public ?int $editModalRecordId = null;
+
+    protected string $editModalTitle = 'Edit Record';
+
+    protected string $editModalWidth = '2xl';
+
+    protected string $editModalSaveButtonLabel = "Save";
+
+    protected string $editModalCancelButtonLabel = "Cancel";
+
+    public function recordClicked($recordId, $data): void
+    {
+        $this->editModalRecordId = $recordId;
+
+        $this->editModalForm->fill($this->getEditModalRecordData($recordId, $data));
+
+        $this->dispatch('open-modal', id: 'kanban--edit-modal-form');
+    }
+
+    public function getEditModalRecordData($recordId, $data): array
+    {
+        return $data;
+    }
+
+    protected function getEditModalTitle(): string
+    {
+        return $this->editModalTitle;
+    }
+
+    protected function getEditModalWidth(): string
+    {
+        return $this->editModalWidth;
+    }
+
+    protected function getEditModalSaveButtonLabel(): string
+    {
+        return $this->editModalSaveButtonLabel;
+    }
+
+    protected function getEditModalCancelButtonLabel(): string
+    {
+        return $this->editModalCancelButtonLabel;
+    }
+
+    //
+
+    public function onEditModalFormSubmit(): void
+    {
+        $this->editRecord($this->editModalRecordId, $this->editModalForm->getState(), $this->editModalFormState);
+
+        $this->dispatch('close-modal', id: 'kanban--edit-modal-form');
+    }
+
+    public function editRecord($recordId, array $data, array $state): void
+    {
+        // Override this function and do whatever you want with $data
+    }
+
+    protected function getEditModalFormSchema(int|null $recordId): array
+    {
+        return [];
+    }
+
+    protected function getEditModalForm(): array
+    {
+        return [
+            'editModalForm' => $this->makeForm()
+                ->schema($this->getEditModalFormSchema($this->editModalRecordId))
+                ->statePath('editModalFormState'),
+        ];
+    }
+
+    //
+
+    protected function setUpForms(): void
+    {
+        $this->editModalForm->fill();
+    }
+
+    protected function getForms(): array
+    {
+        return array_merge(
+            $this->getEditModalForm()
+        );
+    }
+}

src/Pages/KanbanBoard.php

@@ -2,13 +2,16 @@
 
 namespace Mokhosh\FilamentKanban\Pages;
 
+use Filament\Forms\Contracts\HasForms;
 use Filament\Pages\Page;
 use Illuminate\Support\Collection;
+use Mokhosh\FilamentKanban\Concerns\HasEditRecordModal;
 use Mokhosh\FilamentKanban\Concerns\RespondsToStatusChange;
 
-class KanbanBoard extends Page
+class KanbanBoard extends Page implements HasForms
 {
     use RespondsToStatusChange;
+    use HasEditRecordModal;
 
     protected static ?string $navigationIcon = 'heroicon-o-document-text';