Merge pull request #1875 from gradido/1804-hide-pagenation-on-empty-transactionlist

🍰 Hide Pagenation On Short Transactionlist

backend/src/seeds/creation/index.ts

@@ -1,6 +1,131 @@
 import { CreationInterface } from './CreationInterface'
 import { nMonthsBefore } from '../factory/creation'
 
+const bobsSendings = [
+  {
+    amount: 10,
+    memo: 'Herzlich Willkommen bei Gradido!',
+  },
+  {
+    amount: 10,
+    memo: 'für deine Hilfe, Betty',
+  },
+  {
+    amount: 23.37,
+    memo: 'für deine Hilfe, David',
+  },
+  {
+    amount: 47,
+    memo: 'für deine Hilfe, Frau Holle',
+  },
+  {
+    amount: 1.02,
+    memo: 'für deine Hilfe, Herr Müller',
+  },
+  {
+    amount: 5.67,
+    memo: 'für deine Hilfe, Maier',
+  },
+  {
+    amount: 72.93,
+    memo: 'für deine Hilfe, Elsbeth',
+  },
+  {
+    amount: 5.6,
+    memo: 'für deine Hilfe, Daniel',
+  },
+  {
+    amount: 8.87,
+    memo: 'für deine Hilfe, Yoda',
+  },
+  {
+    amount: 7.56,
+    memo: 'für deine Hilfe, Sabine',
+  },
+  {
+    amount: 7.89,
+    memo: 'für deine Hilfe, Karl',
+  },
+  {
+    amount: 8.9,
+    memo: 'für deine Hilfe, Darth Vader',
+  },
+  {
+    amount: 56.79,
+    memo: 'für deine Hilfe, Luci',
+  },
+  {
+    amount: 3.45,
+    memo: 'für deine Hilfe, Hanne',
+  },
+  {
+    amount: 8.74,
+    memo: 'für deine Hilfe, Luise',
+  },
+  {
+    amount: 7.85,
+    memo: 'für deine Hilfe, Annegred',
+  },
+  {
+    amount: 32.7,
+    memo: 'für deine Hilfe, Prinz von Zamunda',
+  },
+  {
+    amount: 44.2,
+    memo: 'für deine Hilfe, Charly Brown',
+  },
+  {
+    amount: 38.17,
+    memo: 'für deine Hilfe, Michael',
+  },
+  {
+    amount: 5.72,
+    memo: 'für deine Hilfe, Kaja',
+  },
+  {
+    amount: 3.99,
+    memo: 'für deine Hilfe, Maja',
+  },
+  {
+    amount: 4.5,
+    memo: 'für deine Hilfe, Martha',
+  },
+  {
+    amount: 8.3,
+    memo: 'für deine Hilfe, Ursula',
+  },
+  {
+    amount: 2.9,
+    memo: 'für deine Hilfe, Urs',
+  },
+  {
+    amount: 4.6,
+    memo: 'für deine Hilfe, Mecedes',
+  },
+  {
+    amount: 74.1,
+    memo: 'für deine Hilfe, Heidi',
+  },
+  {
+    amount: 4.5,
+    memo: 'für deine Hilfe, Peter',
+  },
+  {
+    amount: 5.8,
+    memo: 'für deine Hilfe, Fräulein Rottenmeier',
+  },
+]
+const bobsTransactions: CreationInterface[] = []
+bobsSendings.forEach((sending) => {
+  bobsTransactions.push({
+    email: 'bob@baumeister.de',
+    amount: sending.amount,
+    memo: sending.memo,
+    creationDate: nMonthsBefore(new Date()),
+    confirmed: true,
+  })
+})
+
 export const creations: CreationInterface[] = [
   {
     email: 'bibi@bloxberg.de',
@@ -10,14 +135,7 @@ export const creations: CreationInterface[] = [
     confirmed: true,
     moveCreationDate: 12,
   },
-  {
-    email: 'bob@baumeister.de',
-    amount: 1000,
-    memo: 'Herzlich Willkommen bei Gradido!',
-    creationDate: nMonthsBefore(new Date()),
-    confirmed: true,
-    moveCreationDate: 8,
-  },
+  ...bobsTransactions,
   {
     email: 'raeuber@hotzenplotz.de',
     amount: 1000,

backend/src/seeds/index.ts

@@ -66,7 +66,10 @@ const run = async () => {
 
   // create GDD
   for (let i = 0; i < creations.length; i++) {
+    const now = new Date().getTime() // we have to wait a little! quick fix for account sum problem of bob@baumeister.de, (see https://github.com/gradido/gradido/issues/1886)
     await creationFactory(seedClient, creations[i])
+    // eslint-disable-next-line no-empty
+    while (new Date().getTime() < now + 1000) {} // we have to wait a little! quick fix for account sum problem of bob@baumeister.de, (see https://github.com/gradido/gradido/issues/1886)
   }
 
   // create Transaction Links

frontend/src/components/GddTransactionList.spec.js

@@ -407,29 +407,34 @@ describe('GddTransactionList', () => {
     })
 
     describe('pagination buttons', () => {
+      const createTransaction = (idx) => {
+        return {
+          amount: '3.14',
+          balanceDate: '2021-04-29T17:26:40+00:00',
+          decay: {
+            decay: '-477.01',
+            start: '2021-05-13T17:46:31.000Z',
+            end: '2022-04-20T06:51:25.000Z',
+            duration: 29509494,
+          },
+          memo: 'Kreiszahl PI',
+          linkedUser: {
+            firstName: 'Bibi',
+            lastName: 'Bloxberg',
+          },
+          id: idx + 1,
+          typeId: 'RECEIVE',
+          balance: '33.33',
+        }
+      }
+
       beforeEach(async () => {
+        const transactionCount = 42
         await wrapper.setProps({
-          transactions: Array.from({ length: 42 }, (_, idx) => {
-            return {
-              amount: '3.14',
-              balanceDate: '2021-04-29T17:26:40+00:00',
-              decay: {
-                decay: '-477.01',
-                start: '2021-05-13T17:46:31.000Z',
-                end: '2022-04-20T06:51:25.000Z',
-                duration: 29509494,
-              },
-              memo: 'Kreiszahl PI',
-              linkedUser: {
-                firstName: 'Bibi',
-                lastName: 'Bloxberg',
-              },
-              id: idx + 1,
-              typeId: 'RECEIVE',
-              balance: '33.33',
-            }
+          transactions: Array.from({ length: transactionCount }, (_, idx) => {
+            return createTransaction(idx)
           }),
-          transactionCount: 42,
+          transactionCount,
           decayStartBlock,
           pageSize: 25,
           showPagination: true,
@@ -449,22 +454,22 @@ describe('GddTransactionList', () => {
           )
         })
       })
-    })
 
-    describe('show no pagination', () => {
-      beforeEach(async () => {
-        await wrapper.setProps({
-          transactions: [],
-          transactionCount: 2,
-          decayStartBlock,
-          pageSize: 25,
-          showPagination: false,
+      describe('show no pagination', () => {
+        it('shows no pagination buttons', async () => {
+          const transactionCount = 2
+          await wrapper.setProps({
+            transactions: Array.from({ length: transactionCount }, (_, idx) => {
+              return createTransaction(idx)
+            }),
+            transactionCount,
+            decayStartBlock,
+            pageSize: 25,
+            showPagination: false,
+          })
+          expect(wrapper.find('ul.pagination').exists()).toBe(false)
         })
       })
-
-      it('shows no pagination buttons', () => {
-        expect(wrapper.find('ul.pagination').exists()).toBe(false)
-      })
     })
   })
 })

frontend/src/components/GddTransactionList.vue

@@ -61,7 +61,7 @@
       </div>
     </div>
     <b-pagination
-      v-if="showPagination"
+      v-if="isPaginationVisible"
       class="mt-3"
       pills
       size="lg"
@@ -96,11 +96,6 @@ export default {
     TransactionCreation,
     TransactionLinkSummary,
   },
-  data() {
-    return {
-      currentPage: 1,
-    }
-  },
   props: {
     transactions: { default: () => [] },
     pageSize: { type: Number, default: 25 },
@@ -110,6 +105,11 @@ export default {
     showPagination: { type: Boolean, default: false },
     pending: { type: Boolean },
   },
+  data() {
+    return {
+      currentPage: 1,
+    }
+  },
   methods: {
     updateTransactions() {
       this.$emit('update-transactions', {
@@ -123,6 +123,11 @@ export default {
       return '0'
     },
   },
+  computed: {
+    isPaginationVisible() {
+      return this.showPagination && this.pageSize < this.transactionCount
+    },
+  },
   watch: {
     currentPage() {
       this.updateTransactions()
@@ -134,6 +139,7 @@ export default {
   },
 }
 </script>
+
 <style>
 collaps-icon {
   width: 95%;

frontend/src/pages/Transactions.vue

@@ -9,7 +9,7 @@
           :transactionCount="transactionCount"
           :transactionLinkCount="transactionLinkCount"
           :transactions="transactions"
-          :show-pagination="true"
+          :showPagination="true"
           @update-transactions="updateTransactions"
           v-on="$listeners"
         />