support setting decimal separator and digit grouping symbol

src/views/mobile/ExchangeRatesPage.vue

@@ -48,7 +48,7 @@
 
         <f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
             <f7-list-item swipeout
-                          :after="getDisplayConvertedAmount(exchangeRate)"
+                          :after="getConvertedAmount(exchangeRate)"
                           :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
                 <template #title>
                     <div class="no-padding no-margin">
@@ -97,12 +97,7 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import transactionConstants from '@/consts/transaction.js';
 import { isNumber } from '@/lib/common.js';
-import {
-    numericCurrencyToString,
-    stringCurrencyToNumeric,
-    getConvertedAmount,
-    getDisplayExchangeRateAmount
-} from '@/lib/currency.js';
+import { getConvertedAmount } from '@/lib/numeral.js';
 
 export default {
     data() {
@@ -118,9 +113,6 @@ export default {
     },
     computed: {
         ...mapStores(useSettingsStore, useUserStore, useExchangeRatesStore),
-        isEnableThousandsSeparator() {
-            return this.settingsStore.appSettings.thousandsSeparator;
-        },
         exchangeRatesData() {
             return this.exchangeRatesStore.latestExchangeRates.data;
         },
@@ -132,7 +124,7 @@ export default {
             return this.$locale.getAllDisplayExchangeRates(this.exchangeRatesData);
         },
         displayBaseAmount() {
-            return numericCurrencyToString(this.baseAmount, this.isEnableThousandsSeparator);
+            return this.$locale.formatAmount(this.userStore, this.baseAmount);
         },
         baseAmountFontSizeClass() {
             if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
@@ -144,10 +136,10 @@ export default {
             }
         },
         allowedMinAmount() {
-            return transactionConstants.minAmount;
+            return transactionConstants.minAmountNumber;
         },
         allowedMaxAmount() {
-            return transactionConstants.maxAmount;
+            return transactionConstants.maxAmountNumber;
         }
     },
     created() {
@@ -212,19 +204,12 @@ export default {
         },
         getConvertedAmount(toExchangeRate) {
             const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
-            return getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
-        },
-        getDisplayConvertedAmount(toExchangeRate) {
-            const rateStr = this.getConvertedAmount(toExchangeRate).toString();
-            return getDisplayExchangeRateAmount(rateStr, this.isEnableThousandsSeparator);
+            const exchangeRateAmount = getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
+            return this.$locale.formatExchangeRateAmount(this.userStore, exchangeRateAmount);
         },
         setAsBaseline(currency, amount) {
-            if (!isNumber(amount)) {
-                amount = '';
-            }
-
             this.baseCurrency = currency;
-            this.baseAmount = stringCurrencyToNumeric(amount.toString());
+            this.baseAmount = this.$locale.parseAmount(this.userStore, amount);
         }
     }
 }

src/views/mobile/HomePage.vue

@@ -293,10 +293,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/mobile/SettingsPage.vue

@@ -47,11 +47,6 @@
                 <f7-toggle :checked="isAutoUpdateExchangeRatesData" @toggle:change="isAutoUpdateExchangeRatesData = $event"></f7-toggle>
             </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
                 :key="currentLocale + '_currency_display'"
                 :title="$t('Currency Display Mode')"
@@ -165,14 +160,6 @@ export default {
         isEnableApplicationLock() {
             return this.settingsStore.appSettings.applicationLock;
         },
-        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/mobile/accounts/EditPage.vue

@@ -420,6 +420,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 
 import accountConstants from '@/consts/account.js';
@@ -459,7 +460,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useSettingsStore, useAccountsStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore),
         title() {
             if (!this.editAccountId) {
                 return 'Add Account';
@@ -493,10 +494,10 @@ export default {
             return this.$locale.getAllCurrencies();
         },
         allowedMinAmount() {
-            return transactionConstants.minAmount;
+            return transactionConstants.minAmountNumber;
         },
         allowedMaxAmount() {
-            return transactionConstants.maxAmount;
+            return transactionConstants.maxAmountNumber;
         }
     },
     watch: {
@@ -647,10 +648,7 @@ export default {
             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
-            });
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
         },
         chooseSuitableIcon(oldCategory, newCategory) {
             setAccountSuitableIcon(this.account, oldCategory, newCategory);

src/views/mobile/accounts/ListPage.vue

@@ -438,10 +438,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);
         },
         getAccountDomId(account) {
             return 'account_' + account.id;

src/views/mobile/settings/TextSizeSettingsPage.vue

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

src/views/mobile/statistics/TransactionPage.vue

@@ -562,10 +562,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/mobile/transactions/EditPage.vue

@@ -367,9 +367,6 @@ import {
     getUtcOffsetByUtcOffsetMinutes,
     getActualUnixTimeForStore
 } from '@/lib/datetime.js';
-import {
-    getAdaptiveDisplayAmountRate
-} from '@/lib/currency.js';
 import {
     getTransactionPrimaryCategoryName,
     getTransactionSecondaryCategoryName,
@@ -458,7 +455,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');
@@ -494,10 +491,7 @@ export default {
             return this.accountsStore.allAccountsMap;
         },
         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);
         },
         allCategories() {
             return this.transactionCategoriesStore.allTransactionCategories;
@@ -593,10 +587,10 @@ export default {
             }
         },
         allowedMinAmount() {
-            return transactionConstants.minAmount;
+            return transactionConstants.minAmountNumber;
         },
         allowedMaxAmount() {
-            return transactionConstants.maxAmount;
+            return transactionConstants.maxAmountNumber;
         },
         showAccountBalance() {
             return this.settingsStore.appSettings.showAccountBalance;
@@ -833,11 +827,8 @@ export default {
 
             return this.getDisplayCurrency(amount);
         },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.getDisplayCurrency(value, currencyCode, {
-                currencyDisplayMode: this.settingsStore.appSettings.currencyDisplayMode,
-                enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
-            });
+        getDisplayCurrency(value) {
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, false);
         },
         getPrimaryCategoryName(categoryId, allCategories) {
             return getTransactionPrimaryCategoryName(categoryId, allCategories);

src/views/mobile/transactions/ListPage.vue

@@ -870,10 +870,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);
         },
         getWeekdayShortName(transaction) {
             return this.$locale.getWeekdayShortName(transaction.dayOfWeek);

src/views/mobile/users/DataManagementPage.vue

@@ -73,7 +73,6 @@ import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
-import { appendThousandsSeparator } from '@/lib/numeral.js';
 import { isDataExportingEnabled } from '@/lib/server_settings.js';
 
 export default {
@@ -96,9 +95,6 @@ export default {
     },
     computed: {
         ...mapStores(useRootStore, useSettingsStore, useUserStore),
-        isEnableThousandsSeparator() {
-            return this.settingsStore.appSettings.thousandsSeparator;
-        },
         displayDataStatistics() {
             const self = this;
 
@@ -107,10 +103,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() {

src/views/mobile/users/UserProfilePage.vue

@@ -206,6 +206,45 @@
                 </select>
             </f7-list-item>
 
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Decimal Separator')"
+                :title="getNameByKeyValue(allDecimalSeparators, newProfile.decimalSeparator, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Decimal Separator'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Decimal Separator'), popupCloseLinkText: $t('Done') }"
+            >
+                <select v-model="newProfile.decimalSeparator">
+                    <option :value="format.type"
+                            :key="format.type"
+                            v-for="format in allDecimalSeparators">{{ format.displayName }}</option>
+                </select>
+            </f7-list-item>
+
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Digit Grouping Symbol')"
+                :title="getNameByKeyValue(allDigitGroupingSymbols, newProfile.digitGroupingSymbol, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping Symbol'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping Symbol'), popupCloseLinkText: $t('Done') }"
+            >
+                <select v-model="newProfile.digitGroupingSymbol">
+                    <option :value="format.type"
+                            :key="format.type"
+                            v-for="format in allDigitGroupingSymbols">{{ format.displayName }}</option>
+                </select>
+            </f7-list-item>
+
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Digit Grouping')"
+                :title="getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping'), popupCloseLinkText: $t('Done') }"
+            >
+                <select v-model="newProfile.digitGrouping">
+                    <option :value="format.type"
+                            :key="format.type"
+                            v-for="format in allDigitGroupingTypes">{{ format.displayName }}</option>
+                </select>
+            </f7-list-item>
+
             <f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="$t(langAndRegionInputInvalidProblemMessage)"></f7-list-item>
         </f7-list>
 
@@ -261,7 +300,10 @@ export default {
                 longDateFormat: 0,
                 shortDateFormat: 0,
                 longTimeFormat: 0,
-                shortTimeFormat: 0
+                shortTimeFormat: 0,
+                decimalSeparator: 0,
+                digitGroupingSymbol: 0,
+                digitGrouping: 0
             },
             oldProfile: {
                 email: '',
@@ -274,7 +316,10 @@ export default {
                 longDateFormat: 0,
                 shortDateFormat: 0,
                 longTimeFormat: 0,
-                shortTimeFormat: 0
+                shortTimeFormat: 0,
+                decimalSeparator: 0,
+                digitGroupingSymbol: 0,
+                digitGrouping: 0
             },
             emailVerified: false,
             currentPassword: '',
@@ -319,6 +364,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();
         },
@@ -363,7 +417,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 if (!this.newProfile.password && this.newProfile.confirmPassword) {
                 return 'Password cannot be blank';
@@ -512,6 +569,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;
@@ -524,6 +584,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;
         }
     }
 };