Save re-ordering

Author: sten

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

@@ -27,10 +27,12 @@ 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)
-                            @livewire('filament-flexible-content-block-pages::menu-tree-item', [
-                                'item' => $item,
-                                'maxDepth' => $this->getMaxDepth()
-                            ], key("item-{$item->id}-{$refreshKey}"))
+                            <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>
                         @endforeach
                     </div>
                 @endif
@@ -94,14 +96,44 @@ function menuItemsManager(config) {
                                 handle: '.drag-handle',
                                 onEnd: (evt) => {
                                     if (evt.oldIndex !== evt.newIndex) {
-                                        // TODO: Implement reordering with proper nested set handling
-                                        console.log('Reorder from', evt.oldIndex, 'to', evt.newIndex);
+                                        this.saveReorder(evt);
                                     }
                                 }
                             });
                         }
                     }
                 },
+
+                saveReorder(evt) {
+                    this.loading = true;
+                    
+                    // Get all items in their new order
+                    const container = document.getElementById('menu-items-container');
+                    const items = Array.from(container.children).map((element, index) => {
+                        // Extract item ID from the wire:key attribute or data attribute
+                        const itemId = this.extractItemId(element);
+                        return {
+                            id: itemId,
+                            position: index,
+                            parent_id: null // Root level items for now
+                        };
+                    });
+
+                    // Call the Livewire method to save the new order
+                    this.$wire.reorderMenuItems(items).then(() => {
+                        this.loading = false;
+                    }).catch((error) => {
+                        console.error('Reorder failed:', error);
+                        this.loading = false;
+                        // Revert the visual change by refreshing
+                        this.refreshMenuItems();
+                    });
+                },
+
+                extractItemId(element) {
+                    const itemId = element.dataset.itemId;
+                    return itemId ? parseInt(itemId) : null;
+                },
             }
         }
     </script>

resources/views/livewire/menu-tree-item.blade.php

@@ -1,4 +1,4 @@
-<div class="menu-tree-item" data-item-id="{{ $item->id }}">
+<div class="menu-tree-item" data-item-id="{{ $item->id }}" wire:key="tree-item-{{ $item->id }}">
     <div class="flex items-center p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 group hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {{ $depth > 0 ? 'ml-' . ($depth * 8) : '' }}">
 
         @if($showActions)

src/Resources/MenuResource/Pages/ManageMenuItems.php

@@ -294,6 +294,21 @@ public function reorderMenuItems(array $orderedItems): void
 
             // Validate that all items belong to this menu
             $itemIds = array_column($orderedItems, 'id');
+            
+            // Filter out null IDs
+            $itemIds = array_filter($itemIds, function($id) {
+                return $id !== null && is_numeric($id);
+            });
+            
+            if (empty($itemIds)) {
+                Notification::make()
+                    ->title(flexiblePagesTrans('menu_items.errors.no_items_to_reorder'))
+                    ->danger()
+                    ->send();
+                    
+                return;
+            }
+            
             $validItems = $menuItemModel::whereIn('id', $itemIds)
                 ->where('menu_id', $this->record->id)
                 ->count();