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

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 });
     },
   },
 };