add slots for transaction types, seperate decayinformations for evry type

frontend/src/components/DecayInformation.vue

@@ -15,7 +15,7 @@
         v-else-if="new Date(balanceDate).getTime() < new Date(decayStartBlock).getTime()"
         class="mt-3 mb-3 text-center"
       >
-        <b>{{ $t('decay.befor_startblock_transaction') }}</b>
+        <b>{{ $t('decay.before_startblock_transaction') }}</b>
       </div>
 
       <div v-else>

frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="decayinformation-startblock">
+    <!-- if balanceDate <  decayStartBlock - Wenn die transaktion vor dem einführen der dacay function liegt. -->
+    <div class="mt-3 mb-3 text-center">
+      <b>{{ $t('decay.before_startblock_transaction') }}</b>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-StartBlock',
+  props: {
+    balanceDate: { type: String },
+    decayStartBlock: { type: String },
+  },
+}
+</script>

frontend/src/components/DecayInformations/DecayInformation-Decay.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="decayinformation-decay">
+    <div class="d-flex">
+      <div style="width: 100%" class="text-center pb-3">
+        <b-icon icon="droplet-half" height="12" class="mb-2" />
+        <b>{{ $t('decay.calculation_decay') }}</b>
+      </div>
+    </div>
+
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>
+          {{ $n(Number(balance) - Number(decay.decay), 'decimal') }}
+          GDD - {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
+          <b>{{ $n(Number(balance), 'decimal') }} GDD</b>
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-Decay',
+  props: {
+    balance: {
+      type: String,
+    },
+    decay: {
+      type: Object,
+    },
+  },
+}
+</script>

frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="decayinformation-startblock">
+    <div class="d-flex">
+      <div style="width: 100%" class="text-center pb-3">
+        <b-icon icon="droplet-half" height="12" class="mb-2" />
+        <b>{{ $t('decay.calculation_decay') }}</b>
+      </div>
+    </div>
+
+    <b-row>
+      <b-col cols="6">
+        <div>
+          <div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
+          <div>{{ $t('decay.decay_introduced') }} :</div>
+        </div>
+        <div>
+          <span v-if="decay.start">
+            {{ $d(new Date(decay.start * 1000), 'long') }}
+            {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+          </span>
+        </div>
+      </b-col>
+    </b-row>
+
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>- {{ $n(decay.decay, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <hr class="mt-2 mb-2" />
+    <b-row>
+      <b-col class="text-center pt-3 pb-2">
+        <b>{{ $t('decay.calculation_total') }}</b>
+      </b-col>
+    </b-row>
+    <!-- Type-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">{{ $n(amount, 'decimal') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="5">
+        <div class="text-right">
+          <b-icon icon="droplet-half" height="15" class="mb-1" />
+        </div>
+      </b-col>
+      <b-col cols="7">
+        <div class="gdd-transaction-list-item-decay">
+          <b>{{ $t('decay.Starting_block_decay') }}</b>
+        </div>
+      </b-col>
+    </b-row>
+
+    <!-- Total-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.total') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">
+          <b>{{ $n(Number(amount) - Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'RECEIVE'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'CREATION'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-StartBlock',
+  props: {
+    balanceDate: { type: String },
+    decayStartBlock: { type: String },
+  },
+}
+</script>

frontend/src/components/DecayInformations/DecayInformation-FirstTransaction.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="decayinformation-first-transaction">
+    <div>
+      <!-- if decay.start === null - Wenn kein decay angegeben dan ist es die erste Transaktion -->
+      <div class="mt-3 mb-3 text-center">
+        <b>{{ $t('decay.first_transaction') }}</b>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-FirstTransaction',
+  props: {
+    decay: {
+      type: Object,
+    },
+  },
+}
+</script>

frontend/src/components/DecayInformations/DecayInformation-Long.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="decayinformation-long">
+    <div class="d-flex">
+      <div style="width: 100%" class="text-center pb-3">
+        <b-icon icon="droplet-half" height="12" class="mb-2" />
+        <b>{{ $t('decay.calculation_decay') }}</b>
+      </div>
+    </div>
+
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.last_transaction') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>
+          <span>
+            {{ $d(new Date(decay.start), 'long') }}
+            {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+          </span>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.past_time') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <span v-if="duration">
+          <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
+          <span v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</span>
+          <span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
+          <span v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</span>
+          <span v-if="duration.minutes > 0">{{ duration.minutes }} {{ $t('decay.minutes') }},</span>
+          <span v-if="duration.seconds > 0">{{ duration.seconds }} {{ $t('decay.seconds') }}</span>
+        </span>
+      </b-col>
+    </b-row>
+
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>{{ $n(decay.decay, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <hr class="mt-2 mb-2" />
+    <b-row>
+      <b-col class="text-center pt-3 pb-2">
+        <b>{{ $t('decay.calculation_total') }}</b>
+      </b-col>
+    </b-row>
+    <!-- Type-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">{{ $n(amount, 'decimal') }}</div>
+        <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <!-- Decay-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.decay') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div>{{ $n(decay.decay, 'decimal') }}</div>
+      </b-col>
+    </b-row>
+    <!-- Total-->
+    <b-row>
+      <b-col cols="6" class="text-right">
+        <div>{{ $t('decay.total') }}</div>
+      </b-col>
+      <b-col cols="6">
+        <div v-if="typeId === 'SEND'">
+          <b>{{ $n(Number(amount) - Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'RECEIVE'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+        <div v-if="typeId === 'CREATION'">
+          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-Long',
+  props: {
+    amount: { type: String, default: '0' },
+    typeId: { type: String, default: '' },
+    decay: {
+      type: Object,
+    },
+  },
+  computed: {
+    duration() {
+      return this.$moment.duration(new Date(this.decay.end) - new Date(this.decay.start))._data
+    },
+  },
+}
+</script>

frontend/src/components/DecayInformations/DecayInformation-Short.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="decayinformation-short">
+    <span>
+      {{ decay ? $n(decay.decay, 'decimal') : '' }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DecayInformation-Short',
+  props: {
+    decay: {
+      type: Object,
+    },
+  },
+}
+</script>

frontend/src/components/TransactionListItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <slot :name="typeId"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TransactionList',
+  props: {
+    typeId: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>

frontend/src/components/Transactions/TransactionCreation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
       {{ memo }}, {{ properties }}
@@ -77,7 +77,7 @@
               </b-col>
               <b-col cols="7">
                 <div class="gdd-transaction-list-item-decay">
-                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                  <decay-information-short v-if="decay" decaytyp="short" :decay="decay" />
                 </div>
               </b-col>
             </b-row>
@@ -85,25 +85,24 @@
         </b-row>
       </div>
 
-      <b-collapse class="pb-4" v-model="visible">
+      <b-collapse class="pb-4 pt-5" v-model="visible">
-        <decay-information
+        <decay-information-first-transaction v-if="decay.start === null" :decay="decay" />
-          decaytyp="new"
+        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
-          :amount="amount"
-          :decay="decay"
-          :typeId="typeId"
-          :balanceDate="balanceDate"
-        />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformation from '../DecayInformation'
+import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import DecayInformationFirstTransaction from '../DecayInformations/DecayInformation-FirstTransaction'
 
 export default {
   name: 'slot-creation',
   components: {
-    DecayInformation,
+    DecayInformationShort,
+    DecayInformationLong,
+    DecayInformationFirstTransaction,
   },
   props: {
     amount: {

frontend/src/components/Transactions/TransactionDecay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -43,40 +43,18 @@
       </div>
 
       <b-collapse class="pb-4 pt-5" v-model="visible">
-        <div class="d-flex">
+        <decay-information-decay :balance="balance" :decay="decay" />
-          <div style="width: 100%" class="text-center pb-3">
-            <b-icon icon="droplet-half" height="12" class="mb-2" />
-            <b>{{ $t('decay.calculation_decay') }}</b>
-          </div>
-        </div>
-
-        <b-row>
-          <b-col cols="6" class="text-right">
-            <div>{{ $t('decay.decay') }}</div>
-          </b-col>
-          <b-col cols="6">
-            <div>
-              {{ Number(balance) + Number(decay.decay) * -1 }} :::: {{ Number(decay.decay) }} :::::
-              {{ $n(Number(balance) + Number(decay.decay) * -1, 'decimal') }}
-              GDD - {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
-              <b>{{ $n(Number(balance), 'decimal') }} GDD</b>
-            </div>
-          </b-col>
-        </b-row>
-        <hr />
-        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
-        {{ memo }}, {{ properties }},, {{ visible }}
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-// import DecayInformation from '../DecayInformation'
+import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
 
 export default {
   name: 'slot-decay',
   components: {
-    // DecayInformation,
+    DecayInformationDecay,
   },
   props: {
     amount: {

frontend/src/components/Transactions/TransactionReceive.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -74,7 +74,7 @@
               </b-col>
               <b-col cols="7">
                 <div class="gdd-transaction-list-item-decay">
-                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                  <decay-information-short decaytyp="short" :decay="decay" />
                 </div>
               </b-col>
             </b-row>
@@ -82,28 +82,24 @@
         </b-row>
       </div>
 
-      <b-collapse class="pb-4" v-model="visible">
+      <b-collapse class="pb-4 pt-5" v-model="visible">
-        <decay-information
+        <decay-information-first-transaction v-if="decay.start === null" :decay="decay" />
-          decaytyp="new"
+        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
-          :amount="amount"
-          :decay="decay"
-          :typeId="typeId"
-          :balanceDate="balanceDate"
-        />
-        <hr />
-        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
-        {{ memo }}, {{ properties }}
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformation from '../DecayInformation'
+import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import DecayInformationFirstTransaction from '../DecayInformations/DecayInformation-FirstTransaction'
 
 export default {
   name: 'slot-receive',
   components: {
-    DecayInformation,
+    DecayInformationShort,
+    DecayInformationLong,
+    DecayInformationFirstTransaction,
   },
   props: {
     amount: {

frontend/src/components/Transactions/TransactionSend.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="visible ? 'bg-secondary' : ''">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -74,7 +74,7 @@
               </b-col>
               <b-col cols="7">
                 <div class="gdd-transaction-list-item-decay">
-                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                  <decay-information-short decaytyp="short" :decay="decay" />
                 </div>
               </b-col>
             </b-row>
@@ -82,28 +82,23 @@
         </b-row>
       </div>
 
-      <b-collapse class="pb-4" v-model="visible">
+      <b-collapse class="pb-4 pt-5" v-model="visible">
-        <decay-information
+        <decay-information-first-transaction v-if="decay.start === null" :decay="decay" />
-          decaytyp="new"
+        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
-          :amount="amount"
-          :decay="decay"
-          :typeId="typeId"
-          :balanceDate="balanceDate"
-        />
-        <hr />
-        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
-        {{ memo }}, {{ properties }}
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformation from '../DecayInformation'
+import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
-
+import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import DecayInformationFirstTransaction from '../DecayInformations/DecayInformation-FirstTransaction'
 export default {
   name: 'slot-send',
   components: {
-    DecayInformation,
+    DecayInformationShort,
+    DecayInformationLong,
+    DecayInformationFirstTransaction,
   },
   props: {
     amount: {

frontend/src/locales/de.json

@@ -21,7 +21,7 @@
     "switch-to-this-community": "zu dieser Gemeinschaft wechseln"
   },
   "decay": {
-    "befor_startblock_transaction": "Diese Transaktion beinhaltet keine Vergänglichkeit.",
+    "before_startblock_transaction": "Diese Transaktion beinhaltet keine Vergänglichkeit.",
     "calculation_decay": "Berechnung der Vergänglichkeit",
     "calculation_total": "Berechnung der Gesamtsumme",
     "created": "Geschöpft",

frontend/src/locales/en.json

@@ -21,7 +21,7 @@
     "switch-to-this-community": "Switch to this community"
   },
   "decay": {
-    "befor_startblock_transaction": "This transaction does not include decay.",
+    "before_startblock_transaction": "This transaction does not include decay.",
     "calculation_decay": "Calculation of Decay",
     "calculation_total": "Calculation of the total Amount",
     "created": "Created",

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

@@ -17,34 +17,42 @@
         :key="id"
         :style="typeId === 'DECAY' ? 'background-color:#f1e0ae3d' : ''"
       >
+        <transaction-list-item :typeId="typeId">
+          <template #DECAY>
             <transaction-decay
               class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'DECAY'"
               v-bind="transactions[index]"
               :properties="getProperties(typeId)"
             />
+          </template>
 
+          <template #SEND>
             <transaction-send
               class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'SEND'"
               v-bind="transactions[index]"
               :decayStartBlock="decayStartBlock"
               :properties="getProperties(typeId)"
             />
+          </template>
+
+          <template #RECEIVE>
             <transaction-receive
               class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'RECEIVE'"
               v-bind="transactions[index]"
               :decayStartBlock="decayStartBlock"
               :properties="getProperties(typeId)"
             />
+          </template>
+
+          <template #CREATION>
             <transaction-creation
               class="list-group-item gdd-transaction-list-item"
-          v-if="typeId === 'CREATION'"
               v-bind="transactions[index]"
               :decayStartBlock="decayStartBlock"
               :properties="getProperties(typeId)"
             />
+          </template>
+        </transaction-list-item>
       </div>
     </div>
     <pagination-buttons
@@ -60,11 +68,12 @@
 </template>
 
 <script>
+import TransactionListItem from '../../../components/TransactionListItem'
 import PaginationButtons from '../../../components/PaginationButtons'
-import TransactionDecay from '../../../components/transaction-slots/TransactionDecay'
+import TransactionDecay from '../../../components/Transactions/TransactionDecay'
-import TransactionSend from '../../../components/transaction-slots/TransactionSend'
+import TransactionSend from '../../../components/Transactions/TransactionSend'
-import TransactionReceive from '../../../components/transaction-slots/TransactionReceive'
+import TransactionReceive from '../../../components/Transactions/TransactionReceive'
-import TransactionCreation from '../../../components/transaction-slots/TransactionCreation'
+import TransactionCreation from '../../../components/Transactions/TransactionCreation'
 
 const iconsByType = {
   SEND: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '−' },
@@ -76,6 +85,7 @@ const iconsByType = {
 export default {
   name: 'gdd-transaction-list',
   components: {
+    TransactionListItem,
     PaginationButtons,
     TransactionDecay,
     TransactionSend,