Merge branch 'master' of github.com:gradido/gradido

CHANGELOG.md

@@ -4,15 +4,38 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.3.0](https://github.com/gradido/gradido/compare/1.2.1...1.3.0)
+
+- update code for correct transactions listening [`#725`](https://github.com/gradido/gradido/pull/725)
+- bugfix: change to new frontend passwort reset [`#724`](https://github.com/gradido/gradido/pull/724)
+- feat: Add Pagination Buttons to GDT Transaction List [`#716`](https://github.com/gradido/gradido/pull/716)
+- fix bug, change statment from transaction infbox [`#712`](https://github.com/gradido/gradido/pull/712)
+- 650-display of the gdt transactions [`#687`](https://github.com/gradido/gradido/pull/687)
+- Login-Server bug fix, allow names with 2 characters also [`#714`](https://github.com/gradido/gradido/pull/714)
+- Apollo sendCoins via Login-Server [`#699`](https://github.com/gradido/gradido/pull/699)
+- increase coverage to 34% [`#700`](https://github.com/gradido/gradido/pull/700)
+- mobile friendly, add text, change text [`#683`](https://github.com/gradido/gradido/pull/683)
+- Css color input error [`#646`](https://github.com/gradido/gradido/pull/646)
+- Apollo gdt [`#686`](https://github.com/gradido/gradido/pull/686)
+- Backend Setup [`#584`](https://github.com/gradido/gradido/pull/584)
+- text-size in textarea and font-variante if focus [`#677`](https://github.com/gradido/gradido/pull/677)
+- 680 app large maximum width [`#681`](https://github.com/gradido/gradido/pull/681)
+- linting, server is working [`34b30b2`](https://github.com/gradido/gradido/commit/34b30b216b6fafcb5b686d4b023b05f2e9766bdf)
+- server stack seems to work. Graphql does not load properly yet [`43f7cf8`](https://github.com/gradido/gradido/commit/43f7cf87679713d436a64d569d6af1594a12ee33)
+- initial commit, base packages [`fdf0979`](https://github.com/gradido/gradido/commit/fdf0979830fece04208a6b3bb06bb5323a3c149b)
+
 #### [1.2.1](https://github.com/gradido/gradido/compare/1.2.0...1.2.1)
 
+> 22 July 2021
+
+- release 1.2.1 [`#670`](https://github.com/gradido/gradido/pull/670)
 - exchange positions of decay in transaction in old frontend [`#662`](https://github.com/gradido/gradido/pull/662)
 - fix unneccessary migration run on fresh (docker) setup [`#654`](https://github.com/gradido/gradido/pull/654)
 - move back decay as standalone transaction in old frontend [`#656`](https://github.com/gradido/gradido/pull/656)
 - fix display error with creation [`#652`](https://github.com/gradido/gradido/pull/652)
+- release [`a0b8056`](https://github.com/gradido/gradido/commit/a0b8056c17b22570a1b1dbb6fa6ce71e561b04af)
 - update content for frontend [`d37ce09`](https://github.com/gradido/gradido/commit/d37ce0949ef97d2a6c6ffaf0be31db9f6d92e743)
 - exchange positions [`bc000ef`](https://github.com/gradido/gradido/commit/bc000efd87c9701480c4aeaa7b819ab49bfe8f01)
-- update init db dataset [`ca4ef82`](https://github.com/gradido/gradido/commit/ca4ef82b874185f3d93acf8d1fca9ad6d3dadcaf)
 
 #### [1.2.0](https://github.com/gradido/gradido/compare/1.1.1...1.2.0)
 

README.md

@@ -2,7 +2,7 @@
 
 Healthy money for a healthy world
 
-![logo](https://gradido.net/wp-content/uploads/2020/07/gradido_logo_web.png)
+![logo](https://gradido.net/wp-content/uploads/2021/06/gradido_logo%E2%97%8Fpreview.png)
 
 The Gradido model can create global prosperity and peace
 The Corona crisis has fundamentally changed our world within a very short time.

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-gradido-wallet",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "start": "node run/server.js",

frontend/src/components/DecayInformation.vue

@@ -1,25 +1,25 @@
 <template>
   <div>
     <span v-if="decaytyp === 'short'">
-      <small>{{ decay ? ' -' + decay.balance + ' ' + decayStartBlockTextShort : '' }}</small>
+      {{ decay ? ' -' + decay.balance + ' ' + decayStartBlockTextShort : '' }}
     </span>
 
     <div v-if="decaytyp === 'new'">
       <b-list-group style="border: 0px">
         <b-list-group-item style="border: 0px; background-color: #f1f1f1">
-          <div class="d-flex">
+          <div class="d-flex" v-if="!decay.decay_start_block">
             <div style="width: 100%" class="text-center pb-3">
               <b-icon icon="droplet-half" height="12" class="mb-2" />
-              {{ $t('decay.calculation_decay') }}
+              <b>{{ $t('decay.calculation_decay') }}</b>
             </div>
           </div>
 
           <div class="d-flex">
             <div style="width: 40%" class="text-right pr-3 mr-2">
-              {{ $t('decay.last_transaction') }}
+              <div v-if="!decay.decay_start_block">{{ $t('decay.last_transaction') }}</div>
             </div>
             <div style="width: 60%">
-              <div v-if="decay.decay_start_block > 0">
+              <div v-if="decay.decay_start_block">
                 <div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
                 <div>
                   {{ $t('decay.decay_introduced') }} :
@@ -27,7 +27,7 @@
                 </div>
               </div>
               <div>
-                <span>
+                <span v-if="!decay.decay_start_block">
                   {{ $d($moment.unix(decay.decay_start), 'long') }}
                   {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
                 </span>
@@ -37,17 +37,23 @@
 
           <div class="d-flex">
             <div style="width: 40%" class="text-right pr-3 mr-2">
-              {{ $t('decay.past_time') }}
+              <div v-if="!decay.decay_start_block">{{ $t('decay.past_time') }}</div>
             </div>
             <div style="width: 60%">
-              <div v-if="decay.decay_start_block > 0">{{ $t('decay.since_introduction') }}</div>
+              <div v-if="decay.decay_start_block">{{ $t('decay.since_introduction') }}</div>
               <span v-if="duration">
-                <b v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</b>
+                <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
-                <b v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</b>
+                <span v-if="duration.months > 0">
-                <b v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</b>
+                  {{ duration.months }} {{ $t('decay.months') }},
-                <b v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</b>
+                </span>
-                <b v-if="duration.minutes > 0">{{ duration.minutes }} {{ $t('decay.minutes') }},</b>
+                <span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
-                <b v-if="duration.seconds > 0">{{ duration.seconds }} {{ $t('decay.seconds') }}</b>
+                <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>
             </div>
           </div>

frontend/src/locales/de.json

@@ -23,7 +23,7 @@
     "decay_since_last_transaction":"Vergänglichkeit seit der letzten Transaktion",
     "calculation_decay":"Berechnung der Vergänglichkeit",
     "Starting_block_decay":"Startblock Vergänglichkeit",
-    "decay_introduced":"Die Vergänglichkeit wurde Eingeführt am",
+    "decay_introduced":"Die Vergänglichkeit wurde Eingeführt am ",
     "last_transaction":"Letzte Transaktion",
     "past_time":"Vergangene Zeit",
     "since_introduction":"seit Einführung der Vergänglichkeit",
@@ -33,11 +33,11 @@
     "hours":"Stunden",
     "minutes":"Minuten",
     "seconds":"Sekunden",
-    "received":"empfangen",
+    "received":"Empfangen",
-    "sent":"gesendet",
+    "sent":"Gesendet",
-    "created":"geschöpft",
+    "created":"Geschöpft",
-    "fromCommunity":"Aus der Community",
+    "fromCommunity":"Aus der Gemeinschaft",
-    "toCommunity":"An die Community"
+    "toCommunity":"An die Gemeinschaft"
   }, 
   "form": {
     "cancel": "Abbrechen",
@@ -175,6 +175,11 @@
      "conversion-gdt-euro":"Umrechnung Euro / Gradido Transform (GDT)",
      "calculation":"Berechnung der Gradido Transform",
      "conversion":"Umrechnung",
-     "formula":"Berechungsformel"
+     "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",
+     "contribution":"Beitrag"
   }
 }

frontend/src/locales/en.json

@@ -33,9 +33,9 @@
     "hours": "Hours",
     "minutes": "Minutes",
     "seconds": "Seconds",
-    "received":"received",
+    "received":"Received",
-    "sent":"sent",
+    "sent":"Sent",
-    "created":"reated",
+    "created":"Created",
     "fromCommunity":"From the community",
     "toCommunity":"To the community"
   },
@@ -176,6 +176,11 @@
     "conversion-gdt-euro": "Conversion Euro / Gradido Transform (GDT)",
     "calculation": "Calculation of Gradido Transform",
     "conversion": "Conversion",
-    "formula": "Calculation formula"
+    "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",
+    "contribution":"Contribution"
  }
 }

frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js

@@ -106,28 +106,40 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('text-danger')
         })
 
-        it('shows the amount of transaction', () => {
+        it('has a minus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('19.93')
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '-',
+          )
         })
 
-        it('has a minus operator', () => {
+        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('-')
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '19.93',
+          )
         })
 
         it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(0).text()).toContain('Bob der Baumeister')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Bob der Baumeister',
+          )
         })
 
         it('shows the message of the transaction', () => {
-          expect(transaction.findAll('div').at(5).text()).toContain('Alles Gute zum Geburtstag')
+          expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
+            'Alles Gute zum Geburtstag',
+          )
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(8).text()).toContain('Tue May 25 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Tue May 25 2021',
+          )
         })
 
         it('shows the decay calculation', () => {
-          expect(transaction.findAll('div').at(9).text()).toContain('-0.5')
+          expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
+            '-0.5',
+          )
         })
       })
 
@@ -145,20 +157,28 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
         })
 
-        it('shows the amount of transaction', () => {
+        it('has a plus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('1000')
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '+',
+          )
         })
 
-        it('has a plus operator', () => {
+        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('+')
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '1000',
+          )
         })
 
         it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Gradido Akademie')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Gradido Akademie',
+          )
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Thu Apr 29 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Thu Apr 29 2021',
+          )
         })
       })
 
@@ -176,24 +196,40 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
         })
 
+        it('has a plus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '+',
+          )
+        })
+
         it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('+ 314.98')
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '314.98',
+          )
         })
 
         it('shows the name of the recipient', () => {
-          expect(transaction.findAll('div').at(0).text()).toContain('Jan Ulrich')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Jan Ulrich',
+          )
         })
 
         it('shows the message of the transaction', () => {
-          expect(transaction.findAll('div').at(5).text()).toContain('Für das Fahrrad!')
+          expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
+            'Für das Fahrrad!',
+          )
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(8).text()).toContain('Thu Apr 29 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Thu Apr 29 2021',
+          )
         })
 
         it('shows the decay calculation', () => {
-          expect(transaction.findAll('div').at(9).text()).toContain('-1.5')
+          expect(transaction.findAll('.gdd-transaction-list-item-decay').at(0).text()).toContain(
+            '-1.5',
+          )
         })
       })
 
@@ -211,16 +247,22 @@ describe('GddTransactionList', () => {
           expect(transaction.find('svg').classes()).toContain('gradido-global-color-gray')
         })
 
-        it('shows the amount of transaction', () => {
+        it('has a minus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('1.07')
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '-',
+          )
         })
 
-        it('has a minus operator', () => {
+        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('-')
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '1.07',
+          )
         })
 
         it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(3).text()).toBe('decay.decay_since_last_transaction')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toBe(
+            'decay.decay_since_last_transaction',
+          )
         })
       })
     })

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

@@ -1,79 +1,76 @@
 <template>
   <div class="gdd-transaction-list">
-    <b-list-group>
+    <div class="list-group">
-      <b-list-group-item
+      <div
         v-for="{ decay, transaction_id, type, date, balance, name, memo } in transactions"
         :key="transaction_id"
         :style="type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
       >
-        <!-- ROW Start -->
+        <div class="list-group-item gdd-transaction-list-item" v-b-toggle="'a' + date + ''">
-        <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + date + ''">
+          <!-- Collaps Button  -->
-          <!-- ICON -->
+          <div v-if="type != 'decay'" class="text-right" style="width: 95%; position: absolute">
-          <div style="width: 8%">
-            <b-icon :icon="getProperties(type).icon" :class="getProperties(type).class" />
-          </div>
-          <!-- Text Links -->
-          <div class="font1_2em pr-2 text-right" style="width: 32%">
-            <span>{{ getProperties(type).operator }}</span>
-
-            <small v-if="type === 'decay'">{{ $n(balance, 'decimal') }}</small>
-
-            <span v-else>{{ $n(balance, 'decimal') }}</span>
-            <div v-if="type !== 'decay' && type !== 'creation'">
-              <small>
-                {{ $t('form.memo') }}
-              </small>
-            </div>
-            <div v-if="decay" class="text-sm">
-              <b-icon v-if="type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
-            </div>
-          </div>
-          <!-- Text Rechts -->
-          <div class="font1_2em text-left pl-2" style="width: 55%">
-            <div>{{ name ? name : '' }}</div>
-            <div>
-              <small>
-                {{ memo }}
-              </small>
-            </div>
-            <span v-if="type === 'decay'">
-              <small>{{ $t('decay.decay_since_last_transaction') }}</small>
-            </span>
-            <div v-if="date" class="text-sm">
-              {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-            </div>
-            <decay-information v-if="decay" decaytyp="short" :decay="decay" />
-          </div>
-          <!-- Collaps Toggle Button -->
-          <div v-if="type != 'decay'" class="text-right" style="width: 5%">
             <b-button class="btn-sm">
               <b>i</b>
             </b-button>
           </div>
+
+          <b-row>
+            <!-- ICON  -->
+            <div class="col-1 gdd-transaction-list-item-icon">
+              <b-icon :icon="getProperties(type).icon" :class="getProperties(type).class" />
             </div>
-        <!-- ROW End -->
+
+            <div class="col col-11">
+              <!-- Betrag / Name Email -->
+              <b-row>
+                <div class="col-5 text-right">
+                  <span class="gdd-transaction-list-item-operator">
+                    {{ getProperties(type).operator }}
+                  </span>
+                  <span class="gdd-transaction-list-item-amount">{{ $n(balance, 'decimal') }}</span>
+                </div>
+                <div class="col-7 gdd-transaction-list-item-name">
+                  {{ type !== 'decay' ? name : $t('decay.decay_since_last_transaction') }}
+                </div>
+              </b-row>
+
+              <!-- Nachricht -->
+              <b-row v-if="type !== 'decay'">
+                <div class="col-5 text-right">{{ $t('form.memo') }}</div>
+                <div class="col-7 gdd-transaction-list-message">{{ memo }}</div>
+              </b-row>
+
+              <!-- Datum -->
+              <b-row v-if="type !== 'decay'">
+                <div class="col-5 text-right">{{ $t('form.date') }}</div>
+                <div class="col-7 gdd-transaction-list-item-date">
+                  {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+                </div>
+              </b-row>
+
+              <!-- Decay -->
+              <b-row v-if="decay">
+                <div class="col-5 text-right">
+                  <b-icon v-if="type != 'decay'" icon="droplet-half" height="15" class="mb-1" />
+                </div>
+                <div class="col-7 gdd-transaction-list-item-decay">
+                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                </div>
+              </b-row>
+            </div>
+          </b-row>
+
           <!-- Collaps Start -->
-        <b-collapse v-if="type != 'decay'" :id="'a' + date + ''">
+
-          <b-list-group>
+          <b-collapse v-if="type != 'decay'" class="pb-4" :id="'a' + date + ''">
-            <b-list-group-item style="border: 0px; background-color: #f1f1f1">
+            <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
-              <div class="d-flex">
-                <div style="width: 40%" class="text-right pr-3 mr-2">
-                  <div v-if="type === 'send'">{{ $t('decay.sent') }}</div>
-                  <div v-if="type === 'creation'">{{ $t('decay.created') }}</div>
-                  <div v-if="type === 'receive'">{{ $t('decay.received') }}</div>
-                </div>
-                <div style="width: 60%">
-                  <div v-if="type === 'send'">{{ $t('decay.toCommunity') }}</div>
-                  <div v-if="type === 'creation'">{{ $t('decay.fromCommunity') }}</div>
-                  <div v-if="type === 'receive'">{{ $t('decay.fromCommunity') }}</div>
-                </div>
-              </div>
-            </b-list-group-item>
-          </b-list-group>
               <decay-information v-if="decay" decaytyp="new" :decay="decay" />
+            </div>
           </b-collapse>
+
           <!-- Collaps End -->
-      </b-list-group-item>
+        </div>
+      </div>
       <pagination-buttons
         v-if="showPagination && transactionCount > pageSize"
         :has-next="hasNext"
@@ -86,7 +83,7 @@
       <div v-if="transactions.length === 0" class="mt-4 text-center">
         <span>{{ $t('transaction.nullTransactions') }}</span>
       </div>
-    </b-list-group>
+    </div>
   </div>
 </template>
 

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

@@ -1,116 +1,142 @@
 <template>
   <div class="gdt-transaction-list">
-    <b-list-group>
+    <div class="list-group">
-      <b-list-group-item
+      <div v-if="transactionGdtCount === 0">
-        v-for="{
+        {{ $t('gdt.no-transactions') }}
-          id,
+      </div>
-          amount,
+      <div
-          date,
+        v-else
-          /*email,*/
+        v-for="{ id, amount, date, comment, gdt_entry_type_id, factor, gdt } in transactionsGdt"
-          comment,
-          /*coupon_code,*/
-          gdt_entry_type_id,
-          factor,
-          /*amount2,*/
-          /*factor2,*/
-          gdt,
-        } in this.transactionsGdt"
         :key="id"
       >
-        <!-- ROW Start -->
+        <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
-        <div class="d-flex gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
+          <!-- Icon  -->
-          <!-- ICON -->
+          <div class="text-right" style="position: absolute">
-          <div style="width: 8%"></div>
+            <b-icon
-          <!-- Text Links -->
+              v-if="gdt_entry_type_id"
-          <div class="font1_2em pr-2 text-right" style="width: 36%">
+              :icon="getIcon(gdt_entry_type_id).icon"
-            <div>
+              :class="getIcon(gdt_entry_type_id).class"
-              <div>
+            ></b-icon>
-                <span v-if="gdt_entry_type_id != 7">-</span>
-                {{ $n(amount, 'decimal') }}
-              </div>
-              <div v-if="gdt_entry_type_id != 7">+{{ $n(gdt, 'decimal') }}</div>
           </div>
 
-            <div v-if="comment">
+          <!-- Collaps Button  -->
-              <small>
+          <div class="text-right" style="width: 96%; position: absolute">
-                {{ $t('form.memo') }}
-              </small>
-            </div>
-            <div v-if="date" class="text-sm">
-              {{ $t('form.date') }}
-            </div>
-            <div v-if="gdt_entry_type_id != 7">
-              <small>{{ $t('gdt.factor') }}</small>
-            </div>
-          </div>
-          <!-- Text Rechts -->
-          <div class="font1_2em text-left pl-2" style="width: 55%">
-            <div>
-              <div v-if="gdt_entry_type_id != 7">EURO</div>
-              <div>GDT</div>
-            </div>
-
-            <div v-if="comment">
-              <small>
-                {{ comment }}
-              </small>
-            </div>
-
-            <div v-if="date" class="text-sm">
-              {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-            </div>
-
-            <div v-if="gdt_entry_type_id != 7">
-              <small>{{ factor }}</small>
-            </div>
-          </div>
-          <!-- Collaps Toggle Button -->
-          <div v-if="gdt_entry_type_id" class="text-right" style="width: 5%">
             <b-button class="btn-sm">
               <b>i</b>
             </b-button>
           </div>
+
+          <!-- Betrag -->
+
+          <!-- 7 nur GDT erhalten -->
+          <b-row v-if="gdt_entry_type_id === 7">
+            <div class="col-6 text-right">
+              <div>{{ $t('gdt.gdt-receive') }}</div>
+              <div>Gutschrift</div>
             </div>
-        <!-- ROW End -->
+            <div class="col-6">
-        <!-- Collaps Start -->
+              <div>{{ comment }}</div>
-        <b-collapse v-if="gdt_entry_type_id" :id="'a' + date + ''" class="pb-4">
+              <div>{{ $n(gdt, 'decimal') }} GDT</div>
-          <b-list-group style="border: 0px; background-color: #f1f1f1">
-            <div v-if="gdt_entry_type_id != '7'" class="text-center pt-3">
-              {{ $t('gdt.conversion-gdt-euro') }}
             </div>
-            <div v-else class="text-center pt-3">
+          </b-row>
-              {{ $t('gdt.calculation') }}
+          <!--4 publisher -->
+          <b-row v-else-if="gdt_entry_type_id === 4">
+            <div class="col-6 text-right">
+              <div>{{ $t('gdt.your-share') }}</div>
+              <div>Gutschrift</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>Gutschrift</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 && gdt_entry_type_id !== 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>
 
-            <!--EURO / GDT -->
+        <!--     Collaps START    -->
-            <b-list-group-item
+
-              v-if="gdt_entry_type_id != '7'"
+        <b-collapse v-if="gdt_entry_type_id" :id="'a' + date + ''" class="pb-4">
-              style="border: 0px; background-color: #f1f1f1"
+          <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
-            >
+            <!-- Überschrift -->
-              <div class="d-flex">
+            <b-row class="gdt-list-clooaps-header-text text-center pb-3">
-                <div style="width: 40%" class="text-right pr-3 mr-2">
+              <div class="col h4" v-if="gdt_entry_type_id === 7">
+                {{ $t('gdt.conversion-gdt-euro') }}
+              </div>
+              <div class="col h4" v-else-if="gdt_entry_type_id === 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="gdt_entry_type_id == 7">
+              <div class="col-6 text-right clooaps-col-left">
                 <div>{{ $t('gdt.factor') }}</div>
                 <div>{{ $t('gdt.conversion') }}</div>
               </div>
-                <div style="width: 60%">
+              <div class="col-6 clooaps-col-right">
                 <div>{{ factor }}</div>
-                  <div>{{ amount }} € ⊢ {{ gdt }} GDT</div>
+                <div>
+                  {{ $n(amount, 'decimal') }} € * {{ factor }} = {{ $n(gdt, 'decimal') }} GDT
                 </div>
               </div>
-            </b-list-group-item>
+            </b-row>
+            <!-- 4 publisher -->
+            <b-row class="gdt-list-clooaps-box-4" v-else-if="gdt_entry_type_id === 4">
+              <div class="col-6 text-right clooaps-col-left"></div>
+              <div class="col-6 clooaps-col-right"></div>
+            </b-row>
 
-            <!-- Only GDT -->
+            <!-- 1, 2, 3, 5, 6 spenden in euro -->
-            <b-list-group-item v-else style="border: 0px; background-color: #f1f1f1">
+            <b-row class="gdt-list-clooaps-box--all" v-else>
-              <div class="d-flex">
+              <div class="col-6 text-right clooaps-col-left">
-                <div style="width: 40%" class="text-right pr-3 mr-2">{{ $t('gdt.formula') }}:</div>
+                <div>{{ $t('gdt.factor') }}</div>
-                <div style="width: 60%">{{ amount }} GDT * {{ factor }} = {{ gdt }}</div>
+                <div>{{ $t('gdt.formula') }}:</div>
+              </div>
+              <div class="col-6 clooaps-col-right">
+                <div>{{ factor }}</div>
+                <div>
+                  {{ $n(amount, 'decimal') }} € * {{ factor }} = {{ $n(gdt, 'decimal') }} GDT
+                </div>
+              </div>
+            </b-row>
           </div>
-            </b-list-group-item>
-          </b-list-group>
         </b-collapse>
-        <!-- Collaps End -->
+        <!--     Collaps ENDE    -->
-      </b-list-group-item>
+      </div>
-    </b-list-group>
+    </div>
     <pagination-buttons
       v-if="transactionGdtCount > pageSize"
       :has-next="hasNext"
@@ -127,6 +153,12 @@
 import communityAPI from '../../../apis/communityAPI'
 import PaginationButtons from '../../../components/PaginationButtons'
 
+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 {
   name: 'gdt-transaction-list',
   components: {
@@ -165,6 +197,18 @@ export default {
         this.$toasted.error(result.result.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)
+    },
     showNext() {
       this.currentPage++
       this.updateGdt()
@@ -186,4 +230,9 @@ export default {
   padding-left: 0px;
   padding-right: 0px;
 }
+
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  background-color: #f8f9fe38;
+}
 </style>

frontend/src/views/Pages/UserProfileTransactionList.vue

@@ -51,4 +51,15 @@ export default {
   },
 }
 </script>
-<style></style>
+<style>
+.nav-tabs > li > a {
+  /* adjust padding for height*/
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+.nav-tabs > li.active {
+  background-color: aquamarine;
+  font-size: larger;
+}
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gradido",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Gradido",
   "main": "index.js",
   "repository": "git@github.com:gradido/gradido.git",