Merge pull request #1576 from gradido/use-filter-to-display-amounts

feat: Use Vue Filter to Display Gradido Amounts

frontend/src/components/DecayInformations/DecayInformation-Decay.vue

@@ -13,9 +13,9 @@
       </b-col>
       <b-col cols="6">
         <div>
-          {{ $n(Number(balance) - Number(decay.decay), 'decimal') }}
+          {{ (Number(balance) - Number(decay.decay)) | GDD }}
-          GDD − {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
+          {{ decay.decay | GDD }} =
-          <b>{{ $n(Number(balance), 'decimal') }} GDD</b>
+          <b>{{ balance | GDD }}</b>
         </div>
       </b-col>
     </b-row>

frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue

@@ -17,12 +17,8 @@
 
     <!-- Decay-->
     <b-row>
-      <b-col cols="6" class="text-right">
+      <b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
-        <div>{{ $t('decay.decay') }}</div>
+      <b-col cols="6">{{ decay.decay | GDD }}</b-col>
-      </b-col>
-      <b-col cols="6">
-        <div>− {{ $n(decay.decay * -1, 'decimal') }}</div>
-      </b-col>
     </b-row>
     <hr class="mt-2 mb-2" />
     <b-row>
@@ -32,39 +28,19 @@
     </b-row>
     <!-- Type-->
     <b-row>
-      <b-col cols="6" class="text-right">
+      <b-col cols="6" class="text-right">{{ $t(`decay.${typeId.toLowerCase()}`) }}</b-col>
-        <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
+      <b-col cols="6">{{ amount | GDD }}</b-col>
-        <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
-      </b-col>
-      <b-col cols="6">
-        <div v-if="typeId === 'SEND'">− {{ $n(amount * -1, 'decimal') }}</div>
-        <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
-      </b-col>
     </b-row>
     <!-- Decay-->
     <b-row>
-      <b-col cols="6" class="text-right">
+      <b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
-        <div>{{ $t('decay.decay') }}</div>
+      <b-col cols="6">{{ decay.decay | GDD }}</b-col>
-      </b-col>
-      <b-col cols="6">
-        <div>− {{ $n(decay.decay * -1, 'decimal') }}</div>
-      </b-col>
     </b-row>
     <!-- Total-->
     <b-row>
-      <b-col cols="6" class="text-right">
+      <b-col cols="6" class="text-right">{{ $t('decay.total') }}</b-col>
-        <div>{{ $t('decay.total') }}</div>
-      </b-col>
       <b-col cols="6">
-        <div v-if="typeId === 'SEND'">
+        <b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
-          <b>− {{ $n((Number(amount) + Number(decay.decay)) * -1, 'decimal') }}</b>
-        </div>
-        <div v-if="typeId === 'RECEIVE'">
-          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
-        </div>
-        <div v-if="typeId === 'CREATION'">
-          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
-        </div>
       </b-col>
     </b-row>
   </div>

frontend/src/components/DecayInformations/DecayInformation-Long.vue

@@ -25,14 +25,7 @@
         <div>{{ $t('decay.past_time') }}</div>
       </b-col>
       <b-col cols="6">
-        <span v-if="duration">
+        <span v-if="duration">{{ durationText }}</span>
-          <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
-          <span v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</span>
-          <span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
-          <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>
       </b-col>
     </b-row>
 
@@ -41,9 +34,7 @@
       <b-col cols="6" class="text-right">
         <div>{{ $t('decay.decay') }}</div>
       </b-col>
-      <b-col cols="6">
+      <b-col cols="6">{{ decay.decay | GDD }}</b-col>
-        <div>− {{ $n(decay.decay * -1, 'decimal') }}</div>
-      </b-col>
     </b-row>
     <hr class="mt-2 mb-2" />
     <b-row>
@@ -53,23 +44,13 @@
     </b-row>
     <!-- Type-->
     <b-row>
-      <b-col cols="6" class="text-right">
+      <b-col cols="6" class="text-right">{{ $t(`decay.${typeId.toLowerCase()}`) }}</b-col>
-        <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
+      <b-col cols="6">{{ amount | GDD }}</b-col>
-        <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
-      </b-col>
-      <b-col cols="6">
-        <div v-if="typeId === 'SEND'">− {{ $n(amount * -1, 'decimal') }}</div>
-        <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
-      </b-col>
     </b-row>
     <!-- Decay-->
     <b-row>
-      <b-col cols="6" class="text-right">
+      <b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
-        <div>{{ $t('decay.decay') }}</div>
+      <b-col cols="6">{{ decay.decay | GDD }}</b-col>
-      </b-col>
-      <b-col cols="6">
-        <div>− {{ $n(decay.decay * -1, 'decimal') }}</div>
-      </b-col>
     </b-row>
     <!-- Total-->
     <b-row>
@@ -77,15 +58,7 @@
         <div>{{ $t('decay.total') }}</div>
       </b-col>
       <b-col cols="6">
-        <div v-if="typeId === 'SEND'">
+        <b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
-          <b>− {{ $n((Number(amount) + Number(decay.decay)) * -1, 'decimal') }}</b>
-        </div>
-        <div v-if="typeId === 'RECEIVE'">
-          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
-        </div>
-        <div v-if="typeId === 'CREATION'">
-          <b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
-        </div>
       </b-col>
     </b-row>
   </div>
@@ -104,6 +77,17 @@ export default {
     duration() {
       return this.$moment.duration(new Date(this.decay.end) - new Date(this.decay.start))._data
     },
+    durationText() {
+      const order = ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
+      const result = []
+      order.forEach((timeSpan) => {
+        if (this.duration[timeSpan] > 0) {
+          const locale = this.$t(`decay.${timeSpan}`)
+          result.push(`${this.duration[timeSpan]} ${locale}`)
+        }
+      })
+      return result.join(', ')
+    },
   },
 }
 </script>

frontend/src/components/DecayInformations/DecayInformation-Short.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="decayinformation-short">
-    <span>− {{ decay ? $n(Number(decay.decay) * -1, 'decimal') : '' }}</span>
+    <span v-if="decay.decay">{{ decay.decay | amount }}</span>
   </div>
 </template>
 <script>

frontend/src/components/GddTransactionList.spec.js

@@ -88,6 +88,7 @@ describe('GddTransactionList', () => {
 
     describe('with transactions', () => {
       beforeEach(async () => {
+        const decayStartBlock = new Date(2001, 8, 9)
         await wrapper.setProps({
           transactions: [
             {
@@ -103,9 +104,7 @@ describe('GddTransactionList', () => {
                 start: '2022-02-28T13:55:47.000Z',
                 end: '2022-03-03T08:54:54.020Z',
                 duration: 241147.02,
-                __typename: 'Decay',
               },
-              __typename: 'Transaction',
             },
             {
               id: 9,
@@ -117,16 +116,13 @@ describe('GddTransactionList', () => {
               linkedUser: {
                 firstName: 'Bibi',
                 lastName: 'Bloxberg',
-                __typename: 'User',
               },
               decay: {
                 decay: '-0.2038314055482643084',
                 start: '2022-02-25T07:29:26.000Z',
                 end: '2022-02-28T13:55:47.000Z',
                 duration: 282381,
-                __typename: 'Decay',
               },
-              __typename: 'Transaction',
             },
             {
               id: 8,
@@ -138,16 +134,13 @@ describe('GddTransactionList', () => {
               linkedUser: {
                 firstName: 'Gradido',
                 lastName: 'Akademie',
-                __typename: 'User',
               },
               decay: {
                 decay: '-0.03517768386652623868',
                 start: '2022-02-23T10:55:30.000Z',
                 end: '2022-02-25T07:29:26.000Z',
                 duration: 160436,
-                __typename: 'Decay',
               },
-              __typename: 'Transaction',
             },
             {
               id: 6,
@@ -159,24 +152,22 @@ describe('GddTransactionList', () => {
               linkedUser: {
                 firstName: 'Bibi',
                 lastName: 'Bloxberg',
-                __typename: 'User',
               },
               decay: {
                 decay: '0',
                 start: null,
                 end: null,
                 duration: null,
-                __typename: 'Decay',
               },
-              __typename: 'Transaction',
             },
           ],
           count: 12,
+          decayStartBlock,
         })
       })
 
       it('renders 4 transactions', () => {
-        expect(wrapper.findAll('div.list-group-item')).toHaveLength(3)
+        expect(wrapper.findAll('div.list-group-item')).toHaveLength(4)
       })
 
       describe('decay transactions', () => {
@@ -238,11 +229,12 @@ describe('GddTransactionList', () => {
           expect(transaction.findAll('svg').at(1).classes()).toContain('text-danger')
         })
 
-        // it('has a minus operator', () => {
+        // operators are renderd by GDD filter
-        //   expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+        it.skip('has a minus operator', () => {
-        //     '-',
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
-        //   )
+            '-',
-        // })
+          )
+        })
 
         it('shows the amount of transaction', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
@@ -270,7 +262,7 @@ describe('GddTransactionList', () => {
 
         it('shows the decay calculation', () => {
           expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
-            '− 0.20383140554826432',
+            '− 0.2038314055482643084',
           )
         })
       })
@@ -293,7 +285,7 @@ describe('GddTransactionList', () => {
 
         it('has a bi-gift icon', () => {
           expect(transaction.findAll('svg').at(1).classes()).toEqual([
-            'bi-arrow-right-circle',
+            'bi-gift',
             'gradido-global-color-accent',
             'm-mb-1',
             'font2em',
@@ -308,7 +300,8 @@ describe('GddTransactionList', () => {
           )
         })
 
-        it('has a plus operator', () => {
+        // operators are renderd by GDD filter
+        it.skip('has a plus operator', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
             '+',
           )
@@ -316,19 +309,19 @@ describe('GddTransactionList', () => {
 
         it('shows the amount of transaction', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
-            '10',
+            '1000',
           )
         })
 
         it('shows the name of the receiver', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
-            'Bibi Bloxberg',
+            'Gradido Akademie',
           )
         })
 
         it('shows the date of the transaction', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
-            'Wed Feb 23 2022 10:55:30 GMT+0000 (Coordinated Universal Time)',
+            'Fri Feb 25 2022 07:29:26 GMT+0000 (Coordinated Universal Time)',
           )
         })
       })
@@ -336,7 +329,7 @@ describe('GddTransactionList', () => {
       describe('receive transactions', () => {
         let transaction
         beforeEach(() => {
-          transaction = wrapper.findAll('div.list-group-item').at(2)
+          transaction = wrapper.findAll('div.list-group-item').at(3)
         })
 
         it('has a bi-caret-down-square icon', () => {
@@ -363,7 +356,8 @@ describe('GddTransactionList', () => {
           ])
         })
 
-        it('has a plus operator', () => {
+        // operators are renderd by GDD filter
+        it.skip('has a plus operator', () => {
           expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
             '+',
           )

frontend/src/components/Menu/Navbar.spec.js

@@ -21,7 +21,6 @@ const mocks = {
       isAdmin: true,
     },
   },
-  $n: jest.fn((n) => n),
 }
 
 describe('Navbar', () => {

frontend/src/components/Menu/Navbar.vue

@@ -10,7 +10,7 @@
       </div>
 
       <b-navbar-nav class="ml-auto" is-nav>
-        <b-nav-item>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-nav-item>
+        <b-nav-item>{{ pending ? '—' : balance | amount }} GDD</b-nav-item>
         <b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
           <small>
             {{ $store.state.firstName }} {{ $store.state.lastName }},

frontend/src/components/Transactions/TransactionCreation.spec.js

@@ -7,7 +7,6 @@ const mocks = {
   $i18n: {
     locale: 'en',
   },
-  $n: jest.fn((n) => n),
   $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
 }

frontend/src/components/Transactions/TransactionCreation.vue

@@ -23,9 +23,8 @@
             <b-row>
               <b-col cols="5">
                 <div class="text-right">
-                  <span class="gdd-transaction-list-item-operator">+</span>
                   <span class="gdd-transaction-list-item-amount">
-                    {{ $n(amount, 'decimal') }}
+                    {{ amount | GDD }}
                   </span>
                 </div>
               </b-col>

frontend/src/components/Transactions/TransactionDecay.spec.js

@@ -7,7 +7,6 @@ const mocks = {
   $i18n: {
     locale: 'en',
   },
-  $n: jest.fn((n) => n),
   $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
 }

frontend/src/components/Transactions/TransactionDecay.vue

@@ -23,9 +23,8 @@
             <b-row>
               <b-col cols="5">
                 <div class="text-right">
-                  <span class="gdd-transaction-list-item-operator">−</span>
                   <span class="gdd-transaction-list-item-amount">
-                    {{ $n(Number(amount) * -1, 'decimal') }}
+                    {{ amount | GDD }}
                   </span>
                 </div>
               </b-col>

frontend/src/components/Transactions/TransactionReceive.spec.js

@@ -7,7 +7,6 @@ const mocks = {
   $i18n: {
     locale: 'en',
   },
-  $n: jest.fn((n) => n),
   $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
 }

frontend/src/components/Transactions/TransactionReceive.vue

@@ -26,9 +26,8 @@
             <b-row>
               <b-col cols="5">
                 <div class="text-right">
-                  <span class="gdd-transaction-list-item-operator">+</span>
                   <span class="gdd-transaction-list-item-amount">
-                    {{ $n(amount, 'decimal') }}
+                    {{ amount | GDD }}
                   </span>
                 </div>
               </b-col>

frontend/src/components/Transactions/TransactionSend.spec.js

@@ -7,7 +7,6 @@ const mocks = {
   $i18n: {
     locale: 'en',
   },
-  $n: jest.fn((n) => n),
   $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
 }

frontend/src/components/Transactions/TransactionSend.vue

@@ -23,9 +23,8 @@
             <b-row>
               <b-col cols="5">
                 <div class="text-right">
-                  <span class="gdd-transaction-list-item-operator">−</span>
                   <span class="gdd-transaction-list-item-amount">
-                    {{ $n(Number(amount) * -1, 'decimal') }}
+                    {{ amount | GDD }}
                   </span>
                 </div>
               </b-col>
@@ -79,7 +78,7 @@
       <b-collapse class="pb-4 pt-5" v-model="visible">
         <decay-information-before-startblock v-if="decay.start === null" />
         <decay-information-decay-startblock
-          v-else-if="true"
+          v-else-if="isStartBlock"
           :amount="amount"
           :decay="decay"
           :typeId="typeId"

frontend/src/filters/amount.js

@@ -0,0 +1,18 @@
+let i18n
+
+export const loadFilters = (_i18n) => {
+  i18n = _i18n
+  return { amount, GDD }
+}
+
+const amount = (value) => {
+  if (!value && value !== 0) return ''
+  return i18n.n(value.toString(), 'decimal').replace('-', '− ')
+}
+
+const GDD = (value) => {
+  value = amount(value)
+  if (value === '') return ''
+  if (!value.match(/^− /)) value = '+ ' + value
+  return value + ' GDD'
+}

frontend/src/filters/amount.test.js

@@ -0,0 +1,37 @@
+import { loadFilters } from './amount'
+
+const i18nMock = {
+  n: jest.fn((n) => n),
+}
+
+const { amount, GDD } = loadFilters(i18nMock)
+
+describe('amount filters', () => {
+  describe('amount', () => {
+    it('returns empty string when called with null', () => {
+      expect(amount(null)).toBe('')
+    })
+
+    it('returns 0 when called with 0', () => {
+      expect(amount(0)).toBe('0')
+    })
+
+    it('returns a leading proper minus sign when called with negative value', () => {
+      expect(amount(-1)).toBe('− 1')
+    })
+  })
+
+  describe('GDD', () => {
+    it('returns empty string when called with null', () => {
+      expect(GDD(null)).toBe('')
+    })
+
+    it('returns "+ 0 GDD" when called with 0', () => {
+      expect(GDD(0)).toBe('+ 0 GDD')
+    })
+
+    it('returns a leading proper minus sign when called with negative value', () => {
+      expect(GDD(-1)).toBe('− 1 GDD')
+    })
+  })
+})

frontend/src/locales/de.json

@@ -37,9 +37,9 @@
     "months": "Monate",
     "noDecay": "Keine Vergänglichkeit",
     "past_time": "Vergangene Zeit",
-    "received": "Empfangen",
+    "receive": "Empfangen",
     "seconds": "Sekunden",
-    "sent": "Gesendet",
+    "send": "Gesendet",
     "since_introduction": "seit Einführung der Vergänglichkeit",
     "Starting_block_decay": "Startblock Vergänglichkeit",
     "toCommunity": "An die Gemeinschaft",

frontend/src/locales/en.json

@@ -37,9 +37,9 @@
     "months": "Months",
     "noDecay": "No Decay",
     "past_time": "Time passed",
-    "received": "Received",
+    "receive": "Received",
     "seconds": "Seconds",
-    "sent": "Sent",
+    "send": "Sent",
     "since_introduction": "Since the introduction of Decay",
     "Starting_block_decay": "Starting Block Decay",
     "toCommunity": "To the community",

frontend/src/main.js

@@ -4,6 +4,7 @@ import App from './App.vue'
 import i18n from './i18n.js'
 import { loadAllRules } from './validation-rules'
 import { toasters } from './mixins/toaster'
+import { loadFilters } from './filters/amount'
 
 import 'regenerator-runtime'
 
@@ -20,6 +21,9 @@ Vue.use(DashboardPlugin)
 Vue.config.productionTip = false
 
 Vue.mixin(toasters)
+const filters = loadFilters(i18n)
+Vue.filter('amount', filters.amount)
+Vue.filter('GDD', filters.GDD)
 
 loadAllRules(i18n)
 

frontend/test/testSetup.js

@@ -17,7 +17,9 @@ import { focus } from 'vue-focus'
 
 import { loadAllRules } from '../src/validation-rules'
 
-import { toasters } from '../src/mixins/toaster'
+import { loadFilters } from '@/filters/amount'
+
+import { toasters } from '@/mixins/toaster'
 export const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
 export const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
 
@@ -53,6 +55,10 @@ global.localVue.directive('focus', focus)
 
 global.localVue.mixin(toasters)
 
+const filters = loadFilters(i18nMock)
+global.localVue.filter('amount', filters.amount)
+global.localVue.filter('GDD', filters.GDD)
+
 // Filter the warnings for portal vue
 // https://github.com/BeniRupp/bug_portal-vue-target-already-exists
 const consoleWarn = global.console.warn