From 9adfd286f97a87d76adde8f0e885cd3bb76e2c45 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 2 Jul 2023 00:51:26 +0800
Subject: [PATCH] code refactor

---
 src/components/mobile/NumberPadSheet.vue       | 13 ++++++++++---
 src/components/mobile/PieChart.vue             | 12 +++++++++++-
 src/lib/common.js                              |  6 ++----
 src/lib/currency.js                            |  4 ++--
 src/lib/i18n.js                                | 15 +++++++++------
 src/views/desktop/ExchangeRatesPage.vue        | 10 +++++++---
 src/views/desktop/HomePage.vue                 | 16 ++++++++--------
 .../settings/UserDataManagementSettingTab.vue  | 14 +++++++++-----
 src/views/mobile/ExchangeRatesPage.vue         | 18 +++++++++++++-----
 src/views/mobile/HomePage.vue                  | 16 ++++++++--------
 src/views/mobile/accounts/EditPage.vue         | 11 +++++++++--
 src/views/mobile/accounts/ListPage.vue         | 16 +++++++++++-----
 .../mobile/settings/TextSizeSettingsPage.vue   |  5 ++++-
 .../mobile/statistics/TransactionPage.vue      |  8 +++++++-
 src/views/mobile/transactions/EditPage.vue     | 16 +++++++++++-----
 src/views/mobile/transactions/ListPage.vue     | 12 +++++++++---
 src/views/mobile/users/DataManagementPage.vue  | 14 +++++++++-----
 17 files changed, 139 insertions(+), 67 deletions(-)

diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
index be1d289a..ea99fbba 100644
--- a/src/components/mobile/NumberPadSheet.vue
+++ b/src/components/mobile/NumberPadSheet.vue
@@ -63,6 +63,9 @@
 </template>
 
 <script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+
 import { isString, appendThousandsSeparator } from '@/lib/common.js';
 import { numericCurrencyToString, stringCurrencyToNumeric } from '@/lib/currency.js';
 
@@ -87,9 +90,13 @@ export default {
         }
     },
     computed: {
+        ...mapStores(useSettingsStore),
+        isEnableThousandsSeparator() {
+            return this.settingsStore.appSettings.thousandsSeparator;
+        },
         currentDisplay() {
-            const previousValue = appendThousandsSeparator(this.previousValue);
-            const currentValue = appendThousandsSeparator(this.currentValue);
+            const previousValue = appendThousandsSeparator(this.previousValue, this.isEnableThousandsSeparator);
+            const currentValue = appendThousandsSeparator(this.currentValue, this.isEnableThousandsSeparator);
 
             if (this.currentSymbol) {
                 return `${previousValue} ${this.currentSymbol} ${currentValue}`;
@@ -118,7 +125,7 @@ export default {
     },
     methods: {
         getStringValue(value) {
-            let str = numericCurrencyToString(value);
+            let str = numericCurrencyToString(value, this.isEnableThousandsSeparator);
 
             if (str.indexOf(',')) {
                 str = str.replaceAll(/,/g, '');
diff --git a/src/components/mobile/PieChart.vue b/src/components/mobile/PieChart.vue
index e46dc264..4d0e0ce9 100644
--- a/src/components/mobile/PieChart.vue
+++ b/src/components/mobile/PieChart.vue
@@ -77,6 +77,9 @@
 </template>
 
 <script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+
 import colorConstants from '@/consts/color.js';
 import { formatPercent } from '@/lib/common.js';
 
@@ -124,6 +127,7 @@ export default {
         }
     },
     computed: {
+        ...mapStores(useSettingsStore),
         validItems: function () {
             let totalValidValue = 0;
 
@@ -154,7 +158,7 @@ export default {
                     };
 
                     finalItem.displayPercent = formatPercent(finalItem.percent, 2, '&lt;0.01');
-                    finalItem.displayValue = this.$locale.getDisplayCurrency(finalItem.value, (finalItem.currency || this.defaultCurrency));
+                    finalItem.displayValue = this.getDisplayCurrency(finalItem.value, (finalItem.currency || this.defaultCurrency));
 
                     validItems.push(finalItem);
                 }
@@ -281,6 +285,12 @@ export default {
 
             const allPreviousLength = allPreviousPercent * this.circumference;
             return this.circumference - allPreviousLength + offset;
+        },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
         }
     }
 }
diff --git a/src/lib/common.js b/src/lib/common.js
index 311e76d2..f5ad2a2e 100644
--- a/src/lib/common.js
+++ b/src/lib/common.js
@@ -1,5 +1,3 @@
-import { isEnableThousandsSeparator } from './settings.js';
-
 export function isFunction(val) {
     return typeof(val) === 'function';
 }
@@ -79,8 +77,8 @@ export function isEquals(obj1, obj2) {
     }
 }
 
-export function appendThousandsSeparator(value) {
-    if (!isEnableThousandsSeparator() || value.length <= 3) {
+export function appendThousandsSeparator(value, enable) {
+    if (!enable || value.length <= 3) {
         return value;
     }
 
diff --git a/src/lib/currency.js b/src/lib/currency.js
index cd240691..686161b5 100644
--- a/src/lib/currency.js
+++ b/src/lib/currency.js
@@ -1,6 +1,6 @@
 import { isNumber, appendThousandsSeparator } from './common.js';
 
-export function numericCurrencyToString(num) {
+export function numericCurrencyToString(num, enableThousandsSeparator) {
     let str = num.toString();
     const negative = str.charAt(0) === '-';
 
@@ -18,7 +18,7 @@ export function numericCurrencyToString(num) {
         let integer = str.substring(0, str.length - 2);
         let decimals = str.substring(str.length - 2);
 
-        integer = appendThousandsSeparator(integer);
+        integer = appendThousandsSeparator(integer, enableThousandsSeparator);
 
         str = `${integer}.${decimals}`;
     }
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index f771989d..8dcb5c30 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -26,7 +26,6 @@ import {
 } from './currency.js';
 
 import logger from './logger.js';
-import { getCurrencyDisplayMode } from './settings.js';
 import services from './services.js';
 
 const apiNotFoundErrorCode = 100001;
@@ -516,7 +515,7 @@ function getAllWeekDays(translateFn) {
     return allWeekDays;
 }
 
-function getDisplayCurrency(value, currencyCode, notConvertValue, translateFn) {
+function getDisplayCurrency(value, currencyCode, options, translateFn) {
     if (!isNumber(value) && !isString(value)) {
         return value;
     }
@@ -525,21 +524,25 @@ function getDisplayCurrency(value, currencyCode, notConvertValue, translateFn) {
         value = value.toString();
     }
 
-    if (!notConvertValue) {
+    if (!options) {
+        options = {};
+    }
+
+    if (!options.notConvertValue) {
         const hasIncompleteFlag = isString(value) && value.charAt(value.length - 1) === '+';
 
         if (hasIncompleteFlag) {
             value = value.substring(0, value.length - 1);
         }
 
-        value = numericCurrencyToString(value);
+        value = numericCurrencyToString(value, options.enableThousandsSeparator);
 
         if (hasIncompleteFlag) {
             value = value + '+';
         }
     }
 
-    const currencyDisplayMode = getCurrencyDisplayMode();
+    const currencyDisplayMode = options.currencyDisplayMode;
 
     if (currencyCode && currencyDisplayMode === currency.allCurrencyDisplayModes.Symbol) {
         const currencyInfo = currency.all[currencyCode];
@@ -776,7 +779,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllTimezones: (includeSystemDefault) => getAllTimezones(includeSystemDefault, i18nGlobal.t),
         getAllCurrencies: () => getAllCurrencies(i18nGlobal.t),
         getAllWeekDays: () => getAllWeekDays(i18nGlobal.t),
-        getDisplayCurrency: (value, currencyCode, notConvertValue) => getDisplayCurrency(value, currencyCode, notConvertValue, i18nGlobal.t),
+        getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, i18nGlobal.t),
         setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
         initLocale: (lastUserLanguage, timezone) => initLocale(i18nGlobal, lastUserLanguage, timezone)
     };
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 76ba4eb5..9b92be39 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -78,6 +78,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
@@ -102,7 +103,10 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore, useExchangeRatesStore),
+        ...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
+        isEnableThousandsSeparator() {
+            return this.settingsStore.appSettings.thousandsSeparator;
+        },
         exchangeRatesData() {
             return this.exchangeRatesStore.latestExchangeRates.data;
         },
@@ -196,7 +200,7 @@ export default {
             const rateStr = this.getConvertedAmount(toExchangeRate).toString();
 
             if (rateStr.indexOf('.') < 0) {
-                return appendThousandsSeparator(rateStr);
+                return appendThousandsSeparator(rateStr, this.isEnableThousandsSeparator);
             } else {
                 let firstNonZeroPos = 0;
 
@@ -208,7 +212,7 @@ export default {
                 }
 
                 const trimmedRateStr = rateStr.substring(0, Math.max(6, Math.max(firstNonZeroPos, rateStr.indexOf('.') + 2)));
-                return appendThousandsSeparator(trimmedRateStr);
+                return appendThousandsSeparator(trimmedRateStr, this.isEnableThousandsSeparator);
             }
         }
     }
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 1ea4f047..03ea2494 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -151,12 +151,6 @@ export default {
                 this.settingsStore.setShowAmountInHomePage(value);
             }
         },
-        isEnableThousandsSeparator() {
-            return this.settingsStore.appSettings.thousandsSeparator;
-        },
-        currencyDisplayMode() {
-            return this.settingsStore.appSettings.currencyDisplayMode;
-        },
         defaultCurrency() {
             return this.userStore.currentUserDefaultCurrency;
         },
@@ -218,12 +212,18 @@ export default {
                 }
             });
         },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
+        },
         getDisplayAmount(amount, incomplete) {
             if (!this.showAmountInHomePage) {
-                return this.$locale.getDisplayCurrency('***', this.defaultCurrency);
+                return this.getDisplayCurrency('***', this.defaultCurrency);
             }
 
-            return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
+            return this.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
         },
         getDisplayIncomeAmount(category) {
             return this.getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
diff --git a/src/views/desktop/user/settings/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
index 74c147a9..79b4962e 100644
--- a/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
@@ -143,6 +143,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
 import {appendThousandsSeparator, isEquals} from '@/lib/common.js';
@@ -182,7 +183,10 @@ export default {
         }
     },
     computed: {
-        ...mapStores(useRootStore, useUserStore),
+        ...mapStores(useRootStore, useSettingsStore, useUserStore),
+        isEnableThousandsSeparator() {
+            return this.settingsStore.appSettings.thousandsSeparator;
+        },
         displayDataStatistics() {
             const self = this;
 
@@ -191,10 +195,10 @@ export default {
             }
 
             return {
-                totalAccountCount: appendThousandsSeparator(self.dataStatistics.totalAccountCount),
-                totalTransactionCategoryCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCategoryCount),
-                totalTransactionTagCount: appendThousandsSeparator(self.dataStatistics.totalTransactionTagCount),
-                totalTransactionCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCount)
+                totalAccountCount: appendThousandsSeparator(self.dataStatistics.totalAccountCount, self.isEnableThousandsSeparator),
+                totalTransactionCategoryCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCategoryCount, self.isEnableThousandsSeparator),
+                totalTransactionTagCount: appendThousandsSeparator(self.dataStatistics.totalTransactionTagCount, self.isEnableThousandsSeparator),
+                totalTransactionCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCount, self.isEnableThousandsSeparator)
             };
         },
         isDataExportingEnabled() {
diff --git a/src/views/mobile/ExchangeRatesPage.vue b/src/views/mobile/ExchangeRatesPage.vue
index 0cd3eaa1..e19e65be 100644
--- a/src/views/mobile/ExchangeRatesPage.vue
+++ b/src/views/mobile/ExchangeRatesPage.vue
@@ -91,12 +91,17 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import transactionConstants from '@/consts/transaction.js';
 import { isNumber, appendThousandsSeparator } from '@/lib/common.js';
-import { stringCurrencyToNumeric, getExchangedAmount } from '@/lib/currency.js';
+import {
+    numericCurrencyToString,
+    stringCurrencyToNumeric,
+    getExchangedAmount,
+} from '@/lib/currency.js';
 
 export default {
     data() {
@@ -111,7 +116,10 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore, useExchangeRatesStore),
+        ...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
+        isEnableThousandsSeparator() {
+            return this.settingsStore.appSettings.thousandsSeparator;
+        },
         exchangeRatesData() {
             return this.exchangeRatesStore.latestExchangeRates.data;
         },
@@ -143,7 +151,7 @@ export default {
             return availableExchangeRates;
         },
         displayBaseAmount() {
-            return this.$locale.getDisplayCurrency(this.baseAmount);
+            return numericCurrencyToString(this.baseAmount, this.isEnableThousandsSeparator);
         },
         baseAmountFontSizeClass() {
             if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
@@ -231,7 +239,7 @@ export default {
             const rateStr = this.getConvertedAmount(toExchangeRate).toString();
 
             if (rateStr.indexOf('.') < 0) {
-                return appendThousandsSeparator(rateStr);
+                return appendThousandsSeparator(rateStr, this.isEnableThousandsSeparator);
             } else {
                 let firstNonZeroPos = 0;
 
@@ -243,7 +251,7 @@ export default {
                 }
 
                 const trimmedRateStr = rateStr.substring(0, Math.max(6, Math.max(firstNonZeroPos, rateStr.indexOf('.') + 2)));
-                return appendThousandsSeparator(trimmedRateStr);
+                return appendThousandsSeparator(trimmedRateStr, this.isEnableThousandsSeparator);
             }
         },
         setAsBaseline(currency, amount) {
diff --git a/src/views/mobile/HomePage.vue b/src/views/mobile/HomePage.vue
index 669c0649..007ba3dd 100644
--- a/src/views/mobile/HomePage.vue
+++ b/src/views/mobile/HomePage.vue
@@ -212,12 +212,6 @@ export default {
                 this.settingsStore.setShowAmountInHomePage(value);
             }
         },
-        isEnableThousandsSeparator() {
-            return this.settingsStore.appSettings.thousandsSeparator;
-        },
-        currencyDisplayMode() {
-            return this.settingsStore.appSettings.currencyDisplayMode;
-        },
         defaultCurrency() {
             return this.userStore.currentUserDefaultCurrency;
         },
@@ -301,12 +295,18 @@ export default {
                 }
             });
         },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
+        },
         getDisplayAmount(amount, incomplete) {
             if (!this.showAmountInHomePage) {
-                return this.$locale.getDisplayCurrency('***', this.defaultCurrency);
+                return this.getDisplayCurrency('***', this.defaultCurrency);
             }
 
-            return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
+            return this.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
         },
         getDisplayIncomeAmount(category) {
             return this.getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
diff --git a/src/views/mobile/accounts/EditPage.vue b/src/views/mobile/accounts/EditPage.vue
index 4362c2f2..7a632483 100644
--- a/src/views/mobile/accounts/EditPage.vue
+++ b/src/views/mobile/accounts/EditPage.vue
@@ -421,6 +421,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 
@@ -467,7 +468,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore, useAccountsStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore),
         title() {
             if (!this.editAccountId) {
                 return 'Add Account';
@@ -720,7 +721,13 @@ export default {
             return this.$t(categoryName);
         },
         getAccountBalance(account) {
-            return this.$locale.getDisplayCurrency(account.balance, account.currency)
+            return this.getDisplayCurrency(account.balance, account.currency);
+        },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
         },
         chooseSuitableIcon(oldCategory, newCategory) {
             for (let i = 0; i < this.allAccountCategories.length; i++) {
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index fcd3a999..56de05db 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -223,15 +223,15 @@ export default {
         },
         netAssets() {
             const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance);
-            return this.$locale.getDisplayCurrency(netAssets, this.defaultCurrency);
+            return this.getDisplayCurrency(netAssets, this.defaultCurrency);
         },
         totalAssets() {
             const totalAssets = this.accountsStore.getTotalAssets(this.showAccountBalance);
-            return this.$locale.getDisplayCurrency(totalAssets, this.defaultCurrency);
+            return this.getDisplayCurrency(totalAssets, this.defaultCurrency);
         },
         totalLiabilities() {
             const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAccountBalance);
-            return this.$locale.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
+            return this.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
         },
         showAccountBalance: {
             get: function () {
@@ -305,11 +305,11 @@ export default {
         },
         accountBalance(account) {
             const balance = this.accountsStore.getAccountBalance(this.showAccountBalance, account);
-            return this.$locale.getDisplayCurrency(balance, account.currency);
+            return this.getDisplayCurrency(balance, account.currency);
         },
         accountCategoryTotalBalance(accountCategory) {
             const totalBalance = this.accountsStore.getAccountCategoryTotalBalance(this.showAccountBalance, accountCategory);
-            return this.$locale.getDisplayCurrency(totalBalance, this.defaultCurrency);
+            return this.getDisplayCurrency(totalBalance, this.defaultCurrency);
         },
         setSortable() {
             if (this.sortable) {
@@ -427,6 +427,12 @@ export default {
                 }
             });
         },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
+        },
         getAccountDomId(account) {
             return 'account_' + account.id;
         },
diff --git a/src/views/mobile/settings/TextSizeSettingsPage.vue b/src/views/mobile/settings/TextSizeSettingsPage.vue
index 96fe0643..ad686fcf 100644
--- a/src/views/mobile/settings/TextSizeSettingsPage.vue
+++ b/src/views/mobile/settings/TextSizeSettingsPage.vue
@@ -164,7 +164,10 @@ export default {
             return '';
         },
         getDisplayAmount(value) {
-            return this.$locale.getDisplayCurrency(value, this.userStore.currentUserDefaultCurrency);
+            return this.$locale.getDisplayCurrency(value, this.userStore.currentUserDefaultCurrency, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
         }
     }
 }
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 4f14c08b..a4fcae6c 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -714,7 +714,7 @@ export default {
             container.scrollTop(targetPos);
         },
         getDisplayAmount(amount, currency, textLimit) {
-            amount = this.$locale.getDisplayCurrency(amount, currency);
+            amount = this.getDisplayCurrency(amount, currency);
 
             if (!this.showAccountBalance
                 && (this.query.chartDataType === this.allChartDataTypes.AccountTotalAssets.type
@@ -729,6 +729,12 @@ export default {
 
             return amount;
         },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
+        },
         getDisplayPercent(value, precision, lowPrecisionValue) {
             return formatPercent(value, precision, lowPrecisionValue);
         },
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index b769c0b4..2f6ee1ad 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -503,9 +503,9 @@ export default {
                         const account = accountCategory.accounts[i];
 
                         if (this.showAccountBalance && account.isAsset) {
-                            account.displayBalance = this.$locale.getDisplayCurrency(account.balance, account.currency);
+                            account.displayBalance = this.getDisplayCurrency(account.balance, account.currency);
                         } else if (this.showAccountBalance && account.isLiability) {
-                            account.displayBalance = this.$locale.getDisplayCurrency(-account.balance, account.currency);
+                            account.displayBalance = this.getDisplayCurrency(-account.balance, account.currency);
                         } else {
                             account.displayBalance = '***';
                         }
@@ -544,7 +544,7 @@ export default {
                         totalBalance = totalBalance + '+';
                     }
 
-                    accountCategory.displayBalance = this.$locale.getDisplayCurrency(totalBalance, this.defaultCurrency);
+                    accountCategory.displayBalance = this.getDisplayCurrency(totalBalance, this.defaultCurrency);
                 } else {
                     accountCategory.displayBalance = '***';
                 }
@@ -1067,10 +1067,16 @@ export default {
         },
         getDisplayAmount(amount, hideAmount) {
             if (hideAmount) {
-                return this.$locale.getDisplayCurrency('***');
+                return this.getDisplayCurrency('***');
             }
 
-            return this.$locale.getDisplayCurrency(amount);
+            return this.getDisplayCurrency(amount);
+        },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
         },
         getPrimaryCategoryName(categoryId, allCategories) {
             return getTransactionPrimaryCategoryName(categoryId, allCategories);
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index 7780738e..ef7eec52 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -842,15 +842,21 @@ export default {
         },
         getDisplayAmount(amount, currency, hideAmount) {
             if (hideAmount) {
-                return this.$locale.getDisplayCurrency('***', currency);
+                return this.getDisplayCurrency('***', currency);
             }
 
-            return this.$locale.getDisplayCurrency(amount, currency);
+            return this.getDisplayCurrency(amount, currency);
         },
         getDisplayMonthTotalAmount(amount, currency, symbol, incomplete) {
-            const displayAmount = this.$locale.getDisplayCurrency(amount, currency);
+            const displayAmount = this.getDisplayCurrency(amount, currency);
             return symbol + displayAmount + (incomplete ? '+' : '');
         },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.getDisplayCurrency(value, currencyCode, {
+                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
+                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
+            });
+        },
         getTransactionTypeName(type, defaultName) {
             switch (type){
                 case this.allTransactionTypes.ModifyBalance:
diff --git a/src/views/mobile/users/DataManagementPage.vue b/src/views/mobile/users/DataManagementPage.vue
index 23736869..bde48bda 100644
--- a/src/views/mobile/users/DataManagementPage.vue
+++ b/src/views/mobile/users/DataManagementPage.vue
@@ -58,6 +58,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
 import { appendThousandsSeparator } from '@/lib/common.js';
@@ -81,7 +82,10 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useRootStore, useUserStore),
+        ...mapStores(useRootStore, useSettingsStore, useUserStore),
+        isEnableThousandsSeparator() {
+            return this.settingsStore.appSettings.thousandsSeparator;
+        },
         displayDataStatistics() {
             const self = this;
 
@@ -90,10 +94,10 @@ export default {
             }
 
             return {
-                totalAccountCount: appendThousandsSeparator(self.dataStatistics.totalAccountCount),
-                totalTransactionCategoryCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCategoryCount),
-                totalTransactionTagCount: appendThousandsSeparator(self.dataStatistics.totalTransactionTagCount),
-                totalTransactionCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCount)
+                totalAccountCount: appendThousandsSeparator(self.dataStatistics.totalAccountCount, self.isEnableThousandsSeparator),
+                totalTransactionCategoryCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCategoryCount, self.isEnableThousandsSeparator),
+                totalTransactionTagCount: appendThousandsSeparator(self.dataStatistics.totalTransactionTagCount, self.isEnableThousandsSeparator),
+                totalTransactionCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCount, self.isEnableThousandsSeparator)
             };
         },
         isDataExportingEnabled() {