Merge pull request #793 from gradido/732-use-slots-and-templates-instead-of-if-else

gdt transaction with arrays and without slots

frontend/src/components/Transaction.spec.js

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils'
+import Transaction from './Transaction'
+
+const localVue = global.localVue
+
+describe('Transaction', () => {
+  let wrapper
+
+  const mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => n),
+    $d: jest.fn((d) => d),
+  }
+
+  const Wrapper = () => {
+    return mount(Transaction, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdt-transaction-list-item').exists()).toBeTruthy()
+    })
+  })
+})

frontend/src/components/Transaction.vue

@@ -0,0 +1,124 @@
+<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
+            :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>
+
+        <!-- Message-->
+        <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>
+
+        <!-- date-->
+        <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>
+
+      <!-- collaps trancaction info-->
+      <b-collapse :id="'a' + date + ''" class="pb-4">
+        <transaction-collapse
+          :amount="amount"
+          :gdtEntryType="gdtEntryType"
+          :factor="factor"
+          :gdt="gdt"
+        ></transaction-collapse>
+      </b-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import TransactionCollapse from './TransactionCollapse.vue'
+
+export default {
+  name: 'Transaction',
+  components: {
+    TransactionCollapse,
+  },
+  props: {
+    amount: { type: Number },
+    date: { type: String },
+    comment: { type: String },
+    gdtEntryType: { type: Number, default: 1 },
+    factor: { type: Number },
+    gdt: { type: Number },
+  },
+  methods: {
+    getLinesByType(givenType) {
+      if (givenType === 2 || givenType === 3 || givenType === 5 || givenType === 6) givenType = 1
+
+      const linesByType = {
+        1: {
+          icon: 'heart',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: this.$t('gdt.contribution'),
+          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: this.$t('gdt.recruited-member'),
+          descriptiontext: '5%',
+          credittext: this.$n(this.amount, 'decimal') + ' GDT',
+        },
+        7: {
+          icon: 'gift',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: this.$t('gdt.gdt-received'),
+          descriptiontext: this.comment,
+          credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+        },
+      }
+
+      const type = linesByType[givenType]
+
+      if (type) return type
+      throw new Error('no lines for this type: ' + givenType)
+    },
+  },
+}
+</script>

frontend/src/components/TransactionCollapse.spec.js

@@ -0,0 +1,152 @@
+import { mount } from '@vue/test-utils'
+import TransactionCollapse from './TransactionCollapse'
+
+const localVue = global.localVue
+
+describe('TransactionCollapse', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => n),
+  }
+
+  const Wrapper = (propsData) => {
+    return mount(TransactionCollapse, { localVue, mocks, propsData })
+  }
+
+  describe('mount with gdtEntryType: 1', () => {
+    beforeEach(() => {
+      const propsData = {
+        amount: 100,
+        gdt: 110,
+        factor: 22,
+        gdtEntryType: 1,
+      }
+
+      wrapper = Wrapper(propsData)
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdt-transaction-collapse').exists()).toBeTruthy()
+    })
+
+    it('checks the prop gdtEntryType  ', () => {
+      expect(wrapper.props().gdtEntryType).toBe(1)
+    })
+
+    it('renders the component collapse-header', () => {
+      expect(wrapper.find('.gdt-list-collapse-header-text')).toBeTruthy()
+    })
+
+    it('renders the component collapse-headline', () => {
+      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.calculation')
+    })
+
+    it('renders the component collapse-first', () => {
+      expect(wrapper.find('#collapse-first').text()).toBe('gdt.factor')
+    })
+
+    it('renders the component collapse-second', () => {
+      expect(wrapper.find('#collapse-second').text()).toBe('gdt.formula')
+    })
+
+    it('renders the component collapse-firstMath', () => {
+      expect(wrapper.find('#collapse-firstMath').text()).toBe('22 GDT pro €')
+    })
+
+    it('renders the component collapse-secondMath', () => {
+      expect(wrapper.find('#collapse-secondMath').text()).toBe('100 € * 22 GDT / € = 110 GDT')
+    })
+  })
+
+  describe('mount with gdtEntryType: 7', () => {
+    beforeEach(() => {
+      const propsData = {
+        amount: 100,
+        gdt: 2200,
+        factor: 22,
+        gdtEntryType: 7,
+      }
+
+      wrapper = Wrapper(propsData)
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdt-transaction-collapse').exists()).toBeTruthy()
+    })
+
+    it('checks the prop gdtEntryType  ', () => {
+      expect(wrapper.props().gdtEntryType).toBe(7)
+    })
+
+    it('renders the component collapse-header', () => {
+      expect(wrapper.find('.gdt-list-collapse-header-text')).toBeTruthy()
+    })
+
+    it('renders the component collapse-headline', () => {
+      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.conversion-gdt-euro')
+    })
+
+    it('renders the component collapse-first', () => {
+      expect(wrapper.find('#collapse-first').text()).toBe('gdt.raise')
+    })
+
+    it('renders the component collapse-second', () => {
+      expect(wrapper.find('#collapse-second').text()).toBe('gdt.conversion')
+    })
+
+    it('renders the component collapse-firstMath', () => {
+      expect(wrapper.find('#collapse-firstMath').text()).toBe('2200 %')
+    })
+
+    it('renders the component collapse-secondMath', () => {
+      expect(wrapper.find('#collapse-secondMath').text()).toBe('100 GDT * 2200 % = 2200 GDT')
+    })
+  })
+
+  describe('mount with gdtEntryType: 4', () => {
+    beforeEach(() => {
+      const propsData = {
+        amount: 100,
+        gdt: 2200,
+        factor: 22,
+        gdtEntryType: 4,
+      }
+
+      wrapper = Wrapper(propsData)
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdt-transaction-collapse').exists()).toBeTruthy()
+    })
+
+    it('checks the prop gdtEntryType  ', () => {
+      expect(wrapper.props().gdtEntryType).toBe(4)
+    })
+
+    it('renders the component collapse-header', () => {
+      expect(wrapper.find('.gdt-list-collapse-header-text')).toBeTruthy()
+    })
+
+    it('renders the component collapse-headline', () => {
+      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.publisher')
+    })
+
+    it('renders the component collapse-first', () => {
+      expect(wrapper.find('#collapse-first').text()).toBe('')
+    })
+
+    it('renders the component collapse-second', () => {
+      expect(wrapper.find('#collapse-second').text()).toBe('')
+    })
+
+    it('renders the component collapse-firstMath', () => {
+      expect(wrapper.find('#collapse-firstMath').text()).toBe('')
+    })
+
+    it('renders the component collapse-secondMath', () => {
+      expect(wrapper.find('#collapse-secondMath').text()).toBe('')
+    })
+  })
+})

frontend/src/components/TransactionCollapse.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="gdt-transaction-collapse">
+    <b-row class="gdt-list-collapse-header-text text-center pb-3">
+      <div id="collapse-headline" class="col h4">
+        {{ getLinesByType(gdtEntryType).headline }}
+      </div>
+    </b-row>
+    <b-row class="gdt-list-collapse-box--all">
+      <div class="col-6 text-right collapse-col-left">
+        <div id="collapse-first">{{ getLinesByType(gdtEntryType).first }}</div>
+        <div id="collapse-second">{{ getLinesByType(gdtEntryType).second }}</div>
+      </div>
+      <div class="col-6 collapse-col-right">
+        <div id="collapse-firstMath">{{ getLinesByType(gdtEntryType).firstMath }}</div>
+        <div id="collapse-secondMath">
+          {{ getLinesByType(gdtEntryType).secondMath }}
+        </div>
+      </div>
+    </b-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TransactionCollapse',
+  props: {
+    amount: { type: Number },
+    gdtEntryType: { type: Number, default: 1 },
+    factor: { type: Number },
+    gdt: { type: Number },
+  },
+  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'),
+          first: null,
+          firstMath: null,
+          second: null,
+          secondMath: null,
+        },
+        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 type
+      throw new Error('no additional transaction info for this type: ' + givenType)
+    },
+  },
+}
+</script>

frontend/src/locales/de.json

@@ -137,15 +137,6 @@
       "send_gradido":"Gradido versenden",
       "add_work":"neuer Gemeinschaftsbeitrag"
     },
-    "profil": {
-      "activity": {
-        "new":"Neue Gemeinschaftsstunden eintragen",
-        "list":"Meine Gemeinschaftsstunden Liste"
-      },
-      "user-data": {
-        "change-success": "Deine Daten wurden gespeichert."
-      }
-    },
     "navbar" : {
       "my-profil":"Mein Profil",
       "settings":"Einstellungen",
@@ -183,8 +174,8 @@
     "formula":"Berechungsformel",
     "no-transactions":"Du hast zur Zeit keine Transaktionen",
     "publisher":"Dein geworbenes Mitglied hat einen Beitrag bezahlt",
-    "gdt-receive":"Aktion",
-    "your-share":"Geworbenes Mitglied",
+    "action":"Aktion",
+    "recruited-member":"Geworbenes Mitglied",
     "contribution":"Beitrag"
   }
 }

frontend/src/locales/en.json

@@ -137,16 +137,6 @@
       "send_gradido":"Send Gradido",
       "add_work":"New Community Contribution"
     },
-    "profil": {
-      "transactions":"transactions",
-      "activity": {
-        "new":"Register new community hours",
-        "list":"My Community Hours List"
-      },
-      "user-data": {
-        "change-success": "Your data has been saved."
-      }
-    },
     "navbar" : {
       "my-profil":"My profile",
       "settings":"Settings",
@@ -184,8 +174,8 @@
     "formula": "Calculation formula",
     "no-transactions":"You currently have no transactions",
     "publisher":"A member you referred has paid a contribution",
-    "gdt-receive":"GDT receive",
-    "your-share":"Your share",
+    "action":"Action",
+    "recruited-member":"Recruited Member",
     "contribution":"Contribution"
  }
 }

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

@@ -17,134 +17,14 @@
         } in transactionsGdt"
         :key="transactionId"
       >
-        <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
@@ -162,26 +42,13 @@
 <script>
 import { listGDTEntriesQuery } from '../../../graphql/queries'
 import PaginationButtons from '../../../components/PaginationButtons'
-
-function iconByType(typeId) {
-  switch (typeId) {
-    case 1:
-    case 2:
-    case 3:
-    case 5:
-    case 6:
-      return { icon: 'heart', classes: 'gradido-global-color-accent' }
-    case 4:
-      return { icon: 'person-check', classes: 'gradido-global-color-accent' }
-    case 7:
-      return { icon: 'gift', classes: 'gradido-global-color-accent' }
-  }
-}
+import Transaction from '../../../components/Transaction.vue'
 
 export default {
   name: 'gdt-transaction-list',
   components: {
     PaginationButtons,
+    Transaction,
   },
   data() {
     return {
@@ -223,18 +90,6 @@ export default {
           this.$toasted.error(error.message)
         })
     },
-    getIcon(givenType) {
-      const type = iconByType(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)
-    },
     showNext() {
       this.currentPage++
       this.updateGdt()