UP

Author: ManukMinasyan

resources/dist/flowforge.js

@@ -8,9 +8,14 @@ export default function flowforge({state}) {
 
         init: function () {
             console.log('FlowForge Alpine component initialized')
-            
+
             // Listen for form submission success/failure
-            this.$wire.$on('kanban-card-created', ({id, status}) => {
+            this.$wire.$on('kanban-card-created', (data) => {
+                const id = data[0].id;
+                const status = data[0].status;
+
+                this.$dispatch('close-modal', { id: 'create-card-modal' });
+
                 // Highlight the new card
                 setTimeout(() => {
                     const cardElement = document.querySelector(`[x-sortable-item="${id}"]`);
@@ -20,10 +25,15 @@ export default function flowforge({state}) {
                             cardElement.classList.remove('animate-kanban-card-add');
                         }, 500);
                     }
-                }, 100);
+                }, 300);
             });
 
-            this.$wire.$on('kanban-card-updated', ({id}) => {
+            this.$wire.$on('kanban-card-updated', (data) => {
+
+                const id = data[0].id;
+
+                this.$dispatch('close-modal', { id: 'edit-card-modal' });
+
                 // Highlight the updated card
                 setTimeout(() => {
                     const cardElement = document.querySelector(`[x-sortable-item="${id}"]`);
@@ -33,16 +43,33 @@ export default function flowforge({state}) {
                             cardElement.classList.remove('animate-kanban-card-move');
                         }, 500);
                     }
-                }, 100);
+                }, 300);
             });
-            
+
+            this.$wire.$on('kanban-card-deleted', (data) => {
+                const id = data[0].id;
+
+                this.$dispatch('close-modal', { id: 'edit-card-modal' });
+
+                // Highlight the deleted card
+                setTimeout(() => {
+                    const cardElement = document.querySelector(`[x-sortable-item="${id}"]`);
+                    if (cardElement) {
+                        cardElement.classList.add('animate-kanban-card-delete');
+                        setTimeout(() => {
+                            cardElement.classList.remove('animate-kanban-card-delete');
+                        }, 500);
+                    }
+                }, 300);
+            })
+
             // Listen for when items are loaded
             this.$wire.$on('kanban-items-loaded', () => {
                 // Initialize sortable for newly loaded items
                 this.initSortable();
             });
         },
-        
+
         initSortable() {
             // Re-initialize sortable for all columns if needed
             // This could be implemented if needed for dynamically loaded content

resources/js/flowforge.js

@@ -344,16 +344,15 @@ public function createCard(): void
             $this->loadColumnsData();
             $this->resetCreateForm();
 
-            $this->dispatch('close-modal', ['id' => 'create-card-modal']);
-            $this->dispatch('kanban-card-created', [
-                'id' => $card->getKey(),
-                'status' => $card->{$this->adapter->getStatusField()},
-            ]);
-
             Notification::make()
                 ->title(__(':recordLabel created successfully', ['recordLabel' => $this->config['recordLabel']]))
                 ->success()
                 ->send();
+
+            $this->dispatch('kanban-card-created', [
+                'id' => $card->getKey(),
+                'status' => $card->{$this->adapter->getStatusField()},
+            ]);
         }
     }
 
@@ -400,7 +399,6 @@ public function updateCard(): void
             $this->loadColumnsData();
             $this->resetEditForm();
 
-            $this->dispatch('close-modal', ['id' => 'edit-card-modal']);
             $this->dispatch('kanban-card-updated', ['id' => $this->activeCardId]);
 
             Notification::make()
@@ -450,7 +448,6 @@ public function deleteCard(): void
             $this->loadColumnsData();
             $this->resetEditForm();
 
-            $this->dispatch('close-modal', ['id' => 'edit-card-modal']);
             $this->dispatch('kanban-card-deleted', ['id' => $this->activeCardId]);
 
             Notification::make()