From 5b16d687ac7db36d4d26ddced34159b3ea1720f5 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 25 Mar 2022 09:48:28 +0100
Subject: [PATCH] add bootstrap pagination on GDD Transaction List, tests
 adapted

---
 .../src/components/GdtTransactionList.spec.js | 20 +++++++++++++++++++
 .../src/components/GdtTransactionList.vue     | 11 ++++++----
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/GdtTransactionList.spec.js b/frontend/src/components/GdtTransactionList.spec.js
index a04cdc905..81db73de9 100644
--- a/frontend/src/components/GdtTransactionList.spec.js
+++ b/frontend/src/components/GdtTransactionList.spec.js
@@ -167,5 +167,25 @@ describe('GdtTransactionList ', () => {
         )
       })
     })
+
+    describe.only('pagination buttons', () => {
+      it('shows the pagination buttons if transactionCount > 25', () => {
+        beforeEach(async () => {
+          await wrapper.setProps({
+            transactionGdtCount: 42,
+          })
+        })
+        expect(wrapper.find('div.pagination')).toBeTruthy()
+      })
+
+      it('shows no the pagination buttons if transactionCount < 25', () => {
+        beforeEach(async () => {
+          await wrapper.setProps({
+            transactionGdtCount: 2,
+          })
+        })
+        expect(wrapper.find('div.pagination').exists()).toBe(false)
+      })
+    })
   })
 })
diff --git a/frontend/src/components/GdtTransactionList.vue b/frontend/src/components/GdtTransactionList.vue
index 0c061ed06..a6f19a560 100644
--- a/frontend/src/components/GdtTransactionList.vue
+++ b/frontend/src/components/GdtTransactionList.vue
@@ -27,23 +27,26 @@
         ></transaction>
       </div>
     </div>
-    <pagination-buttons
+    <b-pagination
+      v-if="transactionGdtCount > 25"
+      class="mt-3"
+      pills
+      size="lg"
       v-model="currentPage"
       :per-page="pageSize"
       :total-rows="transactionGdtCount"
-    ></pagination-buttons>
+      align="center"
+    ></b-pagination>
   </div>
 </template>
 
 <script>
 import { listGDTEntriesQuery } from '@/graphql/queries'
-import PaginationButtons from '@/components/PaginationButtons'
 import Transaction from '@/components/Transaction.vue'
 
 export default {
   name: 'gdt-transaction-list',
   components: {
-    PaginationButtons,
     Transaction,
   },
   data() {