diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-09-08 05:26:06 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-24 17:12:56 +0300 |
commit | 9b22b49232da67bd15e04193006ce881a93265c0 (patch) | |
tree | 225021b7ee961afa0e8a66f4d38b482ae1578d22 /src/views/Health/HardwareStatus | |
parent | 46f17ef6c368d0412352c3026aa1e4ce9fae2e87 (diff) | |
download | webui-vue-9b22b49232da67bd15e04193006ce881a93265c0.tar.xz |
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
Diffstat (limited to 'src/views/Health/HardwareStatus')
4 files changed, 24 insertions, 24 deletions
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue index 97116ca2..ec7c1637 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 TableCellCount from '@/components/Global/TableCellCount'; 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 @@ export default { sortable: true } ], - searchFilter: null, searchTotalFilteredRows: 0 }; }, @@ -134,9 +137,6 @@ export default { return this.sortStatus(a, b, key); } }, - onChangeSearchInput(searchValue) { - this.searchFilter = searchValue; - }, onFiltered(filteredItems) { this.searchTotalFilteredRows = filteredItems.length; } diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue index 0b6e1a35..98e2fb5e 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue @@ -2,7 +2,10 @@ <page-section :section-title="$t('pageHardwareStatus.fans')"> <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 @@ -69,10 +72,11 @@ import StatusIcon from '@/components/Global/StatusIcon'; 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: [ @@ -107,7 +111,6 @@ export default { sortable: true } ], - searchFilter: null, searchTotalFilteredRows: 0 }; }, @@ -133,9 +136,6 @@ export default { return this.sortStatus(a, b, key); } }, - onChangeSearchInput(searchValue) { - this.searchFilter = searchValue; - }, onFiltered(filteredItems) { this.searchTotalFilteredRows = filteredItems.length; } diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue index 77a1e3c8..0eb2f608 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue @@ -2,7 +2,10 @@ <page-section :section-title="$t('pageHardwareStatus.powerSupplies')"> <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 @@ -92,10 +95,11 @@ import TableCellCount from '@/components/Global/TableCellCount'; 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: [ @@ -130,7 +134,6 @@ export default { sortable: true } ], - searchFilter: null, searchTotalFilteredRows: 0 }; }, @@ -156,9 +159,6 @@ export default { return this.sortStatus(a, b, key); } }, - onChangeSearchInput(searchValue) { - this.searchFilter = searchValue; - }, onFiltered(filteredItems) { this.searchTotalFilteredRows = filteredItems.length; } diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue index 6ab1343a..5a27cca7 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue @@ -3,7 +3,10 @@ <!-- Search --> <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 @@ -99,10 +102,11 @@ import TableCellCount from '@/components/Global/TableCellCount'; import TableSortMixin from '@/components/Mixins/TableSortMixin'; import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; import Search from '@/components/Global/Search'; +import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin'; export default { components: { PageSection, IconChevron, TableCellCount, StatusIcon, Search }, - mixins: [TableDataFormatterMixin, TableSortMixin], + mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin], data() { return { fields: [ @@ -137,7 +141,6 @@ export default { sortable: true } ], - searchFilter: null, searchTotalFilteredRows: 0 }; }, @@ -158,9 +161,6 @@ export default { }); }, methods: { - onChangeSearchInput(searchValue) { - this.searchFilter = searchValue; - }, onFiltered(filteredItems) { this.searchTotalFilteredRows = filteredItems.length; } |