Refactoring/crop address

CHANGELOG.md

@@ -8,6 +8,12 @@ Please check our [developers guide](https://gitlab.com/tokend/developers-guide)
 for further information about branching and tagging conventions.
 
 ## [Unreleased]
+#### Changed
+- Move formatNumber filter to helper
+- Move formatPercent to formatNumber helper
+- Move formatInteger to formatNumber helper
+- Move cropAddress to text helper and rename to abbrCenter
+
 ### Fixed
 - New version of vue: 2.7.14
 - New version of vue-template-compiler": 2.7.14

src/i18n/index.js

@@ -193,18 +193,6 @@ class I18n {
               return param.currency
                 ? result.concat(' ', param.currency)
                 : result
-            case 'number':
-              return MathUtil
-                .format(param, _get(lngConfig, 'number.formats.default'))
-            case 'integer':
-              return MathUtil
-                .format(param, _get(lngConfig, 'number.formats.integer'))
-            case 'percent':
-              const convertedPercent = MathUtil.multiply(param, 100)
-              return MathUtil.format(
-                convertedPercent,
-                _get(lngConfig, 'number.formats.percent')
-              )
             default:
               console.warn(`Unknown format: ${format}, skipping…`)
               return param

src/js/helpers/number-helper.js

@@ -0,0 +1,20 @@
+import { MathUtil } from '@/js/utils'
+
+export function formatNumber (
+  number,
+  decimalPlaces = 0,
+  suffix = 0,
+) {
+  const cfg =
+  ({
+    decimalSeparator: '.',
+    groupSeparator: '',
+    groupSize: 3,
+    suffix,
+    decimalPlaces,
+  })
+  return MathUtil.format(
+    number,
+    cfg,
+  )
+}

src/vue/filters/cropAddress.js → src/js/helpers/text-helper.js

@@ -1,3 +1,3 @@
-export function cropAddress (value) {
+export function abbrCenter (value) {
   return `${value.slice(0, 4)}…${value.slice(-4)}`
 }

src/main.js

@@ -19,15 +19,11 @@ import { globalize } from '@/vue/filters/globalize'
 import { globalizeCountry } from './vue/filters/globalizeCountry'
 import { formatDate } from '@/vue/filters/formatDate'
 import { formatMoney } from '@/vue/filters/formatMoney'
-import { formatNumber } from '@/vue/filters/formatNumber'
-import { formatInteger } from '@/vue/filters/formatInteger'
-import { formatPercent } from '@/vue/filters/formatPercent'
 import { formatCalendar } from '@/vue/filters/formatCalendar'
 import { formatCalendarInline } from '@/vue/filters/formatCalendarInline'
 import { formatDateDMY } from '@/vue/filters/formatDateDMY'
 import { formatDateDMYT } from '@/vue/filters/formatDateDMYT'
 import { abbreviate } from '@/vue/filters/abbreviate'
-import { cropAddress } from '@/vue/filters/cropAddress'
 import { ErrorTracker } from '@/js/helpers/error-tracker'
 import { vueRoutes } from './vue-router/routes'
 import { useBrowserUpdateBanner } from './browser-update'
@@ -59,13 +55,9 @@ async function init () {
   Vue.filter('formatDateDMY', formatDateDMY)
   Vue.filter('formatDateDMYT', formatDateDMYT)
   Vue.filter('formatMoney', formatMoney)
-  Vue.filter('formatNumber', formatNumber)
-  Vue.filter('formatPercent', formatPercent)
-  Vue.filter('formatInteger', formatInteger)
   Vue.filter('formatCalendar', formatCalendar)
   Vue.filter('formatCalendarInline', formatCalendarInline)
   Vue.filter('abbreviate', abbreviate)
-  Vue.filter('cropAddress', cropAddress)
   Vue.component('i18n', i18nComponent)
   Vue.prototype.$config = config
   Vue.prototype.$routes = vueRoutes

src/vue/common/EmailGetter.vue

@@ -20,7 +20,7 @@
       </template>
 
       <template v-else-if="accountId || balanceId">
-        {{ accountId || balanceId | cropAddress }}
+        {{ accountId || abbrCenter(balanceId) }}
       </template>
 
       <template v-else>
@@ -55,12 +55,14 @@ import IdentityGetterMixin from '@/vue/mixins/identity-getter'
 
 import { api } from '@/api'
 import { ErrorHandler } from '@/js/helpers/error-handler'
+import { defineComponent } from 'vue'
+import { abbrCenter } from '@/js/helpers/text-helper'
 import Clipboard from 'clipboard'
 import Tooltip from '@/vue/common/Tooltip'
 
 import safeGet from 'lodash/get'
 
-export default {
+export default defineComponent({
   components: {
     Tooltip,
   },
@@ -170,7 +172,12 @@ export default {
       }, hideTooltipTimeout)
     },
   },
-}
+  setup () {
+    return {
+      abbrCenter,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>

src/vue/modules/fees/components/fees-table.vue

@@ -44,8 +44,8 @@
               {{ { value: fee.fixed, currency: fee.asset } | formatMoney }}
             </td>
 
-            <td :title="fee.percent | formatPercent">
-              {{ fee.percent | formatPercent }}
+            <td :title="formatNumber(fee.percent, ...formatNumberParams)">
+              {{ formatNumber(fee.percent, ...formatNumberParams) }}
             </td>
 
             <!-- eslint-disable-next-line -->
@@ -84,9 +84,10 @@
 import FeeTypeViewer from './viewers/fee-type-viewer'
 import FeeSubtypeViewer from './viewers/fee-subtype-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
+import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
 
-export default {
-  name: 'fees-table',
+export default defineComponent({
   components: {
     FeeTypeViewer,
     FeeSubtypeViewer,
@@ -107,7 +108,18 @@ export default {
       require: true,
     },
   },
-}
+
+  setup () {
+    const formatNumberParams = [
+      0,
+      '%',
+    ]
+    return {
+      formatNumberParams,
+      formatNumber,
+    }
+  },
+})
 </script>
 
 <style scoped lang="scss">

src/vue/pages/Limits/Limits.TableRenderer.vue

@@ -39,9 +39,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.dailyLeft | formatNumber }}
+                {{ formatNumber(item.dailyLeft) }}
                 /
-                {{ item.dailyOut | formatNumber }}
+                {{ formatNumber(item.dailyOut) }}
               </span>
             </template>
           </td>
@@ -53,9 +53,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.weeklyLeft | formatNumber }}
+                {{ formatNumber(item.weeklyLeft) }}
                 /
-                {{ item.weeklyOut | formatNumber }}
+                {{ formatNumber(item.weeklyOut) }}
               </span>
             </template>
           </td>
@@ -67,9 +67,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.monthlyLeft | formatNumber }}
+                {{ formatNumber(item.monthlyLeft) }}
                 /
-                {{ item.monthlyOut | formatNumber }}
+                {{ formatNumber(item.monthlyOut) }}
               </span>
             </template>
           </td>
@@ -81,9 +81,9 @@
             </template>
             <template v-else>
               <span>
-                {{ item.annualLeft | formatNumber }}
+                {{ formatNumber(item.annualLeft) }}
                 /
-                {{ item.annualOut | formatNumber }}
+                {{ formatNumber(item.annualOut) }}
               </span>
             </template>
           </td>
@@ -118,22 +118,16 @@ import { STATS_OPERATION_TYPES } from '@tokend/js-sdk'
 import Loader from '@/vue/common/Loader'
 import NoDataMessage from '@/vue/common/NoDataMessage'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
+import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
 
 import config from '../../../config'
 
-const OPERATION_TYPES_TRANSLATION_ID = {
-  [STATS_OPERATION_TYPES.deposit]: 'limits-table-renderer.op-type-deposit',
-  [STATS_OPERATION_TYPES.withdraw]: 'limits-table-renderer.op-type-withdraw',
-  // eslint-disable-next-line
-  [STATS_OPERATION_TYPES.paymentOut]: 'limits-table-renderer.op-type-payment-out',
-}
-
 const EVENTS = Object.freeze({
   limitsReloadAsk: 'limits-reload-ask',
 })
 
-export default {
-  name: 'limits-table-renderer',
+export default defineComponent({
   components: {
     Loader,
     NoDataMessage,
@@ -144,16 +138,28 @@ export default {
     isLoading: { type: Boolean, required: true, default: false },
     isLoadingFailed: { type: Boolean, required: true, default: false },
   },
-  data: () => ({
-    OPERATION_TYPES_TRANSLATION_ID,
-    MAX_AMOUNT: config.MAX_AMOUNT,
-  }),
-  methods: {
-    askLimitsReload () {
-      this.$emit(EVENTS.limitsReloadAsk)
-    },
+  emits: 'limitsReloadAsk',
+  setup (_, { emit }) {
+    const OPERATION_TYPES_TRANSLATION_ID = {
+      [STATS_OPERATION_TYPES.deposit]: 'limits-table-renderer.op-type-deposit',
+      [STATS_OPERATION_TYPES.withdraw]: 'limits-table-renderer.op-type-withdraw',
+      // eslint-disable-next-line
+      [STATS_OPERATION_TYPES.paymentOut]: 'limits-table-renderer.op-type-payment-out',
+    }
+    const MAX_AMOUNT = config.MAX_AMOUNT
+
+    const askLimitsReload = () => {
+      emit(EVENTS.limitsReloadAsk)
+    }
+
+    return {
+      askLimitsReload,
+      OPERATION_TYPES_TRANSLATION_ID,
+      MAX_AMOUNT,
+      formatNumber,
+    }
   },
-}
+})
 </script>
 
 <style lang="scss">

src/vue/pages/polls-all/PollAttributes.vue

@@ -80,7 +80,7 @@
               {{ 'poll-attributes.number-of-choices-key' | globalize }}
             </td>
             <td>
-              {{ poll.numberOfChoices | formatNumber }}
+              {{ formatNumber(poll.numberOfChoices) }}
             </td>
           </tr>
         </tbody>
@@ -93,10 +93,10 @@
 import { PollRecord } from '@/js/records/entities/poll.record'
 import EmailGetter from '@/vue/common/EmailGetter'
 import { keyValues } from '@/key-values'
+import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
 
-export default {
-  name: 'poll-attributes',
-
+export default defineComponent({
   components: {
     EmailGetter,
   },
@@ -147,7 +147,13 @@ export default {
       return this.$options.filters.globalize(translationId)
     },
   },
-}
+
+  setup () {
+    return {
+      formatNumber,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>

yarn.lock

@@ -3521,7 +3521,7 @@ data-urls@^2.0.0:
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
 debug-log@^1.0.0:
   version "1.0.1"