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
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 6acabd9..3915ff2 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -2,13 +2,19 @@
<b-container fluid="xl">
<page-title />
<b-row>
- <b-col md="5" xl="4">
+ <b-col sm="6" md="5" xl="4">
<search
:placeholder="$t('pageSensors.searchForSensors')"
@changeSearch="onChangeSearchInput"
/>
</b-col>
- <b-col md="7" xl="8" class="text-right">
+ <b-col sm="3" md="3" xl="2">
+ <table-cell-count
+ :filtered-items-count="filteredRows"
+ :total-number-of-cells="allSensors.length"
+ ></table-cell-count>
+ </b-col>
+ <b-col sm="3" md="4" xl="6" class="text-right">
<table-filter :filters="tableFilters" @filterChange="onFilterChange" />
</b-col>
</b-row>
@@ -44,6 +50,7 @@
:filter="searchFilter"
:empty-text="$t('global.table.emptyMessage')"
:empty-filtered-text="$t('global.table.emptySearchMessage')"
+ @filtered="onFiltered"
@row-selected="onRowSelected($event, filteredSensors.length)"
>
<!-- Checkbox column -->
@@ -93,6 +100,7 @@
import TableFilter from '@/components/Global/TableFilter';
import TableToolbar from '@/components/Global/TableToolbar';
import TableToolbarExport from '@/components/Global/TableToolbarExport';
+import TableCellCount from '@/components/Global/TableCellCount';
import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
@@ -106,6 +114,7 @@
PageTitle,
Search,
StatusIcon,
+ TableCellCount,
TableFilter,
TableToolbar,
TableToolbarExport
@@ -170,13 +179,19 @@
}
],
activeFilters: [],
- searchFilter: null
+ searchFilter: null,
+ searchTotalFilteredRows: 0
};
},
computed: {
allSensors() {
return this.$store.getters['sensors/sensors'];
},
+ filteredRows() {
+ return this.searchFilter
+ ? this.searchTotalFilteredRows
+ : this.filteredSensors.length;
+ },
filteredSensors() {
return this.getFilteredTableData(this.allSensors, this.activeFilters);
}
@@ -202,6 +217,9 @@
},
onChangeSearchInput(event) {
this.searchFilter = event;
+ },
+ onFiltered(filteredItems) {
+ this.searchTotalFilteredRows = filteredItems.length;
}
}
};