Save re-ordering

Author: sten

resources/views/filament/resources/menu-resource/pages/manage-menu-items.blade.php

@@ -27,12 +27,10 @@ class="space-y-6"
                     <!-- Tree Items -->
                     <div class="space-y-2" id="menu-items-container" wire:key="tree-{{ $refreshKey }}">
                         @foreach($this->record->menuItems()->with(['children', 'linkable'])->whereNull('parent_id')->orderBy('_lft')->get() as $item)
-                            <div data-item-id="{{ $item->id }}">
-                                @livewire('filament-flexible-content-block-pages::menu-tree-item', [
-                                    'item' => $item,
-                                    'maxDepth' => $this->getMaxDepth()
-                                ], key("item-{$item->id}-{$refreshKey}"))
-                            </div>
+                            @livewire('filament-flexible-content-block-pages::menu-tree-item', [
+                                'item' => $item,
+                                'maxDepth' => $this->getMaxDepth()
+                            ], key("item-{$item->id}-{$refreshKey}"))
                         @endforeach
                     </div>
                 @endif
@@ -72,11 +70,6 @@ function menuItemsManager(config) {
                     this.$wire.on('menu-items-updated', () => {
                         this.refreshMenuItems();
                     });
-                    
-                    // Listen for reorder completion (no need to refresh, just hide loading)
-                    this.$wire.on('menu-items-reordered', () => {
-                        this.loading = false;
-                    });
                 },
 
                 refreshMenuItems() {
@@ -125,15 +118,7 @@ function menuItemsManager(config) {
                     });
 
                     // Call the Livewire method to save the new order
-                    this.$wire.reorderMenuItems(items).then(() => {
-                        this.loading = false;
-                        // Don't manually refresh - the server-side refreshTree() will handle it
-                    }).catch((error) => {
-                        console.error('Reorder failed:', error);
-                        this.loading = false;
-                        // Only refresh on error to revert changes
-                        this.refreshMenuItems();
-                    });
+                    this.$wire.reorderMenuItems(items);
                 },
 
                 extractItemId(element) {

src/Resources/MenuResource/Pages/ManageMenuItems.php

@@ -325,9 +325,8 @@ public function reorderMenuItems(array $orderedItems): void
             // Process the reordering with proper nested set operations
             $this->processNestedSetReorder($orderedItems);
 
-            // Don't refresh tree for reordering - the visual order is already correct
-            // Only dispatch event for JavaScript to hide loading state
-            $this->dispatch('menu-items-reordered');
+            // Refresh tree to sync with database state
+            $this->refreshTree();
 
             Notification::make()
                 ->title(flexiblePagesTrans('menu_items.messages.items_reordered'))