add thousands separator

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);
+        let integer = value.substr(0, value.length - 2);
-        const decimals = value.substr(value.length - 2, 2);
+        let decimals = value.substr(value.length - 2, 2);
+
+        if (settings.isEnableThousandsSeparator() && integer.length > 3) {
+            integer = appendThousandsSeparator(integer);
+        }
+
         value = `${integer}.${decimals}`;
     }
 

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'),

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',

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': '货币名称',

src/views/mobile/Settings.vue

@@ -19,6 +19,10 @@
                             :value="locale">{{ lang.displayName }}</option>
                 </select>
             </f7-list-item>
+            <f7-list-item>
+                <span>{{ $t('Enable Thousands Separator') }}</span>
+                <f7-toggle :checked="isEnableThousandsSeparator" @toggle:change="isEnableThousandsSeparator = $event"></f7-toggle>
+            </f7-list-item>
             <f7-list-item
                 :title="$t('Currency Display Mode')"
                 smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
@@ -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();