From 94f6fc7050755641418c8675f1c4ad8dbf3a81af Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 27 May 2021 18:45:30 +0200
Subject: [PATCH] pagination works in frontend but the API call does not work

---
 frontend/src/components/PaginationButtons.vue |  24 ++-
 .../src/views/Layout/DashboardLayout_gdd.vue  |  10 +-
 frontend/src/views/Pages/AccountOverview.vue  | 156 ++++++++--------
 .../GddTransactionList.spec.js                |   4 +-
 .../AccountOverview/GddTransactionList.vue    | 169 +++++++++---------
 .../Pages/UserProfileTransactionList.vue      |   4 +-
 6 files changed, 182 insertions(+), 185 deletions(-)

diff --git a/frontend/src/components/PaginationButtons.vue b/frontend/src/components/PaginationButtons.vue
index 3ef7588ae..82440a40e 100644
--- a/frontend/src/components/PaginationButtons.vue
+++ b/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>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index d6b9f44ff..b7dfe2b93 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/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>
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 33e1c99fb..f25cce48b 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/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>
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
index af084d784..aa0a6f2d2 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
+++ b/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', () => {
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index d7991a104..a9aafdb85 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/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 {
diff --git a/frontend/src/views/Pages/UserProfileTransactionList.vue b/frontend/src/views/Pages/UserProfileTransactionList.vue
index 412cb3bb3..5e5fb9efe 100644
--- a/frontend/src/views/Pages/UserProfileTransactionList.vue
+++ b/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)
     },
   },
 }