pagination works in frontend but the API call does not work

frontend/src/components/PaginationButtons.vue

@@ -3,8 +3,7 @@
     <b-row class="m-4">
       <b-col class="text-right">
         <b-button :disabled="!hasPrevious" @click="$emit('show-previous')">
-          <b-icon icon="chevron-left" variant="primary">
-          </b-icon>
+          <b-icon icon="chevron-left" variant="primary"></b-icon>
         </b-button>
       </b-col>
       <b-col cols="2">
@@ -12,21 +11,20 @@
       </b-col>
       <b-col>
         <b-button :disabled="!hasNext" @click="$emit('show-next')">
-          <b-icon icon="chevron-right" variant="primary">
-          </b-icon>
+          <b-icon icon="chevron-right" variant="primary"></b-icon>
         </b-button>
       </b-col>
     </b-row>
   </div>
 </template>
 <script>
- export default {
-   name: 'PaginationButtons',
-   props: {
-     hasNext: { type: Boolean, default: false },
-     hasPrevious: { type: Boolean, default: false },
-     totalPages: { type: Number, default: 1 },
-     currentPage: { type: Number, default: 1 },
-   },
- }
+export default {
+  name: 'PaginationButtons',
+  props: {
+    hasNext: { type: Boolean, default: false },
+    hasPrevious: { type: Boolean, default: false },
+    totalPages: { type: Number, default: 1 },
+    currentPage: { type: Number, default: 1 },
+  },
+}
 </script>

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -106,9 +106,13 @@ export default {
       this.$store.dispatch('logout')
       this.$router.push('/login')
     },
-    async updateTransactions() {
+    async updateTransactions(pagination) {
       this.pending = true
-      const result = await communityAPI.transactions(this.$store.state.sessionId)
+      const result = await communityAPI.transactions(
+        this.$store.state.sessionId,
+        pagination.firstPage,
+        pagination.items,
+      )
       if (result.success) {
         this.GdtBalance = Number(result.result.data.gdtSum)
         this.transactions = result.result.data.transactions
@@ -129,7 +133,7 @@ export default {
     this.initScrollbar()
   },
   created() {
-    this.updateTransactions()
+    this.updateTransactions({ firstPage: 1, items: 5 })
   },
 }
 </script>

frontend/src/views/Pages/AccountOverview.vue

@@ -41,86 +41,86 @@
   </div>
 </template>
 <script>
- import GddStatus from './AccountOverview/GddStatus.vue'
- import GddSend from './AccountOverview/GddSend.vue'
- import GddTransactionList from './AccountOverview/GddTransactionList.vue'
- import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
- import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
- import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
- import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
- import communityAPI from '../../apis/communityAPI.js'
+import GddStatus from './AccountOverview/GddStatus.vue'
+import GddSend from './AccountOverview/GddSend.vue'
+import GddTransactionList from './AccountOverview/GddTransactionList.vue'
+import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
+import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
+import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
+import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
+import communityAPI from '../../apis/communityAPI.js'
 
- const EMPTY_TRANSACTION_DATA = {
-   email: '',
-   amount: 0,
-   memo: '',
-   target_date: '',
- }
+const EMPTY_TRANSACTION_DATA = {
+  email: '',
+  amount: 0,
+  memo: '',
+  target_date: '',
+}
 
- export default {
-   name: 'Overview',
-   components: {
-     GddStatus,
-     GddSend,
-     GddTransactionList,
-     GddTransactionListFooter,
-     TransactionForm,
-     TransactionConfirmation,
-     TransactionResult,
-   },
-   data() {
-     return {
-       timestamp: Date.now(),
-       transactionData: EMPTY_TRANSACTION_DATA,
-       error: false,
-       currentTransactionStep: 0,
-       loading: false,
-     }
-   },
-   props: {
-     balance: { type: Number, default: 0 },
-     GdtBalance: { type: Number, default: 0 },
-     transactions: {
-       default: () => [],
-     },
-     transactionCount: { type: Number, default: 0 },
-     pending: {
-       type: Boolean,
-       default: true,
-     },
-   },
-   computed: {
-     showContext() {
-       return this.currentTransactionStep === 0
-     },
-   },
-   methods: {
-     setTransaction(data) {
-       data.target_date = new Date(Date.now()).toISOString()
-       this.transactionData = { ...data }
-       this.currentTransactionStep = 1
-     },
-     async sendTransaction() {
-       this.loading = true
-       const result = await communityAPI.send(this.$store.state.sessionId, this.transactionData)
-       if (result.success) {
-         this.error = false
-         this.$emit('update-balance', this.transactionData.amount)
-       } else {
-         this.error = true
-       }
-       this.currentTransactionStep = 2
-       this.loading = false
-     },
-     onReset() {
-       this.transactionData = EMPTY_TRANSACTION_DATA
-       this.currentTransactionStep = 0
-     },
-     updateTransactions(pagination) {
-       this.$emit('update-transactions', pagination)
-     },
-   },
- }
+export default {
+  name: 'Overview',
+  components: {
+    GddStatus,
+    GddSend,
+    GddTransactionList,
+    GddTransactionListFooter,
+    TransactionForm,
+    TransactionConfirmation,
+    TransactionResult,
+  },
+  data() {
+    return {
+      timestamp: Date.now(),
+      transactionData: EMPTY_TRANSACTION_DATA,
+      error: false,
+      currentTransactionStep: 0,
+      loading: false,
+    }
+  },
+  props: {
+    balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
+    transactions: {
+      default: () => [],
+    },
+    transactionCount: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    showContext() {
+      return this.currentTransactionStep === 0
+    },
+  },
+  methods: {
+    setTransaction(data) {
+      data.target_date = new Date(Date.now()).toISOString()
+      this.transactionData = { ...data }
+      this.currentTransactionStep = 1
+    },
+    async sendTransaction() {
+      this.loading = true
+      const result = await communityAPI.send(this.$store.state.sessionId, this.transactionData)
+      if (result.success) {
+        this.error = false
+        this.$emit('update-balance', this.transactionData.amount)
+      } else {
+        this.error = true
+      }
+      this.currentTransactionStep = 2
+      this.loading = false
+    },
+    onReset() {
+      this.transactionData = EMPTY_TRANSACTION_DATA
+      this.currentTransactionStep = 0
+    },
+    updateTransactions(pagination) {
+      this.$emit('update-transactions', pagination)
+    },
+  },
+}
 </script>
 
 <style>

frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js

@@ -203,9 +203,9 @@ describe('GddTransactionList', () => {
         })
       })
 
-      describe('max property set to 2', () => {
+      describe('pageSize property set to 2', () => {
         beforeEach(async () => {
-          await wrapper.setProps({ max: 2 })
+          await wrapper.setProps({ pageSize: 2 })
         })
 
         it('shows only 2 transactions', () => {

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

@@ -2,8 +2,7 @@
   <div class="gdd-transaction-list">
     <b-list-group>
       <b-list-group-item
-        id="gdd-transaction-list"
-        v-for="item in transactions"
+        v-for="item in transactions.slice(0, pageSize)"
         :key="item.id"
         style="background-color: #ebebeba3 !important"
       >
@@ -67,14 +66,15 @@
           </b-card>
         </b-collapse>
       </b-list-group-item>
-      <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">
-      </pagination-buttons>
+      <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"
+      ></pagination-buttons>
       <div v-if="transactions.length === 0" class="mt-4 text-center">
         <span>{{ $t('transaction.nullTransactions') }}</span>
       </div>
@@ -83,84 +83,79 @@
 </template>
 
 <script>
- import PaginationButtons from '../../../components/PaginationButtons'
- 
- const iconsByType = {
-   send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '-' },
-   receive: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent', operator: '+' },
-   creation: { icon: 'gift', classes: 'gradido-global-color-accent', operator: '+' },
-   decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '-' },
- }
+import PaginationButtons from '../../../components/PaginationButtons'
 
- export default {
-   name: 'gdd-transaction-list',
-   components: {
-     PaginationButtons,
-   },
-   data() {
-     return {
-       currentPage: 1,
-     }
-   },
-   props: {
-     transactions: { default: () => [] },
-     pageSize: { type: Number, default: 5 },
-     timestamp: { type: Number, default: 0 },
-     transactionCount: { type: Number, default: 0 },
-     showPagination: { type: Boolean, default: false },
-   },
-   watch: {
-     timestamp: {
-       immediate: true,
-       handler: 'updateTransactions',
-     },
-   },
-   computed: {
-     hasNext() {
-       console.log('hasNext', this.currentPage * this.pageSize < this.transactionCount)
-       return this.currentPage * this.pageSize < this.transactionCount
-     },
-     hasPrevious() {
-       console.log('hasPrevious', this.currentPage > 1)
-       return this.currentPage > 1
-     },
-     totalPages() {
-       return Math.ceil(this.transactionCount / this.pageSize)
-     },
-   },
-   methods: {
-     updateTransactions(pagination = {}) {
-       this.$emit('update-transactions', pagination)
-     },
-     getProperties(item) {
-       const type = iconsByType[item.type]
-       if (type)
-         return {
-           icon: type.icon,
-           class: type.classes + ' m-mb-1 font2em',
-           operator: type.operator,
-         }
-       this.throwError('no icon to given type')
-     },
-     throwError(msg) {
-       throw new Error(msg)
-     },
-     showNext() {
-       this.updateTransactions({
-         firstPage: 1 + this.pageSize * (this.currentPage - 1),
-         items: this.pageSize,
-       })
-       this.currentPage++
-     },
-     showPrevious() {
-       this.currentPage--
-       this.updateTransactions({
-         firstPage: 1 + this.pageSize * (this.currentPage - 1),
-         items: this.pageSize,
-       })
-     },
-   },
- }
+const iconsByType = {
+  send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '-' },
+  receive: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent', operator: '+' },
+  creation: { icon: 'gift', classes: 'gradido-global-color-accent', operator: '+' },
+  decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '-' },
+}
+
+export default {
+  name: 'gdd-transaction-list',
+  components: {
+    PaginationButtons,
+  },
+  data() {
+    return {
+      currentPage: 1,
+    }
+  },
+  props: {
+    transactions: { default: () => [] },
+    pageSize: { type: Number, default: 5 },
+    timestamp: { type: Number, default: 0 },
+    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', {
+        firstPage: 1 + this.pageSize * (this.currentPage - 1),
+        items: this.pageSize,
+      })
+    },
+    getProperties(item) {
+      const type = iconsByType[item.type]
+      if (type)
+        return {
+          icon: type.icon,
+          class: type.classes + ' m-mb-1 font2em',
+          operator: type.operator,
+        }
+      this.throwError('no icon to given type')
+    },
+    throwError(msg) {
+      throw new Error(msg)
+    },
+    showNext() {
+      this.currentPage++
+      this.updateTransactions()
+    },
+    showPrevious() {
+      this.currentPage--
+      this.updateTransactions()
+    },
+  },
+}
 </script>
 <style>
 .el-table .cell {

frontend/src/views/Pages/UserProfileTransactionList.vue

@@ -33,8 +33,8 @@ export default {
     }
   },
   methods: {
-    updateTransactions() {
-      this.$emit('update-transactions')
+    updateTransactions(pagination) {
+      this.$emit('update-transactions', pagination)
     },
   },
 }