Add HasCardAction trait and integrate card actions into Board and KanbanBoard components

Author: ManukMinasyan

resources/css/flowforge.css

@@ -30,9 +30,25 @@
         @apply cursor-pointer;
     }
 
+    &.ff-card--clickable {
+        @apply cursor-pointer transition-all duration-200 ease-in-out;
+
+        &:hover {
+            @apply transform -translate-y-0.5 shadow-lg ring-1 ring-primary-200 dark:ring-primary-800/30;
+        }
+
+        &:active {
+            @apply transform translate-y-0 shadow-md;
+        }
+    }
+
     &.ff-card--non-interactive {
         @apply cursor-default;
     }
+
+    .ff-card__actions {
+        @apply relative z-10;
+    }
 }
 
 /**

resources/views/livewire/card.blade.php

@@ -3,24 +3,31 @@
 @php
     $processedRecordActions = $this->getCardActionsForRecord($record);
     $hasActions = !empty($processedRecordActions);
+    $cardAction = $this->getCardActionForRecord($record);
+    $hasCardAction = $this->hasCardAction($record);
 @endphp
 
 <div
     @class([
         'ff-card kanban-card',
-        'ff-card--interactive' => $hasActions,
-        'ff-card--non-interactive' => !$hasActions
+        'ff-card--interactive' => $hasActions || $hasCardAction,
+        'ff-card--clickable' => $hasCardAction,
+        'ff-card--non-interactive' => !$hasActions && !$hasCardAction
     ])
     x-sortable-handle
     x-sortable-item="{{ $record['id'] }}"
+    @if($hasCardAction && $cardAction)
+        wire:click="mountAction('{{ $cardAction }}', { recordKey: '{{ $record['id'] }}' })"
+        style="cursor: pointer;"
+    @endif
 >
     <div class="ff-card__content">
         <div class="ff-card__header">
             <h4 class="ff-card__title">{{ $record['title'] }}</h4>
 
             {{-- Render record actions --}}
             @if($hasActions)
-                <div class="ff-card__actions">
+                <div class="ff-card__actions" @if($hasCardAction) @click.stop @endif>
                     <x-filament-actions::group :actions="$processedRecordActions" />
                 </div>
             @endif

src/Board.php

@@ -6,13 +6,15 @@
 
 use Filament\Support\Components\ViewComponent;
 use Relaticle\Flowforge\Concerns\HasActions;
+use Relaticle\Flowforge\Concerns\HasCardAction;
 use Relaticle\Flowforge\Concerns\HasColumns;
 use Relaticle\Flowforge\Concerns\HasProperties;
 use Relaticle\Flowforge\Concerns\InteractsWithKanbanQuery;
 
 class Board extends ViewComponent
 {
     use HasActions;
+    use HasCardAction;
     use HasColumns;
     use HasProperties;
     use InteractsWithKanbanQuery;

src/Concerns/HasCardAction.php

@@ -0,0 +1,52 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Relaticle\Flowforge\Concerns;
+
+use Closure;
+use Filament\Actions\Action;
+use Illuminate\Database\Eloquent\Model;
+
+trait HasCardAction
+{
+    protected string | Closure | null $cardAction = null;
+
+    public function cardAction(string | Closure | null $action): static
+    {
+        $this->cardAction = $action;
+
+        return $this;
+    }
+
+    /**
+     * @param  Model | array<string, mixed>  $record
+     */
+    public function getCardAction(Model | array $record): ?string
+    {
+        $action = $this->evaluate(
+            $this->cardAction,
+            namedInjections: [
+                'record' => $record,
+            ],
+            typedInjections: $record instanceof Model ? [
+                Model::class => $record,
+                $record::class => $record,
+            ] : [],
+        );
+
+        if (! $action) {
+            return null;
+        }
+
+        if (! class_exists($action)) {
+            return $action;
+        }
+
+        if (! is_subclass_of($action, Action::class)) {
+            return $action;
+        }
+
+        return $action::getDefaultName() ?? $action;
+    }
+}

src/Livewire/KanbanBoard.php

@@ -400,6 +400,44 @@ public function getCardActionsForRecord(array $recordData): array
         return $processedActions;
     }
 
+    /**
+     * Get the card action for a specific record.
+     * This method follows Filament's pattern for record actions.
+     */
+    public function getCardActionForRecord(array $recordData): ?string
+    {
+        $boardPage = $this->getBoardPage();
+        if (! $boardPage) {
+            return null;
+        }
+
+        $board = $boardPage->getBoard();
+        
+        if (! method_exists($board, 'getCardAction')) {
+            return null;
+        }
+
+        try {
+            // Get the record model
+            $recordModel = $this->getAdapter()->getModelById($recordData['id']);
+            if (! $recordModel) {
+                return null;
+            }
+
+            return $board->getCardAction($recordModel);
+        } catch (\Exception) {
+            return null;
+        }
+    }
+
+    /**
+     * Check if a card has an action defined.
+     */
+    public function hasCardAction(array $recordData): bool
+    {
+        return $this->getCardActionForRecord($recordData) !== null;
+    }
+
     /**
      * Refresh all board data.
      */
@@ -513,8 +551,8 @@ public function getDefaultActionRecord(\Filament\Actions\Action $action): ?\Illu
         // Get the last (current) mounted action
         $currentMountedAction = end($mountedActions);
 
-        // Extract recordKey from the context
-        $recordKey = $currentMountedAction['context']['recordKey'] ?? null;
+        // Extract recordKey from the arguments (second parameter of mountAction)
+        $recordKey = $currentMountedAction['arguments']['recordKey'] ?? null;
 
         if (! $recordKey) {
             return null;