support setting decimal separator and digit grouping symbol

src/views/desktop/ExchangeRatesPage.vue

@@ -114,7 +114,7 @@
                                                            @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))">
                                                         {{ $t('Set as Base') }}
                                                     </v-btn>
-                                                    <span>{{ getDisplayConvertedAmount(exchangeRate, isEnableThousandsSeparator) }}</span>
+                                                    <span>{{ getConvertedAmount(exchangeRate) }}</span>
                                                 </div>
                                             </td>
                                         </tr>
@@ -140,12 +140,8 @@ import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
-import { isNumber } from '@/lib/common.js';
-import {
-    stringCurrencyToNumeric,
-    getConvertedAmount,
-    getDisplayExchangeRateAmount
-} from '@/lib/currency.js';
+import logger from '@/lib/logger.js';
+import { getConvertedAmount } from '@/lib/numeral.js';
 
 import {
     mdiRefresh,
@@ -172,9 +168,6 @@ export default {
     },
     computed: {
         ...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
-        isEnableThousandsSeparator() {
-            return this.settingsStore.appSettings.thousandsSeparator;
-        },
         exchangeRatesData() {
             return this.exchangeRatesStore.latestExchangeRates.data;
         },
@@ -248,24 +241,20 @@ export default {
             }
 
             const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
+            let exchangeRateAmount = 0;
 
             try {
-                return getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
+                exchangeRateAmount = getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
             } catch (e) {
-                return 0;
-            }
-        },
-        getDisplayConvertedAmount(toExchangeRate, isEnableThousandsSeparator) {
-            const rateStr = this.getConvertedAmount(toExchangeRate).toString();
-            return getDisplayExchangeRateAmount(rateStr, isEnableThousandsSeparator);
-        },
-        setAsBaseline(currency, amount) {
-            if (!isNumber(amount)) {
-                amount = '';
+                exchangeRateAmount = 0;
+                logger.warn('failed to convert amount by exchange rates, original base amount is ' + this.baseAmount)
             }
 
+            return this.$locale.formatExchangeRateAmount(this.userStore, exchangeRateAmount);
+        },
+        setAsBaseline(currency, amount) {
             this.baseCurrency = currency;
-            this.baseAmount = stringCurrencyToNumeric(amount.toString());
+            this.baseAmount = this.$locale.parseAmount(this.userStore, amount);
         }
     }
 }

src/views/desktop/HomePage.vue

@@ -391,10 +391,7 @@ export default {
             this.$router.push(`/transaction/list?type=${type}&dateType=${datetimeConstants.allDateRanges.Custom.type}&maxTime=${maxTime}&minTime=${minTime}`);
         },
         getDisplayCurrency(value, currencyCode) {
-            return this.$locale.getDisplayCurrency(value, currencyCode, {
-                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
-                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
-            });
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
         },
         getDisplayAmount(amount, incomplete) {
             if (!this.showAmountInHomePage) {

src/views/desktop/accounts/ListPage.vue

@@ -594,10 +594,7 @@ export default {
             });
         },
         getDisplayCurrency(value, currencyCode) {
-            return this.$locale.getDisplayCurrency(value, currencyCode, {
-                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
-                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
-            });
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
         }
     }
 }

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -47,18 +47,6 @@
                                 />
                             </v-col>
 
-                            <v-col cols="12" md="6">
-                                <v-select
-                                    item-title="displayName"
-                                    item-value="value"
-                                    persistent-placeholder
-                                    :label="$t('Enable Thousands Separator')"
-                                    :placeholder="$t('Enable Thousands Separator')"
-                                    :items="enableDisableOptions"
-                                    v-model="isEnableThousandsSeparator"
-                                />
-                            </v-col>
-
                             <v-col cols="12" md="6">
                                 <v-select
                                     item-title="displayName"
@@ -248,14 +236,6 @@ export default {
                 this.settingsStore.setAutoUpdateExchangeRatesData(value);
             }
         },
-        isEnableThousandsSeparator: {
-            get: function () {
-                return this.settingsStore.appSettings.thousandsSeparator;
-            },
-            set: function (value) {
-                this.settingsStore.setEnableThousandsSeparator(value);
-            }
-        },
         currencyDisplayMode: {
             get: function () {
                 return this.settingsStore.appSettings.currencyDisplayMode;

src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue

@@ -277,10 +277,7 @@ export default {
             }
         },
         getDisplayCurrency(value, currencyCode) {
-            return this.$locale.getDisplayCurrency(value, currencyCode, {
-                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
-                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
-            });
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
         },
         getDisplayAmount(amount, incomplete) {
             if (!this.showAmountInHomePage) {

src/views/desktop/statistics/TransactionPage.vue

@@ -827,10 +827,7 @@ export default {
             return amount;
         },
         getDisplayCurrency(value, currencyCode) {
-            return this.$locale.getDisplayCurrency(value, currencyCode, {
-                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
-                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
-            });
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
         },
         getDisplayPercent(value, precision, lowPrecisionValue) {
             return formatPercent(value, precision, lowPrecisionValue);

src/views/desktop/transactions/ListPage.vue

@@ -960,10 +960,7 @@ export default {
             return symbol + displayAmount + (incomplete ? '+' : '');
         },
         getDisplayCurrency(value, currencyCode) {
-            return this.$locale.getDisplayCurrency(value, currencyCode, {
-                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
-                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
-            });
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
         },
         getLongDate(transaction) {
             const transactionTime = getUnixTime(parseDateFromUnixTime(transaction.time, transaction.utcOffset, this.currentTimezoneOffsetMinutes));

src/views/desktop/transactions/list/dialogs/EditDialog.vue

@@ -338,9 +338,6 @@ import {
     getTimezoneOffsetMinutes,
     getCurrentUnixTime
 } from '@/lib/datetime.js';
-import {
-    getAdaptiveDisplayAmountRate
-} from '@/lib/currency.js';
 import {
     getFirstAvailableCategoryId
 } from '@/lib/category.js';
@@ -445,7 +442,7 @@ export default {
 
             const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[sourceAccount.currency];
             const toExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[destinationAccount.currency];
-            const amountRate = getAdaptiveDisplayAmountRate(this.transaction.sourceAmount, this.transaction.destinationAmount, fromExchangeRate, toExchangeRate, this.settingsStore.appSettings.thousandsSeparator);
+            const amountRate = this.$locale.getAdaptiveAmountRate(this.userStore, this.transaction.sourceAmount, this.transaction.destinationAmount, fromExchangeRate, toExchangeRate);
 
             if (!amountRate) {
                 return this.$t('Transfer In Amount');
@@ -475,10 +472,7 @@ export default {
             return this.accountsStore.allVisiblePlainAccounts;
         },
         categorizedAccounts() {
-            return this.$locale.getCategorizedAccountsWithDisplayBalance(this.exchangeRatesStore, this.allVisibleAccounts, this.showAccountBalance, this.defaultCurrency, {
-                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
-                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
-            });
+            return this.$locale.getCategorizedAccountsWithDisplayBalance(this.allVisibleAccounts, this.showAccountBalance, this.defaultCurrency, this.settingsStore, this.userStore, this.exchangeRatesStore);
         },
         allAccountsMap() {
             return this.accountsStore.allAccountsMap;

src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue

@@ -204,6 +204,47 @@
                                 />
                             </v-col>
                         </v-row>
+
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :disabled="loading || saving"
+                                    :label="$t('Decimal Separator')"
+                                    :placeholder="$t('Decimal Separator')"
+                                    :items="allDecimalSeparators"
+                                    v-model="newProfile.decimalSeparator"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :disabled="loading || saving"
+                                    :label="$t('Digit Grouping Symbol')"
+                                    :placeholder="$t('Digit Grouping Symbol')"
+                                    :items="allDigitGroupingSymbols"
+                                    v-model="newProfile.digitGroupingSymbol"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :disabled="loading || saving"
+                                    :label="$t('Digit Grouping')"
+                                    :placeholder="$t('Digit Grouping')"
+                                    :items="allDigitGroupingTypes"
+                                    v-model="newProfile.digitGrouping"
+                                />
+                            </v-col>
+                        </v-row>
                     </v-card-text>
 
                     <v-card-text class="d-flex flex-wrap gap-4">
@@ -259,7 +300,10 @@ export default {
                 longDateFormat: 0,
                 shortDateFormat: 0,
                 longTimeFormat: 0,
-                shortTimeFormat: 0
+                shortTimeFormat: 0,
+                decimalSeparator: 0,
+                digitGroupingSymbol: 0,
+                digitGrouping: 0
             },
             oldProfile: {
                 email: '',
@@ -272,7 +316,10 @@ export default {
                 longDateFormat: 0,
                 shortDateFormat: 0,
                 longTimeFormat: 0,
-                shortTimeFormat: 0
+                shortTimeFormat: 0,
+                decimalSeparator: 0,
+                digitGroupingSymbol: 0,
+                digitGrouping: 0
             },
             emailVerified: false,
             loading: true,
@@ -315,6 +362,15 @@ export default {
         allShortTimeFormats() {
             return this.$locale.getAllShortTimeFormats();
         },
+        allDecimalSeparators() {
+            return this.$locale.getAllDecimalSeparators();
+        },
+        allDigitGroupingSymbols() {
+            return this.$locale.getAllDigitGroupingSymbols();
+        },
+        allDigitGroupingTypes() {
+            return this.$locale.getAllDigitGroupingTypes();
+        },
         allTransactionEditScopeTypes() {
             return this.$locale.getAllTransactionEditScopeTypes();
         },
@@ -346,7 +402,10 @@ export default {
                 this.newProfile.longDateFormat === this.oldProfile.longDateFormat &&
                 this.newProfile.shortDateFormat === this.oldProfile.shortDateFormat &&
                 this.newProfile.longTimeFormat === this.oldProfile.longTimeFormat &&
-                this.newProfile.shortTimeFormat === this.oldProfile.shortTimeFormat) {
+                this.newProfile.shortTimeFormat === this.oldProfile.shortTimeFormat &&
+                this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
+                this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
+                this.newProfile.digitGrouping === this.oldProfile.digitGrouping) {
                 return 'Nothing has been modified';
             } else {
                 return null;
@@ -473,6 +532,9 @@ export default {
             this.oldProfile.shortDateFormat = profile.shortDateFormat;
             this.oldProfile.longTimeFormat = profile.longTimeFormat;
             this.oldProfile.shortTimeFormat = profile.shortTimeFormat;
+            this.oldProfile.decimalSeparator = profile.decimalSeparator;
+            this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
+            this.oldProfile.digitGrouping = profile.digitGrouping;
 
             this.newProfile.email = this.oldProfile.email
             this.newProfile.nickname = this.oldProfile.nickname;
@@ -485,6 +547,9 @@ export default {
             this.newProfile.shortDateFormat = this.oldProfile.shortDateFormat;
             this.newProfile.longTimeFormat = this.oldProfile.longTimeFormat;
             this.newProfile.shortTimeFormat = this.oldProfile.shortTimeFormat;
+            this.newProfile.decimalSeparator = this.oldProfile.decimalSeparator;
+            this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
+            this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
         }
     }
 };

src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue

@@ -167,7 +167,6 @@ import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
 import { isEquals } from '@/lib/common.js';
-import { appendThousandsSeparator } from '@/lib/numeral.js';
 import { isDataExportingEnabled } from '@/lib/server_settings.js';
 import { startDownloadFile } from '@/lib/ui.js';
 
@@ -205,9 +204,6 @@ export default {
     },
     computed: {
         ...mapStores(useRootStore, useSettingsStore, useUserStore),
-        isEnableThousandsSeparator() {
-            return this.settingsStore.appSettings.thousandsSeparator;
-        },
         displayDataStatistics() {
             const self = this;
 
@@ -216,10 +212,10 @@ export default {
             }
 
             return {
-                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)
+                totalAccountCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalAccountCount),
+                totalTransactionCategoryCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionCategoryCount),
+                totalTransactionTagCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionTagCount),
+                totalTransactionCount: self.$locale.appendDigitGroupingSymbol(self.userStore, self.dataStatistics.totalTransactionCount)
             };
         },
         isDataExportingEnabled() {