diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
commit | 05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2 (patch) | |
tree | 11d0f2a6ec31c7793c184106cedc2ded3d9a2cc5 /app/assets/javascripts/environments/environment_details/pagination.vue | |
parent | ec73467c23693d0db63a797d10194da9e72a74af (diff) | |
download | gitlab-ce-05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2.tar.gz |
Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42
Diffstat (limited to 'app/assets/javascripts/environments/environment_details/pagination.vue')
-rw-r--r-- | app/assets/javascripts/environments/environment_details/pagination.vue | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/environment_details/pagination.vue b/app/assets/javascripts/environments/environment_details/pagination.vue new file mode 100644 index 00000000000..414610b306a --- /dev/null +++ b/app/assets/javascripts/environments/environment_details/pagination.vue @@ -0,0 +1,74 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import { setUrlParams } from '~/lib/utils/url_utility'; +import { translations } from './constants'; + +export default { + components: { + GlKeysetPagination, + }, + props: { + pageInfo: { + type: Object, + required: true, + }, + disabled: { + type: Boolean, + required: false, + default: false, + }, + }, + translations, + computed: { + previousLink() { + if (!this.pageInfo || !this.pageInfo.hasPreviousPage) { + return ''; + } + return setUrlParams({ before: this.pageInfo.startCursor }, window.location.href, true); + }, + nextLink() { + if (!this.pageInfo || !this.pageInfo.hasNextPage) { + return ''; + } + return setUrlParams({ after: this.pageInfo.endCursor }, window.location.href, true); + }, + isPaginationVisible() { + if (!this.pageInfo) { + return false; + } + + return this.pageInfo.hasNextPage || this.pageInfo.hasPreviousPage; + }, + }, + methods: { + onPrev(previousCursor) { + this.$router.push({ query: { before: previousCursor } }); + }, + onNext(nextCursor) { + this.$router.push({ query: { after: nextCursor } }); + }, + onPaginationClick(event) { + // this check here is to ensure the proper default behvaior when a user ctrl/cmd + clicks the link + if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) { + return; + } + event.preventDefault(); + }, + }, +}; +</script> +<template> + <div v-if="isPaginationVisible" class="gl--flex-center"> + <gl-keyset-pagination + v-bind="pageInfo" + :prev-text="$options.translations.previousPageButtonLabel" + :next-text="$options.translations.nextPageButtonLabel" + :prev-button-link="previousLink" + :next-button-link="nextLink" + :disabled="disabled" + @prev="onPrev" + @next="onNext" + @click="onPaginationClick" + /> + </div> +</template> |