diff options
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/TableFilter.vue | 65 |
1 files changed, 53 insertions, 12 deletions
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue index 8d264fb4..f2167a06 100644 --- a/src/components/Global/TableFilter.vue +++ b/src/components/Global/TableFilter.vue @@ -6,7 +6,7 @@ <b-button-close :disabled="dropdownVisible" :aria-hidden="true" - @click="removeTag(index)" + @click="removeTag(tag)" /> </b-badge> </p> @@ -21,13 +21,21 @@ <icon-filter /> {{ $t('global.action.filter') }} </template> - <b-dropdown-form @change="onChange"> + <b-dropdown-form> <b-form-group v-for="(filter, index) of filters" :key="index" :label="filter.label" > - <b-form-checkbox-group v-model="tags" :options="filter.values"> + <b-form-checkbox-group v-model="tags"> + <b-form-checkbox + v-for="value in filter.values" + :key="value" + :value="value" + @change="onChange($event, { filter, value })" + > + {{ value }} + </b-form-checkbox> </b-form-checkbox-group> </b-form-group> </b-dropdown-form> @@ -50,33 +58,66 @@ export default { default: () => [], validator: prop => { return prop.every( - filter => - filter.hasOwnProperty('label') && filter.hasOwnProperty('values') + filter => 'label' in filter && 'values' in filter && 'key' in filter ); } } }, data() { return { - tags: [], - dropdownVisible: false + dropdownVisible: false, + activeFilters: this.filters.map(({ key }) => { + return { + key, + values: [] + }; + }) }; }, + computed: { + tags: { + get() { + return this.activeFilters.reduce((arr, filter) => { + return [...arr, ...filter.values]; + }, []); + }, + set(value) { + return value; + } + } + }, methods: { - removeTag(index) { - this.tags = this.tags.filter((_, i) => i !== index); + removeTag(tag) { + this.activeFilters.forEach(filter => { + filter.values = filter.values.filter(val => val !== tag); + }); this.emitChange(); }, clearAllTags() { - this.tags = []; + this.activeFilters.forEach(filter => { + filter.values = []; + }); this.emitChange(); }, emitChange() { this.$emit('filterChange', { - activeFilters: this.tags + activeFilters: this.activeFilters }); }, - onChange() { + onChange( + checked, + { + filter: { key }, + value + } + ) { + this.activeFilters.forEach(filter => { + if (filter.key === key) { + checked + ? filter.values.push(value) + : (filter.values = filter.values.filter(val => val !== value)); + } + }); this.emitChange(); } } |