Merge pull request #1517 from gradido/improve-decay-display

refactor: Improve Decay Display

frontend/src/components/DecayInformation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="decayinformation">
     <span v-if="decaytyp === 'short'">
-      {{ decay ? ' - ' + $n(decay.balance, 'decimal') + ' ' + decayStartBlockTextShort : '' }}
+      {{ decay ? ' − ' + $n(decay.balance, 'decimal') : '' }}
     </span>
 
     <div v-if="decaytyp === 'new'">
@@ -19,14 +19,11 @@
         <b-col cols="6">
           <div v-if="decay.decayStartBlock > 0">
             <div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
-            <div>
-              {{ $t('decay.decay_introduced') }} :
-              {{ $d($moment.unix(decay.decayStart), 'long') }}
-            </div>
+            <div>{{ $t('decay.decay_introduced') }} :</div>
           </div>
           <div>
             <span v-if="decay.decayStart">
-              {{ $d($moment.unix(decay.decayStart), 'long') }}
+              {{ $d(new Date(decay.decayStart * 1000), 'long') }}
               {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
             </span>
           </div>
@@ -59,7 +56,7 @@
           <div>{{ $t('decay.decay') }}</div>
         </b-col>
         <b-col cols="6">
-          <div>- {{ $n(decay.balance, 'decimal') }}</div>
+          <div>− {{ $n(decay.balance, 'decimal') }}</div>
         </b-col>
       </b-row>
       <hr class="mt-2 mb-2" />
@@ -75,7 +72,7 @@
           <div v-if="type === 'receive'">{{ $t('decay.received') }}</div>
         </b-col>
         <b-col cols="6">
-          <div v-if="type === 'send'">- {{ $n(balance, 'decimal') }}</div>
+          <div v-if="type === 'send'">− {{ $n(balance, 'decimal') }}</div>
           <div v-if="type === 'receive'">+ {{ $n(balance, 'decimal') }}</div>
         </b-col>
       </b-row>
@@ -85,7 +82,7 @@
           <div>{{ $t('decay.decay') }}</div>
         </b-col>
         <b-col cols="6">
-          <div>- {{ $n(decay.balance, 'decimal') }}</div>
+          <div>− {{ $n(decay.balance, 'decimal') }}</div>
         </b-col>
       </b-row>
       <!-- Total-->
@@ -95,13 +92,13 @@
         </b-col>
         <b-col cols="6">
           <div v-if="type === 'send'">
-            <b>- {{ $n(balance + decay.balance, 'decimal') }}</b>
+            <b>− {{ $n(balance + decay.balance, 'decimal') }}</b>
           </div>
           <div v-if="type === 'receive'">
             <b>{{ $n(balance - decay.balance, 'decimal') }}</b>
           </div>
           <div v-if="type === 'creation'">
-            <b>- {{ $n(balance - decay.balance, 'decimal') }}</b>
+            <b>− {{ $n(balance - decay.balance, 'decimal') }}</b>
           </div>
         </b-col>
       </b-row>
@@ -124,17 +121,8 @@ export default {
     decaytyp: { type: String, default: '' },
   },
   computed: {
-    decayStartBlockTextShort() {
-      return this.decay.decayStartBlock
-        ? this.$t('decay.decayStart') + this.$d(this.$moment.unix(this.decay.decayStartBlock))
-        : ''
-    },
     duration() {
-      return this.$moment.duration(
-        this.$moment
-          .unix(new Date(this.decay.decayEnd))
-          .diff(this.$moment.unix(new Date(this.decay.decayStart))),
-      )._data
+      return this.$moment.duration((this.decay.decayEnd - this.decay.decayStart) * 1000)._data
     },
   },
 }

frontend/src/components/Transaction.vue

@@ -50,7 +50,7 @@
             {{ $t('form.date') }}
           </b-col>
           <b-col cols="6">
-            {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+            {{ $d(new Date(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
           </b-col>
         </b-row>
 

frontend/src/i18n.js

@@ -69,8 +69,8 @@ const dateTimeFormats = {
     },
     long: {
       year: 'numeric',
-      month: 'short',
-      day: 'numeric',
+      month: 'long',
+      day: 'long',
       weekday: 'short',
       hour: 'numeric',
       minute: 'numeric',
@@ -84,9 +84,9 @@ const dateTimeFormats = {
     },
     long: {
       day: 'numeric',
-      month: 'short',
+      month: 'long',
       year: 'numeric',
-      weekday: 'short',
+      weekday: 'long',
       hour: 'numeric',
       minute: 'numeric',
     },

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

@@ -145,7 +145,7 @@ describe('GddTransactionList', () => {
 
         it('has a minus operator', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
-            '-',
+            '−',
           )
         })
 
@@ -175,7 +175,7 @@ describe('GddTransactionList', () => {
 
         it('shows the decay calculation', () => {
           expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
-            '- 0.5',
+            '− 0.5',
           )
         })
       })
@@ -265,7 +265,7 @@ describe('GddTransactionList', () => {
 
         it('shows the decay calculation', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-decay').at(0).text()).toContain(
-            '- 1.5',
+            '− 1.5',
           )
         })
       })
@@ -286,7 +286,7 @@ describe('GddTransactionList', () => {
 
         it('has a minus operator', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
-            '-',
+            '−',
           )
         })
 

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

@@ -77,7 +77,7 @@
                   </b-col>
                   <b-col cols="7">
                     <div class="gdd-transaction-list-item-date">
-                      {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+                      {{ $d(new Date(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
                     </div>
                   </b-col>
                 </b-row>
@@ -146,10 +146,10 @@ import PaginationButtons from '../../../components/PaginationButtons'
 import DecayInformation from '../../../components/DecayInformation'
 
 const iconsByType = {
-  send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '-' },
+  send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '−' },
   receive: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent', operator: '+' },
   creation: { icon: 'gift', classes: 'gradido-global-color-accent', operator: '+' },
-  decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '-' },
+  decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '−' },
 }
 
 export default {