diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-17 20:31:22 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-11-25 09:26:30 +0300 |
commit | 8a8b3e7033592d1b2ab9fd6f8c9130acc1f85d19 (patch) | |
tree | ee2c0fbd231ec1078f4fca92c2e471ac57a8937b /src/components | |
parent | 978807de2d5a11860b74f1f97dc0d915ee5c9a5e (diff) | |
download | webui-vue-8a8b3e7033592d1b2ab9fd6f8c9130acc1f85d19.tar.xz |
Fix TableFilter component
Updates to the event values passed by BootstrapVue checkbox
components required changes to the custom component.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic6b1f3c22ff4c056b11a572777fc2f589f121676
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 }); }, }, }; |