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

1106 first transaction cannot be expanded
2025-12-13 07:45:54 +00:00 · 2022-02-28 11:40:18 +01:00 · 2022-02-28 11:40:18 +01:00 · a837fd5f60
commit a837fd5f60
parent 94e417a620 5eeb870955
12 changed files with 210 additions and 35 deletions
--- a/backend/src/graphql/model/Transaction.ts
+++ b/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
 }
--- a/backend/src/graphql/resolver/TransactionResolver.ts
+++ b/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
--- a/frontend/src/components/DecayInformation.vue
+++ b/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: {
--- a/frontend/src/components/Transaction.spec.js
+++ b/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', () => {
-      expect(wrapper.find('button[type="button"].btn-secondary').text()).toBe('i')
+    it('has a collapse icon bi-caret-down-square', () => {
+      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', () => {
--- a/frontend/src/components/Transaction.vue
+++ b/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>i</b>
-          </b-button>
+          <b-icon
+            :icon="getCollapseState(id) ? 'caret-up-square' : 'caret-down-square'"
+            :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>
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@ -78,6 +78,7 @@ export const transactionsQuery = gql`
          decayDuration
          decayStartBlock
        }
+        firstTransaction
      }
    }
  }
--- a/frontend/src/locales/de.json
+++ b/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",
--- a/frontend/src/locales/en.json
+++ b/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",
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/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"
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
+++ b/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', () => {
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/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
-            v-if="type != 'decay' && decay"
-            class="text-right"
-            style="width: 95%; position: absolute"
-          >
-            <b-button class="btn-sm">
-              <b>i</b>
-            </b-button>
+          <div class="text-right" style="width: 95%; position: absolute">
+            <b-icon
+              :icon="getCollapseState(transactionId) ? 'caret-up-square' : 'caret-down-square'"
+              :class="getCollapseState(transactionId) ? 'text-black' : 'text-muted'"
+            />
          </div>
-
          <div>
            <b-row>
              <!-- ICON  -->
@ -112,9 +121,13 @@
          </div>

          <!-- Collaps Start -->
-
-          <b-collapse v-if="type != 'decay' && decay" class="pb-4" :id="'decay-' + transactionId">
-            <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
+          <!-- v-if="
+              (type != 'decay' && decay) ||
+              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() {
--- a/frontend/src/views/Pages/UserProfileTransactionList.vue
+++ b/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"