From 12057e4faaafd1d78df9e4853f4bc3f38c964bd7 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 27 May 2021 18:21:57 +0200
Subject: [PATCH] added pagination buttons to transaction list

---
 frontend/src/apis/communityAPI.js             |   2 +-
 frontend/src/components/PaginationButtons.vue |  32 ++++
 frontend/src/views/Pages/AccountOverview.vue  | 159 +++++++++---------
 .../AccountOverview/GddTransactionList.vue    | 127 +++++++++-----
 .../Pages/UserProfileTransactionList.vue      |   1 +
 5 files changed, 202 insertions(+), 119 deletions(-)
 create mode 100644 frontend/src/components/PaginationButtons.vue

diff --git a/frontend/src/apis/communityAPI.js b/frontend/src/apis/communityAPI.js
index 25ef10f43..b2df337b8 100644
--- a/frontend/src/apis/communityAPI.js
+++ b/frontend/src/apis/communityAPI.js
@@ -35,7 +35,7 @@ const communityAPI = {
   balance: async (sessionId) => {
     return apiGet(CONFIG.COMMUNITY_API_URL + 'getBalance/' + sessionId)
   },
-  transactions: async (sessionId, firstPage = 1, items = 1000, order = 'DESC') => {
+  transactions: async (sessionId, firstPage = 1, items = 5, order = 'DESC') => {
     return apiGet(
       `${CONFIG.COMMUNITY_API_URL}listTransactions/${firstPage}/${items}/${order}/${sessionId}`,
     )
diff --git a/frontend/src/components/PaginationButtons.vue b/frontend/src/components/PaginationButtons.vue
new file mode 100644
index 000000000..3ef7588ae
--- /dev/null
+++ b/frontend/src/components/PaginationButtons.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="pagination-buttons">
+    <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-button>
+      </b-col>
+      <b-col cols="2">
+        <p class="text-center pt-2">{{ currentPage }} / {{ totalPages }}</p>
+      </b-col>
+      <b-col>
+        <b-button :disabled="!hasNext" @click="$emit('show-next')">
+          <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 },
+   },
+ }
+</script>
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 5f262f627..33e1c99fb 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -31,93 +31,96 @@
       <gdd-transaction-list
         v-if="showContext"
         :transactions="transactions"
-        :max="5"
+        :page-size="5"
         :timestamp="timestamp"
-        :transactionCount="transactionCount"
-        @update-transactions="$emit('update-transactions')"
+        :transaction-count="transactionCount"
+        @update-transactions="updateTransactions"
       />
       <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
     </b-container>
   </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
-    },
-  },
-}
+ 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.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index d2a81cdbf..d7991a104 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -2,7 +2,8 @@
   <div class="gdd-transaction-list">
     <b-list-group>
       <b-list-group-item
-        v-for="item in transactions.slice(0, max)"
+        id="gdd-transaction-list"
+        v-for="item in transactions"
         :key="item.id"
         style="background-color: #ebebeba3 !important"
       >
@@ -66,6 +67,14 @@
           </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>
       <div v-if="transactions.length === 0" class="mt-4 text-center">
         <span>{{ $t('transaction.nullTransactions') }}</span>
       </div>
@@ -74,46 +83,84 @@
 </template>
 
 <script>
-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'
+ 
+ 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',
-  props: {
-    transactions: { default: () => [] },
-    max: { type: Number, default: 1000 },
-    timestamp: { type: Number, default: 0 },
-    transactionCount: { type: Number, default: 0 },
-  },
-  watch: {
-    timestamp: {
-      immediate: true,
-      handler: 'updateTransactions',
-    },
-  },
-  methods: {
-    updateTransactions() {
-      this.$emit('update-transactions')
-    },
-    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)
-    },
-  },
-}
+ 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,
+       })
+     },
+   },
+ }
 </script>
 <style>
 .el-table .cell {
diff --git a/frontend/src/views/Pages/UserProfileTransactionList.vue b/frontend/src/views/Pages/UserProfileTransactionList.vue
index 1b5b30f7b..412cb3bb3 100644
--- a/frontend/src/views/Pages/UserProfileTransactionList.vue
+++ b/frontend/src/views/Pages/UserProfileTransactionList.vue
@@ -9,6 +9,7 @@
       :timestamp="timestamp"
       :transactionCount="transactionCount"
       :transactions="transactions"
+      :show-pagination="true"
       @update-transactions="updateTransactions"
     />
   </div>