add bootstrap pagination on GDD Transaction List, tests adapted

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)
+      })
+    })
   })
 })

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() {