Merge pull request #1600 from gradido/1599-components-for-transactionlist-types

1599 components for transactionlist types

frontend/src/components/DecayInformations/DecayInformation.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="decay-information-box">
+    <decay-information-before-startblock v-if="decay.start === null" />
+    <decay-information-decay-startblock
+      v-else-if="isStartBlock"
+      :amount="amount"
+      :decay="decay"
+      :typeId="typeId"
+    />
+    <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
+  </div>
+</template>
+<script>
+import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
+import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
+
+export default {
+  components: {
+    DecayInformationLong,
+    DecayInformationBeforeStartblock,
+    DecayInformationDecayStartblock,
+  },
+  props: {
+    amount: {
+      type: String,
+      required: true,
+    },
+    decay: {
+      type: Object,
+      required: true,
+    },
+    typeId: {
+      type: String,
+      required: true,
+    },
+    decayStartBlock: {
+      type: Date,
+      required: true,
+    },
+  },
+  computed: {
+    isStartBlock() {
+      return new Date(this.decay.start).getTime() === this.decayStartBlock.getTime()
+    },
+  },
+}
+</script>

frontend/src/components/GddTransactionList.spec.js

@@ -256,7 +256,7 @@ describe('GddTransactionList', () => {
 
         it('shows the date of the transaction', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
-            'Mon Feb 28 2022 13:55:47 GMT+0000 (Coordinated Universal Time)',
+            'Mon Feb 28 2022 13:55:47',
           )
         })
 
@@ -286,18 +286,23 @@ describe('GddTransactionList', () => {
         it('has a bi-gift icon', () => {
           expect(transaction.findAll('svg').at(1).classes()).toEqual([
             'bi-gift',
-            'gradido-global-color-accent',
             'm-mb-1',
             'font2em',
             'b-icon',
             'bi',
+            'gradido-global-color-accent',
           ])
         })
 
         it('has gradido-global-color-accent color', () => {
-          expect(transaction.findAll('svg').at(1).classes()).toContain(
+          expect(transaction.findAll('svg').at(1).classes()).toEqual([
+            'bi-gift',
+            'm-mb-1',
+            'font2em',
+            'b-icon',
+            'bi',
             'gradido-global-color-accent',
-          )
+          ])
         })
 
         // operators are renderd by GDD filter
@@ -321,7 +326,7 @@ describe('GddTransactionList', () => {
 
         it('shows the date of the transaction', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
-            'Fri Feb 25 2022 07:29:26 GMT+0000 (Coordinated Universal Time)',
+            'Fri Feb 25 2022 07:29:26',
           )
         })
       })
@@ -348,11 +353,11 @@ describe('GddTransactionList', () => {
         it('has gradido-global-color-accent color', () => {
           expect(transaction.findAll('svg').at(1).classes()).toEqual([
             'bi-arrow-right-circle',
-            'gradido-global-color-accent',
             'm-mb-1',
             'font2em',
             'b-icon',
             'bi',
+            'gradido-global-color-accent',
           ])
         })
 
@@ -383,7 +388,7 @@ describe('GddTransactionList', () => {
 
         it('shows the date of the transaction', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
-            'Wed Feb 23 2022 10:55:30 GMT+0000 (Coordinated Universal Time)',
+            'Wed Feb 23 2022 10:55:30',
           )
         })
 
@@ -400,6 +405,7 @@ describe('GddTransactionList', () => {
         return {
           amount: '3.14',
           balanceDate: '2021-04-29T17:26:40+00:00',
+          decay: {},
           memo: 'Kreiszahl PI',
           linkedUser: {
             firstName: 'Bibi',
@@ -418,6 +424,7 @@ describe('GddTransactionList', () => {
           transactions,
           transactionCount: 42,
           showPagination: true,
+          decayStartBlock: new Date(),
         })
         paginationButtons = wrapper.find('div.pagination-buttons')
       })

frontend/src/components/GddTransactionList.vue

@@ -108,6 +108,10 @@ export default {
 }
 </script>
 <style>
+collaps-icon {
+  width: 95%;
+  position: absolute;
+}
 .el-table .cell {
   padding-left: 0px;
   padding-right: 0px;

frontend/src/components/TransactionRows/AmountAndNameRow.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="amount-and-name-row">
+    <b-row>
+      <b-col cols="5">
+        <div class="text-right">
+          <span class="gdd-transaction-list-item-amount">
+            {{ amount | GDD }}
+          </span>
+        </div>
+      </b-col>
+      <b-col cols="7">
+        <div class="gdd-transaction-list-item-name">
+          {{ itemText }}
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AmountAndNameRow',
+  props: {
+    amount: {
+      type: String,
+      required: true,
+    },
+    linkedUser: {
+      type: Object,
+      required: false,
+    },
+    text: {
+      type: String,
+      required: false,
+    },
+  },
+  computed: {
+    itemText() {
+      return this.linkedUser
+        ? this.linkedUser.firstName + ' ' + this.linkedUser.lastName
+        : this.text
+    },
+  },
+}
+</script>

frontend/src/components/TransactionRows/CollapseIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="collapse-icon">
+    <b-icon
+      :icon="visible ? 'caret-up-square' : 'caret-down-square'"
+      :class="visible ? 'text-black' : 'text-muted'"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'CollapseIcon',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+}
+</script>

frontend/src/components/TransactionRows/DateRow.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="date-row">
+    <b-row>
+      <b-col cols="5">
+        <div class="text-right">{{ $t('form.date') }}</div>
+      </b-col>
+      <b-col cols="7">
+        <div class="gdd-transaction-list-item-date">
+          {{ $d(new Date(balanceDate), 'long') }}
+          {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DateRow',
+  props: {
+    balanceDate: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>

frontend/src/components/TransactionRows/DecayRow.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="decay-row">
+    <b-row v-if="decay">
+      <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">
+          <decay-information-short decaytyp="short" :decay="decay" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+export default {
+  name: 'DecayRow',
+  components: {
+    DecayInformationShort,
+  },
+  props: {
+    decay: {
+      type: Object,
+      required: false,
+    },
+  },
+}
+</script>

frontend/src/components/TransactionRows/MemoRow.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="memo-row">
+    <b-row>
+      <b-col cols="5">
+        <div class="text-right">{{ $t('form.memo') }}</div>
+      </b-col>
+      <b-col cols="7">
+        <div class="gdd-transaction-list-message">{{ memo }}</div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MemoRow',
+  props: {
+    memo: {
+      type: String,
+      required: false,
+    },
+  },
+}
+</script>

frontend/src/components/TransactionRows/TypeIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="type-icon">
+    <div class="gdd-transaction-list-item-icon">
+      <b-icon :icon="icon" :class="color" class="m-mb-1 font2em" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TypeIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>

frontend/src/components/Transactions/TransactionCreation.vue

@@ -2,105 +2,60 @@
   <div class="transaction-slot-creation">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right gradido-width-95-absolute">
+      <collapse-icon class="text-right" :visible="visible" />
-        <b-icon
-          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
-          :class="visible ? 'text-black' : 'text-muted'"
-        />
-      </div>
-
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
+            <type-icon color="gradido-global-color-accent" icon="gift" />
-              <b-icon icon="gift" class="gradido-global-color-accent m-mb-1 font2em" />
-            </div>
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
+            <!-- Amount / Name || Text -->
-            <b-row>
+            <amount-and-name-row :amount="amount" :linkedUser="linkedUser" />
-              <b-col cols="5">
-                <div class="text-right">
-                  <span class="gdd-transaction-list-item-amount">
-                    {{ amount | GDD }}
-                  </span>
-                </div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-item-name">
-                  {{ linkedUser.firstName + ' ' + linkedUser.lastName }}
-                </div>
-              </b-col>
-            </b-row>
 
             <!-- Nachricht Memo -->
-            <b-row>
+            <memo-row :memo="memo" />
-              <b-col cols="5">
-                <div class="text-right">{{ $t('form.memo') }}</div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-message">{{ memo }}</div>
-              </b-col>
-            </b-row>
 
             <!-- Datum -->
-            <b-row>
+            <date-row :balanceDate="balanceDate" />
-              <b-col cols="5">
-                <div class="text-right">{{ $t('form.date') }}</div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-item-date">
-                  {{ $d(new Date(balanceDate), 'long') }}
-                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-                </div>
-              </b-col>
-            </b-row>
 
             <!-- Decay -->
-            <b-row v-if="decay">
+            <decay-row :decay="decay" />
-              <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">
-                  <decay-information-short decaytyp="short" :decay="decay" />
-                </div>
-              </b-col>
-            </b-row>
           </b-col>
         </b-row>
       </div>
 
       <b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
-        <decay-information-before-startblock v-if="decay.start === null" />
+        <decay-information
-        <decay-information-decay-startblock
-          v-else-if="isStartBlock"
-          :amount="amount"
-          :decay="decay"
           :typeId="typeId"
+          :decay="decay"
+          :amount="amount"
+          :decayStartBlock="decayStartBlock"
         />
-        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
-import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import TypeIcon from '../TransactionRows/TypeIcon'
-import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
+import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
+import MemoRow from '../TransactionRows/MemoRow'
+import DateRow from '../TransactionRows/DateRow'
+import DecayRow from '../TransactionRows/DecayRow'
+import DecayInformation from '../DecayInformations/DecayInformation'
 
 export default {
   name: 'slot-creation',
   components: {
-    DecayInformationShort,
+    CollapseIcon,
-    DecayInformationLong,
+    TypeIcon,
-    DecayInformationBeforeStartblock,
+    AmountAndNameRow,
-    DecayInformationDecayStartblock,
+    MemoRow,
+    DateRow,
+    DecayRow,
+    DecayInformation,
   },
   props: {
     amount: {

frontend/src/components/Transactions/TransactionDecay.vue

@@ -2,38 +2,20 @@
   <div class="transaction-slot-decay">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right gradido-width-95-absolute">
+      <collapse-icon class="text-right" :visible="visible" />
-        <b-icon
-          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
-          :class="visible ? 'text-black' : 'text-muted'"
-        />
-      </div>
-
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
+            <type-icon color="gradido-global-color-gray" icon="droplet-half" />
-              <b-icon icon="droplet-half" class="gradido-global-color-gray m-mb-1 font2em" />
-            </div>
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
+            <!-- Amount / Name || Text -->
-            <b-row>
+            <amount-and-name-row
-              <b-col cols="5">
+              :amount="amount"
-                <div class="text-right">
+              :text="$t('decay.decay_since_last_transaction')"
-                  <span class="gdd-transaction-list-item-amount">
+            />
-                    {{ amount | GDD }}
-                  </span>
-                </div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-item-name">
-                  {{ $t('decay.decay_since_last_transaction') }}
-                </div>
-              </b-col>
-            </b-row>
           </b-col>
         </b-row>
       </div>
@@ -45,11 +27,17 @@
   </div>
 </template>
 <script>
+import CollapseIcon from '../TransactionRows/CollapseIcon'
+import TypeIcon from '../TransactionRows/TypeIcon'
+import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
 import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
 
 export default {
   name: 'slot-decay',
   components: {
+    CollapseIcon,
+    TypeIcon,
+    AmountAndNameRow,
     DecayInformationDecay,
   },
   props: {
@@ -59,18 +47,9 @@ export default {
     balance: {
       type: String,
     },
-    balanceDate: {
-      type: String,
-    },
     decay: {
       type: Object,
     },
-    id: {
-      type: Number,
-    },
-    typeId: {
-      type: String,
-    },
   },
   data() {
     return {

frontend/src/components/Transactions/TransactionReceive.vue

@@ -2,108 +2,61 @@
   <div class="transaction-slot-receive">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right gradido-width-95-absolute">
+      <collapse-icon class="text-right" :visible="visible" />
-        <b-icon
-          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
-          :class="visible ? 'text-black' : 'text-muted'"
-        />
-      </div>
 
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
+            <type-icon color="gradido-global-color-accent" icon="arrow-right-circle" />
-              <b-icon
-                icon="arrow-right-circle"
-                class="gradido-global-color-accent m-mb-1 font2em"
-              />
-            </div>
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
+            <!-- Amount / Name || Text -->
-            <b-row>
+            <amount-and-name-row :amount="amount" :linkedUser="linkedUser" />
-              <b-col cols="5">
-                <div class="text-right">
-                  <span class="gdd-transaction-list-item-amount">
-                    {{ amount | GDD }}
-                  </span>
-                </div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-item-name">
-                  {{ linkedUser.firstName + ' ' + linkedUser.lastName }}
-                </div>
-              </b-col>
-            </b-row>
 
             <!-- Nachricht Memo -->
-            <b-row>
+            <memo-row :memo="memo" />
-              <b-col cols="5">
-                <div class="text-right">{{ $t('form.memo') }}</div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-message">{{ memo }}</div>
-              </b-col>
-            </b-row>
 
             <!-- Datum -->
-            <b-row>
+            <date-row :balanceDate="balanceDate" />
-              <b-col cols="5">
-                <div class="text-right">{{ $t('form.date') }}</div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-item-date">
-                  {{ $d(new Date(balanceDate), 'long') }}
-                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-                </div>
-              </b-col>
-            </b-row>
 
             <!-- Decay -->
-            <b-row v-if="decay">
+            <decay-row :decay="decay" />
-              <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">
-                  <decay-information-short decaytyp="short" :decay="decay" />
-                </div>
-              </b-col>
-            </b-row>
           </b-col>
         </b-row>
       </div>
 
       <b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
-        <decay-information-before-startblock v-if="decay.start === null" />
+        <decay-information
-        <decay-information-decay-startblock
-          v-else-if="isStartBlock"
-          :amount="amount"
-          :decay="decay"
           :typeId="typeId"
+          :decay="decay"
+          :amount="amount"
+          :decayStartBlock="decayStartBlock"
         />
-        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
-import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import TypeIcon from '../TransactionRows/TypeIcon'
-import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
+import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
+import MemoRow from '../TransactionRows/MemoRow'
+import DateRow from '../TransactionRows/DateRow'
+import DecayRow from '../TransactionRows/DecayRow'
+import DecayInformation from '../DecayInformations/DecayInformation'
 
 export default {
   name: 'slot-receive',
   components: {
-    DecayInformationShort,
+    CollapseIcon,
-    DecayInformationLong,
+    TypeIcon,
-    DecayInformationBeforeStartblock,
+    AmountAndNameRow,
-    DecayInformationDecayStartblock,
+    MemoRow,
+    DateRow,
+    DecayRow,
+    DecayInformation,
   },
   props: {
     amount: {

frontend/src/components/Transactions/TransactionSend.vue

@@ -2,104 +2,61 @@
   <div class="transaction-slot-send">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right gradido-width-95-absolute">
+      <collapse-icon class="text-right" :visible="visible" />
-        <b-icon
-          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
-          :class="visible ? 'text-black' : 'text-muted'"
-        />
-      </div>
 
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
+            <type-icon color="text-danger" icon="arrow-left-circle" />
-              <b-icon icon="arrow-left-circle" class="text-danger m-mb-1 font2em" />
-            </div>
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
+            <!-- Amount / Name  -->
-            <b-row>
+            <amount-and-name-row :amount="amount" :linkedUser="linkedUser" />
-              <b-col cols="5">
-                <div class="text-right">
-                  <span class="gdd-transaction-list-item-amount">
-                    {{ amount | GDD }}
-                  </span>
-                </div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-item-name">
-                  {{ linkedUser.firstName + ' ' + linkedUser.lastName }}
-                </div>
-              </b-col>
-            </b-row>
 
-            <!-- Nachricht Memo -->
+            <!-- Memo -->
-            <b-row>
+            <memo-row :memo="memo" />
-              <b-col cols="5">
-                <div class="text-right">{{ $t('form.memo') }}</div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-message">{{ memo }}</div>
-              </b-col>
-            </b-row>
 
             <!-- Datum -->
-            <b-row>
+            <date-row :balanceDate="balanceDate" />
-              <b-col cols="5">
-                <div class="text-right">{{ $t('form.date') }}</div>
-              </b-col>
-              <b-col cols="7">
-                <div class="gdd-transaction-list-item-date">
-                  {{ $d(new Date(balanceDate), 'long') }}
-                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-                </div>
-              </b-col>
-            </b-row>
 
             <!-- Decay -->
-            <b-row v-if="decay">
+            <decay-row :decay="decay" />
-              <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">
-                  <decay-information-short decaytyp="short" :decay="decay" />
-                </div>
-              </b-col>
-            </b-row>
           </b-col>
         </b-row>
       </div>
 
       <b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
-        <decay-information-before-startblock v-if="decay.start === null" />
+        <decay-information
-        <decay-information-decay-startblock
-          v-else-if="isStartBlock"
-          :amount="amount"
-          :decay="decay"
           :typeId="typeId"
+          :decay="decay"
+          :amount="amount"
+          :decayStartBlock="decayStartBlock"
         />
-        <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
       </b-collapse>
     </div>
   </div>
 </template>
 <script>
-import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
-import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
+import TypeIcon from '../TransactionRows/TypeIcon'
-import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
+import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
+import MemoRow from '../TransactionRows/MemoRow'
+import DateRow from '../TransactionRows/DateRow'
+import DecayRow from '../TransactionRows/DecayRow'
+import DecayInformation from '../DecayInformations/DecayInformation'
+
 export default {
   name: 'slot-send',
   components: {
-    DecayInformationShort,
+    CollapseIcon,
-    DecayInformationLong,
+    TypeIcon,
-    DecayInformationBeforeStartblock,
+    AmountAndNameRow,
-    DecayInformationDecayStartblock,
+    MemoRow,
+    DateRow,
+    DecayRow,
+    DecayInformation,
   },
   props: {
     amount: {
@@ -133,10 +90,5 @@ export default {
       visible: false,
     }
   },
-  computed: {
-    isStartBlock() {
-      return new Date(this.decay.start).getTime() === this.decayStartBlock.getTime()
-    },
-  },
 }
 </script>