UP

Author: ManukMinasyan

resources/js/flowforge.js

@@ -11,7 +11,7 @@ export default function flowforge({state}) {
             // Listen for card creation
             this.$wire.$on('kanban-card-created', (data) => {
                 const id = data[0].id;
-                const status = data[0].status;
+                const column = data[0].column;
 
                 this.$dispatch('close-modal', { id: 'create-card-modal' });
 

resources/views/livewire/card-badge.blade.php

@@ -1,7 +1,8 @@
-@props(['label' => null, 'value', 'color' => 'gray', 'icon' => null])
+@props(['label', 'value', 'color' => 'gray', 'icon' => null])
 
-<div
-    class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
-    <span class="font-medium mr-1">{{ $label }}:</span>
-    <span>{{ $value }}</span>
+<div class="inline-flex items-center rounded-full bg-{{ $color }}-100 dark:bg-{{ $color }}-900 px-2 py-1 text-xs font-medium text-{{ $color }}-700 dark:text-{{ $color }}-300 ring-1 ring-inset ring-{{ $color }}-400/20 dark:ring-{{ $color }}-800/50">
+    @if($icon)
+        <x-dynamic-component :component="$icon" class="w-3 h-3 mr-1" />
+    @endif
+    <span>{{ $label }}: {{ $value }}</span>
 </div>

resources/views/livewire/card.blade.php

@@ -17,10 +17,10 @@ class="kanban-card mb-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm border bo
         @if(!empty($config['cardAttributes']))
             <div class="mt-2 flex flex-wrap gap-2">
                 @foreach($config['cardAttributes'] as $attribute => $label)
-                    @if(isset($card[$attribute]) && !empty($card[$attribute]))
+                    @if(isset($card['attributes'][$attribute]) && !empty($card['attributes'][$attribute]['value']))
                         <x-flowforge::card-badge
-                            :label="$label"
-                            :value="$card[$attribute]"
+                            :label="$card['attributes'][$attribute]['label']"
+                            :value="$card['attributes'][$attribute]['value']"
                             :color="$config['cardAttributeColors'][$attribute] ?? 'gray'"
                             :icon="$config['cardAttributeIcons'][$attribute] ?? null"
                         />

resources/views/livewire/column.blade.php

@@ -7,10 +7,10 @@ class="kanban-column w-[300px] min-w-[300px] flex-shrink-0 border border-kanban-
         class="kanban-column-header flex items-center justify-between py-3 px-4 border-b border-gray-200 dark:border-gray-700">
         <div class="flex items-center">
             <h3 class="text-sm font-medium text-kanban-column-header dark:text-kanban-column-header">
-                {{ $column['name'] }}
+                {{ $column['label'] }}
             </h3>
             <div
-                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium {{ $config['statusColors'][$columnId] ?? 'kanban-status-' . str_replace('_', '-', $columnId) }}">
+                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium {{ $config['columnColors'][$columnId] ?? 'kanban-column-' . str_replace('_', '-', $columnId) }}">
                 {{ $column['total'] ?? count($column['items']) }}
             </div>
         </div>
@@ -33,7 +33,7 @@ class="text-gray-400 hover:text-primary-500 dark:text-gray-500 dark:hover:text-p
         x-sortable
         x-sortable-group="cards"
         data-column-id="{{ $columnId }}"
-        @end.stop="$wire.updateColumnCards($event.to.getAttribute('data-column-id'), $event.to.sortable.toArray())"
+        @end.stop="$wire.reorderCardsInColumn($event.to.getAttribute('data-column-id'), $event.to.sortable.toArray())"
         class="p-3 flex-1 overflow-y-auto overflow-x-hidden"
         style="max-height: calc(100vh - 13rem);"
     >
@@ -67,7 +67,7 @@ class="py-3 text-center"
                         </div>
                     </div>
                     <div wire:loading.remove wire:target="loadMoreItems('{{ $columnId }}')" class="text-xs text-gray-400">
-                        {{ count($column['items']) }} / {{ $column['total'] }} {{ $config['pluralRecordLabel'] }}
+                        {{ count($column['items']) }} / {{ $column['total'] }} {{ $config['pluralCardLabel'] }}
                     </div>
                 </div>
             @endif

resources/views/livewire/empty-column.blade.php

@@ -1,11 +1,10 @@
 @props(['columnId'])
 
-<div
-    class="kanban-empty-column h-24 border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg flex flex-col items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
-    <svg class="w-5 h-5 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-         xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-              d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+<div class="p-3 flex flex-col items-center justify-center h-full min-h-[150px] rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-800">
+    <svg class="w-10 h-10 text-gray-400 dark:text-gray-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
     </svg>
-    <span>No items</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+        {{ __('No cards in this column') }}
+    </p>
 </div>

resources/views/livewire/kanban-board.blade.php

@@ -9,8 +9,8 @@ class="w-full h-full flex flex-col relative"
         state: {
             columns: @js($columns),
             columnField: '{{ $config['columnField'] }}',
-            recordLabel: '{{ $config['recordLabel'] ?? 'Card' }}',
-            pluralRecordLabel: '{{ $config['pluralRecordLabel'] ?? 'Cards' }}'
+            cardLabel: '{{ $config['cardLabel'] ?? 'Card' }}',
+            pluralCardLabel: '{{ $config['pluralCardLabel'] ?? 'Cards' }}'
         }
     })"
 >

resources/views/livewire/modals/create-card.blade.php

@@ -1,7 +1,7 @@
 @props(['config'])
 
-<x-filament::modal id="create-card-modal" :heading="__('Create New :recordLabel', ['recordLabel' => $config['recordLabel'] ?? 'Card'])"
-:description="__('Add a new :recordLabel to the board', ['recordLabel' => strtolower($config['recordLabel'] ?? 'card')])"
+<x-filament::modal id="create-card-modal" :heading="__('Create New :cardLabel', ['cardLabel' => $config['cardLabel'] ?? 'Card'])"
+:description="__('Add a new :cardLabel to the board', ['cardLabel' => strtolower($config['cardLabel'] ?? 'card')])"
 >
 
     {{ $this->createForm }}
@@ -18,7 +18,7 @@
             <x-filament::button
                 wire:click="createCard"
             >
-                {{ __('Create :recordLabel', ['recordLabel' => $config['recordLabel'] ?? 'Card']) }}
+                {{ __('Create :cardLabel', ['cardLabel' => $config['cardLabel'] ?? 'Card']) }}
             </x-filament::button>
         </div>
     </x-slot>

resources/views/livewire/modals/edit-card.blade.php

@@ -1,6 +1,6 @@
 @props(['config'])
 
-<x-filament::modal id="edit-card-modal" :heading="__('Edit :recordLabel', ['recordLabel' => $config['recordLabel'] ?? 'Card'])">
+<x-filament::modal id="edit-card-modal" :heading="__('Edit :cardLabel', ['cardLabel' => $config['cardLabel'] ?? 'Card'])">
     {{ $this->editForm }}
 
     <x-slot name="footer">