UnivateProperties/src/components/shared/basePagination.vue

<template>
  <div>
    <nav>
      <ul class="pagination">
        <li class="page-item" v-if="isPreviousButtonDisabled" @click="previousPage">
          <a class="page-link" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li class="page-item" v-for="item in paginationItems" :key="item">
          <BasePaginationItem
            :pageNumber="item"
            :isCurrentPage="item === currentPage"
            @loadPage="onLoadPage"
          />
        </li>
        <li class="page-item" v-if="isNextButtonDisabled" @click="nextPage">
          <a class="page-link" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>
<script>
import BasePaginationItem from "./basePaginationItem.vue";

export default {
  components: {
    BasePaginationItem
  },
  props: {
    visiblePagesCount: {
      type: Number,
      default: 5
    },
    currentPage: {
      type: Number,
      required: true
    },
    pageCount: {
      type: Number,
      required: true
    }
  },
  computed: {
    isPreviousButtonDisabled() {
      return this.currentPage !== 1;
    },
    isNextButtonDisabled() {
      return this.currentPage !== this.pageCount;
    },
    paginationItems() {
      const { currentPage } = this;
      const { pageCount } = this;
      const { visiblePagesCount } = this;
      let pagintationItemsArray = [];
      if (pageCount <= visiblePagesCount) {
        let count = 1;
        while (count <= pageCount) {
          pagintationItemsArray.push(count);
          count += 1;
        }
        return pagintationItemsArray;
      }
      const visiblePagesThreshold = (visiblePagesCount - 1) / 2;
      pagintationItemsArray = Array(this.visiblePagesCount - 1).fill(0);
      if (currentPage <= visiblePagesThreshold + 1) {
        pagintationItemsArray[0] = 1;
        const pagintationItems = pagintationItemsArray.map(
          (paginationTrigger, index) => pagintationItemsArray[0] + index
        );
        pagintationItems.push(pageCount);
        return pagintationItems;
      }
      if (currentPage >= pageCount - visiblePagesThreshold + 1) {
        const pagintationItems = pagintationItemsArray.map(
          (paginationTrigger, index) => pageCount - index
        );
        pagintationItems.reverse().unshift(1);
        return pagintationItems;
      }
      pagintationItemsArray[0] = currentPage - visiblePagesThreshold + 1;
      const pagintationItems = pagintationItemsArray.map(
        (paginationTrigger, index) => pagintationItemsArray[0] + index
      );
      pagintationItems.unshift(1);
      pagintationItems[pagintationItems.length - 1] = pageCount;
      return pagintationItems;
    }
  },
  methods: {
    onLoadPage(value) {
      this.$emit("loadPage", value);
    },
    nextPage() {
      this.$emit("nextPage");
    },
    previousPage() {
      this.$emit("previousPage");
    }
  }
};
</script>