Skip to content

Commit

Permalink
Add an ability to the AkauntingSelect component to show options as is…
Browse files Browse the repository at this point in the history 
…, without sorting them.
  • Loading branch information
@pavel-mironchik
pavel-mironchik committed Jun 29, 2021
1 parent ba03cb4 commit 47d67b7
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 34 deletions.
76 changes: 43 additions & 33 deletions resources/assets/js/components/AkauntingSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</p>
</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">
{{ noMatchingDataText }}
</p>
Expand Down Expand Up @@ -62,7 +62,7 @@
</span>
</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"
:disabled="disabledOptions.includes(option.key)"
:label="option.value"
Expand All @@ -73,7 +73,7 @@

<el-option-group
v-if="group"
v-for="(group_options, group_index) in sortOptions"
v-for="(group_options, group_index) in sortedOptions"
:key="group_index"
:label="group_options.key">
<el-option
Expand All @@ -87,7 +87,7 @@
</el-option>
</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">
<i class="fas fa-plus"></i>
<span>
Expand All @@ -103,7 +103,7 @@
<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">
<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>

</base-input>
Expand Down Expand Up @@ -201,6 +201,12 @@ export default {
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: {
type: [String, Number, Array, Object],
default: '',
Expand Down Expand Up @@ -287,29 +293,33 @@ export default {
selected: this.model,
form: {},
sort_options: [],
sorted_options: [],
new_options: {},
loading: false,
}
},
created() {
this.setSortOptions();
this.setSortedOptions();
},
computed: {
sortOptions() {
sortedOptions() {
if (!this.sortOptions) {
return this.sorted_options
}
if (this.group) {
this.sort_options.sort(this.sortBy("key"));
this.sorted_options.sort(this.sortBy("key"));
for (const [index, options] of Object.entries(this.sort_options)) {
for (const [index, options] of Object.entries(this.sorted_options)) {
options.value.sort(this.sortBy(this.option_sortable));
}
} 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;
},
},
Expand All @@ -327,7 +337,7 @@ export default {
} catch (e) {
this.selected = this.model;
}
}
if (this.multiple && !this.selected.length) {
Expand Down Expand Up @@ -360,9 +370,9 @@ export default {
}
},
setSortOptions() {
// Reset sort_options
this.sort_options = [];
setSortedOptions() {
// Reset sorted_options
this.sorted_options = [];
let created_options = (this.dynamicOptions) ? this.dynamicOptions : this.options;
Expand All @@ -379,21 +389,21 @@ export default {
});
}
this.sort_options.push({
this.sorted_options.push({
key: index,
value: values
});
}
} else {
created_options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
Expand All @@ -405,21 +415,21 @@ export default {
// Option set sort_option data
if (!Array.isArray(created_options)) {
for (const [key, value] of Object.entries(created_options)) {
this.sort_options.push({
this.sorted_options.push({
key: key,
value: value
});
}
} else {
created_options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
Expand All @@ -442,7 +452,7 @@ export default {
// Option changed sort_option data
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) {
if (this.multiple) {
let indexs = [];
Expand Down Expand Up @@ -474,7 +484,7 @@ export default {
}, this);
}, this);
} else {
this.sort_options.forEach(function (option, index) {
this.sorted_options.forEach(function (option, index) {
if (this.multiple) {
let indexs = [];
let values = [];
Expand Down Expand Up @@ -553,7 +563,7 @@ export default {
},
onModal(value) {
//this.setSortOptions();
//this.setSortedOptions();
let add_new = this.add_new;
Expand Down Expand Up @@ -647,7 +657,7 @@ export default {
this.form.loading = false;
if (response.data.success) {
this.sort_options.push({
this.sorted_options.push({
key: response.data.data[this.add_new.field.key].toString(),
value: response.data.data[this.add_new.field.value],
});
Expand Down Expand Up @@ -779,7 +789,7 @@ export default {
},
dynamicOptions: function(options) {
this.sort_options = [];
this.sorted_options = [];
this.selected = '';
if (this.group) {
Expand All @@ -795,21 +805,21 @@ export default {
});
}
this.sort_options.push({
this.sorted_options.push({
key: index,
value: values
});
}
} else {
options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
Expand All @@ -821,21 +831,21 @@ export default {
// Option set sort_option data
if (!Array.isArray(options)) {
for (const [key, value] of Object.entries(options)) {
this.sort_options.push({
this.sorted_options.push({
key: key,
value: value
});
}
} else {
options.forEach(function (option, index) {
if (typeof(option) == 'string') {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: index.toString(),
value: option
});
} else {
this.sort_options.push({
this.sorted_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
Expand Down
6 changes: 5 additions & 1 deletion resources/views/partials/form/select_group.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class="{{ $col }}{{ isset($attributes['required']) ? ' required' : '' }}{{ isset
@if (!empty($attributes['visible-change']))
@visible-change="{{ $attributes['visible-change'] }}"
@endif

@if (isset($attributes['readonly']))
:readonly="{{ $attributes['readonly'] }}"
@endif
Expand All @@ -67,6 +67,10 @@ class="{{ $col }}{{ isset($attributes['required']) ? ' required' : '' }}{{ isset

no-data-text="{{ trans('general.no_data') }}"
no-matching-data-text="{{ trans('general.no_matching_data') }}"

@if (isset($attributes['sort-options']))
:sort-options="{{ $attributes['sort-options'] }}"
@endif
></akaunting-select>

@stack($name . '_input_end')

0 comments on commit 47d67b7

Please sign in to comment.