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