Merge branch 'consolidate-pagination' into 'v3'

Use own pagination consistently rather than vue-pagination-next

Closes #590

See merge request openflexure/openflexure-microscope-server!504

webapp/src/components/genericComponents/paginateLinks.vue

@@ -0,0 +1,45 @@
+<template>
+  <div v-if="totalPages > 1" class="pagination-container uk-margin-top uk-flex uk-flex-center">
+    <ul class="uk-pagination">
+      <li :class="{ 'uk-disabled': currentPage === 1 }">
+        <a href="#" @click.prevent="$emit('changePage', currentPage - 1)">
+          <span uk-pagination-previous></span>
+        </a>
+      </li>
+
+      <li v-for="page in totalPages" :key="page" :class="{ 'uk-active': page === currentPage }">
+        <a href="#" @click.prevent="$emit('changePage', page)">{{ page }}</a>
+      </li>
+
+      <li :class="{ 'uk-disabled': currentPage === totalPages }">
+        <a href="#" @click.prevent="$emit('changePage', currentPage + 1)">
+          <span uk-pagination-next></span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+// Export main app
+export default {
+  name: "PaginateLinks",
+
+  props: {
+    totalPages: {
+      type: Number,
+      required: true,
+    },
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  emits: ["changePage"],
+};
+</script>
+<style lang="less" scoped>
+.pagination-container {
+  text-align: center;
+}
+</style>

webapp/src/components/tabContentComponents/loggingContent.vue

@@ -78,28 +78,18 @@
         <div v-if="item.expanded" class="logging-message" v-html="item.message"></div>
         <!-- eslint-enable -->
       </div>
-
-      <Paginate
-        v-model="page"
-        :page-count="numberOfPages"
-        :page-range="3"
-        :margin-pages="1"
-        :container-class="'uk-pagination uk-flex-center'"
-        :prev-text="'Prev'"
-        :next-text="'Next'"
-        :page-class="'page-item'"
-        :active-class="'uk-active'"
-        :disabled-class="'uk-disabled'"
-        :click-handler="scrollToTop"
-      >
-      </Paginate>
+      <PaginateLinks
+        :total-pages="totalPages"
+        :current-page="currentPage"
+        @change-page="changePage"
+      />
     </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
-import Paginate from "vuejs-paginate-next";
+import PaginateLinks from "@/components/genericComponents/paginateLinks.vue";
 import EndpointButton from "../labThingsComponents/endpointButton.vue";
 import { useIntersectionObserver } from "@vueuse/core";
 
@@ -107,7 +97,7 @@ export default {
   name: "LoggingContent",
 
   components: {
-    Paginate,
+    PaginateLinks,
     EndpointButton,
   },
 
@@ -116,7 +106,7 @@ export default {
   data: function () {
     return {
       maxitems: 20,
-      page: 1,
+      currentPage: 1,
       logs: [],
       allLevels: ["DEBUG", "INFO", "WARNING", "ERROR", "CRITICAL"],
       filterLevel: "WARNING",
@@ -146,10 +136,10 @@ export default {
       return `${this.$store.getters.baseUri}/logfile/`;
     },
     pagedItems: function () {
-      let startIndex = (this.page - 1) * this.maxitems;
+      let startIndex = (this.currentPage - 1) * this.maxitems;
       return this.filteredItems.slice(startIndex, startIndex + this.maxitems);
     },
-    numberOfPages: function () {
+    totalPages: function () {
       return Math.floor(this.filteredItems.length / this.maxitems);
     },
   },
@@ -167,8 +157,11 @@ export default {
   },
 
   methods: {
-    scrollToTop() {
-      this.$emit("scrollTop");
+    changePage(page) {
+      if (page >= 1 && page <= this.totalPages && this.currentPage != page) {
+        this.$emit("scrollTop");
+        this.currentPage = page;
+      }
     },
     visibilityChanged(isVisible) {
       if (isVisible) {

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -70,30 +70,17 @@
         </div>
       </div>
     </div>
-    <div v-if="totalPages > 1" class="pagination-container uk-margin-top uk-flex uk-flex-center">
-      <ul class="uk-pagination">
-        <li :class="{ 'uk-disabled': currentPage === 1 }">
-          <a href="#" @click.prevent="changePage(currentPage - 1)">
-            <span uk-pagination-previous></span>
-          </a>
-        </li>
-
-        <li v-for="page in totalPages" :key="page" :class="{ 'uk-active': page === currentPage }">
-          <a href="#" @click.prevent="changePage(page)">{{ page }}</a>
-        </li>
-
-        <li :class="{ 'uk-disabled': currentPage === totalPages }">
-          <a href="#" @click.prevent="changePage(currentPage + 1)">
-            <span uk-pagination-next></span>
-          </a>
-        </li>
-      </ul>
-    </div>
+    <PaginateLinks
+      :total-pages="totalPages"
+      :current-page="currentPage"
+      @change-page="changePage"
+    />
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import PaginateLinks from "@/components/genericComponents/paginateLinks.vue";
 import actionButton from "../labThingsComponents/actionButton.vue";
 import scanCard from "./scanListComponents/scanCard.vue";
 import ScanViewerModal from "./scanListComponents/scanViewer.vue";
@@ -107,6 +94,7 @@ export default {
     actionButton,
     scanCard,
     ScanViewerModal,
+    PaginateLinks,
   },
 
   emits: ["scrollTop"],
@@ -274,8 +262,4 @@ export default {
   margin-top: 5px;
   margin-bottom: 2px;
 }
-
-.pagination-container {
-  text-align: center;
-}
 </style>