diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2020-07-27 19:14:47 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-22 16:32:25 +0300 |
commit | 9901096a45c9bda51438dcc91d5feb8a590df0c3 (patch) | |
tree | 7cba8a8a5c39415d6d46a9e64b4e70e73ec3e840 /src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue | |
parent | ce33f216a7ed893936fc3f187421c2a736b8c9ff (diff) | |
download | webui-vue-9901096a45c9bda51438dcc91d5feb8a590df0c3.tar.xz |
Show total and filtered number of items in a table
-The total number of items and the filtered items will be shown in the
EventLogs, Sensors and HardwareStatus table.
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I0ee6410bf675038a350a71a02ec076f9e8baf004
Diffstat (limited to 'src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue')
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue | 21 |
1 files changed, 19 insertions, 2 deletions
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue index 2ad4a28b..77a1e3c8 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue @@ -4,6 +4,12 @@ <b-col sm="6" md="5" xl="4"> <search @changeSearch="onChangeSearchInput" /> </b-col> + <b-col sm="6" md="3" xl="2"> + <table-cell-count + :filtered-items-count="filteredRows" + :total-number-of-cells="powerSupplies.length" + ></table-cell-count> + </b-col> </b-row> <b-table sort-icon-left @@ -18,6 +24,7 @@ :filter="searchFilter" :empty-text="$t('global.table.emptyMessage')" :empty-filtered-text="$t('global.table.emptySearchMessage')" + @filtered="onFiltered" > <!-- Expand chevron icon --> <template v-slot:cell(expandRow)="row"> @@ -81,12 +88,13 @@ import PageSection from '@/components/Global/PageSection'; import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; import StatusIcon from '@/components/Global/StatusIcon'; +import TableCellCount from '@/components/Global/TableCellCount'; import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; import TableSortMixin from '@/components/Mixins/TableSortMixin'; import Search from '@/components/Global/Search'; export default { - components: { IconChevron, PageSection, StatusIcon, Search }, + components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount }, mixins: [TableDataFormatterMixin, TableSortMixin], data() { return { @@ -122,10 +130,16 @@ export default { sortable: true } ], - searchFilter: null + searchFilter: null, + searchTotalFilteredRows: 0 }; }, computed: { + filteredRows() { + return this.searchFilter + ? this.searchTotalFilteredRows + : this.powerSupplies.length; + }, powerSupplies() { return this.$store.getters['powerSupply/powerSupplies']; } @@ -144,6 +158,9 @@ export default { }, onChangeSearchInput(searchValue) { this.searchFilter = searchValue; + }, + onFiltered(filteredItems) { + this.searchTotalFilteredRows = filteredItems.length; } } }; |