From 82cca545587fa8803fe35092614922bc1af3a48e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 7 Apr 2020 10:20:37 -0700
Subject: 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
---
 src/components/Global/TableFilter.vue | 93 +++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/components/Global/TableFilter.vue

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

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>
-- 
cgit v1.2.3