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/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index e7d4895..cf5d478 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -6,6 +6,7 @@
<search
:placeholder="$t('pageEventLogs.table.searchLogs')"
@changeSearch="onChangeSearchInput"
+ @clearSearch="onClearSearchInput"
/>
</b-col>
<b-col sm="3" class="d-flex flex-column justify-content-end">
@@ -161,6 +162,7 @@
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
export default {
components: {
@@ -183,7 +185,8 @@
LoadingBarMixin,
TableFilterMixin,
TableDataFormatterMixin,
- TableSortMixin
+ TableSortMixin,
+ SearchFilterMixin
],
data() {
return {
@@ -239,7 +242,6 @@
],
filterStartDate: null,
filterEndDate: null,
- searchFilter: null,
searchTotalFilteredRows: 0
};
},
@@ -353,9 +355,6 @@
this.filterStartDate = fromDate;
this.filterEndDate = toDate;
},
- onChangeSearchInput(searchValue) {
- this.searchFilter = searchValue;
- },
onFiltered(filteredItems) {
this.searchTotalFilteredRows = filteredItems.length;
},