add function resetTransactionLinkList, loadMoreLinks and computed buttonText

frontend/src/components/DecayInformations/CollapseLinksList.vue

@@ -14,8 +14,24 @@
             v-for="item in transactionLinks"
             :key="item.id"
             v-bind:item="item"
-            @update-list-transaction-links="updateListTransactionLinks"
+            @reset-transaction-link-list="resetTransactionLinkList"
           />
+          <div class="mt-3 mb-3 text-center">
+            <b-button
+              v-if="!value.pending && value.itemsShown < transactionLinkCount"
+              block
+              variant="primary"
+              @click="loadMoreLinks"
+            >
+              {{ buttonText }}
+            </b-button>
+            <b-icon
+              v-if="value.pending"
+              icon="three-dots"
+              animation="cylon"
+              font-scale="4"
+            ></b-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -30,10 +46,27 @@ export default {
   },
   props: {
     transactionLinks: { type: Array, required: true },
+    transactionLinkCount: {
+      type: Number,
+      required: true,
+    },
+    value: { type: Object, required: true },
   },
   methods: {
-    updateListTransactionLinks() {
-      this.$emit('update-list-transaction-links')
+    resetTransactionLinkList() {
+      this.$emit('input', { ...this.value, currentPage: 0 })
+    },
+    loadMoreLinks() {
+      this.$emit('input', { ...this.value, currentPage: this.value.currentPage + 1 })
+    },
+  },
+  computed: {
+    buttonText() {
+      if (this.transactionLinkCount - this.value.itemsShown > this.value.pageSize)
+        return 'weitere ' + this.value.pageSize + ' Links Nachladen'
+      return (
+        'die letzten ' + (this.transactionLinkCount - this.value.itemsShown) + ' Links nachladen'
+      )
     },
   },
 }