diff --git a/src/filters/currency.js b/src/filters/currency.js index 2257c567..80bc311a 100644 --- a/src/filters/currency.js +++ b/src/filters/currency.js @@ -1,7 +1,22 @@ import settings from "../lib/settings.js"; import utils from "../lib/utils.js"; -export default function ({ i18n }, value, currencyCode) { +function appendThousandsSeparator(value) { + const finalChars = []; + + for (let i = 0; i < value.length; i++) { + if (i % 3 === 0 && i > 0) { + finalChars.push(','); + } + + finalChars.push(value.charAt(value.length - 1 - i)); + } + + finalChars.reverse(); + return finalChars.join(''); +} + +export default function ({i18n}, value, currencyCode) { if (!utils.isNumber(value) && !utils.isString(value)) { return value; } @@ -17,8 +32,13 @@ export default function ({ i18n }, value, currencyCode) { } else if (value.length === 2) { value = '0.' + value; } else { - const integer = value.substr(0, value.length - 2); - const decimals = value.substr(value.length - 2, 2); + let integer = value.substr(0, value.length - 2); + let decimals = value.substr(value.length - 2, 2); + + if (settings.isEnableThousandsSeparator() && integer.length > 3) { + integer = appendThousandsSeparator(integer); + } + value = `${integer}.${decimals}`; } diff --git a/src/lib/settings.js b/src/lib/settings.js index 55d92098..bfff5e20 100644 --- a/src/lib/settings.js +++ b/src/lib/settings.js @@ -5,6 +5,7 @@ const serverSettingsCookieKey = 'ACP_SETTINGS'; const defaultSettings = { lang: 'en', + thousandsSeparator: true, currencyDisplayMode: 'code', // or 'none' or 'name' animate: true, autoDarkMode: true @@ -66,6 +67,8 @@ function getServerSetting(key) { export default { getLanguage: () => getOriginalOption('lang'), setLanguage: value => setOption('lang', value), + isEnableThousandsSeparator: () => getOption('thousandsSeparator'), + setEnableThousandsSeparator: value => setOption('thousandsSeparator', value), getCurrencyDisplayMode: () => getOption('currencyDisplayMode'), setCurrencyDisplayMode: value => setOption('currencyDisplayMode', value), isEnableAnimate: () => getOption('animate'), diff --git a/src/locales/en.js b/src/locales/en.js index 782286fb..6ef06f29 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -319,6 +319,7 @@ export default { 'Unable to add account': 'Unable to add account', 'User Profile': 'User Profile', 'Language': 'Language', + 'Enable Thousands Separator': 'Enable Thousands Separator', 'Currency Display Mode': 'Currency Display Mode', 'Currency Code': 'Currency Code', 'Currency Name': 'Currency Name', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index cde4f159..3a3174d7 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -319,6 +319,7 @@ export default { 'Unable to add account': '无法添加账户', 'User Profile': '用户信息', 'Language': '语言', + 'Enable Thousands Separator': '启用千位分隔符', 'Currency Display Mode': '货币显示模式', 'Currency Code': '货币代码', 'Currency Name': '货币名称', diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue index 333b4f88..5e6bbd36 100644 --- a/src/views/mobile/Settings.vue +++ b/src/views/mobile/Settings.vue @@ -19,6 +19,10 @@ :value="locale">{{ lang.displayName }} + + {{ $t('Enable Thousands Separator') }} + + @@ -67,6 +71,14 @@ export default { this.$setLanguage(value); } }, + isEnableThousandsSeparator: { + get: function () { + return this.$settings.isEnableThousandsSeparator(); + }, + set: function (value) { + this.$settings.setEnableThousandsSeparator(value); + } + }, currencyDisplayMode: { get: function () { return this.$settings.getCurrencyDisplayMode();