shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2160 from pavel-mironchik/enhance-akaunting-select

Browse Source 
Add an ability to the AkauntingSelect component to show options as is…
This commit is contained in:
Cüneyt Şentürk 2021-06-29 13:49:14 +03:00 committed by GitHub
commit fa9c8028c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
resources/assets/js/components/AkauntingSelect.vue
View File

@ -23,7 +23,7 @@
</p> </p>
</div> </div>
<div v-if="addNew.status && options.length != 0 && sortOptions.length == 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0 && sortedOptions.length == 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty"> <p class="el-select-dropdown__empty">
{{ noMatchingDataText }} {{ noMatchingDataText }}
</p> </p>
@ -62,7 +62,7 @@
</span> </span>
</template> </template>
<el-option v-if="!group" v-for="(option, index) in sortOptions" <el-option v-if="!group" v-for="(option, index) in sortedOptions"
:key="index" :key="index"
:disabled="disabledOptions.includes(option.key)" :disabled="disabledOptions.includes(option.key)"
:label="option.value" :label="option.value"
@ -73,7 +73,7 @@
<el-option-group <el-option-group
v-if="group" v-if="group"
v-for="(group_options, group_index) in sortOptions" v-for="(group_options, group_index) in sortedOptions"
:key="group_index" :key="group_index"
:label="group_options.key"> :label="group_options.key">
<el-option <el-option
@ -87,7 +87,7 @@
</el-option> </el-option>
</el-option-group> </el-option-group>
<el-option v-if="!loading && addNew.status && options.length != 0 && sortOptions.length > 0" class="el-select__footer select-add-new" disabled value=""> <el-option v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length > 0" class="el-select__footer select-add-new" disabled value="">
<div @click="onAddItem"> <div @click="onAddItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<span> <span>
@ -103,7 +103,7 @@
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span> <span slot="infoBlock" class="badge badge-success badge-resize float-right" 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" v-model="selected" class="d-none">
<option v-for="option in sortOptions" :key="option.key" :value="option.key">{{ option.value }}</option> <option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
</select> </select>
</base-input> </base-input>
@ -201,6 +201,12 @@ export default {
description: "Option Sortable type (key|value)" description: "Option Sortable type (key|value)"
}, },
sortOptions: {
type: Boolean,
default: true,
description: 'Sort options by the option_sortable prop, or sorting is made server-side',
},
model: { model: {
type: [String, Number, Array, Object], type: [String, Number, Array, Object],
default: '', default: '',
@ -287,29 +293,33 @@ export default {
selected: this.model, selected: this.model,
form: {}, form: {},
sort_options: [], sorted_options: [],
new_options: {}, new_options: {},
loading: false, loading: false,
} }
}, },
created() { created() {
this.setSortOptions(); this.setSortedOptions();
}, },
computed: { computed: {
sortOptions() { sortedOptions() {
if (this.group) { if (!this.sortOptions) {
this.sort_options.sort(this.sortBy("key")); return this.sorted_options
}
for (const [index, options] of Object.entries(this.sort_options)) { if (this.group) {
this.sorted_options.sort(this.sortBy("key"));
for (const [index, options] of Object.entries(this.sorted_options)) {
options.value.sort(this.sortBy(this.option_sortable)); options.value.sort(this.sortBy(this.option_sortable));
} }
} else { } else {
this.sort_options.sort(this.sortBy(this.option_sortable)); this.sorted_options.sort(this.sortBy(this.option_sortable));
} }
return this.sort_options; return this.sorted_options;
}, },
}, },
@ -327,7 +337,7 @@ export default {
} catch (e) { } catch (e) {
this.selected = this.model; this.selected = this.model;
} }
} }
if (this.multiple && !this.selected.length) { if (this.multiple && !this.selected.length) {
@ -360,9 +370,9 @@ export default {
} }
}, },
setSortOptions() { setSortedOptions() {
// Reset sort_options // Reset sorted_options
this.sort_options = []; this.sorted_options = [];
let created_options = (this.dynamicOptions) ? this.dynamicOptions : this.options; let created_options = (this.dynamicOptions) ? this.dynamicOptions : this.options;
@ -379,7 +389,7 @@ export default {
}); });
} }
this.sort_options.push({ this.sorted_options.push({
key: index, key: index,
value: values value: values
}); });
@ -387,13 +397,13 @@ export default {
} else { } else {
created_options.forEach(function (option, index) { created_options.forEach(function (option, index) {
if (typeof(option) == 'string') { if (typeof(option) == 'string') {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: index.toString(), key: index.toString(),
value: option value: option
}); });
} else { } else {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: option.id, key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
@ -405,7 +415,7 @@ export default {
// Option set sort_option data // Option set sort_option data
if (!Array.isArray(created_options)) { if (!Array.isArray(created_options)) {
for (const [key, value] of Object.entries(created_options)) { for (const [key, value] of Object.entries(created_options)) {
this.sort_options.push({ this.sorted_options.push({
key: key, key: key,
value: value value: value
}); });
@ -413,13 +423,13 @@ export default {
} else { } else {
created_options.forEach(function (option, index) { created_options.forEach(function (option, index) {
if (typeof(option) == 'string') { if (typeof(option) == 'string') {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: index.toString(), key: index.toString(),
value: option value: option
}); });
} else { } else {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: option.id, key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
@ -442,7 +452,7 @@ export default {
// Option changed sort_option data // Option changed sort_option data
if (this.group) { if (this.group) {
this.sort_options.forEach(function (option_group, group_index) { this.sorted_options.forEach(function (option_group, group_index) {
option_group.value.forEach(function (option, index) { option_group.value.forEach(function (option, index) {
if (this.multiple) { if (this.multiple) {
let indexs = []; let indexs = [];
@ -474,7 +484,7 @@ export default {
}, this); }, this);
}, this); }, this);
} else { } else {
this.sort_options.forEach(function (option, index) { this.sorted_options.forEach(function (option, index) {
if (this.multiple) { if (this.multiple) {
let indexs = []; let indexs = [];
let values = []; let values = [];
@ -553,7 +563,7 @@ export default {
}, },
onModal(value) { onModal(value) {
//this.setSortOptions(); //this.setSortedOptions();
let add_new = this.add_new; let add_new = this.add_new;
@ -647,7 +657,7 @@ export default {
this.form.loading = false; this.form.loading = false;
if (response.data.success) { if (response.data.success) {
this.sort_options.push({ this.sorted_options.push({
key: response.data.data[this.add_new.field.key].toString(), key: response.data.data[this.add_new.field.key].toString(),
value: response.data.data[this.add_new.field.value], value: response.data.data[this.add_new.field.value],
}); });
@ -779,7 +789,7 @@ export default {
}, },
dynamicOptions: function(options) { dynamicOptions: function(options) {
this.sort_options = []; this.sorted_options = [];
this.selected = ''; this.selected = '';
if (this.group) { if (this.group) {
@ -795,7 +805,7 @@ export default {
}); });
} }
this.sort_options.push({ this.sorted_options.push({
key: index, key: index,
value: values value: values
}); });
@ -803,13 +813,13 @@ export default {
} else { } else {
options.forEach(function (option, index) { options.forEach(function (option, index) {
if (typeof(option) == 'string') { if (typeof(option) == 'string') {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: index.toString(), key: index.toString(),
value: option value: option
}); });
} else { } else {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: option.id, key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
@ -821,7 +831,7 @@ export default {
// Option set sort_option data // Option set sort_option data
if (!Array.isArray(options)) { if (!Array.isArray(options)) {
for (const [key, value] of Object.entries(options)) { for (const [key, value] of Object.entries(options)) {
this.sort_options.push({ this.sorted_options.push({
key: key, key: key,
value: value value: value
}); });
@ -829,13 +839,13 @@ export default {
} else { } else {
options.forEach(function (option, index) { options.forEach(function (option, index) {
if (typeof(option) == 'string') { if (typeof(option) == 'string') {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: index.toString(), key: index.toString(),
value: option value: option
}); });
} else { } else {
this.sort_options.push({ this.sorted_options.push({
index: index, index: index,
key: option.id, key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name

6
resources/views/partials/form/select_group.blade.php
View File

@ -46,7 +46,7 @@
@if (!empty($attributes['visible-change'])) @if (!empty($attributes['visible-change']))
@visible-change="{{ $attributes['visible-change'] }}" @visible-change="{{ $attributes['visible-change'] }}"
@endif @endif
@if (isset($attributes['readonly'])) @if (isset($attributes['readonly']))
:readonly="{{ $attributes['readonly'] }}" :readonly="{{ $attributes['readonly'] }}"
@endif @endif
@ -67,6 +67,10 @@
no-data-text="{{ trans('general.no_data') }}" no-data-text="{{ trans('general.no_data') }}"
no-matching-data-text="{{ trans('general.no_matching_data') }}" no-matching-data-text="{{ trans('general.no_matching_data') }}"
@if (isset($attributes['sort-options']))
:sort-options="{{ $attributes['sort-options'] }}"
@endif
></akaunting-select> ></akaunting-select>
@stack($name . '_input_end') @stack($name . '_input_end')