diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue index 2fc2bdd26..ea0142b77 100644 --- a/resources/assets/js/components/AkauntingSelect.vue +++ b/resources/assets/js/components/AkauntingSelect.vue @@ -1,7 +1,5 @@ @@ -808,31 +139,42 @@ export default { default: '', description: "Selectbox label text" }, + placeholder: { type: String, default: '', description: "Selectbox input placeholder text" }, + formClasses: { type: Array, default: null, description: "Selectbox input class name" }, + formError: { type: String, default: null, description: "Selectbox input error message" }, + + icon: { + type: String, + description: "Prepend icon (left)" + }, + name: { type: String, default: null, description: "Selectbox attribute name" }, + value: { type: [String, Number, Array, Object], default: '', description: "Selectbox selected value" }, + options: null, option_sortable: { @@ -847,11 +189,6 @@ export default { description: "Selectbox selected model" }, - icon: { - type: String, - description: "Prepend icon (left)" - }, - addNew: { type: Object, default: function () { @@ -873,21 +210,25 @@ export default { default: false, description: "Selectbox option group status" }, + multiple: { type: Boolean, default: false, description: "Multible feature status" }, + readonly: { type: Boolean, default: false, description: "Selectbox disabled status" }, + disabled: { type: Boolean, default: false, description: "Selectbox disabled status" }, + collapse: { type: Boolean, default: false, @@ -899,6 +240,7 @@ export default { default: 'No Data', description: "Selectbox empty options message" }, + noMatchingDataText: { type: String, default: 'No Matchign Data', @@ -914,72 +256,75 @@ export default { path: this.addNew.path, type: this.addNew.type, // modal, inline field: this.addNew.field, - buttons: this.addNew.buttons + buttons: this.addNew.buttons, }, - add_new_text: this.addNew.text, - new_text: this.addNew.new_text, - selectOptions: this.options, - real_model: this.model, add_new_html: '', - form: {}, - new_options: false, - couunt: 1, + + selected: this.model, + + sort_options: [], + new_options: {}, } }, created() { - /* - if (this.group != true && Object.keys(this.options).length) { - let sortable = []; - let option_sortable = this.option_sortable; - - for (var option_key in this.options) { - sortable.push({ - 'key' : option_key, - 'value': this.options[option_key] + // Option set sort_option data + if (Object.keys(this.options).length) { + for (const [key, value] of Object.entries(this.options)) { + this.sort_options.push({ + key: key, + value: value }); } - - if (option_sortable == 'value') { - sortable.sort(function(a, b) { - var sortableA = a[option_sortable].toUpperCase(); - var sortableB = b[option_sortable].toUpperCase(); - - let comparison = 0; - - if (sortableA > sortableB) { - comparison = 1; - } else if (sortableA < sortableB) { - comparison = -1; - } - - return comparison; + } else { + this.options.forEach(function (option, index) { + this.sort_options.push({ + key: option, + value: index }); - } - - this.options = sortable; + }, this); } - */ + }, - this.new_options = {}; + computed: { + sortOptions() { + this.sort_options.sort(function (a, b) { + var nameA = a.value.toUpperCase(); // ignore upper and lowercase + var nameB = b.value.toUpperCase(); // ignore upper and lowercase + + if (nameA < nameB) { + return -1; + } + + if (nameA > nameB) { + return 1; + } + + // names must be equal + return 0; + }); + + return this.sort_options; + }, }, mounted() { - this.real_model = this.value; + // Check Here.. + this.selected = this.value; if (this.model.length) { if (eval(this.model) !== undefined) { - this.real_model = eval(this.model); + this.selected = eval(this.model); } else { - this.real_model = this.model; + this.selected = this.model; } } - if (this.multiple && !this.real_model.length) { - this.real_model = []; + if (this.multiple && !this.selected.length) { + this.selected = []; } - this.$emit('interface', this.real_model); + this.$emit('interface', this.selected); setTimeout(function() { this.change(); @@ -988,30 +333,29 @@ export default { methods: { change() { - if (typeof(this.real_model) === 'object' && typeof(this.real_model.type) !== 'undefined') { - return false; - } + this.$emit('interface', this.selected); - this.$emit('interface', this.real_model); - this.$emit('change', this.real_model); + this.$emit('change', this.selected); + }, - //this.$children[0].$children[0].$emit('keydown.native.tab'); - //this.$children[0].$children[0].handleMenuEnter(); + visibleChange(event) { + this.$emit('visible-change', event); + }, - this.$children[0].$children[0].visible = false; + removeTag(event) { + this.$emit('remove-tag', event); + }, - /* - this.$children[0].$children[0].setSoftFocus(); - if (this.$children[0].$children[0].visible) return; + clear(event) { + this.$emit('clear', event); + }, - let option = {}; + blur(event) { + this.$emit('blur', event); + }, - option.value = this.real_model; - - this.$children[0].$children[0].$nextTick(() => { - this.$children[0].$children[0].scrollToOption(option); - }); - */ + focus(event) { + this.$emit('focus', event); }, async onAddItem() { @@ -1129,17 +473,17 @@ export default { this.form.loading = false; if (response.data.success) { - if (!Object.keys(this.options).length) { - this.selectOptions = {}; - } + this.sort_options.push({ + key: response.data.data[this.add_new.field.key].toString(), + value: response.data.data[this.add_new.field.value], + }); - this.selectOptions[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value]; this.new_options[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value]; if (this.multiple) { - this.real_model.push(response.data.data[this.add_new.field.key].toString()); + this.selected.push(response.data.data[this.add_new.field.key].toString()); } else { - this.real_model = response.data.data[this.add_new.field.key].toString(); + this.selected = response.data.data[this.add_new.field.key].toString(); } this.add_new.show = false; @@ -1179,63 +523,6 @@ export default { }, }, - - watch: { - options: function (options) { - // update options - this.selectOptions = options; - - if (Object.keys(this.new_options).length) { - if (!Object.keys(this.options).length) { - this.selectOptions = {}; - } - - for (let [key, value] of Object.entries(this.new_options)) { - if (!this.selectOptions[key]) { - this.selectOptions[key] = value; - } - } - } - }, - - real_model: function (value) { - if (this.multiple) { - return; - } - - if (this.real_model != value) { - this.change(); - } - - let e = $.Event('keyup'); - e.keyCode= 9; // tab - $('#' + this.name).trigger(e); - - let event = new window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key - - window.dispatchEvent(event); - }, - - value: function (value) { - if (this.multiple) { - this.real_model = value; - } else { - this.real_model = value.toString(); - } - - this.change(); - }, - - model: function (value) { - if (this.multiple) { - this.real_model = value; - } else { - this.real_model = value.toString(); - } - - this.change(); - } - }, } @@ -1283,4 +570,8 @@ export default { margin-right: 35px; position: relative; } + + .badge.badge-pill.badge-success { + border-radius: 0.375rem; + }