Merge pull request #645 from gradido/630-Frontend-Text-Improvemets

630 frontend text improvemets

.github/workflows/test.yml

@@ -206,7 +206,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 46
+          min_coverage: 47
           token: ${{ github.token }}
   
   ##############################################################################

frontend/src/components/DecayInformation.vue

@@ -1,18 +1,17 @@
 <template>
   <div>
     <span v-if="decaytyp === 'short'">
-      <small>{{ decay ? ' ' + decay.balance + ' ' + decayStartBlockTextShort : '' }}</small>
+      <small>{{ decay ? ' -' + decay.balance + ' ' + decayStartBlockTextShort : '' }}</small>
     </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 style="width: 40%" class="text-right pr-3 mr-2">
-              {{ $t('decay.calculation_decay') }}
+            <div style="width: 100%" class="text-center pb-3">
               <b-icon icon="droplet-half" height="12" class="mb-2" />
+              {{ $t('decay.calculation_decay') }}
             </div>
-            <div style="width: 60%"></div>
           </div>
 
           <div class="d-flex">
@@ -28,7 +27,10 @@
                 </div>
               </div>
               <div>
-                <span>{{ $d($moment.unix(decay.decay_start), 'long') }} Uhr</span>
+                <span>
+                  {{ $d($moment.unix(decay.decay_start), 'long') }}
+                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+                </span>
               </div>
             </div>
           </div>

frontend/src/locales/de.json

@@ -8,7 +8,7 @@
   "reset": "Passwort zurücksetzen",
   "imprint":"Impressum",
   "privacy_policy":"Datenschutzerklärung",
-  "members_area": "Mitgliedsbereich",
+  "members_area": "Mitgliederbereich",
   "whitepaper": "Whitepaper",
   "back":"Zurück",
   "send":"Senden",
@@ -35,7 +35,8 @@
     "seconds":"Sekunden",
     "received":"empfangen",
     "sent":"gesendet",
-    "created":"geschöpft"
+    "created":"geschöpft",
+    "fromCommunity":"Aus der Community"
   }, 
   "form": {
     "cancel": "Abbrechen",
@@ -43,7 +44,7 @@
     "close": "schließen",
     "edit": "bearbeiten",
     "save": "speichern",
-    "receiver":"Empfänger",
+    "recipient":"Empfänger",
     "sender":"Absender",
     "username":"Username",
     "firstname":"Vorname",
@@ -59,14 +60,15 @@
     "change": "ändern",
     "change-password": "Passwort ändern",
     "amount":"Betrag",
-    "memo":"Nachricht für den Empfänger",
+    "memo":"Nachricht",
     "message":"Nachricht",
     "date":"Datum",
     "from":"von",
     "to":"bis",
+    "to1":"an",
     "at":"am",
     "time":"Zeit",
-    "send_now":"Jetzt versenden",
+    "send_now":"Jetzt senden",
     "scann_code":"<strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners",
     "max_gdd_info":"Maximale anzahl GDD zum versenden erreicht!",
     "send_check":"Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!",
@@ -114,7 +116,7 @@
     "password": {
       "title": "Passwort zurücksetzen",
       "subtitle": "Wenn du dein Passwort vergessen hast, kannst du es hier zurücksetzen.",
-      "reset_now": "Jetzt zurücksetzen"
+      "send_now": "Jetzt senden"
     },
     "thx": {
       "title": "Danke!",

frontend/src/locales/en.json

@@ -35,7 +35,8 @@
     "seconds": "Seconds",
     "received":"received",
     "sent":"sent",
-    "created":"created"
+    "created":"reated",
+    "fromCommunity":"From the community"
   },
   "form": {
     "cancel":"Cancel",
@@ -43,7 +44,7 @@
     "close":"Close",
     "edit": "Edit",
     "save": "save",
-    "receiver":"Receiver",
+    "recipient":"Recipient",
     "sender":"Sender",
     "username":"Username",
     "firstname":"Firstname",
@@ -59,11 +60,12 @@
     "change": "change",
     "change-password": "Change password",
     "amount":"Amount",
-    "memo":"Message for the recipient",
+    "memo":"Message",
     "message":"Message",
     "date":"Date",
     "from":"from",
     "to":"to",
+    "to1":"to",
     "at":"at",
     "time":"Time",
     "send_now":"Send now",
@@ -114,7 +116,7 @@
     "password": {
       "title": "Reset password",
       "subtitle": "If you have forgotten your password, you can reset it here.",
-      "reset_now": "Reset now"
+      "send_now": "Send now"
     },
     "thx": {
       "title": "Thank you!",

frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue

@@ -6,7 +6,7 @@
         <b-list-group>
           <b-list-group-item class="d-flex justify-content-between align-items-center">
             {{ email }}
-            <b-badge variant="primary" pill>{{ $t('form.receiver') }}</b-badge>
+            <b-badge variant="primary" pill>{{ $t('form.recipient') }}</b-badge>
           </b-list-group-item>
           <b-list-group-item class="d-flex justify-content-between align-items-center">
             {{ $n(amount, 'decimal') }} GDD

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js

@@ -50,7 +50,7 @@ describe('GddSend', () => {
         })
 
         it('has a label form.receiver', () => {
-          expect(wrapper.find('label.input-1').text()).toBe('form.receiver')
+          expect(wrapper.find('label.input-1').text()).toBe('form.recipient')
         })
 
         it('has a placeholder "E-Mail"', () => {
@@ -121,8 +121,8 @@ describe('GddSend', () => {
           )
         })
 
-        it('has a label form.memo', () => {
-          expect(wrapper.find('label.input-3').text()).toBe('form.memo')
+        it('has a label form.message', () => {
+          expect(wrapper.find('label.input-3').text()).toBe('form.message')
         })
 
         it('flushes an error message when memo is less than 5 characters', async () => {

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue

@@ -21,12 +21,7 @@
                 }"
                 v-slot="{ errors }"
               >
-                <b-row>
-                  <b-col v-if="errors" class="text-right p-3 p-sm-1">
-                    <span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
-                  </b-col>
-                </b-row>
-                <label class="input-1" for="input-1">{{ $t('form.receiver') }}</label>
+                <label class="input-1" for="input-1">{{ $t('form.recipient') }}</label>
                 <b-input-group
                   id="input-group-1"
                   class="border border-default"
@@ -48,6 +43,9 @@
                     class="pl-3"
                   ></b-form-input>
                 </b-input-group>
+                <b-col v-if="errors">
+                  <span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
+                </b-col>
               </validation-provider>
             </div>
 
@@ -62,11 +60,6 @@
                 }"
                 v-slot="{ errors, valid }"
               >
-                <b-row>
-                  <b-col v-if="errors" class="col-12 text-right p-3 p-sm-1">
-                    <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
-                  </b-col>
-                </b-row>
                 <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
                 <b-input-group id="input-group-2" class="border border-default" size="lg">
                   <b-input-group-prepend class="p-2 d-none d-md-block">
@@ -85,6 +78,9 @@
                     class="pl-3"
                   ></b-form-input>
                 </b-input-group>
+                <b-col v-if="errors">
+                  <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+                </b-col>
               </validation-provider>
             </div>
 
@@ -95,15 +91,10 @@
                   min: 5,
                   max: 150,
                 }"
-                :name="$t('form.memo')"
+                :name="$t('form.message')"
                 v-slot="{ errors }"
               >
-                <b-row>
-                  <b-col v-if="errors" class="text-right p-3 p-sm-1">
-                    <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
-                  </b-col>
-                </b-row>
-                <label class="input-3" for="input-3">{{ $t('form.memo') }}</label>
+                <label class="input-3" for="input-3">{{ $t('form.message') }}</label>
                 <b-input-group id="input-group-3" class="border border-default">
                   <b-input-group-prepend class="d-none d-md-block">
                     <b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
@@ -115,6 +106,9 @@
                     class="pl-3"
                   ></b-form-textarea>
                 </b-input-group>
+                <b-col v-if="errors">
+                  <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+                </b-col>
               </validation-provider>
             </div>
 

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

@@ -18,6 +18,9 @@ describe('GddTransactionList', () => {
     $n: jest.fn((n) => n),
     $t: jest.fn((t) => t),
     $d: jest.fn((d) => d),
+    $i18n: {
+      locale: () => 'de',
+    },
   }
 
   const Wrapper = () => {
@@ -57,6 +60,7 @@ describe('GddTransactionList', () => {
               name: 'Bob der Baumeister',
               transaction_id: 29,
               type: 'send',
+              decay: { balance: '0.5' },
             },
             {
               balance: '1000',
@@ -73,6 +77,7 @@ describe('GddTransactionList', () => {
               name: 'Jan Ulrich',
               transaction_id: 8,
               type: 'receive',
+              decay: { balance: '1.5' },
             },
             {
               balance: '1.07',
@@ -110,11 +115,19 @@ describe('GddTransactionList', () => {
         })
 
         it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Bob der Baumeister')
+          expect(transaction.findAll('div').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')
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Tue May 25 2021')
+          expect(transaction.findAll('div').at(8).text()).toContain('Tue May 25 2021')
+        })
+
+        it('shows the decay calculation', () => {
+          expect(transaction.findAll('div').at(9).text()).toContain('-0.5')
         })
       })
 
@@ -164,19 +177,23 @@ describe('GddTransactionList', () => {
         })
 
         it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('314.98')
+          expect(transaction.findAll('div').at(2).text()).toContain('+ 314.98')
         })
 
-        it('has a plus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('+')
+        it('shows the name of the recipient', () => {
+          expect(transaction.findAll('div').at(0).text()).toContain('Jan Ulrich')
         })
 
-        it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Jan Ulrich')
+        it('shows the message of the transaction', () => {
+          expect(transaction.findAll('div').at(5).text()).toContain('Für das Fahrrad!')
         })
 
         it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Thu Apr 29 2021')
+          expect(transaction.findAll('div').at(8).text()).toContain('Thu Apr 29 2021')
+        })
+
+        it('shows the decay calculation', () => {
+          expect(transaction.findAll('div').at(9).text()).toContain('-1.5')
         })
       })
 

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

@@ -15,10 +15,15 @@
           <!-- 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">
               <br />
               <b-icon v-if="type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
@@ -26,11 +31,18 @@
           </div>
           <!-- Text Rechts -->
           <div class="font1_2em text-left pl-2" style="width: 55%">
-            {{ name ? name : '' }}
+            <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') }}</div>
+            <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 -->
@@ -43,32 +55,11 @@
         <!-- ROW End -->
         <!-- Collaps Start -->
         <b-collapse v-if="type != 'decay'" :id="'a' + date + ''">
-          <b-list-group v-if="type === 'receive' || type === 'send'">
-            <b-list-group-item style="border: 0px; background-color: #f1f1f1">
-              <div class="d-flex">
-                <div style="width: 40%" class="text-right pr-3 mr-2">
-                  {{ type === 'receive' ? 'von:' : 'an:' }}
-                </div>
-                <div style="width: 60%">
-                  {{ name }}
-                  <b-avatar class="mr-3"></b-avatar>
-                </div>
-              </div>
-              <div class="d-flex">
-                <div style="width: 40%" class="text-right pr-3 mr-2">
-                  {{ type === 'receive' ? 'Nachricht:' : 'Nachricht:' }}
-                </div>
-                <div style="width: 60%">
-                  {{ memo }}
-                </div>
-              </div>
-            </b-list-group-item>
-          </b-list-group>
           <b-list-group v-if="type === 'creation'">
             <b-list-group-item style="border: 0px">
               <div class="d-flex">
-                <div style="width: 40%" class="text-right pr-3 mr-2">Schöpfung</div>
-                <div style="width: 60%">Aus der Community</div>
+                <div style="width: 40%" class="text-right pr-3 mr-2">{{ $t('decay.created') }}</div>
+                <div style="width: 60%">{{ $t('decay.fromCommunity') }}</div>
               </div>
             </b-list-group-item>
           </b-list-group>

frontend/src/views/Pages/ForgotPassword.vue

@@ -22,7 +22,7 @@
                   <input-email v-model="form.email"></input-email>
                   <div class="text-center">
                     <b-button type="submit" variant="primary">
-                      {{ $t('site.password.reset_now') }}
+                      {{ $t('site.password.send_now') }}
                     </b-button>
                   </div>
                 </b-form>