From 0045400cf52a8ba34d24784d718ae69c3036302e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Mon, 22 Jun 2020 09:14:05 -0700
Subject: 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
---
 src/components/Global/TableFilter.vue | 65 ++++++++++++++++++++++++++++-------
 1 file changed, 53 insertions(+), 12 deletions(-)

(limited to 'src/components/Global/TableFilter.vue')

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();
     }
   }
-- 
cgit v1.2.3