Merge pull request #1432 from gradido/1106-first-transaction-cannot-be-expanded

1106 first transaction cannot be expanded

backend/src/graphql/model/Transaction.ts

@@ -15,6 +15,7 @@ export class Transaction {
     this.balance = 0
     this.totalBalance = 0
     this.memo = ''
+    this.firstTransaction = false
   }
 
   @Field(() => String)
@@ -52,4 +53,7 @@ export class Transaction {
 
   @Field({ nullable: true })
   decay?: Decay
+
+  @Field(() => Boolean)
+  firstTransaction: boolean
 }

backend/src/graphql/resolver/TransactionResolver.ts

@@ -95,6 +95,8 @@ async function calculateAndAddDecayTransactions(
           ).toString()
         }
       }
+    } else {
+      finalTransaction.firstTransaction = true
     }
 
     // sender or receiver when user has sent money

frontend/src/components/DecayInformation.vue

@@ -4,7 +4,7 @@
       {{ decay ? ' − ' + $n(decay.balance, 'decimal') : '' }}
     </span>
 
-    <div v-if="decaytyp === 'new'">
+    <div v-if="decaytyp === 'new' || decaytyp === 'decayLastTransaction'">
       <div class="d-flex" v-if="!decay.decayStartBlock">
         <div style="width: 100%" class="text-center pb-3">
           <b-icon icon="droplet-half" height="12" class="mb-2" />
@@ -56,17 +56,22 @@
           <div>{{ $t('decay.decay') }}</div>
         </b-col>
         <b-col cols="6">
-          <div>− {{ $n(decay.balance, 'decimal') }}</div>
+          <div v-if="decaytyp === 'new'">- {{ $n(decay.balance, 'decimal') }}</div>
+          <div v-if="decaytyp === 'decayLastTransaction'">
+            {{ $n(decay.balance + gddbalance, 'decimal') }} GDD -
+            {{ $n(decay.balance, 'decimal') }} GDD =
+            <b>{{ $n(gddbalance, 'decimal') }} GDD</b>
+          </div>
         </b-col>
       </b-row>
       <hr class="mt-2 mb-2" />
-      <b-row>
+      <b-row v-if="decaytyp === 'new'">
         <b-col class="text-center pt-3 pb-2">
           <b>{{ $t('decay.calculation_total') }}</b>
         </b-col>
       </b-row>
       <!-- Type-->
-      <b-row>
+      <b-row v-if="decaytyp === 'new'">
         <b-col cols="6" class="text-right">
           <div v-if="type === 'send'">{{ $t('decay.sent') }}</div>
           <div v-if="type === 'receive'">{{ $t('decay.received') }}</div>
@@ -77,7 +82,7 @@
         </b-col>
       </b-row>
       <!-- Decay-->
-      <b-row>
+      <b-row v-if="decaytyp === 'new'">
         <b-col cols="6" class="text-right">
           <div>{{ $t('decay.decay') }}</div>
         </b-col>
@@ -86,7 +91,7 @@
         </b-col>
       </b-row>
       <!-- Total-->
-      <b-row>
+      <b-row v-if="decaytyp === 'new'">
         <b-col cols="6" class="text-right">
           <div>{{ $t('decay.total') }}</div>
         </b-col>
@@ -109,6 +114,7 @@
 export default {
   name: 'DecayInformation',
   props: {
+    gddbalance: { type: Number },
     balance: { type: Number },
     type: { type: String, default: '' },
     decay: {

frontend/src/components/Transaction.spec.js

@@ -31,8 +31,13 @@ describe('Transaction', () => {
       expect(wrapper.find('div.gdt-transaction-list-item').exists()).toBeTruthy()
     })
 
-    it('has a collapse button', () => {
+    it('has a collapse icon bi-caret-down-square', () => {
-      expect(wrapper.find('button[type="button"].btn-secondary').text()).toBe('i')
+      expect(wrapper.find('div.gdt-transaction-list-item').findAll('svg').at(1).classes()).toEqual([
+        'bi-caret-down-square',
+        'b-icon',
+        'bi',
+        'text-muted',
+      ])
     })
 
     describe('no valid GDT entry type', () => {

frontend/src/components/Transaction.vue

@@ -9,9 +9,10 @@
 
         <!-- collaps Button  -->
         <div class="text-right" style="width: 96%; position: absolute">
-          <b-button class="btn-sm">
+          <b-icon
-            <b>i</b>
+            :icon="getCollapseState(id) ? 'caret-up-square' : 'caret-down-square'"
-          </b-button>
+            :class="getCollapseState(id) ? 'text-black' : 'text-muted'"
+          />
         </div>
 
         <!-- type  -->
@@ -85,6 +86,16 @@ export default {
     gdt: { type: Number },
     id: { type: Number },
   },
+  data() {
+    return {
+      collapseStatus: [],
+    }
+  },
+  methods: {
+    getCollapseState(id) {
+      return this.collapseStatus.includes('gdt-collapse-' + id)
+    },
+  },
   computed: {
     collapseId() {
       return 'gdt-collapse-' + String(this.id)
@@ -130,5 +141,14 @@ export default {
       }
     },
   },
+  mounted() {
+    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
+      if (isJustShown) {
+        this.collapseStatus.push(collapseId)
+      } else {
+        this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)
+      }
+    })
+  },
 }
 </script>

frontend/src/graphql/queries.js

@@ -78,6 +78,7 @@ export const transactionsQuery = gql`
           decayDuration
           decayStartBlock
         }
+        firstTransaction
       }
     }
   }

frontend/src/locales/de.json

@@ -21,6 +21,7 @@
     "switch-to-this-community": "zu dieser Gemeinschaft wechseln"
   },
   "decay": {
+    "befor_startblock_transaction": "Diese Transaktion beinhaltet keine Vergänglichkeit.",
     "calculation_decay": "Berechnung der Vergänglichkeit",
     "calculation_total": "Berechnung der Gesamtsumme",
     "created": "Geschöpft",
@@ -29,6 +30,7 @@
     "decayStart": " - Startblock für Vergänglichkeit am: ",
     "decay_introduced": "Die Vergänglichkeit wurde eingeführt am ",
     "decay_since_last_transaction": "Vergänglichkeit seit der letzten Transaktion",
+    "first_transaction": "Die erste Transaktion beinhaltet keine Vergänglichkeit.",
     "hours": "Stunden",
     "last_transaction": "Letzte Transaktion",
     "minutes": "Minuten",

frontend/src/locales/en.json

@@ -21,6 +21,7 @@
     "switch-to-this-community": "Switch to this community"
   },
   "decay": {
+    "befor_startblock_transaction": "This transaction does not include decay.",
     "calculation_decay": "Calculation of Decay",
     "calculation_total": "Calculation of the total Amount",
     "created": "Created",
@@ -29,6 +30,7 @@
     "decayStart": " - Starting block for decay at: ",
     "decay_introduced": "Decay was introduced on",
     "decay_since_last_transaction": "Decay since the last transaction",
+    "first_transaction": "The first transaction does not include decay.",
     "hours": "Hours",
     "last_transaction": "Last transaction:",
     "minutes": "Minutes",

frontend/src/views/Pages/AccountOverview.vue

@@ -15,6 +15,7 @@
         </b-col>
       </b-row>
       <gdd-transaction-list
+        :gddbalance="balance"
         :transactions="transactions"
         :pageSize="5"
         :timestamp="timestamp"

frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js

@@ -117,7 +117,7 @@ describe('GddTransactionList', () => {
               decay: { balance: '1.5' },
             },
             {
-              balance: '1.07',
+              balance: 1.07,
               type: 'decay',
             },
           ],
@@ -135,12 +135,31 @@ describe('GddTransactionList', () => {
           transaction = wrapper.findAll('div.gdd-transaction-list-item').at(0)
         })
 
+        it('has a bi-caret-down-square icon', () => {
+          expect(transaction.findAll('svg').at(0).classes()).toEqual([
+            'bi-caret-down-square',
+            'b-icon',
+            'bi',
+            'text-muted',
+          ])
+        })
+
+        // it('transaction is clicked', async () => {
+        //   await transaction.trigger('click')
+        //   expect(transaction.findAll('svg').at(0).classes()).toEqual([
+        //     'bi-caret-up-square',
+        //     'b-icon',
+        //     'bi',
+        //     'text-muted',
+        //   ])
+        // })
+
         it('has a bi-arrow-left-circle icon', () => {
-          expect(transaction.find('svg').classes()).toContain('bi-arrow-left-circle')
+          expect(transaction.findAll('svg').at(1).classes()).toContain('bi-arrow-left-circle')
         })
 
         it('has text-danger color', () => {
-          expect(transaction.find('svg').classes()).toContain('text-danger')
+          expect(transaction.findAll('svg').at(1).classes()).toContain('text-danger')
         })
 
         it('has a minus operator', () => {
@@ -186,12 +205,33 @@ describe('GddTransactionList', () => {
           transaction = wrapper.findAll('div.gdd-transaction-list-item').at(1)
         })
 
+        it('has a bi-caret-down-square icon', () => {
+          expect(transaction.findAll('svg').at(0).classes()).toEqual([
+            'bi-caret-down-square',
+            'b-icon',
+            'bi',
+            'text-muted',
+          ])
+        })
+
+        // it('transaction is clicked', async () => {
+        //   await transaction.trigger('click')
+        //   expect(transaction.findAll('svg').at(0).classes()).toEqual([
+        //     'bi-caret-up-square',
+        //     'b-icon',
+        //     'bi',
+        //     'text-muted',
+        //   ])
+        // })
+
         it('has a bi-gift icon', () => {
-          expect(transaction.find('svg').classes()).toContain('bi-gift')
+          expect(transaction.findAll('svg').at(1).classes()).toContain('bi-gift')
         })
 
         it('has gradido-global-color-accent color', () => {
-          expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
+          expect(transaction.findAll('svg').at(1).classes()).toContain(
+            'gradido-global-color-accent',
+          )
         })
 
         it('has a plus operator', () => {
@@ -225,12 +265,33 @@ describe('GddTransactionList', () => {
           transaction = wrapper.findAll('div.gdd-transaction-list-item').at(2)
         })
 
+        it('has a bi-caret-down-square icon', () => {
+          expect(transaction.findAll('svg').at(0).classes()).toEqual([
+            'bi-caret-down-square',
+            'b-icon',
+            'bi',
+            'text-muted',
+          ])
+        })
+
+        // it('transaction is clicked', async () => {
+        //   await transaction.trigger('click')
+        //   expect(transaction.findAll('svg').at(0).classes()).toEqual([
+        //     'bi-caret-up-square',
+        //     'b-icon',
+        //     'bi',
+        //     'text-muted',
+        //   ])
+        // })
+
         it('has a bi-arrow-right-circle icon', () => {
-          expect(transaction.find('svg').classes()).toContain('bi-arrow-right-circle')
+          expect(transaction.findAll('svg').at(1).classes()).toContain('bi-arrow-right-circle')
         })
 
         it('has gradido-global-color-accent color', () => {
-          expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
+          expect(transaction.findAll('svg').at(1).classes()).toContain(
+            'gradido-global-color-accent',
+          )
         })
 
         it('has a plus operator', () => {
@@ -276,12 +337,31 @@ describe('GddTransactionList', () => {
           transaction = wrapper.findAll('div.gdd-transaction-list-item').at(3)
         })
 
+        it('has a bi-caret-down-square icon', () => {
+          expect(transaction.findAll('svg').at(0).classes()).toEqual([
+            'bi-caret-down-square',
+            'b-icon',
+            'bi',
+            'text-muted',
+          ])
+        })
+
+        // it('transaction is clicked', async () => {
+        //   await transaction.trigger('click')
+        //   expect(transaction.findAll('svg').at(0).classes()).toEqual([
+        //     'bi-caret-up-square',
+        //     'b-icon',
+        //     'bi',
+        //     'text-muted',
+        //   ])
+        // })
+
         it('has a bi-droplet-half icon', () => {
-          expect(transaction.find('svg').classes()).toContain('bi-droplet-half')
+          expect(transaction.findAll('svg').at(1).classes()).toContain('bi-droplet-half')
         })
 
         it('has gradido-global-color-gray color', () => {
-          expect(transaction.find('svg').classes()).toContain('gradido-global-color-gray')
+          expect(transaction.findAll('svg').at(1).classes()).toContain('gradido-global-color-gray')
         })
 
         it('has a minus operator', () => {

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -2,35 +2,44 @@
   <div class="gdd-transaction-list">
     <div class="list-group">
       <div v-if="!transactions" class="test-no-transactionlist text-right">
-        <b-icon icon="exclamation-triangle" class="mr-2" style="color: red"></b-icon>
+        <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>
         <small>
           {{ $t('error.no-transactionlist') }}
         </small>
       </div>
       <div v-if="transactionCount < 0" class="test-empty-transactionlist text-right">
-        <b-icon icon="exclamation-triangle" class="mr-2" style="color: red"></b-icon>
+        <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>
         <small>{{ $t('error.empty-transactionlist') }}</small>
       </div>
       <div
-        v-for="{ decay, transactionId, type, date, balance, name, memo } in transactions"
+        v-for="{
+          decay,
+          transactionId,
+          type,
+          date,
+          balance,
+          name,
+          memo,
+          firstTransaction,
+          decayDuration,
+          decayEnd,
+          decayStart,
+        } in transactions"
         :key="transactionId"
         :style="type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
       >
         <div
           class="list-group-item gdd-transaction-list-item"
+          :class="getCollapseState(transactionId) ? 'bg-secondary' : ''"
           v-b-toggle="'decay-' + transactionId"
         >
           <!-- Collaps Button  -->
-          <div
+          <div class="text-right" style="width: 95%; position: absolute">
-            v-if="type != 'decay' && decay"
+            <b-icon
-            class="text-right"
+              :icon="getCollapseState(transactionId) ? 'caret-up-square' : 'caret-down-square'"
-            style="width: 95%; position: absolute"
+              :class="getCollapseState(transactionId) ? 'text-black' : 'text-muted'"
-          >
+            />
-            <b-button class="btn-sm">
-              <b>i</b>
-            </b-button>
           </div>
-
           <div>
             <b-row>
               <!-- ICON  -->
@@ -112,9 +121,13 @@
           </div>
 
           <!-- Collaps Start -->
-
+          <!-- v-if="
-          <b-collapse v-if="type != 'decay' && decay" class="pb-4" :id="'decay-' + transactionId">
+              (type != 'decay' && decay) ||
-            <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
+              firstTransaction ||
+              (!firstTransaction && decay === null)
+            " -->
+          <b-collapse class="pb-4" :id="'decay-' + transactionId">
+            <div class="pt-4 pb-4 bg-white border border-muted">
               <decay-information
                 v-if="decay"
                 decaytyp="new"
@@ -122,6 +135,30 @@
                 :decay="decay"
                 :type="type"
               />
+              <div v-if="firstTransaction" class="mt-3 mb-3 text-center">
+                <b>{{ $t('decay.first_transaction') }}</b>
+              </div>
+
+              <div
+                v-if="type !== 'decay' && !firstTransaction && decay === null"
+                class="mt-3 mb-3 text-center"
+              >
+                <b>{{ $t('decay.befor_startblock_transaction') }}</b>
+              </div>
+              <div v-if="type === 'decay'" class="mt-3 mb-3">
+                <decay-information
+                  decaytyp="decayLastTransaction"
+                  :gddbalance="gddbalance"
+                  :balance="balance"
+                  :decay="{
+                    balance: balance,
+                    decayStart: parseInt(decayStart),
+                    decayEnd: parseInt(decayEnd),
+                    decayDuration: parseInt(decayDuration),
+                  }"
+                  :type="type"
+                />
+              </div>
             </div>
           </b-collapse>
 
@@ -161,9 +198,11 @@ export default {
   data() {
     return {
       currentPage: 1,
+      collapseStatus: [],
     }
   },
   props: {
+    gddbalance: { type: Number },
     transactions: { default: () => [] },
     pageSize: { type: Number, default: 25 },
     timestamp: { type: Number, default: 0 },
@@ -191,6 +230,18 @@ export default {
     throwError(msg) {
       throw new Error(msg)
     },
+    getCollapseState(transactionId) {
+      return this.collapseStatus.includes('decay-' + transactionId)
+    },
+  },
+  mounted() {
+    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
+      if (isJustShown) {
+        this.collapseStatus.push(collapseId)
+      } else {
+        this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)
+      }
+    })
   },
   watch: {
     currentPage() {

frontend/src/views/Pages/UserProfileTransactionList.vue

@@ -5,6 +5,7 @@
         <p class="tab-tex">{{ $t('transaction.gdd-text') }}</p>
 
         <gdd-transaction-list
+          :gddbalance="balance"
           :timestamp="timestamp"
           :transactionCount="transactionCount"
           :transactions="transactions"