A Filament application with a Kanban board featuring a Client model, Client Status enum, Kanban Board interface, and drag-and-drop functionality to move clients between statuses.
To create the Kanban board, you have to make a custom page like this:
php artisan make:filament-page ManageClientStatus
Once this is done, we have to add the following code to it:
app/Filament/Pages/ManageClientStatus.php
use App\Enums\ClientStatus;use App\Models\Client;use Filament\Support\Icons\Heroicon;use Filament\Notifications\Notification;use Filament\Pages\Page;use Illuminate\Support\Collection;use Livewire\Attributes\On; class ManageClientStatus extends Page{ protected static string | \BackedEnum | null $navigationIcon = Heroicon::OutlinedDocumentText; protected string $view = 'filament.pages.manage-client-status'; #[On('statusChangeEvent')] public function changeRecordStatus(int $id, ClientStatus $status): void { $client = Client::find($id); $client->status = $status; $client->save(); $clientName = $client->name; Notification::make() ->title($clientName . ' Status Updated') ->success() ->send(); } protected function getViewData(): array { $statuses = $this->statuses(); $records = $this->records(); $statuses = $statuses ->map(function ($status) use ($records) { $status['group'] = $this->getId(); $status['kanbanRecordsId'] = "{$this->getId()}-{$status['id']}"; $status['records'] = $records ->filter(function ($record) use ($status) { return $this->isRecordInStatus($record, $status); }); return $status; }); return [ 'records' => $records, 'statuses' => $statuses, ]; } protected function statuses(): Collection { return collect(ClientStatus::cases()) ->map(function (ClientStatus $stage) { return [ 'id' => $stage->value, 'title' => $stage->getLabel(), ]; }); } protected function records(): Collection { return Client::all() ->map(function (Client $item) { return [ 'id' => $item->id, 'title' => $item->name, 'status' => $item->status->value, ]; }); } protected function isRecordInStatus($record, $status): bool { return $record['status'] === $status['id']; }}
Let's quickly go through the code: