feat: fixed multiple tree view

devansh-webkul · Dec 12, 2023 · 4f8cd6e · 4f8cd6e
1 parent 1afa518
commit 4f8cd6e
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 49 deletions.
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/products/edit/categories.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/products/edit/categories.blade.php
@@ -33,6 +33,7 @@
             <template v-else>
                 <x-admin::tree.view
                     input-type="checkbox"
+                    selection-type="individual"
                     name-field="categories"
                     id-field="id"
                     value-field="id"

diff --git a/packages/Webkul/Admin/src/Resources/views/components/example.blade.php b/packages/Webkul/Admin/src/Resources/views/components/example.blade.php
@@ -267,31 +267,34 @@
     name-field="parent_id"
     value-field="id"
     id-field="id"
-    :items="json_encode($categories)"
+    :items="json_encode($availableItems)"
+    :value="$savedValue"
     :fallback-locale="config('app.fallback_locale')"
 >
 </x-admin::tree.view>
 
-<!-- Checkbox Tree Component With ACL -->
+<!-- Checkbox Tree Component | Individual -->
 <x-admin::tree.view
     input-type="checkbox"
-    is-acl="true"
+    selection-type="hierarchical"
+    name-field="parent_id"
     value-field="key"
     id-field="key"
-    :items="json_encode($acl->items)"
-    :value="json_encode($role->permissions)"
+    :items="json_encode($availableItems)"
+    :value="json_encode($savedValues)"
     :fallback-locale="config('app.fallback_locale')"
 >
 </x-admin::tree.view>
 
-<!-- Checkbox Tree Component Without ACL -->
+<!-- Checkbox Tree Component | Hierarchical -->
 <x-admin::tree.view
     input-type="checkbox"
-    is-acl="false"
+    selection-type="hierarchical"
+    name-field="parent_id"
     value-field="key"
     id-field="key"
-    :items="json_encode($acl->items)"
-    :value="json_encode($role->permissions)"
+    :items="json_encode($availableItems)"
+    :value="json_encode($savedValues)"
     :fallback-locale="config('app.fallback_locale')"
 >
 </x-admin::tree.view>
diff --git a/packages/Webkul/Admin/src/Resources/views/components/tree/view.blade.php b/packages/Webkul/Admin/src/Resources/views/components/tree/view.blade.php
@@ -1,6 +1,6 @@
 @props([
     'inputType' => 'checkbox',
-    'isAcl' => 'false',
+    'selectionType' => 'hierarchical',
 ])
 
 @if ($inputType == 'checkbox')
@@ -12,9 +12,9 @@
 @endif
 
 <v-tree-view
-    {{ $attributes->except(['input-type', 'is-acl']) }}
+    {{ $attributes->except(['input-type', 'selection-type']) }}
     input-type="{{ $inputType }}"
-    :is-acl="{{ $isAcl }}"
+    selection-type="{{ $selectionType }}"
 >
     <x-admin::shimmer.tree />
 </v-tree-view>
@@ -33,10 +33,10 @@
                     default: 'checkbox'
                 },
 
-                isAcl: {
-                    type: Boolean,
+                selectionType: {
+                    type: String,
                     required: false,
-                    default: 0
+                    default: 'hierarchical'
                 },
 
                 nameField: {
@@ -122,6 +122,14 @@
                         : this.value;
                 },
 
+                getId(item) {
+                    const timestamp = new Date().getTime().toString(36);
+
+                    const id = item[this.idField];
+
+                    return `${timestamp}_${id}`
+                },
+
                 getLabel(item) {
                     return item[this.labelField]
                         ? item[this.labelField]
@@ -152,7 +160,7 @@
                         ...props,
 
                         onChangeInput: (item) => {
-                            this.handle(item.value);
+                            this.handleCheckbox(item.value);
 
                             this.$emit('change-input', this.formattedValues);
                         },
@@ -209,7 +217,7 @@ class: [
                                     }),
 
                                     this.generateInputComponent({
-                                        id: items[key][this.idField],
+                                        id: this.getId(items[key]),
                                         label: this.getLabel(items[key]),
                                         name: this.nameField,
                                         value: items[key][this.valueField],
@@ -236,13 +244,13 @@ class: [
                     );
                 },
 
-                searchInTree(items, id, ancestors = []) {
+                searchInTree(items, value, ancestors = []) {
                     for (let key in items) {
-                        if (items[key][this.idField] === id) {
+                        if (items[key][this.valueField] === value) {
                             return Object.assign(items[key], { ancestors: ancestors.reverse() });
                         }
 
-                        const result = this.searchInTree(items[key][this.childrenField], id, [...ancestors, items[key]]);
+                        const result = this.searchInTree(items[key][this.childrenField], value, [...ancestors, items[key]]);
 
                         if (result !== undefined) {
                             return result;
@@ -272,28 +280,53 @@ class: [
                     this.has(key) ? this.unSelect(key) : this.select(key);
                 },
 
-                handle(key) {
+                handleCheckbox(key) {
                     let item = this.searchInTree(this.formattedItems, key);
 
+                    switch (this.selectionType) {
+                        case 'individual':
+                            this.handleIndividualSelectionType(item);
+
+                            break;
+
+                        case 'hierarchical':
+                            this.handleHierarchicalSelectionType(item);
+
+                            break;
+
+                        default:
+                            this.handleHierarchicalSelectionType(item);
+
+                            break;
+                    }
+                },
+
+                handleIndividualSelectionType(item) {
+                    this.handleCurrent(item);
+                },
+
+                handleHierarchicalSelectionType(item) {
                     this.handleAncestors(item);
 
                     this.handleCurrent(item);
 
                     this.handleChildren(item);
 
-                    this.handleExtraChecks(item);
+                    if (! this.has(item[this.valueField])) {
+                        this.unSelectAllChildren(item);
+                    }
                 },
 
                 handleAncestors(item) {
                     if (item.ancestors.length) {
                         item.ancestors.forEach((ancestor) => {
-                            this.select(ancestor[this.idField]);
+                            this.select(ancestor[this.valueField]);
                         });
                     }
                 },
 
                 handleCurrent(item) {
-                    this.toggle(item[this.idField]);
+                    this.toggle(item[this.valueField]);
                 },
 
                 handleChildren(item) {
@@ -302,30 +335,10 @@ class: [
                     selectedChildrenCount ? this.unSelectAllChildren(item) : this.selectAllChildren(item);
                 },
 
-                handleExtraChecks(item) {
-                    if (this.isAcl) {
-                        if (! this.has(item[this.idField])) {
-                            this.unSelectAllChildren(item);
-                        }
-
-                        return;
-                    }
-
-                    if (item.ancestors.length) {
-                        item.ancestors.forEach((ancestor) => {
-                            let selectedChildrenCount = this.countSelectedChildren(ancestor);
-
-                            if (! selectedChildrenCount) {
-                                this.unSelect(ancestor[this.idField]);
-                            }
-                        });
-                    }
-                },
-
                 countSelectedChildren(item, selectedCount = 0) {
                     if (typeof item[this.childrenField] === 'object') {
                         for (let childKey in item[this.childrenField]) {
-                            if (this.has(item[this.childrenField][childKey][this.idField])) {
+                            if (this.has(item[this.childrenField][childKey][this.valueField])) {
                                 ++selectedCount;
                             }
 
@@ -339,7 +352,7 @@ class: [
                 selectAllChildren(item) {
                     if (typeof item[this.childrenField] === 'object') {
                         for (let childKey in item[this.childrenField]) {
-                            this.select(item[this.childrenField][childKey][this.idField]);
+                            this.select(item[this.childrenField][childKey][this.valueField]);
 
                             this.selectAllChildren(item[this.childrenField][childKey]);
                         }
@@ -349,7 +362,7 @@ class: [
                 unSelectAllChildren(item) {
                     if (typeof item[this.childrenField] === 'object') {
                         for (let childKey in item[this.childrenField]) {
-                            this.unSelect(item[this.childrenField][childKey][this.idField]);
+                            this.unSelect(item[this.childrenField][childKey][this.valueField]);
 
                             this.unSelectAllChildren(item[this.childrenField][childKey]);
                         }

diff --git a/packages/Webkul/Admin/src/Resources/views/marketing/promotions/cart-rules/create.blade.php b/packages/Webkul/Admin/src/Resources/views/marketing/promotions/cart-rules/create.blade.php
@@ -849,6 +849,7 @@ class="custom-select flex w-1/3 min:w-1/3 h-[40px] py-[6px] px-[12px] bg-white d
                         >
                             <x-admin::tree.view
                                 input-type="checkbox"
+                                selection-type="individual"
                                 ::name-field="'conditions[' + index + '][value]'"
                                 value-field="id"
                                 id-field="id"

diff --git a/packages/Webkul/Admin/src/Resources/views/marketing/promotions/cart-rules/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/marketing/promotions/cart-rules/edit.blade.php
@@ -896,6 +896,7 @@ class="inline-flex gap-x-[4px] justify-between items-center max-h-[40px] w-full
                         >
                             <x-admin::tree.view
                                 input-type="checkbox"
+                                selection-type="individual"
                                 ::name-field="'conditions[' + index + '][value]'"
                                 value-field="id"
                                 id-field="id"

diff --git a/...ages/Webkul/Admin/src/Resources/views/marketing/promotions/catalog-rules/create.blade.php b/...ages/Webkul/Admin/src/Resources/views/marketing/promotions/catalog-rules/create.blade.php
@@ -576,6 +576,7 @@ class="custom-select flex w-1/3 min:w-1/3 h-[40px] py-[6px] px-[12px] bg-white d
                         <div v-if="matchedAttribute.key == 'product|category_ids'">
                             <x-admin::tree.view
                                 input-type="checkbox"
+                                selection-type="individual"
                                 ::name-field="'conditions[' + index + '][value]'"
                                 value-field="id"
                                 id-field="id"

diff --git a/packages/Webkul/Admin/src/Resources/views/marketing/promotions/catalog-rules/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/marketing/promotions/catalog-rules/edit.blade.php
@@ -587,6 +587,7 @@ class="custom-select flex w-1/3 min:w-1/3 h-[40px] py-[6px] px-[12px] bg-white d
                         <div v-if="matchedAttribute.key == 'product|category_ids'">
                             <x-admin::tree.view
                                 input-type="checkbox"
+                                selection-type="individual"
                                 ::name-field="'conditions[' + index + '][value]'"
                                 value-field="id"
                                 id-field="id"

diff --git a/packages/Webkul/Admin/src/Resources/views/settings/roles/create.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/roles/create.blade.php
@@ -85,7 +85,6 @@ class="mb-[10px]"
                                 >
                                     <x-admin::tree.view
                                         input-type="checkbox"
-                                        is-acl="true"
                                         value-field="key"
                                         id-field="key"
                                         :items="json_encode($acl->items)"

diff --git a/packages/Webkul/Admin/src/Resources/views/settings/roles/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/roles/edit.blade.php
@@ -89,7 +89,6 @@ class="mb-[10px]"
                             >
                                 <x-admin::tree.view
                                     input-type="checkbox"
-                                    is-acl="true"
                                     value-field="key"
                                     id-field="key"
                                     :items="json_encode($acl->items)"