updated code visibility and streamline category type handling

resources/assets/js/mixins/global.js

@@ -228,7 +228,7 @@ export default {
                     <div class="swiper-button-prev bg-body text-white flex items-center justify-center left-0">
                         <span class="material-icons text-purple text-4xl">chevron_left</span>
                     </div>
-                    `; 
+                    `;
 
                 item.querySelector('[data-tabs-swiper]').innerHTML = html;
                 slides_view = Number(item.getAttribute('data-swiper')) != 0 ? Number(item.getAttribute('data-swiper'))  : slides_view;
@@ -301,6 +301,28 @@ export default {
             this.form[key] = event.target.files[0];
         },
 
+        isCategoryCodeFieldVisible() {
+            if (!this.form || !this.form.type || !this.form.type_codes) {
+                return false;
+            }
+
+            let type_codes = this.form.type_codes;
+
+            if (typeof type_codes === 'string') {
+                try {
+                    type_codes = JSON.parse(type_codes);
+                } catch (e) {
+                    return false;
+                }
+            }
+
+            if (typeof type_codes[this.form.type] === 'undefined') {
+                return true;
+            }
+
+            return !Boolean(type_codes[this.form.type]);
+        },
+
         // Bulk Action Select all
         onSelectAllBulkAction() {
             this.bulk_action.selectAll();

resources/assets/js/views/settings/categories.js

@@ -31,31 +31,15 @@ const app = new Vue({
             bulk_action: new BulkAction('categories'),
             categoriesBasedTypes: null,
             selected_type: true,
-            type_codes: {},
-            show_code_field: false
-        }
-    },
-
-    mounted() {
-        if (typeof type_codes !== 'undefined') {
-            this.type_codes = type_codes;
-
-            if (this.form.type) {
-                this.show_code_field = this.type_codes[this.form.type] || false;
-            }
         }
     },
 
     methods: {
-        changeCategories(event) {
+        updateParentCategories(event) {
             if (event === '') {
                 return;
             }
 
-            if (this.type_codes[event] !== undefined) {
-                this.show_code_field = this.type_codes[event];
-            }
-
             if (typeof JSON.parse(this.form.categories)[event] === 'undefined') {
                 this.categoriesBasedTypes = [];
 

resources/views/components/form/group/category.blade.php

@@ -27,7 +27,7 @@
     >
         <template #option="{option}">
             <div class="flex items-center">
-                <span class="w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
+                <span class="{{ (! $group) ? 'ltr:ml-2 rtl:mr-2 ' : '' }}w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
 
                 @if ($option_field['value'] == 'title')
                 <span>@{{ option.option.title }}</span>
@@ -63,7 +63,7 @@
     >
         <template #option="{option}">
             <div class="flex items-center">
-                <span class="w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
+                <span class="{{ (! $group) ? 'ltr:ml-2 rtl:mr-2 ' : '' }}w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
 
                 @if ($option_field['value'] == 'title')
                 <span>@{{ option.option.title }}</span>
@@ -99,7 +99,7 @@
     >
         <template #option="{option}">
             <div class="flex items-center">
-                <span class="w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
+                <span class="{{ (! $group) ? 'ltr:ml-2 rtl:mr-2 ' : '' }}w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
 
                 @if ($option_field['value'] == 'title')
                 <span>@{{ option.option.title }}</span>
@@ -129,7 +129,7 @@
     >
         <template #option="{option}">
             <div class="flex items-center">
-                <span class="w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
+                <span class="{{ (! $group) ? 'ltr:ml-2 rtl:mr-2 ' : '' }}w-5 h-4 rounded-full" :style="{backgroundColor: option.option.color_hex_code}"></span>
 
                 @if ($option_field['value'] == 'title')
                 <span>@{{ option.option.title }}</span>

resources/views/modals/categories/create.blade.php

@@ -6,14 +6,14 @@
 
         <x-form.group.select name="parent_id" label="{{ trans('general.parent') . ' ' . trans_choice('general.categories', 1) }}" :options="$categories" not-required sort-options="false" searchable form-group-class="col-span-6" />
 
-        @if (!empty($types) && count($types) > 1)
+        @if (! empty($types) && count($types) > 1)
-            <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" value="{{ $type }}" form-group-class="col-span-6" change="changeCategories" />
+            <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" value="{{ $type }}" form-group-class="col-span-6" :group="$type_group" />
 
-            <x-form.group.text name="code" label="{{ trans('general.code') }}" form-group-class="col-span-6" v-show="show_code_field" />
+            <x-form.group.text name="code" label="{{ trans('general.code') }}" form-group-class="col-span-6" v-show="isCategoryCodeFieldVisible()" />
         @else
             <x-form.input.hidden name="type" value="{{ $type }}" />
 
-            @if ($show_code_field)
+            @if (empty($hide_code_types[$type]) || ! $hide_code_types[$type])
                 <x-form.group.text name="code" label="{{ trans('general.code') }}" form-group-class="col-span-6" />
             @endif
         @endif
@@ -21,12 +21,6 @@
         <x-form.group.textarea name="description" label="{{ trans('general.description') }}" not-required />
 
         <x-form.input.hidden name="enabled" value="1" />
+        <x-form.input.hidden name="type_codes" value="{{ json_encode($hide_code_types) }}" />
     </div>
 </x-form>
-
-<script type="text/javascript">
-    if (typeof type_codes === 'undefined') {
-        var type_codes = {!! json_encode($type_codes) !!};
-    }
-</script>
-

resources/views/settings/categories/create.blade.php

@@ -22,15 +22,16 @@
 
                         <x-form.group.color name="color" label="{{ trans('general.color') }}" />
 
-                        <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" :selected="config('general.types')" change="changeCategories" group />
+                        <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" :selected="config('general.types')" change="updateParentCategories" :group="$type_group" />
 
-                        <x-form.group.text name="code" label="{{ trans('general.code') }}" v-show="show_code_field" />
+                        <x-form.group.text name="code" label="{{ trans('general.code') }}" v-show="isCategoryCodeFieldVisible()" />
 
                         <x-form.group.select name="parent_id" label="{{ trans('general.parent') . ' ' . trans_choice('general.categories', 1) }}" :options="[]" not-required dynamicOptions="categoriesBasedTypes" sort-options="false" v-disabled="selected_type" />
 
                         <x-form.group.textarea name="description" label="{{ trans('general.description') }}" not-required />
 
                         <x-form.input.hidden name="categories" value="{{ json_encode($categories) }}" />
+                        <x-form.input.hidden name="type_codes" value="{{ json_encode($hide_code_types) }}" />
                     </x-slot>
                 </x-form.section>
 
@@ -43,11 +44,5 @@
         </x-form.container>
     </x-slot>
 
-    @push('scripts_start')
-        <script type="text/javascript">
-            var type_codes = {!! json_encode($type_codes) !!};
-        </script>
-    @endpush
-
     <x-script folder="settings" file="categories" />
 </x-layouts.admin>

resources/views/settings/categories/edit.blade.php

@@ -14,22 +14,22 @@
                     <x-slot name="body">
                         <x-form.group.text name="name" label="{{ trans('general.name') }}" />
 
-
                         <x-form.group.color name="color" label="{{ trans('general.color') }}" />
 
                         @if ($type_disabled)
-                            <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" v-disabled="true" group />
+                            <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" v-disabled="true" :group="$type_group" />
 
                             <input type="hidden" name="type" value="{{ $category->type }}" />
                         @else
-                            <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" change="changeCategories" group />
+                            <x-form.group.select name="type" label="{{ trans_choice('general.types', 1) }}" :options="$types" change="updateParentCategories" :group="$type_group" />
 
-                            <x-form.group.text name="code" label="{{ trans('general.code') }}" v-show="show_code_field" />
+                            <x-form.group.text name="code" label="{{ trans('general.code') }}" v-show="isCategoryCodeFieldVisible()" />
 
                             <x-form.group.select name="parent_id" label="{{ trans('general.parent') . ' ' . trans_choice('general.categories', 1) }}" :options="$parent_categories" not-required dynamicOptions="categoriesBasedTypes" sort-options="false" />
 
                             <x-form.input.hidden name="parent_category_id" value="{{ $category->parent_id }}" />
                             <x-form.input.hidden name="categories" value="{{ json_encode($categories) }}" />
+                            <x-form.input.hidden name="type_codes" value="{{ json_encode($hide_code_types) }}" />
                         @endif
 
                         <x-form.group.textarea name="description" label="{{ trans('general.description') }}" not-required />
@@ -37,7 +37,7 @@
                 </x-form.section>
 
                 @if (! $type_disabled)
-                <x-form.group.switch name="enabled" label="{{ trans('general.enabled') }}" />
+                    <x-form.group.switch name="enabled" label="{{ trans('general.enabled') }}" />
                 @endif
 
                 @can('update-settings-categories')
@@ -51,11 +51,5 @@
         </x-form.container>
     </x-slot>
 
-    @push('scripts_start')
-        <script type="text/javascript">
-            var type_codes = {!! json_encode($type_codes) !!};
-        </script>
-    @endpush
-
     <x-script folder="settings" file="categories" />
 </x-layouts.admin>

resources/views/settings/categories/index.blade.php

@@ -136,8 +136,8 @@
                                         @endif
 
                                         <x-table.td class="{{ $name_class }}">
-                                            <div class="flex items-center">
+                                            @if ($item->sub_categories->count())
-                                                @if ($item->sub_categories->count())
+                                                <div class="flex items-center">
                                                     <x-tooltip id="tooltip-category-{{ $item->id }}" placement="bottom" message="{{ trans('categories.collapse') }}">
                                                         <button
                                                             type="button"
@@ -152,7 +152,7 @@
                                                     <div class="flex items-center font-bold">
                                                         {{ $item->name }}
                                                     </div>
-                                            </div>
+                                                </div>
                                             @else
                                                 <div class="flex items-center">
                                                     <span class="material-icons text-{{ $item->color }}" class="text-3xl" style="color:{{ $item->color }};">circle</span>

resources/views/settings/categories/sub_category.blade.php

@@ -114,6 +114,7 @@
         @php
             $sub_category->load(['sub_categories']);
         @endphp
+
         @include('settings.categories.sub_category', ['parent_category' => $parent_category, 'sub_category' => $sub_category, 'tree_level' => $tree_level, 'hide_code_column' => $hide_code_column, 'name_class' => $name_class])
     @endforeach
 @endif