diff options
| -rw-r--r-- | src/assets/styles/vendor-overrides/bootstrap/_index.scss | 1 | ||||
| -rw-r--r-- | src/assets/styles/vendor-overrides/bootstrap/_pagination.scss | 20 | ||||
| -rw-r--r-- | src/components/Mixins/BVPaginationMixin.js | 37 | ||||
| -rw-r--r-- | src/locales/en-US.json | 4 | ||||
| -rw-r--r-- | src/main.js | 2 | ||||
| -rw-r--r-- | src/views/Health/EventLogs/EventLogs.vue | 37 |
6 files changed, 99 insertions, 2 deletions
diff --git a/src/assets/styles/vendor-overrides/bootstrap/_index.scss b/src/assets/styles/vendor-overrides/bootstrap/_index.scss index d7634db9..8f80e5c4 100644 --- a/src/assets/styles/vendor-overrides/bootstrap/_index.scss +++ b/src/assets/styles/vendor-overrides/bootstrap/_index.scss @@ -7,5 +7,6 @@ @import "./dropdown"; @import "./forms"; @import "./modal"; +@import "./pagination"; @import "./tables"; @import "./toasts";
\ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_pagination.scss b/src/assets/styles/vendor-overrides/bootstrap/_pagination.scss new file mode 100644 index 00000000..4fed21ba --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_pagination.scss @@ -0,0 +1,20 @@ +.table-pagination-select { + display: flex; + flex-direction: row-reverse; + select { + width: fit-content; + } + label { + margin-left: $spacer; + line-height: $spacer * 2; + } +} + +.b-pagination { + .page-item.active button { + color: $dark; + background-color: $white; + border-color: $border-color; + box-shadow: inset 0px -3px $primary; + } +}
\ No newline at end of file diff --git a/src/components/Mixins/BVPaginationMixin.js b/src/components/Mixins/BVPaginationMixin.js new file mode 100644 index 00000000..84c46aa4 --- /dev/null +++ b/src/components/Mixins/BVPaginationMixin.js @@ -0,0 +1,37 @@ +const BVPaginationMixin = { + data() { + return { + currentPage: 1, + perPage: 20, + itemsPerPageOptions: [ + { + value: 10, + text: '10' + }, + { + value: 20, + text: '20' + }, + { + value: 30, + text: '30' + }, + { + value: 40, + text: '40' + }, + { + value: 0, + text: this.$t('global.table.viewAll') + } + ] + }; + }, + methods: { + getTotalRowCount(count) { + return this.perPage === 0 ? 0 : count; + } + } +}; + +export default BVPaginationMixin; diff --git a/src/locales/en-US.json b/src/locales/en-US.json index b48fdf04..a09047e9 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -43,6 +43,10 @@ "success": "Success", "warning": "Warning", "informational": "Informational" + }, + "table": { + "itemsPerPage": "Items per page", + "viewAll": "View all" } }, "appHeader": { diff --git a/src/main.js b/src/main.js index 9e0502de..6896ec2f 100644 --- a/src/main.js +++ b/src/main.js @@ -24,6 +24,7 @@ import { ModalPlugin, NavbarPlugin, NavPlugin, + PaginationPlugin, ProgressPlugin, TablePlugin, ToastPlugin, @@ -87,6 +88,7 @@ Vue.use(ListGroupPlugin); Vue.use(ModalPlugin); Vue.use(NavbarPlugin); Vue.use(NavPlugin); +Vue.use(PaginationPlugin); Vue.use(ProgressPlugin); Vue.use(TablePlugin); Vue.use(ToastPlugin); diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue index 0238dbc7..d7a64c90 100644 --- a/src/views/Health/EventLogs/EventLogs.vue +++ b/src/views/Health/EventLogs/EventLogs.vue @@ -9,6 +9,7 @@ <b-row> <b-col> <b-table + id="table-event-logs" :fields="fields" :items="filteredLogs" sort-icon-left @@ -18,6 +19,8 @@ sort-by="date" :sort-compare="onSortCompare" :empty-text="$t('pageEventLogs.table.emptyMessage')" + :per-page="perPage" + :current-page="currentPage" > <template v-slot:cell(severity)="{ value }"> <status-icon :status="getStatus(value)" /> @@ -29,6 +32,31 @@ </b-table> </b-col> </b-row> + + <!-- Table pagination --> + <b-row> + <b-col class="d-md-flex justify-content-between"> + <b-form-group + class="table-pagination-select" + :label="$t('global.table.itemsPerPage')" + label-for="pagination-items-per-page" + > + <b-form-select + id="pagination-items-per-page" + v-model="perPage" + :options="itemsPerPageOptions" + /> + </b-form-group> + <b-pagination + v-model="currentPage" + first-number + last-number + :per-page="perPage" + :total-rows="getTotalRowCount(filteredLogs.length)" + aria-controls="table-event-logs" + /> + </b-col> + </b-row> </b-container> </template> @@ -39,12 +67,17 @@ import TableFilter from '@/components/Global/TableFilter'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; +import BVPaginationMixin from '@/components/Mixins/BVPaginationMixin'; const SEVERITY = ['OK', 'Warning', 'Critical']; export default { - components: { PageTitle, StatusIcon, TableFilter }, - mixins: [LoadingBarMixin, TableFilterMixin], + components: { + PageTitle, + StatusIcon, + TableFilter + }, + mixins: [LoadingBarMixin, TableFilterMixin, BVPaginationMixin], data() { return { fields: [ |