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