Create TableFilter component

Global TableFilter component and TableFilterMixin can be used
with any table. The TableFilterMixin will return filtered
data with items that match any of the filter tags.

When the table search component is built, it should use the
BoostrapVue Table :filter prop.

- Filter by status added to Sensors table

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

2 files changed, 116 insertions, 0 deletions

diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
new file mode 100644
index 00000000..d466d4e0
--- /dev/null
+++ b/src/components/Global/TableFilter.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="table-filter d-inline-block">
+    <p class="d-inline-block mb-0">
+      <b-badge v-for="(tag, index) in tags" :key="index" pill>
+        {{ tag }}
+        <b-button-close
+          :disabled="dropdownVisible"
+          :aria-hidden="true"
+          @click="removeTag(index)"
+        />
+      </b-badge>
+    </p>
+    <b-dropdown
+      variant="link"
+      no-caret
+      right
+      @hide="dropdownVisible = false"
+      @show="dropdownVisible = true"
+    >
+      <template v-slot:button-content>
+        <icon-filter />
+        {{ $t('global.action.filter') }}
+      </template>
+      <b-dropdown-form @change="onChange">
+        <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>
+        </b-form-group>
+      </b-dropdown-form>
+      <b-dropdown-item-button variant="primary" @click="clearAllTags">
+        {{ $t('global.action.clearAll') }}
+      </b-dropdown-item-button>
+    </b-dropdown>
+  </div>
+</template>
+
+<script>
+import IconFilter from '@carbon/icons-vue/es/settings--adjust/20';
+
+export default {
+  name: 'TableFilter',
+  components: { IconFilter },
+  props: {
+    filters: {
+      type: Array,
+      default: () => [],
+      validator: prop => {
+        return prop.every(
+          filter =>
+            filter.hasOwnProperty('label') && filter.hasOwnProperty('values')
+        );
+      }
+    }
+  },
+  data() {
+    return {
+      tags: [],
+      dropdownVisible: false
+    };
+  },
+  methods: {
+    removeTag(index) {
+      this.tags = this.tags.filter((_, i) => i !== index);
+      this.emitChange();
+    },
+    clearAllTags() {
+      this.tags = [];
+      this.emitChange();
+    },
+    emitChange() {
+      this.$emit('filterChange', {
+        activeFilters: this.tags
+      });
+    },
+    onChange() {
+      this.emitChange();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+p {
+  font-size: 1.2rem;
+}
+.badge {
+  margin-right: $spacer / 2;
+}
+</style>
diff --git a/src/components/Mixins/TableFilterMixin.js b/src/components/Mixins/TableFilterMixin.js
new file mode 100644
index 00000000..25c7497a
--- /dev/null
+++ b/src/components/Mixins/TableFilterMixin.js
@@ -0,0 +1,23 @@
+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)
+      return tableData.filter(row => {
+        let returnRow = false;
+        for (const filter of filters) {
+          if (includes(row, filter)) {
+            returnRow = true;
+            break;
+          }
+        }
+        return returnRow;
+      });
+    }
+  }
+};
+
+export default TableFilterMixin;