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
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index 8d264fb..f2167a0 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 @@
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 58e70c5..7cb7007 100644
--- a/src/components/Mixins/TableFilterMixin.js
+++ b/src/components/Mixins/TableFilterMixin.js
@@ -3,13 +3,19 @@
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 f1c7616..87dcad5 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -218,6 +218,7 @@
],
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 879e236..7ff5e64 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -159,6 +159,7 @@
],
tableFilters: [
{
+ key: 'status',
label: this.$t('pageSensors.table.status'),
values: ['OK', 'Warning', 'Critical']
}