feat: tree view improved

devansh-webkul · Dec 9, 2023 · 56024a1 · 56024a1
1 parent dde9414
commit 56024a1
Show file tree

Hide file tree

Showing 10 changed files with 413 additions and 620 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
@@ -32,7 +32,6 @@
 
             <template v-else>
                 <x-admin::tree.view
-                    input-type="checkbox"
                     name-field="categories"
                     id-field="id"
                     value-field="id"
@@ -76,4 +75,4 @@
             }
         });
     </script>
-@endpushOnce
+@endpushOnce
diff --git a/packages/Webkul/Admin/src/Resources/views/components/example.blade.php b/packages/Webkul/Admin/src/Resources/views/components/example.blade.php
@@ -48,7 +48,7 @@
         </option>
     </x-admin::form.control-group.control>
 
-    <x-admin::form.control-group.error 
+    <x-admin::form.control-group.error
         control-name="column"
     >
     </x-admin::form.control-group.error>
@@ -225,21 +225,21 @@
 <x-admin::seo/>
 
 <!-- Star Rating Component -->
-<x-admin::star-rating 
+<x-admin::star-rating
     :is-editable="false"
     :value="$review->rating"
 >
 </x-admin::star-rating>
 
 <!-- Exportdatagrid Component-->
-<x-admin::datagrid.export 
+<x-admin::datagrid.export
     src=""
 >
 </x-admin::datagrid.export>
 
 <!-- Datagrid Component -->
-<x-admin::datagrid 
-    :src="route('admin.sales.orders.index')" 
+<x-admin::datagrid
+    :src="route('admin.sales.orders.index')"
     :isMultiRow="true"
 >
 </x-admin::datagrid>
@@ -264,7 +264,6 @@
 <!-- Tree Component -->
 
 <x-admin::tree.view
-    input-type="checkbox"
     name-field="categories"
     id-field="id"
     value-field="id"
@@ -273,4 +272,4 @@
     behavior="no"
     :fallback-locale="config('app.fallback_locale')"
 >
-</x-admin::tree.view>
+</x-admin::tree.view>
diff --git a/packages/Webkul/Admin/src/Resources/views/components/tree/checkbox.blade.php b/packages/Webkul/Admin/src/Resources/views/components/tree/checkbox.blade.php
@@ -6,8 +6,8 @@ class="inline-flex gap-[10px] w-max p-[6px] items-center cursor-pointer select-n
         >
             <input
                 type="checkbox"
-                :name="[nameField + '[]']"
-                :value="modelValue"
+                :name="[name + '[]']"
+                value=""
                 :id="id"
                 class="hidden peer"
                 @change="inputChanged()"
@@ -31,50 +31,48 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
 
             name: 'v-tree-checkbox',
 
-            props: ['id', 'label', 'nameField', 'modelValue', 'inputValue', 'value', 'isAcl'],
+            props: ['id', 'label', 'name', 'value', 'isAcl'],
 
             computed: {
                 isMultiple () {
                     return Array.isArray(this.internalValue);
                 },
 
                 isActive () {
-                    let value = this.value;
                     let input = this.internalValue;
+                    let value = this.value;
 
                     if (this.isMultiple) {
                         return input.some(item => this.valueComparator(item, value));
                     }
 
                     return value ? this.valueComparator(value, input) : Boolean(input);
                 },
-
-                internalValue: {
-                    get () {
-                        return this.lazyValue;
-                    },
-
-                    set (val) {
-                        this.lazyValue = val;
-                    }
-                }
             },
 
-            data: vm => ({
-                lazyValue: vm.inputValue,
-            }),
-
-            watch: {
-                inputValue (val) {
-                    this.internalValue = val;
-                }
+            mounted() {
+                console.log(
+                    // this.id,
+                    // this.label,
+                    // this.name,
+                    // this.value,
+                    // this.isAcl,
+                );
             },
 
             methods: {
                 inputChanged () {
                     let value = this.value;
                     let input = this.internalValue;
 
+                    console.log(
+                        // this.id,
+                        // this.label,
+                        // this.name,
+                        // this.value,
+                        // this.isAcl,
+                    );
+
                     if (this.isMultiple) {
                         let length = input.length;
 
@@ -86,8 +84,6 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
                     } else {
                         input = !input;
                     }
-
-                    this.$emit('input-change', input);
                 },
 
                 valueComparator (a, b) {