From 0ca944e40aef74a43af7a4bbf2ad83bc10f6a616 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 10 Mar 2022 13:10:13 +0100
Subject: [PATCH] add components CollapsIcon, TypeIcon,  AmountAndName, Memo,
 Date

---
 .../TransactionRows/AmountAndName.vue         | 34 +++++++++++
 .../{CollapsIcon.vue => CollapseIcon.vue}     |  0
 .../src/components/TransactionRows/Date.vue   | 25 ++++++++
 .../src/components/TransactionRows/Memo.vue   | 22 +++++++
 .../components/TransactionRows/TypeIcon.vue   | 20 +++++++
 .../Transactions/TransactionCreation.vue      | 56 +++++-------------
 .../Transactions/TransactionDecay.vue         | 40 ++++---------
 .../Transactions/TransactionReceive.vue       | 59 +++++--------------
 .../Transactions/TransactionSend.vue          | 58 ++++++------------
 9 files changed, 160 insertions(+), 154 deletions(-)
 create mode 100644 frontend/src/components/TransactionRows/AmountAndName.vue
 rename frontend/src/components/TransactionRows/{CollapsIcon.vue => CollapseIcon.vue} (100%)
 create mode 100644 frontend/src/components/TransactionRows/Date.vue
 create mode 100644 frontend/src/components/TransactionRows/Memo.vue
 create mode 100644 frontend/src/components/TransactionRows/TypeIcon.vue

diff --git a/frontend/src/components/TransactionRows/AmountAndName.vue b/frontend/src/components/TransactionRows/AmountAndName.vue
new file mode 100644
index 000000000..ed36ec301
--- /dev/null
+++ b/frontend/src/components/TransactionRows/AmountAndName.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="amount-and-name">
+    <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">
+          {{ linkedUser ? linkedUser.firstName + ' ' + linkedUser.lastName : text }}
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AmountAndName',
+  props: {
+    amount: {
+      type: Number,
+    },
+    linkedUser: {
+      type: Object,
+    },
+    text: {
+      type: String,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/TransactionRows/CollapsIcon.vue b/frontend/src/components/TransactionRows/CollapseIcon.vue
similarity index 100%
rename from frontend/src/components/TransactionRows/CollapsIcon.vue
rename to frontend/src/components/TransactionRows/CollapseIcon.vue
diff --git a/frontend/src/components/TransactionRows/Date.vue b/frontend/src/components/TransactionRows/Date.vue
new file mode 100644
index 000000000..7883507db
--- /dev/null
+++ b/frontend/src/components/TransactionRows/Date.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="transaction-rows-date">
+    <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: 'Transaction-Rows-Date',
+  props: {
+    balanceDate: {
+      type: String,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/TransactionRows/Memo.vue b/frontend/src/components/TransactionRows/Memo.vue
new file mode 100644
index 000000000..a25892e80
--- /dev/null
+++ b/frontend/src/components/TransactionRows/Memo.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="memo">
+    <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: 'Memo',
+  props: {
+    memo: {
+      type: String,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/TransactionRows/TypeIcon.vue b/frontend/src/components/TransactionRows/TypeIcon.vue
new file mode 100644
index 000000000..00dedd77a
--- /dev/null
+++ b/frontend/src/components/TransactionRows/TypeIcon.vue
@@ -0,0 +1,20 @@
+<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: 'Type-Icon',
+  props: {
+    icon: {
+      type: String,
+    },
+    color: {
+      type: String,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index f24ce1f7d..07bed52dd 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -2,56 +2,24 @@
   <div class="transaction-slot-creation">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <collaps-icon class="text-right" :visible="visible" />
+      <collapse-icon class="text-right" :visible="visible" />
 
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
-              <b-icon icon="gift" class="gradido-global-color-accent m-mb-1 font2em" />
-            </div>
+            <type-icon color="gradido-global-color-accent" icon="gift" />
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
-            <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">
-                  {{ linkedUser.firstName + ' ' + linkedUser.lastName }}
-                </div>
-              </b-col>
-            </b-row>
+            <!-- Amount / Name || Text -->
+            <amount-and-name :amount="amount" :linkedUser="linkedUser" />
 
             <!-- Nachricht Memo -->
-            <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>
+            <memo :memo="memo" />
 
             <!-- Datum -->
-            <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>
+            <date :balanceDate="balanceDate" />
 
             <!-- Decay -->
             <b-row v-if="decay">
@@ -84,7 +52,11 @@
   </div>
 </template>
 <script>
-import CollapsIcon from '../TransactionRows/CollapsIcon'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
+import TypeIcon from '../TransactionRows/TypeIcon'
+import AmountAndName from '../TransactionRows/AmountAndName.vue'
+import Memo from '../TransactionRows/Memo.vue'
+import Date from '../TransactionRows/Date.vue'
 import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
 import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
 import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
@@ -93,7 +65,11 @@ import DecayInformationDecayStartblock from '../DecayInformations/DecayInformati
 export default {
   name: 'slot-creation',
   components: {
-    CollapsIcon,
+    CollapseIcon,
+    TypeIcon,
+    AmountAndName,
+    Memo,
+    Date,
     DecayInformationShort,
     DecayInformationLong,
     DecayInformationBeforeStartblock,
diff --git a/frontend/src/components/Transactions/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
index 39f62eea8..74cc30347 100644
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -2,33 +2,18 @@
   <div class="transaction-slot-decay">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <collaps-icon class="text-right" :visible="visible" />
+      <collapse-icon class="text-right" :visible="visible" />
 
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
-              <b-icon icon="droplet-half" class="gradido-global-color-gray m-mb-1 font2em" />
-            </div>
+            <type-icon color="gradido-global-color-gray" icon="droplet-half" />
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
-            <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">
-                  {{ $t('decay.decay_since_last_transaction') }}
-                </div>
-              </b-col>
-            </b-row>
+            <!-- Amount / Name || Text -->
+            <amount-and-name :amount="amount" :text="$t('decay.decay_since_last_transaction')" />
           </b-col>
         </b-row>
       </div>
@@ -40,13 +25,17 @@
   </div>
 </template>
 <script>
-import CollapsIcon from '../TransactionRows/CollapsIcon'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
+import TypeIcon from '../TransactionRows/TypeIcon'
+import AmountAndName from '../TransactionRows/AmountAndName.vue'
 import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
 
 export default {
   name: 'slot-decay',
   components: {
-    CollapsIcon,
+    CollapseIcon,
+    TypeIcon,
+    AmountAndName,
     DecayInformationDecay,
   },
   props: {
@@ -56,18 +45,9 @@ export default {
     balance: {
       type: String,
     },
-    balanceDate: {
-      type: String,
-    },
     decay: {
       type: Object,
     },
-    id: {
-      type: Number,
-    },
-    typeId: {
-      type: String,
-    },
   },
   data() {
     return {
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 3c6c2cb08..d177235fa 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -2,59 +2,24 @@
   <div class="transaction-slot-receive">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <collaps-icon class="text-right" :visible="visible" />
+      <collapse-icon class="text-right" :visible="visible" />
 
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
-              <b-icon
-                icon="arrow-right-circle"
-                class="gradido-global-color-accent m-mb-1 font2em"
-              />
-            </div>
+            <type-icon color="gradido-global-color-accent" icon="arrow-right-circle" />
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
-            <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">
-                  {{ linkedUser.firstName + ' ' + linkedUser.lastName }}
-                </div>
-              </b-col>
-            </b-row>
+            <!-- Amount / Name || Text -->
+            <amount-and-name :amount="amount" :linkedUser="linkedUser" />
 
             <!-- Nachricht Memo -->
-            <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>
+            <memo :memo="memo" />
 
             <!-- Datum -->
-            <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>
+            <date :balanceDate="balanceDate" />
 
             <!-- Decay -->
             <b-row v-if="decay">
@@ -87,7 +52,11 @@
   </div>
 </template>
 <script>
-import CollapsIcon from '../TransactionRows/CollapsIcon'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
+import TypeIcon from '../TransactionRows/TypeIcon'
+import AmountAndName from '../TransactionRows/AmountAndName.vue'
+import Memo from '../TransactionRows/Memo.vue'
+import Date from '../TransactionRows/Date.vue'
 import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
 import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
 import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
@@ -96,7 +65,11 @@ import DecayInformationDecayStartblock from '../DecayInformations/DecayInformati
 export default {
   name: 'slot-receive',
   components: {
-    CollapsIcon,
+    CollapseIcon,
+    TypeIcon,
+    AmountAndName,
+    Memo,
+    Date,
     DecayInformationShort,
     DecayInformationLong,
     DecayInformationBeforeStartblock,
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 7d28e7a9d..0c7eb7227 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -2,56 +2,24 @@
   <div class="transaction-slot-send">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <collaps-icon class="text-right" :visible="visible" />
+      <collapse-icon class="text-right" :visible="visible" />
 
       <div>
         <b-row>
           <!-- ICON  -->
           <b-col cols="1">
-            <div class="gdd-transaction-list-item-icon">
-              <b-icon icon="arrow-left-circle" class="text-danger m-mb-1 font2em" />
-            </div>
+            <type-icon color="text-danger" icon="arrow-left-circle" />
           </b-col>
 
           <b-col cols="11">
-            <!-- Betrag / Name Email -->
-            <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">
-                  {{ linkedUser.firstName + ' ' + linkedUser.lastName }}
-                </div>
-              </b-col>
-            </b-row>
+            <!-- Amount / Name  -->
+            <amount-and-name :amount="amount" :linkedUser="linkedUser" />
 
-            <!-- Nachricht Memo -->
-            <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>
+            <!-- Memo -->
+            <memo :memo="memo" />
 
             <!-- Datum -->
-            <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>
+            <date :balanceDate="balanceDate" />
 
             <!-- Decay -->
             <b-row v-if="decay">
@@ -84,7 +52,11 @@
   </div>
 </template>
 <script>
-import CollapsIcon from '../TransactionRows/CollapsIcon'
+import CollapseIcon from '../TransactionRows/CollapseIcon'
+import TypeIcon from '../TransactionRows/TypeIcon'
+import AmountAndName from '../TransactionRows/AmountAndName.vue'
+import Memo from '../TransactionRows/Memo.vue'
+import Date from '../TransactionRows/Date.vue'
 import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
 import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
 import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
@@ -92,7 +64,11 @@ import DecayInformationDecayStartblock from '../DecayInformations/DecayInformati
 export default {
   name: 'slot-send',
   components: {
-    CollapsIcon,
+    CollapseIcon,
+    TypeIcon,
+    AmountAndName,
+    Memo,
+    Date,
     DecayInformationShort,
     DecayInformationLong,
     DecayInformationBeforeStartblock,