Pagination Component

src/UIs/vuejs/src/components/Pagination.vue

@@ -0,0 +1,97 @@
+<template>
+  <ul class="pagination">
+    <li
+      class="page-item"
+      :class="{
+        disabled: currentPage == 1,
+      }"
+    >
+      <a class="page-link" @click="selectPage(1)">First</a>
+    </li>
+    <li
+      class="page-item"
+      :class="{
+        disabled: currentPage == 1,
+      }"
+    >
+      <a class="page-link" @click="selectPage(currentPage - 1)">Previous</a>
+    </li>
+
+    <li
+      v-for="pageNumber of pageNumbers"
+      :key="pageNumber"
+      class="page-item"
+      :class="{
+        active: currentPage == pageNumber,
+      }"
+    >
+      <a class="page-link" @click="selectPage(pageNumber)">{{ pageNumber }}</a>
+    </li>
+
+    <li
+      class="page-item"
+      :class="{
+        disabled: currentPage == totalPages,
+      }"
+    >
+      <a class="page-link" @click="selectPage(currentPage + 1)">Next</a>
+    </li>
+    <li
+      class="page-item"
+      :class="{
+        disabled: currentPage == totalPages,
+      }"
+    >
+      <a class="page-link" @click="selectPage(totalPages)">Last</a>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  props: ["totalItems", "pageSize", "currentPage"],
+  data() {
+    return {};
+  },
+  computed: {
+    totalPages() {
+      return Math.ceil(this.totalItems / this.pageSize);
+    },
+    pageNumbers() {
+      const totalPages = Math.ceil(this.totalItems / this.pageSize);
+
+      let startIndex = this.currentPage - 2;
+      let endIndex = this.currentPage + 2;
+
+      if (startIndex < 1) {
+        endIndex = endIndex + (1 - startIndex);
+        startIndex = 1;
+      }
+
+      if (endIndex > totalPages) {
+        startIndex = startIndex - (endIndex - totalPages);
+        endIndex = totalPages;
+      }
+
+      startIndex = Math.max(startIndex, 1);
+      endIndex = Math.min(endIndex, totalPages);
+
+      const pageNumbers = [];
+
+      for (let i = startIndex; i <= endIndex; i++) {
+        pageNumbers.push(i);
+      }
+      return pageNumbers;
+    },
+  },
+  methods: {
+    selectPage(page) {
+      this.$emit("pageSelected", page);
+    },
+  },
+};
+</script>
+<style scoped>
+a {
+  cursor: pointer;
+}
+</style>

src/UIs/vuejs/src/views/auditlogs/List.vue

@@ -3,9 +3,12 @@
     <div class="card-header">Audit Logs</div>
     <div class="card-body">
       <div style="float: right">
-        <b-pagination v-model="currentPage" :total-rows="totalItems" :per-page="pageSize" first-number last-number
-          @page-click="pagedSelected">
-        </b-pagination>
+        <app-pagination
+          :currentPage="currentPage"
+          :totalItems="totalItems"
+          :pageSize="pageSize"
+          @pageSelected="pagedSelected"
+        />
       </div>
       <div class="table-responsive">
         <table class="table" v-if="auditLogs">
@@ -28,9 +31,12 @@
         </table>
       </div>
       <div style="float: right">
-        <b-pagination v-model="currentPage" :total-rows="totalItems" :per-page="pageSize" first-number last-number
-          @page-click="pagedSelected">
-        </b-pagination>
+        <app-pagination
+          :currentPage="currentPage"
+          :totalItems="totalItems"
+          :pageSize="pageSize"
+          @pageSelected="pagedSelected"
+        />
       </div>
     </div>
   </div>
@@ -40,16 +46,20 @@
 import { defineComponent } from "vue";
 import axios from "./axios";
 import { IAuditLogEntry } from "./AuditLog";
+import Pagination from "../../components/Pagination.vue";
 
 export default defineComponent({
+  components: {
+    appPagination: Pagination,
+  },
   data() {
     return {
       pageTitle: "Audit Logs" as string,
       auditLogs: [] as IAuditLogEntry[],
       totalItems: 0 as number,
       currentPage: 1 as number,
       pageSize: 5 as number,
-      errorMessage: "" as string
+      errorMessage: "" as string,
     };
   },
   computed: {},
@@ -60,7 +70,8 @@ export default defineComponent({
         this.totalItems = rs.data.totalItems;
       });
     },
-    pagedSelected(bvEvent: any, page: number) {
+    pagedSelected(page: number) {
+      this.currentPage = page;
       this.loadAuditLogs(page);
     },
     lowercase: function (value: string) {
@@ -70,12 +81,11 @@ export default defineComponent({
       if (!value) return value;
       var date = new Date(value);
       return date.toLocaleDateString() + " " + date.toLocaleTimeString();
-    }
+    },
   },
-  components: {},
   created() {
     this.loadAuditLogs(this.currentPage);
-  }
+  },
 });
 </script>