Refactor global TableFilter component and mixin

Add key property to TableFilter component to make sure filtering
is based on specific row property. Previously, the table filter
was checking all row properties for matches.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I589886a0d487ac3ab8def585cc7286e61992afdb

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