Merge pull request #2656 from brkcvn/dynamic-options

Value checked on dynamic options for Select components

resources/assets/js/components/AkauntingSelect.vue

@@ -107,7 +107,7 @@
 
         <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected]">{{ addNew.new_text }}</span>
 
-        <select :name="name"  :id="name" v-model="selected" class="d-none">
+        <select :name="name" :id="name" class="hidden">
             <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
         </select>
     </base-input>
@@ -299,6 +299,11 @@ export default {
             default: '',
             description: "Selectbox input search placeholder text"
         },
+
+        dynamicOptionsValueCheck: {
+            type: [Boolean, String],
+            default: false,
+        },
     },
 
     data() {
@@ -350,7 +355,6 @@ export default {
             } else {
                 this.sorted_options.sort(this.sortBy(this.option_sortable));
             }
-
             return this.sorted_options;
         },
     },
@@ -865,6 +869,31 @@ export default {
                 this.setSortedOptions();
             }
         },
+
+        dynamicOptionsValue(options) {
+            if (this.dynamicOptionsValueCheck) {
+                if (this.multiple) {
+                    let selected = this.selected;
+                    this.selected = [];
+
+                    selected.forEach(function (select, index) {
+                        if (this.sorted_options.find((option) => option.key == select)) {
+                            this.selected.push(select);
+                        }
+                    }, this);
+                } else {
+                    if (!options.find((option) => option == this.selected)) {
+                        this.selected = null;
+                    }
+                }
+            } else {
+                if (this.multiple) {
+                    this.selected = [];
+                } else {
+                    this.selected = null;
+                }
+            }
+        }
     },
 
     watch: {
@@ -882,6 +911,7 @@ export default {
                     let is_string = false;
                     let pre_value = [];
 
+                    if (selected !== undefined && selected.length) {
                         selected.forEach(item => {
                             if (typeof item != 'string') {
                                 is_string = true;
@@ -891,6 +921,7 @@ export default {
                                 }
                             }
                         });
+                    }
 
                     if (is_string) {
                         this.selected = pre_value;
@@ -949,7 +980,6 @@ export default {
 
         dynamicOptions: function(options) {
             this.sorted_options = [];
-            this.selected = '';
 
             if (this.group) {
                 // Option set sort_option data
@@ -1018,6 +1048,8 @@ export default {
                         }
                     }, this);
                 }
+
+                this.dynamicOptionsValue(options);
             }
         },
     },

resources/assets/js/components/AkauntingSelectRemote.vue

@@ -104,7 +104,7 @@
 
         <span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected]">{{ addNew.new_text }}</span>
 
-        <select :name="name"  :id="name" v-model="selected" class="d-none">
+        <select :name="name"  :id="name" class="hidden">
             <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
         </select>
 
@@ -1089,6 +1089,31 @@ export default {
         },
     },
 
+    dynamicOptionsValue(options) {
+        if (this.dynamicOptionsValueCheck) {
+            if (this.multiple) {
+                let selected = this.selected;
+                this.selected = [];
+
+                selected.forEach(function (select, index) {
+                    if (this.sorted_options.find((option) => option.key == select)) {
+                        this.selected.push(select);
+                    }
+                }, this);
+            } else {
+                if (!options.find((option) => option == this.selected)) {
+                    this.selected = null;
+                }
+            }
+        } else {
+            if (this.multiple) {
+                this.selected = [];
+            } else {
+                this.selected = null;
+            }
+        }
+    },
+
     watch: {
         selected: function (selected) {
             if (!this.multiple) {
@@ -1237,6 +1262,8 @@ export default {
                         }
                     }, this);
                 }
+
+                this.dynamicOptionsValue(options);
             }
         },
     },

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

@@ -65,6 +65,12 @@
         search-text="{{ $searchText }}"
         @endif
 
+        @if (! empty($attributes['dynamic-options-value-check']))
+        dynamic-options-value-check
+        @elseif (! empty($dynamicOptionsValueCheck))
+        dynamic-options-value-check
+        @endif
+
         @if (empty($multiple))
             @if (isset($selected) || old($name))
             value="{{ old($name, $selected) }}"