diff options
| -rw-r--r-- | src/components/Global/TableFilter.vue | 65 | ||||
| -rw-r--r-- | src/components/Mixins/TableFilterMixin.js | 16 | ||||
| -rw-r--r-- | src/views/Health/EventLogs/EventLogs.vue | 1 | ||||
| -rw-r--r-- | src/views/Health/Sensors/Sensors.vue | 1 |
4 files changed, 66 insertions, 17 deletions
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(); } } 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; } diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue index f1c76164..87dcad5d 100644 --- a/src/views/Health/EventLogs/EventLogs.vue +++ b/src/views/Health/EventLogs/EventLogs.vue @@ -218,6 +218,7 @@ export default { ], tableFilters: [ { + key: 'severity', label: this.$t('pageEventLogs.table.severity'), values: ['OK', 'Warning', 'Critical'] } diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue index 879e2363..7ff5e64c 100644 --- a/src/views/Health/Sensors/Sensors.vue +++ b/src/views/Health/Sensors/Sensors.vue @@ -159,6 +159,7 @@ export default { ], tableFilters: [ { + key: 'status', label: this.$t('pageSensors.table.status'), values: ['OK', 'Warning', 'Critical'] } |