1<script> 2import { GlPagination } from '@gitlab/ui'; 3import { 4 PREV, 5 NEXT, 6 LABEL_FIRST_PAGE, 7 LABEL_PREV_PAGE, 8 LABEL_NEXT_PAGE, 9 LABEL_LAST_PAGE, 10} from '~/vue_shared/components/pagination/constants'; 11 12export default { 13 components: { 14 GlPagination, 15 }, 16 props: { 17 /** 18 This function will take the information given by the pagination component 19 20 Here is an example `change` method: 21 22 change(pagenum) { 23 visitUrl(`?page=${pagenum}`); 24 }, 25 */ 26 change: { 27 type: Function, 28 required: true, 29 }, 30 31 /** 32 pageInfo will come from the headers of the API call 33 there should be a function that constructs the pageInfo for this component 34 35 This is an example: 36 37 const pageInfo = headers => ({ 38 perPage: +headers['X-Per-Page'], 39 page: +headers['X-Page'], 40 total: +headers['X-Total'], 41 totalPages: +headers['X-Total-Pages'], 42 nextPage: +headers['X-Next-Page'], 43 previousPage: +headers['X-Prev-Page'], 44 }); 45 */ 46 pageInfo: { 47 type: Object, 48 required: true, 49 }, 50 }, 51 computed: { 52 showPagination() { 53 return this.pageInfo.nextPage || this.pageInfo.previousPage; 54 }, 55 }, 56 prevText: PREV, 57 nextText: NEXT, 58 labelFirstPage: LABEL_FIRST_PAGE, 59 labelPrevPage: LABEL_PREV_PAGE, 60 labelNextPage: LABEL_NEXT_PAGE, 61 labelLastPage: LABEL_LAST_PAGE, 62}; 63</script> 64<template> 65 <gl-pagination 66 v-if="showPagination" 67 class="justify-content-center gl-mt-3" 68 v-bind="$attrs" 69 :value="pageInfo.page" 70 :per-page="pageInfo.perPage" 71 :total-items="pageInfo.total" 72 :prev-page="pageInfo.previousPage" 73 :prev-text="$options.prevText" 74 :next-page="pageInfo.nextPage" 75 :next-text="$options.nextText" 76 :label-first-page="$options.labelFirstPage" 77 :label-prev-page="$options.labelPrevPage" 78 :label-next-page="$options.labelNextPage" 79 :label-last-page="$options.labelLastPage" 80 @input="change" 81 /> 82</template> 83