fix: max depth behavior

saade · Feb 15, 2024 · 073b4b3 · 073b4b3
1 parent a0611a9
commit 073b4b3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/resources/dist/filament-adjacency-list.js b/resources/dist/filament-adjacency-list.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -8,7 +8,6 @@ export default ({
 }) => ({
     statePath,
     sortable: null,
-    maxDepth,
 
     init() {
         this.sortable = new Sortable(this.$el, {
@@ -21,21 +20,23 @@ export default ({
             draggable: "[data-sortable-item]",
             handle: "[data-sortable-handle]",
             onMove: (evt) => {
-                if (this.maxDepth >= 0 && this.getDepth(evt.related) > this.maxDepth) {
-                    return false;  // Prevent sorting
+                if (maxDepth && maxDepth >= 0 && this.getDepth(evt.related) > maxDepth) {
+                    return false;  // Prevent dragging items to a depth greater than maxDepth
                 }
             },
-            onSort: (evt) => {
+            onSort: () => {
                 this.$wire.dispatchFormEvent('builder::sort', this.statePath, this.sortable.toArray())
             }
         })
     },
 
     getDepth(el, depth = 0) {
-        let parentEl = el.parentElement.closest('[data-sortable-item]');
-        if (parentEl) {
-            return this.getDepth(parentEl, ++depth);
+        const parentElement = el.parentElement.closest('[data-sortable-item]');
+
+        if (parentElement) {
+            return this.getDepth(parentElement, ++depth);
         }
+
         return depth;
     },
 })
diff --git a/resources/views/components/item.blade.php b/resources/views/components/item.blade.php
@@ -13,6 +13,8 @@ class="pb-3 rounded-lg"
         
         $hasChildren = count($item[$childrenKey] ?? []) > 0;
         
+        $hitDepthLimit = $maxDepth && substr_count($itemStatePath, $childrenKey) >= $maxDepth;
+        
         $mountArgs = [
             'statePath' => $itemStatePath,
             'cachedRecordKey' => $uuid,
@@ -60,7 +62,7 @@ class="px-2 text-gray-500 appearance-none"
             </div>
 
             <div class="items-center flex-shrink-0 hidden px-2 space-x-2 rtl:space-x-reverse group-hover:flex">
-                @if ($addable)
+                @if ($addable && !$hitDepthLimit)
                     {{ $addChildAction($mountArgs) }}
                 @endif
                 @if ($dedentable)
@@ -72,7 +74,7 @@ class="px-2 text-gray-500 appearance-none"
                 @if ($descendable)
                     {{ $moveDownAction($mountArgs) }}
                 @endif
-                @if ($indentable)
+                @if ($indentable && !$hitDepthLimit)
                     {{ $indentAction($mountArgs) }}
                 @endif
                 @if ($deletable)

diff --git a/src/Forms/Components/Component.php b/src/Forms/Components/Component.php
@@ -19,7 +19,7 @@ abstract class Component extends Forms\Components\Field
 
     protected string | Closure $childrenKey = 'children';
 
-    protected int $maxDepth = -1;
+    protected int | Closure | null $maxDepth = null;
 
     protected bool | Closure $hasRulers = false;
 
@@ -110,7 +110,7 @@ public function maxDepth(int | Closure $maxDepth): static
         return $this;
     }
 
-    public function getMaxDepth(): int
+    public function getMaxDepth(): ?int
     {
         return $this->evaluate($this->maxDepth);
     }