fix tree widget

Author: cklei-carly

resources/views/components/tree/index.blade.php

@@ -5,9 +5,57 @@
 
 @endphp
 
-@include('filament-tree::tree.scripts', ['containerKey' => $containerKey, $maxDepth => $maxDepth])
-
-<div wire:disabled="updateTree">
+<div wire:disabled="updateTree"
+    x-data="{
+        init: function () {
+            let nestedTree = $('#{{ $containerKey }}').nestable({
+                group: {{ $containerKey }},
+                maxDepth: {{ $maxDepth }},
+                expandBtnHTML: '',
+                collapseBtnHTML: '',
+            });
+    
+            // Custom expand/collapse buttons
+            $('#{{ $containerKey }} .dd-item-btns [data-action=expand]').on('click', function (el) {
+                let list = $(this).closest('li');
+                if (list.length) {
+                    $(this).addClass('hidden');
+                    $(this).parent().children('.dd-item-btns [data-action=collapse]').removeClass('hidden');
+                    list.find('> .dd-list').removeClass('hidden').show();
+                    list.find('> .dd-list > .dd-item').removeClass('dd-collapsed hidden');
+                }
+            });
+            $('#{{ $containerKey }} .dd-item-btns [data-action=collapse]').on('click', function (el) {
+                let list = $(this).closest('li');
+                if (list.length) {
+                    $(this).addClass('hidden');
+                    $(this).parent().children('.dd-item-btns [data-action=expand]').removeClass('hidden');
+                    list.find('> .dd-list').addClass('hidden').hide();
+                    list.find('> .dd-list > .dd-item').addClass('dd-collapsed hidden');
+                }
+            });
+    
+            $('#nestable-menu [data-action=expand-all]').on('click', function () {
+                $('.dd').nestable('expandAll');
+                $('.dd').find('.dd-item-btns [data-action=expand]').addClass('hidden');
+                $('.dd').find('.dd-item-btns [data-action=collapse]').removeClass('hidden');
+                $('.dd > ol > li').find('li').removeClass('hidden');
+            });
+            $('#nestable-menu [data-action=collapse-all]').on('click', function () {
+                $('.dd').nestable('collapseAll');
+                $('.dd').find('.dd-item-btns [data-action=expand]').removeClass('hidden');
+                $('.dd').find('.dd-item-btns [data-action=collapse]').addClass('hidden');
+                $('.dd > ol > li').find('li').addClass('hidden');
+            });
+            $('#nestable-menu [data-action=save]').on('click', async function (e) {
+                let value = $('#{{ $containerKey }}').nestable('serialize');
+                let result = await @this.updateTree(value);
+                if (result['reload'] === true) {
+                    window.location.reload();
+                }
+            });
+        }
+    }">
     <x-filament::section :heading="($this->displayTreeTitle() ?? false) ? $this->getTreeTitle() : null">
         <menu class="flex gap-2 mb-4" id="nestable-menu">
             <div class="btn-group">