refactoring is working

frontend/src/components/PaginationButtons.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="pagination-buttons">
+  <div class="pagination-buttons" v-if="totalRows > perPage">
     <b-row class="m-4">
       <b-col class="text-right">
-        <b-button class="previous-page" :disabled="!hasPrevious" @click="$emit('show-previous')">
+        <b-button class="previous-page" :disabled="!hasPrevious" @click="currentValue--">
           <b-icon icon="chevron-left" variant="primary"></b-icon>
         </b-button>
       </b-col>
@@ -10,7 +10,7 @@
         <p class="text-center pt-2">{{ value }} / {{ totalPages }}</p>
       </b-col>
       <b-col>
-        <b-button class="next-page" :disabled="!hasNext" @click="$emit('show-next')">
+        <b-button class="next-page" :disabled="!hasNext" @click="currentValue++">
           <b-icon icon="chevron-right" variant="primary"></b-icon>
         </b-button>
       </b-col>
@@ -18,35 +18,36 @@
   </div>
 </template>
 <script>
- export default {
-   name: 'PaginationButtons',
-   props: {
-     totalRows: { type: Number, required: true },
-     pageSize: { type: Number, required: true },
-     value: { type: Number, , required: true },
-   },
-   computed: {
-     hasNext() {
-       return this.value * this.pageSize < this.totalCount
-     },
-     hasPrevious() {
-       return this.value > 1
-     },
-     totalPages() {
-       return Math.ceil(this.totalCount / this.pageSize)
-     },
-   },
-   methods: {
-     showNext() {
-       this.value++
-       this.updateGdt()
-       window.scrollTo(0, 0)
-     },
-     showPrevious() {
-       this.value--
-       this.updateGdt()
-       window.scrollTo(0, 0)
-     },
-   },
- }
+export default {
+  name: 'PaginationButtons',
+  props: {
+    totalRows: { type: Number, required: true },
+    perPage: { type: Number, required: true },
+    value: { type: Number, required: true },
+  },
+  data() {
+    return {
+      currentValue: { type: Number, default: 1 },
+    }
+  },
+  computed: {
+    hasNext() {
+      return this.value * this.perPage < this.totalRows
+    },
+    hasPrevious() {
+      return this.value > 1
+    },
+    totalPages() {
+      return Math.ceil(this.totalRows / this.perPage)
+    },
+  },
+  created() {
+    this.currentValue = this.value
+  },
+  watch: {
+    currentValue() {
+      if (this.currentValue !== this.value) this.$emit('input', this.currentValue)
+    },
+  },
+}
 </script>

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -84,13 +84,9 @@
         </div>
       </div>
       <pagination-buttons
-        v-if="showPagination && transactionCount > pageSize"
-        :has-next="hasNext"
-        :has-previous="hasPrevious"
-        :total-pages="totalPages"
-        :current-page="currentPage"
-        @show-next="showNext"
-        @show-previous="showPrevious"
+        v-model="currentPage"
+        :per-page="pageSize"
+        :total-rows="transactionCount"
       ></pagination-buttons>
       <div v-if="transactions.length === 0" class="mt-4 text-center">
         <span>{{ $t('transaction.nullTransactions') }}</span>
@@ -128,23 +124,6 @@ export default {
     transactionCount: { type: Number, default: 0 },
     showPagination: { type: Boolean, default: false },
   },
-  watch: {
-    timestamp: {
-      immediate: true,
-      handler: 'updateTransactions',
-    },
-  },
-  computed: {
-    hasNext() {
-      return this.currentPage * this.pageSize < this.transactionCount
-    },
-    hasPrevious() {
-      return this.currentPage > 1
-    },
-    totalPages() {
-      return Math.ceil(this.transactionCount / this.pageSize)
-    },
-  },
   methods: {
     updateTransactions() {
       this.$emit('update-transactions', {
@@ -165,15 +144,14 @@ export default {
     throwError(msg) {
       throw new Error(msg)
     },
-    showNext() {
-      this.currentPage++
+  },
+  watch: {
+    currentPage() {
       this.updateTransactions()
-      window.scrollTo(0, 0)
     },
-    showPrevious() {
-      this.currentPage--
-      this.updateTransactions()
-      window.scrollTo(0, 0)
+    timestamp: {
+      immediate: true,
+      handler: 'updateTransactions',
     },
   },
 }

frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue

@@ -28,12 +28,9 @@
       </div>
     </div>
     <pagination-buttons
-      v-if="transactionGdtCount > pageSize"
       v-model="currentPage"
       :per-page="pageSize"
       :total-rows="transactionGdtCount"
-      @show-next="showNext"
-      @show-previous="showPrevious"
     ></pagination-buttons>
   </div>
 </template>
@@ -73,25 +70,21 @@ export default {
           } = result
           this.transactionsGdt = listGDTEntries.gdtEntries
           this.transactionGdtCount = listGDTEntries.count
+          window.scrollTo(0, 0)
         })
         .catch((error) => {
           this.$toasted.error(error.message)
         })
     },
-    showNext() {
-      this.currentPage++
-      this.updateGdt()
-      window.scrollTo(0, 0)
-    },
-    showPrevious() {
-      this.currentPage--
-      this.updateGdt()
-      window.scrollTo(0, 0)
-    },
   },
   mounted() {
     this.updateGdt()
   },
+  watch: {
+    currentPage() {
+      this.updateGdt()
+    },
+  },
 }
 </script>
 <style>