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, 11 insertions, 5 deletions

diff --git a/src/components/Mixins/TableFilterMixin.js b/src/components/Mixins/TableFilterMixin.js
index 58e70c57..7cb7007d 100644
--- a/src/components/Mixins/TableFilterMixin.js
+++ b/src/components/Mixins/TableFilterMixin.js
@@ -3,13 +3,19 @@ import { includes } from 'lodash';
 const TableFilterMixin = {
   methods: {
     getFilteredTableData(tableData = [], filters = []) {
-      if (filters.length === 0) return tableData;
-      // will return all items that match
-      // any of the filter tags (not all)
+      const filterItems = filters.reduce((arr, filter) => {
+        return [...arr, ...filter.values];
+      }, []);
+      // If no filters are active, then return all table data
+      if (filterItems.length === 0) return tableData;
+
+      // Check if row property value is included in list of
+      // active filters
       return tableData.filter(row => {
         let returnRow = false;
-        for (const filter of filters) {
-          if (includes(row, filter)) {
+        for (const { key, values } of filters) {
+          const rowProperty = row[key];
+          if (rowProperty && includes(values, rowProperty)) {
             returnRow = true;
             break;
           }