Merge branch 'master' into refactor-balance-model

admin/src/components/Tables/SearchUserTable.vue

@@ -49,30 +49,40 @@
 
       <template #row-details="row">
         <b-card ref="rowDetails" class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
-          <creation-formular
+          <b-tabs content-class="mt-3">
-            v-if="!row.item.deletedAt"
+            <b-tab :title="$t('creation')" active :disabled="row.item.deletedAt !== null">
-            type="singleCreation"
+              <creation-formular
-            pagetype="singleCreation"
+                v-if="!row.item.deletedAt"
-            :creation="row.item.creation"
+                type="singleCreation"
-            :item="row.item"
+                pagetype="singleCreation"
-            :creationUserData="creationUserData"
+                :creation="row.item.creation"
-            @update-user-data="updateUserData"
+                :item="row.item"
-          />
+                :creationUserData="creationUserData"
-          <div v-else>{{ $t('userIsDeleted') }}</div>
+                @update-user-data="updateUserData"
-          <confirm-register-mail-formular
+              />
-            v-if="!row.item.deletedAt"
+            </b-tab>
-            :checked="row.item.emailChecked"
+            <b-tab :title="$t('e_mail')" :disabled="row.item.deletedAt !== null">
-            :email="row.item.email"
+              <confirm-register-mail-formular
-            :dateLastSend="
+                v-if="!row.item.deletedAt"
-              row.item.emailConfirmationSend
+                :checked="row.item.emailChecked"
-                ? $d(new Date(row.item.emailConfirmationSend), 'long')
+                :email="row.item.email"
-                : ''
+                :dateLastSend="
-            "
+                  row.item.emailConfirmationSend
-          />
+                    ? $d(new Date(row.item.emailConfirmationSend), 'long')
-          <creation-transaction-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
+                    : ''
-          <transaction-link-list :userId="row.item.userId" />
+                "
-
+              />
-          <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+            </b-tab>
+            <b-tab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
+              <creation-transaction-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
+            </b-tab>
+            <b-tab :title="$t('transactionlink.name')" :disabled="row.item.deletedAt !== null">
+              <transaction-link-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
+            </b-tab>
+            <b-tab :title="$t('delete_user')">
+              <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+            </b-tab>
+          </b-tabs>
         </b-card>
       </template>
     </b-table>

admin/src/components/TransactionLinkList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="transaction-link-list">
     <div v-if="items.length > 0">
-      <div class="h3">{{ $t('transactionlink.form_header') }}</div>
+      <div class="h3">{{ $t('transactionlink.name') }}</div>
       <b-table striped hover :fields="fields" :items="items"></b-table>
     </div>
     <b-pagination

admin/src/locales/de.json

@@ -2,6 +2,7 @@
   "all_emails": "Alle Nutzer",
   "back": "zurück",
   "creation": "Schöpfung",
+  "creationList": "Schöpfungsliste",
   "creation_form": {
     "creation_failed": "Ausstehende Schöpfung für {email} konnte nicht erzeugt werden.",
     "creation_for": "Aktives Grundeinkommen für",
@@ -78,7 +79,7 @@
   "text": "Text",
   "transactionlink": {
     "created": "Erstellt",
-    "form_header": "Transaktion-Links",
+    "name": "Transaktion-Links",
     "valid_until": "Gültig bis"
   },
   "transactionlist": {
@@ -100,7 +101,6 @@
     "text_false": " Die letzte Email wurde am {date} Uhr an das Mitglied ({email}) gesendet.",
     "text_true": " Die Email wurde bestätigt."
   },
-  "userIsDeleted": "Der Nutzer ist gelöscht. Es können keine GDD mehr geschöpft werden.",
   "user_deleted": "Nutzer ist gelöscht.",
   "user_recovered": "Nutzer ist wiederhergestellt.",
   "user_search": "Nutzer-Suche"

admin/src/locales/en.json

@@ -2,6 +2,7 @@
   "all_emails": "All users",
   "back": "back",
   "creation": "Creation",
+  "creationList": "Creation list",
   "creation_form": {
     "creation_failed": "Could not create pending creation for {email}",
     "creation_for": "Active Basic Income for",
@@ -78,7 +79,7 @@
   "text": "Text",
   "transactionlink": {
     "created": "Created",
-    "form_header": "Transaction links",
+    "name": "Transaction links",
     "valid_until": "Valid until"
   },
   "transactionlist": {
@@ -100,7 +101,6 @@
     "text_false": "The last email was sent to the member ({email}) on {date}.",
     "text_true": "The email was confirmed."
   },
-  "userIsDeleted": "The user is deleted. No more GDD can be created.",
   "user_deleted": "User is deleted.",
   "user_recovered": "User is recovered.",
   "user_search": "User search"

frontend/src/components/GdtTransactionList.spec.js

@@ -1,24 +1,9 @@
 import { mount } from '@vue/test-utils'
-import { GdtEntryType } from '@/graphql/enums'
 import GdtTransactionList from './GdtTransactionList'
-
+import { GdtEntryType } from '@/graphql/enums'
-import { toastErrorSpy } from '@test/testSetup'
 
 const localVue = global.localVue
 
-const apolloMock = jest.fn().mockResolvedValue({
-  data: {
-    listGDTEntries: {
-      count: 0,
-      gdtEntries: [],
-    },
-  },
-})
-
-const windowScrollToMock = jest.fn()
-
-window.scrollTo = windowScrollToMock
-
 const state = {
   language: 'en',
 }
@@ -37,16 +22,20 @@ describe('GdtTransactionList ', () => {
     $t: jest.fn((t) => t),
     $n: jest.fn((n) => n),
     $d: jest.fn((d) => d),
-    $apollo: {
+  }
-      query: apolloMock,
+
-    },
+  const propsData = {
+    transactionsGdt: [],
+    transactionGdtCount: 0,
+    pageSize: 25,
+    value: 1,
   }
 
   const Wrapper = () => {
-    return mount(GdtTransactionList, { localVue, mocks })
+    return mount(GdtTransactionList, { localVue, mocks, propsData })
   }
 
-  describe('mount - When no transactions are loaded', () => {
+  describe('transactionGdtCount is 0', () => {
     beforeEach(() => {
       wrapper = Wrapper()
     })
@@ -62,54 +51,50 @@ describe('GdtTransactionList ', () => {
     })
   })
 
-  describe('mount - When transactions are loaded', () => {
+  describe('Transactions are loaded', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
-      apolloMock.mockResolvedValue({
-        data: {
-          listGDTEntries: {
-            count: 4,
-            gdtEntries: [
-              {
-                id: 1,
-                amount: 100,
-                gdt: 1700,
-                factor: 17,
-                comment: '',
-                date: '2021-05-02T17:20:11+00:00',
-                gdtEntryType: GdtEntryType.FORM,
-              },
-              {
-                id: 2,
-                amount: 1810,
-                gdt: 362,
-                factor: 0.2,
-                comment: 'Dezember 20',
-                date: '2020-12-31T12:00:00+00:00',
-                gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
-              },
-              {
-                id: 3,
-                amount: 100,
-                gdt: 1700,
-                factor: 17,
-                comment: '',
-                date: '2020-05-07T17:00:00+00:00',
-                gdtEntryType: GdtEntryType.FORM,
-              },
-              {
-                id: 4,
-                amount: 100,
-                gdt: 110,
-                factor: 22,
-                comment: '',
-                date: '2020-04-10T13:28:00+00:00',
-                gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
-              },
-            ],
-          },
-        },
-      })
       wrapper = Wrapper()
+      await wrapper.setProps({
+        transactionGdtCount: 42,
+        transactionsGdt: [
+          {
+            id: 1,
+            amount: 100,
+            gdt: 1700,
+            factor: 17,
+            comment: '',
+            date: '2021-05-02T17:20:11+00:00',
+            gdtEntryType: GdtEntryType.FORM,
+          },
+          {
+            id: 2,
+            amount: 1810,
+            gdt: 362,
+            factor: 0.2,
+            comment: 'Dezember 20',
+            date: '2020-12-31T12:00:00+00:00',
+            gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
+          },
+          {
+            id: 3,
+            amount: 100,
+            gdt: 1700,
+            factor: 17,
+            comment: '',
+            date: '2020-05-07T17:00:00+00:00',
+            gdtEntryType: GdtEntryType.FORM,
+          },
+          {
+            id: 4,
+            amount: 100,
+            gdt: 110,
+            factor: 22,
+            comment: '',
+            date: '2020-04-10T13:28:00+00:00',
+            gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
+          },
+        ],
+      })
     })
 
     it('renders the component', () => {
@@ -120,83 +105,25 @@ describe('GdtTransactionList ', () => {
       expect(wrapper.find('.gdt-funding').exists()).toBe(false)
     })
 
-    describe('server returns valid data', () => {
-      it('calls the API', async () => {
-        await wrapper.vm.$nextTick()
-        expect(apolloMock).toBeCalledWith(
-          expect.objectContaining({
-            variables: {
-              currentPage: 1,
-              pageSize: 25,
-            },
-          }),
-        )
-      })
-
-      it('scrolls to (0, 0) after API call', () => {
-        expect(windowScrollToMock).toBeCalledWith(0, 0)
-      })
-    })
-
-    describe('server returns error', () => {
-      beforeEach(() => {
-        jest.resetAllMocks()
-        apolloMock.mockRejectedValue({
-          message: 'Ouch!',
-        })
-        wrapper = Wrapper()
-      })
-
-      it('toasts an error message', () => {
-        expect(toastErrorSpy).toBeCalledWith('Ouch!')
-      })
-    })
-
     describe('change of currentPage', () => {
       it('calls the API after currentPage changes', async () => {
         jest.clearAllMocks()
-        await wrapper.setData({ transactionGdtCount: 42 })
         await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
-        expect(apolloMock).toBeCalledWith(
+        expect(wrapper.emitted('input')).toEqual([[2]])
-          expect.objectContaining({
-            variables: {
-              currentPage: 2,
-              pageSize: 25,
-            },
-          }),
-        )
       })
 
       describe('pagination buttons', () => {
         describe('with transactionCount > pageSize', () => {
-          beforeEach(async () => {
-            apolloMock.mockResolvedValue({
-              data: {
-                listGDTEntries: {
-                  count: 42,
-                  gdtEntries: [],
-                },
-              },
-            })
-            wrapper = Wrapper()
-          })
-
           it('shows the pagination buttons', () => {
             expect(wrapper.find('ul.pagination').exists()).toBe(true)
           })
         })
 
         describe('with transactionCount < pageSize', () => {
-          beforeEach(async () => {
+          beforeEach(() => {
-            apolloMock.mockResolvedValue({
+            wrapper.setProps({
-              data: {
+              transactionGdtCount: 10,
-                listGDTEntries: {
-                  count: 2,
-                  gdtEntries: [],
-                },
-              },
             })
-            wrapper = Wrapper()
           })
 
           it('shows no pagination buttons', () => {
@@ -205,5 +132,17 @@ describe('GdtTransactionList ', () => {
         })
       })
     })
+
+    describe('server not reachable', () => {
+      beforeEach(() => {
+        wrapper.setProps({
+          transactionGdtCount: -1,
+        })
+      })
+
+      it('renders the not-reachable text', () => {
+        expect(wrapper.text()).toBe('gdt.not-reachable')
+      })
+    })
   })
 })

frontend/src/components/GdtTransactionList.vue

@@ -8,7 +8,7 @@
           {{ $t('gdt.funding') }}
         </b-button>
       </div>
-      <div v-else-if="typeof transactionGdtCount === 'object'" class="text-center">
+      <div v-else-if="transactionGdtCount === -1" class="text-center">
         {{ $t('gdt.not-reachable') }}
       </div>
       <div
@@ -41,7 +41,6 @@
 </template>
 
 <script>
-import { listGDTEntriesQuery } from '@/graphql/queries'
 import Transaction from '@/components/Transaction.vue'
 
 export default {
@@ -49,44 +48,24 @@ export default {
   components: {
     Transaction,
   },
+  props: {
+    transactionsGdt: {
+      type: Array,
+      required: true,
+    },
+    transactionGdtCount: { type: Number, required: true },
+    pageSize: { type: Number, required: true },
+    value: { type: Number, required: true },
+  },
   data() {
     return {
-      transactionsGdt: [],
+      currentPage: this.value,
-      transactionGdtCount: { type: Number, default: 0 },
-      currentPage: 1,
-      pageSize: 25,
       link: 'https://gradido.net/' + this.$store.state.language + '/memberships/',
     }
   },
-  methods: {
-    async updateGdt() {
-      this.$apollo
-        .query({
-          query: listGDTEntriesQuery,
-          variables: {
-            currentPage: this.currentPage,
-            pageSize: this.pageSize,
-          },
-        })
-        .then((result) => {
-          const {
-            data: { listGDTEntries },
-          } = result
-          this.transactionsGdt = listGDTEntries.gdtEntries
-          this.transactionGdtCount = listGDTEntries.count
-          window.scrollTo(0, 0)
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-  },
-  mounted() {
-    this.updateGdt()
-  },
   watch: {
     currentPage() {
-      this.updateGdt()
+      if (this.value !== this.currentPage) this.$emit('input', this.currentPage)
     },
   },
 }

frontend/src/locales/de.json

@@ -124,16 +124,17 @@
     "valid_until": "Gültig bis"
   },
   "gdt": {
-    "calculation": "Berechnung der GradidoTransform",
+    "calculation": "Berechnung der Gradido Transform",
     "contribution": "Beitrag",
     "conversion": "Umrechnung",
-    "conversion-gdt-euro": "Umrechnung Euro / GradidoTransform (GDT)",
+    "conversion-gdt-euro": "Umrechnung Euro / Gradido Transform (GDT)",
     "credit": "Gutschrift",
     "factor": "Faktor",
     "formula": "Berechnungsformel",
     "funding": "Zu den Förderbeiträgen",
-    "gdt-received": "GradidoTransform (GDT) erhalten",
+    "gdt": "Gradido Transform",
-    "no-transactions": "Du hast noch keine GradidoTransform (GDT).",
+    "gdt-received": "Gradido Transform (GDT) erhalten",
+    "no-transactions": "Du hast noch keine Gradido Transform (GDT).",
     "not-reachable": "Der GDT Server ist nicht erreichbar.",
     "publisher": "Dein geworbenes Mitglied hat einen Beitrag bezahlt",
     "raise": "Erhöhung",

frontend/src/locales/en.json

@@ -124,16 +124,17 @@
     "valid_until": "Valid until"
   },
   "gdt": {
-    "calculation": "Calculation of GradidoTransform",
+    "calculation": "Calculation of Gradido Transform",
     "contribution": "Contribution",
     "conversion": "Conversion",
-    "conversion-gdt-euro": "Conversion Euro / GradidoTransform (GDT)",
+    "conversion-gdt-euro": "Conversion Euro / Gradido Transform (GDT)",
     "credit": "Credit",
     "factor": "Factor",
     "formula": "Calculation formula",
     "funding": "To the funding contributions",
-    "gdt-received": "GradidoTransform (GDT) received",
+    "gdt": "Gradido Transform",
-    "no-transactions": "You do not have GradidoTransform (GDT) yet.",
+    "gdt-received": "Gradido Transform (GDT) received",
+    "no-transactions": "You do not have Gradido Transform (GDT) yet.",
     "not-reachable": "The GDT Server is not reachable.",
     "publisher": "A member you referred has paid a contribution",
     "raise": "Increase",

frontend/src/pages/Overview.spec.js

@@ -25,12 +25,6 @@ describe('Overview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a status gdd-status-gdd', () => {
-      expect(wrapper.find('div.gdd-status-gdd').exists()).toBeTruthy()
-    })
-    it('has a status gdd-status-gdt', () => {
-      expect(wrapper.find('div.gdd-status-gdt').exists()).toBeTruthy()
-    })
     it('has a transactions table', () => {
       expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
     })

frontend/src/pages/Overview.vue

@@ -1,19 +1,6 @@
 <template>
   <div>
     <div class="container-fluid">
-      <b-row class="ml-1 mr-1 mb-2">
-        <b-col class="col-6 p-3 g-border">
-          <status class="gdd-status-gdd" :pending="pending" :balance="balance" status-text="GDD" />
-        </b-col>
-        <b-col class="col-6 p-3 text-right g-border">
-          <status
-            class="gdd-status-gdt"
-            :pending="pending"
-            :balance="GdtBalance"
-            status-text="GDT"
-          />
-        </b-col>
-      </b-row>
       <gdd-transaction-list
         :transactions="transactions"
         :pageSize="5"
@@ -29,14 +16,12 @@
   </div>
 </template>
 <script>
-import Status from '@/components/Status.vue'
 import GddTransactionList from '@/components/GddTransactionList.vue'
 import GddTransactionListFooter from '@/components/GddTransactionListFooter.vue'
 
 export default {
   name: 'Overview',
   components: {
-    Status,
     GddTransactionList,
     GddTransactionListFooter,
   },
@@ -46,8 +31,6 @@ export default {
     }
   },
   props: {
-    balance: { type: Number, default: 0 },
-    GdtBalance: { type: Number, default: 0 },
     transactions: {
       default: () => [],
     },

frontend/src/pages/Transactions.spec.js

@@ -1,28 +1,48 @@
 import { mount } from '@vue/test-utils'
 import Transactions from './Transactions'
+import { GdtEntryType } from '@/graphql/enums'
+
+import { toastErrorSpy } from '@test/testSetup'
 
 const localVue = global.localVue
 
-window.scrollTo = jest.fn()
+const windowScrollToMock = jest.fn()
+window.scrollTo = windowScrollToMock
+
+const apolloMock = jest.fn().mockResolvedValue({
+  data: {
+    listGDTEntries: {
+      count: 0,
+      gdtEntries: [],
+    },
+  },
+})
 
 describe('Transactions', () => {
   let wrapper
 
+  const state = {
+    language: 'en',
+  }
+
   const mocks = {
+    $store: {
+      state,
+      commit: jest.fn(),
+    },
     $t: jest.fn((t) => t),
     $n: jest.fn((n) => String(n)),
     $d: jest.fn((d) => d),
     $i18n: {
       locale: jest.fn(() => 'en'),
     },
-  }
+    $apollo: {
-
+      query: apolloMock,
-  const stubs = {
+    },
-    GdtTransactionList: true,
   }
 
   const Wrapper = () => {
-    return mount(Transactions, { localVue, mocks, stubs })
+    return mount(Transactions, { localVue, mocks })
   }
 
   describe('mount', () => {
@@ -40,7 +60,7 @@ describe('Transactions', () => {
       )
     })
 
-    it('emist update-transactions when update-transactions is called', () => {
+    it('emits update-transactions when update-transactions is called', () => {
       wrapper
         .findComponent({ name: 'GddTransactionList' })
         .vm.$emit('update-transactions', { currentPage: 2, pageSize: 25 })
@@ -63,32 +83,129 @@ describe('Transactions', () => {
       })
 
       describe('click on GDT tab', () => {
-        beforeEach(() => {
+        describe('server returns valid data', () => {
-          wrapper.findAll('li[ role="presentation"]').at(1).find('a').trigger('click')
-        })
-
-        it('does not show the GDD transactions', () => {
-          expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeFalsy()
-        })
-
-        it('shows the GDT transactions', () => {
-          expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeTruthy()
-        })
-
-        describe('click on GDD tab', () => {
           beforeEach(() => {
-            wrapper.findAll('li[ role="presentation"]').at(0).find('a').trigger('click')
+            apolloMock.mockResolvedValue({
+              data: {
+                listGDTEntries: {
+                  count: 4,
+                  gdtEntries: [
+                    {
+                      id: 1,
+                      amount: 100,
+                      gdt: 1700,
+                      factor: 17,
+                      comment: '',
+                      date: '2021-05-02T17:20:11+00:00',
+                      gdtEntryType: GdtEntryType.FORM,
+                    },
+                    {
+                      id: 2,
+                      amount: 1810,
+                      gdt: 362,
+                      factor: 0.2,
+                      comment: 'Dezember 20',
+                      date: '2020-12-31T12:00:00+00:00',
+                      gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
+                    },
+                    {
+                      id: 3,
+                      amount: 100,
+                      gdt: 1700,
+                      factor: 17,
+                      comment: '',
+                      date: '2020-05-07T17:00:00+00:00',
+                      gdtEntryType: GdtEntryType.FORM,
+                    },
+                    {
+                      id: 4,
+                      amount: 100,
+                      gdt: 110,
+                      factor: 22,
+                      comment: '',
+                      date: '2020-04-10T13:28:00+00:00',
+                      gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
+                    },
+                  ],
+                },
+              },
+            })
+            wrapper.findAll('li[ role="presentation"]').at(1).find('a').trigger('click')
           })
 
-          it('shows the GDD transactions', () => {
+          it('does not show the GDD transactions', () => {
-            expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeTruthy()
+            expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeFalsy()
           })
 
-          it('does not show the GDT', () => {
+          it('shows the GDT transactions', () => {
-            expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeFalsy()
+            expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeTruthy()
+          })
+
+          it('calls the API', () => {
+            expect(apolloMock).toBeCalledWith(
+              expect.objectContaining({
+                variables: {
+                  currentPage: 1,
+                  pageSize: 25,
+                },
+              }),
+            )
+          })
+
+          it('scrolls to (0, 0) after API call', () => {
+            expect(windowScrollToMock).toBeCalledWith(0, 0)
+          })
+
+          describe('click on GDD tab', () => {
+            beforeEach(() => {
+              wrapper.findAll('li[ role="presentation"]').at(0).find('a').trigger('click')
+            })
+
+            it('shows the GDD transactions', () => {
+              expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeTruthy()
+            })
+
+            it('does not show the GDT', () => {
+              expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeFalsy()
+            })
+          })
+        })
+
+        describe('server returns error', () => {
+          beforeEach(() => {
+            apolloMock.mockRejectedValue({ message: 'Ouch!' })
+            wrapper.findAll('li[ role="presentation"]').at(1).find('a').trigger('click')
+          })
+
+          it('toasts an error message', () => {
+            expect(toastErrorSpy).toBeCalledWith('Ouch!')
+          })
+
+          it('sets transactionGdtCount to -1', () => {
+            expect(wrapper.vm.transactionGdtCount).toBe(-1)
           })
         })
       })
     })
+
+    describe('update currentPage', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        wrapper.setData({
+          currentPage: 2,
+        })
+      })
+
+      it('calls the API', () => {
+        expect(apolloMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              currentPage: 2,
+              pageSize: 25,
+            },
+          }),
+        )
+      })
+    })
   })
 })

frontend/src/pages/Transactions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pb-4">
-    <b-tabs content-class="" justified>
+    <b-tabs v-model="tabIndex" content-class="" justified>
       <b-tab :title="`Gradido  (${$n(balance, 'decimal')} GDD)`" class="px-4">
         <p class="tab-tex">{{ $t('transaction.gdd-text') }}</p>
 
@@ -15,13 +15,17 @@
         />
       </b-tab>
 
-      <b-tab
+      <b-tab :title="titleGdt" class="px-4" @click="updateGdt()">
-        :title="`Gradido Transform  (${GdtBalance === null ? '—' : $n(GdtBalance, 'decimal')} GDT)`"
+        <b-row class="mb-3">
-        class="px-4"
+          <b-col>{{ $t('transaction.gdt-text') }}</b-col>
-      >
+          <b-col class="text-right">{{ `${$n(GdtBalance, 'decimal')} GDT` }}</b-col>
-        <p class="">{{ $t('transaction.gdt-text') }}</p>
+        </b-row>
-
+        <gdt-transaction-list
-        <gdt-transaction-list />
+          v-model="currentPage"
+          :transactionsGdt="transactionsGdt"
+          :transactionGdtCount="transactionGdtCount"
+          :pageSize="pageSize"
+        />
       </b-tab>
     </b-tabs>
   </div>
@@ -29,6 +33,7 @@
 <script>
 import GddTransactionList from '@/components/GddTransactionList.vue'
 import GdtTransactionList from '@/components/GdtTransactionList.vue'
+import { listGDTEntriesQuery } from '@/graphql/queries'
 
 export default {
   name: 'Transactions',
@@ -48,13 +53,52 @@ export default {
   data() {
     return {
       timestamp: Date.now(),
+      transactionsGdt: [],
+      transactionGdtCount: 0,
+      currentPage: 1,
+      pageSize: 25,
+      tabIndex: 0,
     }
   },
   methods: {
+    async updateGdt() {
+      this.$apollo
+        .query({
+          query: listGDTEntriesQuery,
+          variables: {
+            currentPage: this.currentPage,
+            pageSize: this.pageSize,
+          },
+        })
+        .then((result) => {
+          const {
+            data: { listGDTEntries },
+          } = result
+          this.transactionsGdt = listGDTEntries.gdtEntries
+          this.transactionGdtCount = listGDTEntries.count
+          window.scrollTo(0, 0)
+        })
+        .catch((error) => {
+          this.transactionGdtCount = -1
+          this.toastError(error.message)
+        })
+    },
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },
   },
+  computed: {
+    titleGdt(boolean) {
+      if (this.tabIndex === 1)
+        return `${this.$t('gdt.gdt')} (${this.$n(this.GdtBalance, 'decimal')} GDT)`
+      return this.$t('gdt.gdt')
+    },
+  },
+  watch: {
+    currentPage() {
+      this.updateGdt()
+    },
+  },
 }
 </script>
 <style>