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/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 3915ff2..c234359 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -6,6 +6,7 @@
<search
:placeholder="$t('pageSensors.searchForSensors')"
@changeSearch="onChangeSearchInput"
+ @clearSearch="onClearSearchInput"
/>
</b-col>
<b-col sm="3" md="3" xl="2">
@@ -107,6 +108,7 @@
import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
export default {
name: 'Sensors',
@@ -124,7 +126,8 @@
BVTableSelectableMixin,
LoadingBarMixin,
TableDataFormatterMixin,
- TableSortMixin
+ TableSortMixin,
+ SearchFilterMixin
],
data() {
return {
@@ -215,9 +218,6 @@
onFilterChange({ activeFilters }) {
this.activeFilters = activeFilters;
},
- onChangeSearchInput(event) {
- this.searchFilter = event;
- },
onFiltered(filteredItems) {
this.searchTotalFilteredRows = filteredItems.length;
}