diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Global/TableFilter.vue | 53 |
1 files changed, 17 insertions, 36 deletions
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue index bf729522..7b87942f 100644 --- a/src/components/Global/TableFilter.vue +++ b/src/components/Global/TableFilter.vue @@ -34,7 +34,6 @@ :key="value" :value="value" :data-test-id="`tableFilter-checkbox-${value}`" - @change="onChange($event, { filter, value })" > {{ value }} </b-form-checkbox> @@ -72,53 +71,35 @@ export default { data() { return { dropdownVisible: false, - activeFilters: this.filters.map(({ key }) => { - return { - key, - values: [], - }; - }), + tags: [], }; }, - computed: { + watch: { tags: { - get() { - return this.activeFilters.reduce((arr, filter) => { - return [...arr, ...filter.values]; - }, []); - }, - set(value) { - return value; + handler() { + this.emitChange(); }, + deep: true, }, }, methods: { - removeTag(tag) { - this.activeFilters.forEach((filter) => { - filter.values = filter.values.filter((val) => val !== tag); - }); - this.emitChange(); + removeTag(removedTag) { + this.tags = this.tags.filter((tag) => tag !== removedTag); }, clearAllTags() { - this.activeFilters.forEach((filter) => { - filter.values = []; - }); - this.emitChange(); + this.tags = []; }, emitChange() { - this.$emit('filter-change', { - activeFilters: this.activeFilters, - }); - }, - 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)); - } + const activeFilters = this.filters.map(({ key, values }) => { + const activeValues = values.filter( + (value) => this.tags.indexOf(value) !== -1 + ); + return { + key, + values: activeValues, + }; }); - this.emitChange(); + this.$emit('filter-change', { activeFilters }); }, }, }; |