From 9503c2a49a838cbe689bc65d650b938c236099e5 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 6 Sep 2021 14:07:34 +0200
Subject: [PATCH] gdt transaction with arrays and without slots

---
 frontend/src/components/Transaction.vue       | 134 +++++++++++++++
 .../src/components/TransactionCollaps.vue     |  78 +++++++++
 frontend/src/components/Transaktion.vue       | 103 ------------
 .../AccountOverview/GdtTransactionList.vue    | 157 ++----------------
 4 files changed, 223 insertions(+), 249 deletions(-)
 create mode 100644 frontend/src/components/Transaction.vue
 create mode 100644 frontend/src/components/TransactionCollaps.vue
 delete mode 100644 frontend/src/components/Transaktion.vue

diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
new file mode 100644
index 000000000..283ceb6cb
--- /dev/null
+++ b/frontend/src/components/Transaction.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div class="list-group">
+      <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
+        <!-- Icon  -->
+        <div class="text-right" style="position: absolute">
+          <b-icon
+            v-if="gdtEntryType"
+            :icon="getLinesByType(gdtEntryType).icon"
+            :class="getLinesByType(gdtEntryType).iconclasses"
+          ></b-icon>
+        </div>
+
+        <!-- Collaps Button  -->
+        <div class="text-right" style="width: 96%; position: absolute">
+          <b-button class="btn-sm">
+            <b>i</b>
+          </b-button>
+        </div>
+
+        <!-- type  -->
+
+        <b-row>
+          <div class="col-6 text-right">
+            {{ getLinesByType(gdtEntryType).description }}
+          </div>
+          <div class="col-6">
+            {{ getLinesByType(gdtEntryType).descriptiontext }}
+          </div>
+        </b-row>
+
+        <!-- credit -->
+        <b-row>
+          <div class="col-6 text-right">
+            {{ $t('gdt.credit') }}
+          </div>
+          <div class="col-6">
+            {{ getLinesByType(gdtEntryType).credittext }}
+          </div>
+        </b-row>
+
+        <!-- Nachricht-->
+        <b-row v-if="comment && gdtEntryType !== 7">
+          <div class="col-6 text-right">
+            {{ $t('form.memo') }}
+          </div>
+          <div class="col-6">
+            {{ comment }}
+          </div>
+        </b-row>
+
+        <!-- Datum-->
+        <b-row class="gdt-list-row text-header">
+          <div class="col-6 text-right">
+            {{ $t('form.date') }}
+          </div>
+          <div class="col-6">
+            {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+          </div>
+        </b-row>
+      </div>
+
+      <b-collapse :id="'a' + date + ''" class="pb-4">
+        <transaction-collaps
+          :amount="amount"
+          :gdtEntryType="gdtEntryType"
+          :factor="factor"
+          :gdt="gdt"
+        ></transaction-collaps>
+      </b-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import TransactionCollaps from '../components/TransactionCollaps.vue'
+
+export default {
+  name: 'Transaction',
+  components: {
+    TransactionCollaps,
+  },
+  props: {
+    amount: { type: Number, default: 0 },
+    date: {
+      type: Date,
+      default: function () {
+        return new Date()
+      },
+    },
+    comment: { type: String, default: '' },
+    gdtEntryType: { type: Number, default: 0 },
+    factor: { type: Number, default: 0 },
+    gdt: { type: Number, default: 0 },
+  },
+  methods: {
+    getLinesByType(givenType) {
+      const linesByType = {
+        1: {
+          icon: 'heart',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: 'Beitrag',
+          descriptiontext: this.$n(this.amount, 'decimal') + ' €',
+          credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+        },
+        4: {
+          icon: 'person-check',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: 'Geworbenes Mitglied',
+          descriptiontext: '5%',
+          credittext: this.$n(this.amount, 'decimal') + ' GDT',
+        },
+        7: {
+          icon: 'gift',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: 'Aktion',
+          descriptiontext: this.comment,
+          credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+        },
+      }
+
+      const type = linesByType[givenType]
+
+      if (type)
+        return {
+          icon: type.icon,
+          iconclasses: type.iconclasses,
+          description: type.description,
+          descriptiontext: type.descriptiontext,
+          credittext: type.credittext,
+        }
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/TransactionCollaps.vue b/frontend/src/components/TransactionCollaps.vue
new file mode 100644
index 000000000..04299fa5f
--- /dev/null
+++ b/frontend/src/components/TransactionCollaps.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <b-row class="gdt-list-clooaps-header-text text-center pb-3">
+      <div class="col h4">
+        {{ getLinesByType(gdtEntryType).headline }}
+      </div>
+    </b-row>
+    <b-row class="gdt-list-clooaps-box--all">
+      <div class="col-6 text-right clooaps-col-left">
+        <div>{{ getLinesByType(gdtEntryType).first }}</div>
+        <div>{{ getLinesByType(gdtEntryType).second }}</div>
+      </div>
+      <div class="col-6 clooaps-col-right">
+        <div>{{ getLinesByType(gdtEntryType).firstMath }}</div>
+        <div>
+          {{ getLinesByType(gdtEntryType).secondMath }}
+        </div>
+      </div>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TransactionCollaps',
+  props: {
+    amount: { type: Number, default: 0 },
+    gdtEntryType: { type: Number, default: 0 },
+    factor: { type: Number, default: 0 },
+    gdt: { type: Number, default: 0 },
+  },
+  methods: {
+    getLinesByType(givenType) {
+      const linesByType = {
+        1: {
+          headline: this.$t('gdt.calculation'),
+          first: this.$t('gdt.factor'),
+          firstMath: this.factor + ' GDT pro €',
+          second: this.$t('gdt.formula'),
+          secondMath:
+            this.$n(this.amount, 'decimal') +
+            ' € * ' +
+            this.factor +
+            ' GDT / € = ' +
+            this.$n(this.gdt, 'decimal') +
+            ' GDT',
+        },
+        4: {
+          headline: this.$t('gdt.publisher'),
+        },
+        7: {
+          headline: this.$t('gdt.conversion-gdt-euro'),
+          first: this.$t('gdt.raise'),
+          firstMath: this.factor * 100 + ' % ',
+          second: this.$t('gdt.conversion'),
+          secondMath:
+            this.$n(this.amount, 'decimal') +
+            '  GDT * ' +
+            this.factor * 100 +
+            '% = ' +
+            this.$n(this.gdt, 'decimal') +
+            ' GDT',
+        },
+      }
+
+      const type = linesByType[givenType]
+
+      if (type)
+        return {
+          headline: type.headline,
+          first: type.first,
+          firstMath: type.firstMath,
+          second: type.second,
+          secondMath: type.secondMath,
+        }
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/Transaktion.vue b/frontend/src/components/Transaktion.vue
deleted file mode 100644
index c27aa7298..000000000
--- a/frontend/src/components/Transaktion.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div>
-    <div class="list-group">
-      <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
-        <!-- Icon  -->
-        <div class="text-right" style="position: absolute">
-            ICON
-         <b-icon
-              v-if="gdtEntryType"
-              :icon="getIcon(gdtEntryType).icon"
-              :class="getIcon(gdtEntryType).class"
-            ></b-icon>
-        </div>
-
-        <!-- Collaps Button  -->
-        <div class="text-right" style="width: 96%; position: absolute">
-          <b-button class="btn-sm">
-            <b>i</b>
-          </b-button>
-        </div>
-
-        <!-- Betrag -->
-
-        <b-row>
-          <div class="col-6 text-right">
-              text1Betrag
-            <!-- <div>{{ $t('gdt.your-share') }}</div>
-            <div>{{ $t('gdt.credit') }}</div> -->
-          </div>
-          <div class="col-6">
-              text1Betrag
-            <!-- <div><slot name="your-share"></slot></div>
-            <div><slot name="credit"></slot></div> -->
-          </div>
-        </b-row>
-
-        <!-- Betrag ENDE-->
-
-        <!-- Nachricht-->
-        <b-row v-if="comment">
-          <div class="col-6 text-right">
-              text2Memo
-            <!-- {{ $t('form.memo') }} -->
-          </div>
-          <div class="col-6">
-              text2Memo
-              <slot name="memo"></slot>
-          </div>
-        </b-row>
-
-        <!-- Datum-->
-        <b-row class="gdt-list-row text-header">
-          <div class="col-6 text-right">
-              text3Date
-           <!-- {{ $t('form.date') }} -->
-          </div>
-          <div class="col-6">
-              text3Data
-             <!-- <slot name="date"></slot> -->
-           </div>
-        </b-row>
-      </div>
-
-      <b-collapse :id="'a' + date + ''" class="pb-4">
-        <b-row class="gdt-list-clooaps-header-text text-center pb-3">
-          <div class="col h4"><!--{{ $t('gdt.publisher') }}--> CollapsData</div>
-        </b-row>
-      </b-collapse>
-    </div>
-  </div>
-</template>
-<script>
-
-const iconsByType = {
-  1: { icon: 'heart', classes: 'gradido-global-color-accent' },
-  4: { icon: 'person-check', classes: 'gradido-global-color-accent' },
-  7: { icon: 'gift', classes: 'gradido-global-color-accent' },
-}
-
-export default {
-  props: {
-    date: {
-      type: Date,
-      default: function () {
-        return new Date()
-      },
-    },
-    comment: { type: String, default: '' },
-    gdtEntryType: { type: Number, default: '' },
-  },
-  methods: {
-    getIcon(givenType) {
-      const type = iconsByType[givenType]
-      if (type)
-        return {
-          icon: type.icon,
-          class: type.classes + ' m-mb-1 font2em',
-        }
-      this.throwError('no icon to given type: ' + givenType)
-    },
-  },
-}
-</script>
\ No newline at end of file
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index d031f9c4f..1aed9a3c9 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -17,135 +17,14 @@
         } in transactionsGdt"
         :key="transactionId"
       >
-        <transaktion :date="date" :comment="comment" :gdtEntryType="gdtEntryType"> </transaktion>
-        <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
-          <!-- Icon  -->
-          <div class="text-right" style="position: absolute">
-            <b-icon
-              v-if="gdtEntryType"
-              :icon="getIcon(gdtEntryType).icon"
-              :class="getIcon(gdtEntryType).class"
-            ></b-icon>
-          </div>
-
-          <!-- Collaps Button  -->
-          <div class="text-right" style="width: 96%; position: absolute">
-            <b-button class="btn-sm">
-              <b>i</b>
-            </b-button>
-          </div>
-
-          <!-- Betrag -->
-
-          <!-- 7 nur GDT erhalten -->
-          <b-row v-if="gdtEntryType === 7">
-            <div class="col-6 text-right">
-              <div>{{ $t('gdt.gdt-receive') }}</div>
-              <div>{{ $t('gdt.credit') }}</div>
-            </div>
-            <div class="col-6">
-              <div>{{ comment }}</div>
-              <div>{{ $n(gdt, 'decimal') }} GDT</div>
-            </div>
-          </b-row>
-          <!--4 publisher -->
-          <b-row v-else-if="gdtEntryType === 4">
-            <div class="col-6 text-right">
-              <div>{{ $t('gdt.your-share') }}</div>
-              <div>{{ $t('gdt.credit') }}</div>
-            </div>
-            <div class="col-6">
-              <div>5%</div>
-              <div>{{ $n(amount, 'decimal') }} GDT</div>
-            </div>
-          </b-row>
-          <!-- 1, 2, 3, 5, 6 spenden in euro -->
-          <b-row v-else>
-            <div class="col-6 text-right">
-              <div>{{ $t('gdt.contribution') }}</div>
-              <div>{{ $t('gdt.credit') }}</div>
-            </div>
-            <div class="col-6">
-              <div>{{ $n(amount, 'decimal') }} €</div>
-              <div>{{ $n(gdt, 'decimal') }} GDT</div>
-            </div>
-          </b-row>
-
-          <!-- Betrag ENDE-->
-
-          <!-- Nachricht-->
-          <b-row v-if="comment && gdtEntryType !== 7">
-            <div class="col-6 text-right">
-              {{ $t('form.memo') }}
-            </div>
-            <div class="col-6">
-              {{ comment }}
-            </div>
-          </b-row>
-
-          <!-- Datum-->
-          <b-row v-if="date" class="gdt-list-row text-header">
-            <div class="col-6 text-right">
-              {{ $t('form.date') }}
-            </div>
-            <div class="col-6">
-              {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-            </div>
-          </b-row>
-        </div>
-
-        <!--     Collaps START    -->
-
-        <b-collapse v-if="gdtEntryType" :id="'a' + date + ''" class="pb-4">
-          <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
-            <!-- Überschrift -->
-            <b-row class="gdt-list-clooaps-header-text text-center pb-3">
-              <div class="col h4" v-if="gdtEntryType === 7">
-                {{ $t('gdt.conversion-gdt-euro') }}
-              </div>
-              <div class="col h4" v-else-if="gdtEntryType === 4">
-                {{ $t('gdt.publisher') }}
-              </div>
-              <div class="col h4" v-else>{{ $t('gdt.calculation') }}</div>
-            </b-row>
-
-            <!-- 7 nur GDT erhalten -->
-            <b-row class="gdt-list-clooaps-box-7" v-if="gdtEntryType == 7">
-              <div class="col-6 text-right clooaps-col-left">
-                <div>{{ $t('gdt.raise') }}</div>
-                <div>{{ $t('gdt.conversion') }}</div>
-              </div>
-              <div class="col-6 clooaps-col-right">
-                <div>{{ factor * 100 }} %</div>
-                <div>
-                  {{ $n(amount, 'decimal') }} GDT * {{ factor * 100 }} % =
-                  {{ $n(gdt, 'decimal') }} GDT
-                </div>
-              </div>
-            </b-row>
-            <!-- 4 publisher -->
-            <b-row class="gdt-list-clooaps-box-4" v-else-if="gdtEntryType === 4">
-              <div class="col-6 text-right clooaps-col-left"></div>
-              <div class="col-6 clooaps-col-right"></div>
-            </b-row>
-
-            <!-- 1, 2, 3, 5, 6 spenden in euro -->
-            <b-row class="gdt-list-clooaps-box--all" v-else>
-              <div class="col-6 text-right clooaps-col-left">
-                <div>{{ $t('gdt.factor') }}</div>
-                <div>{{ $t('gdt.formula') }}</div>
-              </div>
-              <div class="col-6 clooaps-col-right">
-                <div>{{ factor }} GDT pro €</div>
-                <div>
-                  {{ $n(amount, 'decimal') }} € * {{ factor }} GDT / € =
-                  {{ $n(gdt, 'decimal') }} GDT
-                </div>
-              </div>
-            </b-row>
-          </div>
-        </b-collapse>
-        <!--     Collaps ENDE    -->
+        <transaction
+          :amount="amount"
+          :date="date"
+          :comment="comment"
+          :gdtEntryType="gdtEntryType"
+          :factor="factor"
+          :gdt="gdt"
+        ></transaction>
       </div>
     </div>
     <pagination-buttons
@@ -163,19 +42,13 @@
 <script>
 import { listGDTEntriesQuery } from '../../../graphql/queries'
 import PaginationButtons from '../../../components/PaginationButtons'
-import Transaktion from '../../../components/Transaktion.vue'
-
-const iconsByType = {
-  1: { icon: 'heart', classes: 'gradido-global-color-accent' },
-  4: { icon: 'person-check', classes: 'gradido-global-color-accent' },
-  7: { icon: 'gift', classes: 'gradido-global-color-accent' },
-}
+import Transaction from '../../../components/Transaction.vue'
 
 export default {
   name: 'gdt-transaction-list',
   components: {
     PaginationButtons,
-    Transaktion,
+    Transaction,
   },
   data() {
     return {
@@ -218,15 +91,7 @@ export default {
           this.$toasted.error(error.message)
         })
     },
-    getIcon(givenType) {
-      const type = iconsByType[givenType]
-      if (type)
-        return {
-          icon: type.icon,
-          class: type.classes + ' m-mb-1 font2em',
-        }
-      this.throwError('no icon to given type: ' + givenType)
-    },
+
     throwError(msg) {
       throw new Error(msg)
     },