External-lists/resources/vue/extMPPages/components/Pagination.vue

<template>
  <div class="">
    <div v-if="totalPages == 1" class="pagination" aria-label="Pagination">
      <a v-on:click.prevent.stop="">&lt;</a>
      <a href="#"
        v-on:click.prevent.stop=""
        v-bind:class="['bg-mhsecondary-blue', 'text-mhprimary-sand', 'font-extrabold']"
        class="active"
      >
      1
      </a>
      <a v-on:click.prevent.stop="">&gt;</a>
    </div>
    <div v-else class="pagination" aria-label="Pagination">
      <a v-if="currentPage > 1" v-on:click.prevent.stop="goToPage(currentPage - 1)" href="#" class="">
        &lt;
      </a>
      <a v-else class="">
        &lt;
      </a>
      <a v-if="currentPage > 2" v-on:click.prevent.stop="goToPage(1)" href="#">
        1        
      </a>
      <a v-if="currentPage > 3" v-on:click.prevent.stop class="">
        ...
      </a>      
      <a v-for="index in stepsDif+1" :key="index" href="#"
        v-on:click.prevent.stop="goToPage(index+stepStart-1)"
        v-bind:class="[currentPage == index+stepStart-1 ? ['active']: ['']]"
        class=""
      >
      {{getPageNum(index)}}
      </a>
      <a v-if="totalPages != stepStop" v-on:click.prevent.stop class="">
        ...
      </a>
      <a v-if="totalPages != stepStop" v-on:click.prevent.stop="goToPage(totalPages)" href="#" class="">
        {{totalPages}}
      </a>      
      <a
        v-if="currentPage != totalPages"
        v-on:click.prevent.stop="goToPage(currentPage + 1)" 
        href="#" class="">
        &gt;
      </a>
      <a v-else v-on:click.prevent.stop="" class="">&gt;</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "pagination",
    props: {
      maxVisibleButtons: {
        type: Number,
        required: false,
        default: 10
      },
      totalPages: {
        type: Number,
        required: true
      },
      perPage: {
        type: Number,
        required: true
      },
      currentPage: {
        type: Number,
        required: true
      }
    },
    data() {
      return {
        stepsDif: 0,
        stepStart: 1,
        stepStop: 1,
      }
    },
    mounted() {
      this.calculate();
    },
    computed: {
    },    
    methods: {
      calculate() {
        if(this.currentPage > 2) {
          this.stepStart = this.currentPage-1;
        }else{
          this.stepStart = 1;
        }
        this.stepStop = this.totalPages
        if(this.totalPages - this.currentPage > 2) {
          this.stepStop = this.currentPage + 1;
        }
        this.stepsDif = this.stepStop - this.stepStart;
      },
      goToPage(page) {
        if(page >= 1 && page <= this.totalPages) {
          this.$store.commit('setPage', page);
          this.$emit("pagechanged", page);
          this.calculate();
        }
      },
      getPageNum(ndx) {
        return ndx + this.stepStart - 1;
      },
    },
    computed: {
    },    
    watch: {
      'currentPage'(to, from) {
        this.calculate();
      },
      'totalPages'(to, from) {
        this.calculate();
      }
    },
  }
</script>
<style scoped>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: v-bind('#' + $store.state.settings.buttonColor);
  color: v-bind('#' + $store.state.settings.buttonTextColor);;
  border: 1px solid v-bind('#' + $store.state.settings.buttonColor);
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: v-bind('#' + $store.state.settings.titleColor);;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: v-bind('#' + $store.state.settings.titleColor);;
}
</style>