userland/src/components/VPagination.vue

<!--
  Copyright 2019 Hackware SpA <human@hackware.cl>
  This file is part of "Hackware Userland" and licensed under the terms
  of the GNU Affero General Public License version 3, or (at your option)
  a later version. You should have received a copy of this license along
  with the software. If not, see <https://www.gnu.org/licenses/>.
-->

<template>
  <nav v-if="totalPages > 1">
    <ul class="pagination justify-content-end">
      <li
        v-for="page in totalPages"
        :key="page"
        class="page-item"
        :class="currentPage == page ? 'disabled' : ''"
      >
        <router-link
          class="page-link"
          :to="{ name: 'transactions', query: { page: page }}"
        >
          {{ page }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'VPagination',
  props: {
    totalPages: {
      type: Number,
      required: true,
    },
  },
  computed: {
    currentPage() {
      return ('page' in this.$route.query) ? this.$route.query.page : 1;
    },
  },
  methods: {
    routeTo(page) {
      const route = Object.assign({}, this.$route);
      route.query.page = page;
      return route;
    },
  },
};
</script>