diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-04-07 20:20:37 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-04-21 20:49:03 +0300 |
commit | 82cca545587fa8803fe35092614922bc1af3a48e (patch) | |
tree | 4a10d184b400740f0629133895f83eb0315b10f6 /src/components | |
parent | 1be6b41e1be3d2316abcb5dec6968383b5a6f856 (diff) | |
download | webui-vue-82cca545587fa8803fe35092614922bc1af3a48e.tar.xz |
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
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Global/TableFilter.vue | 93 | ||||
-rw-r--r-- | src/components/Mixins/TableFilterMixin.js | 23 |
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; |