Add table search filter clear button
- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separate commit to match
style guide
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I18f2e01c28c00c7e7b2ad1af924070241caf36a5
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 97116ca..ec7c163 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -2,7 +2,10 @@
<page-section :section-title="$t('pageHardwareStatus.dimmSlot')">
<b-row>
<b-col sm="6" md="5" xl="4">
- <search @changeSearch="onChangeSearchInput" />
+ <search
+ @changeSearch="onChangeSearchInput"
+ @clearSearch="onClearSearchInput"
+ />
</b-col>
<b-col sm="6" md="3" xl="2">
<table-cell-count
@@ -70,10 +73,11 @@
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import Search from '@/components/Global/Search';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
export default {
components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
- mixins: [TableDataFormatterMixin, TableSortMixin],
+ mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
data() {
return {
fields: [
@@ -108,7 +112,6 @@
sortable: true
}
],
- searchFilter: null,
searchTotalFilteredRows: 0
};
},
@@ -134,9 +137,6 @@
return this.sortStatus(a, b, key);
}
},
- onChangeSearchInput(searchValue) {
- this.searchFilter = searchValue;
- },
onFiltered(filteredItems) {
this.searchTotalFilteredRows = filteredItems.length;
}