support setting decimal separator and digit grouping symbol

src/components/desktop/AmountInput.vue

@@ -1,12 +1,12 @@
 <template>
     <v-text-field class="text-field-with-colored-label"
-                  :type="hide ? 'password' : 'number'" :class="extraClass"
+                  :type="hide ? 'password' : 'text'" :class="extraClass"
                   :color="color" :base-color="color"
                   :density="density" :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
                   :rules="enableRules ? rules : []" v-model="currentValue"
-                  @keydown="onKeyUpDown" @keyup="onKeyUpDown">
+                  @keydown="onKeyUpDown" @keyup="onKeyUpDown" @paste="onPaste">
         <template #prepend-inner v-if="currency && prependText">
             <div>{{ prependText }}</div>
         </template>
@@ -19,9 +19,10 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
 
 import transactionConstants from '@/consts/transaction.js';
-import { numericCurrencyToString, stringCurrencyToNumeric } from '@/lib/currency.js';
+import { removeAll } from '@/lib/common.js';
 
 export default {
     props: [
@@ -43,9 +44,10 @@ export default {
     ],
     data() {
         const self = this;
+        const userStore = useUserStore();
 
         return {
-            currentValue: numericCurrencyToString(self.modelValue),
+            currentValue: self.getFormattedValue(userStore, self.modelValue),
             rules: [
                 (v) => {
                     if (v === '') {
@@ -53,8 +55,13 @@ export default {
                     }
 
                     try {
-                        const val = parseFloat(v);
-                        return (val >= transactionConstants.minAmount && val <= transactionConstants.maxAmount) || self.$t('Amount value exceeds limitation');
+                        const val = self.$locale.parseAmount(userStore, v);
+
+                        if (Number.isNaN(val) || !Number.isFinite(val)) {
+                            return self.$t('Amount value is not number');
+                        }
+
+                        return (val >= transactionConstants.minAmountNumber && val <= transactionConstants.maxAmountNumber) || self.$t('Amount value exceeds limitation');
                     } catch (e) {
                         return self.$t('Amount value is not number');
                     }
@@ -63,7 +70,7 @@ export default {
         }
     },
     computed: {
-        ...mapStores(useSettingsStore),
+        ...mapStores(useSettingsStore, useUserStore),
         extraClass() {
             let finalClass = this.class;
 
@@ -106,10 +113,10 @@ export default {
     },
     watch: {
         'modelValue': function (newValue) {
-            const numericCurrentValue = stringCurrencyToNumeric(this.currentValue);
+            const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
 
             if (newValue !== numericCurrentValue) {
-                const newStringValue = numericCurrencyToString(newValue, false, true);
+                const newStringValue = this.getFormattedValue(this.userStore, newValue);
 
                 if (!(newStringValue === '0' && this.currentValue === '')) {
                     this.currentValue = newStringValue;
@@ -117,57 +124,156 @@ export default {
             }
         },
         'currentValue': function (newValue) {
-            this.$emit('update:modelValue', stringCurrencyToNumeric(newValue));
+            this.$emit('update:modelValue', this.$locale.parseAmount(this.userStore, newValue));
         }
     },
     methods: {
         onKeyUpDown(e) {
-            if (e.target.value === '' || e.target.value === 0) {
+            if (e.altKey || e.ctrlKey || e.metaKey || (e.code.indexOf('F') === 0 && (e.code.length === 2 || e.code.length === 3))
+                || e.code === 'ArrowLeft' || e.code === 'ArrowRight'
+                || e.code === 'Home' || e.code === 'End' || e.code === 'Tab'
+                || e.code === 'Backspace' || e.code === 'Delete' || e.code === 'Del') {
+                return;
+            }
+
+            const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(this.userStore);
+            const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
+
+            if (e.code.indexOf('Digit') !== 0 && e.code !== 'Minus' && e.key !== decimalSeparator) {
+                e.preventDefault();
+                return;
+            }
+
+            let str = e.target.value;
+
+            if (str.indexOf(digitGroupingSymbol) >= 0) {
+                str = removeAll(str, digitGroupingSymbol);
+            }
+
+            if (e.code === 'Minus' && str.lastIndexOf('-') > 0) {
+                const lastMinusPos = str.lastIndexOf('-');
+                e.target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
+                this.currentValue = e.target.value;
+                e.preventDefault();
+                return;
+            }
+
+            if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
+                const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
+                e.target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
+                this.currentValue = e.target.value;
+                e.preventDefault();
+                return;
+            }
+
+            if (e.key === decimalSeparator && (str.indexOf(decimalSeparator) === 0 || (str.indexOf(decimalSeparator) === 1 && str.charAt(0) === '-'))) {
+                const negative = str.charAt(0) === '-';
+
+                if (negative) {
+                    str = str.substring(1);
+                }
+
+                str = (negative ? '-0' : '0') + str;
+                e.target.value = str;
+                this.currentValue = e.target.value;
+                e.preventDefault();
                 return;
             }
 
             let decimalLength = 0;
-            let decimalIndex = e.target.value.indexOf('.');
+            let decimalIndex = str.indexOf(decimalSeparator);
 
             if (decimalIndex >= 0) {
-                decimalLength = e.target.value.length - e.target.value.indexOf('.') - 1;
-            }
+                decimalLength = str.length - str.indexOf(decimalSeparator) - 1;
+            } else if ((str.startsWith('0') && str.length >= 2) || (str.startsWith('-0') && str.length >= 3)) {
+                const negative = str.charAt(0) === '-';
+
+                if (negative) {
+                    str = str.substring(1);
+                }
+
+                while (str.charAt(0) === '0' && (str.length >= 2 || e.code !== 'Digit0')) {
+                    str = str.substring(1);
+                }
+
+                e.target.value = (negative ? '-' : '') + str;
+                this.currentValue = e.target.value;
+                e.preventDefault();
+                return;
+                }
 
             if (decimalLength > 2) {
-                e.target.value = e.target.value.substring(0, Math.min(decimalIndex + 3, e.target.value.length - 1));
+                e.target.value = str.substring(0, Math.min(decimalIndex + 3, str.length - 1));
                 this.currentValue = e.target.value;
                 e.preventDefault();
                 return;
             }
 
             try {
+                const val = this.$locale.parseAmount(this.userStore, str);
+                const finalValue = this.getValidFormattedValue(val, str, decimalIndex >= 0);
 
-                const val = parseFloat(e.target.value);
-                let maxLength = transactionConstants.maxAmount.toString().length;
-
-                if (val < 0) {
-                    maxLength = transactionConstants.minAmount.toString().length;
-                }
-
-                if (val < transactionConstants.minAmount) {
-                    e.target.value = transactionConstants.minAmount;
-                    this.currentValue = e.target.value;
-                    e.preventDefault();
-                } else if (val > transactionConstants.maxAmount) {
-                    e.target.value = transactionConstants.maxAmount;
-                    this.currentValue = e.target.value;
-                    e.preventDefault();
-                } else if (e.target.value.length > maxLength) {
-                    e.target.value = e.target.value.substring(0, maxLength);
-                    this.currentValue = e.target.value;
+                if (finalValue !== str) {
+                    e.target.value = finalValue;
+                    this.currentValue = finalValue;
                     e.preventDefault();
                 }
             } catch (e) {
-                e.target.value = 0;
+                e.target.value = '0';
             }
         },
+        onPaste(e) {
+            if (!e.clipboardData) {
+                e.preventDefault();
+                return;
+            }
+
+            const text = e.clipboardData.getData('Text');
+
+            if (!text) {
+                e.preventDefault();
+                return;
+            }
+
+            const value = this.$locale.parseAmount(this.userStore, text);
+            const textualValue = this.getFormattedValue(this.userStore, value);
+            const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
+            const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
+
+            this.currentValue = this.getValidFormattedValue(value, textualValue, hasDecimalSeparator);
+            e.preventDefault();
+        },
+        getValidFormattedValue(value, textualValue, hasDecimalSeparator) {
+            let maxLength = transactionConstants.maxAmountNumber.toString().length;
+
+            if (value < 0) {
+                maxLength = transactionConstants.minAmountNumber.toString().length;
+            }
+
+            if (value < transactionConstants.minAmountNumber) {
+                return this.getFormattedValue(this.userStore, transactionConstants.minAmountNumber);
+            } else if (value > transactionConstants.maxAmountNumber) {
+                return this.getFormattedValue(this.userStore, transactionConstants.maxAmountNumber);
+            }
+
+            if (!hasDecimalSeparator && textualValue.length > maxLength) {
+                return textualValue.substring(0, maxLength);
+            } else if (hasDecimalSeparator && textualValue.length > maxLength + 1) {
+                return textualValue.substring(0, maxLength + 1);
+            }
+
+            return textualValue;
+        },
+        getFormattedValue(userStore, value) {
+            if (!Number.isNaN(value) && Number.isFinite(value)) {
+                const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(userStore);
+                return removeAll(this.$locale.formatAmount(userStore, value), digitGroupingSymbol);
+            }
+
+            return '0';
+        },
         getDisplayCurrencyPrependAndAppendText() {
-            return this.$locale.getDisplayCurrencyPrependAndAppendText(this.currency, this.settingsStore.appSettings.currencyDisplayMode);
+            return this.$locale.getAmountPrependAndAppendText(this.settingsStore, this.userStore, this.currency);
         }
     }
 }

src/components/desktop/PieChart.vue

@@ -8,6 +8,7 @@ import { useTheme } from 'vuetify';
 
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
 
 import colorConstants from '@/consts/color.js';
 import { formatPercent } from '@/lib/numeral.js';
@@ -37,7 +38,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useSettingsStore),
+        ...mapStores(useSettingsStore, useUserStore),
         isDarkMode() {
             return this.globalTheme.global.name.value === 'dark';
         },
@@ -289,10 +290,7 @@ export default {
             return color;
         },
         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/components/desktop/TrendsChart.vue

@@ -353,10 +353,7 @@ export default {
             this.selectedLegends = e.selected;
         },
         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/components/mobile/NumberPadSheet.vue

@@ -43,8 +43,8 @@
                 <f7-button class="numpad-button numpad-button-function no-right-border" @click="setSymbol('+')">
                     <span class="numpad-button-text numpad-button-text-normal">&plus;</span>
                 </f7-button>
-                <f7-button class="numpad-button numpad-button-num" @click="inputDot()">
-                    <span class="numpad-button-text numpad-button-text-normal">.</span>
+                <f7-button class="numpad-button numpad-button-num" @click="inputDecimalSeparator()">
+                    <span class="numpad-button-text numpad-button-text-normal">{{ decimalSeparator }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(0)">
                     <span class="numpad-button-text numpad-button-text-normal">0</span>
@@ -64,11 +64,9 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
 
-import { isString } from '@/lib/common.js';
-import { appendThousandsSeparator } from '@/lib/numeral.js';
-import { numericCurrencyToString, stringCurrencyToNumeric } from '@/lib/currency.js';
+import { isNumber, removeAll } from '@/lib/common.js';
 
 export default {
     props: [
@@ -83,21 +81,22 @@ export default {
     ],
     data() {
         const self = this;
+        const userStore = useUserStore();
 
         return {
             previousValue: '',
             currentSymbol: '',
-            currentValue: self.getStringValue(self.modelValue)
+            currentValue: self.getStringValue(userStore, self.modelValue)
         }
     },
     computed: {
-        ...mapStores(useSettingsStore),
-        isEnableThousandsSeparator() {
-            return this.settingsStore.appSettings.thousandsSeparator;
+        ...mapStores(useUserStore),
+        decimalSeparator() {
+            return this.$locale.getCurrentDecimalSeparator(this.userStore);
         },
         currentDisplay() {
-            const previousValue = appendThousandsSeparator(this.previousValue, this.isEnableThousandsSeparator);
-            const currentValue = appendThousandsSeparator(this.currentValue, this.isEnableThousandsSeparator);
+            const previousValue = this.$locale.appendDigitGroupingSymbol(this.userStore, this.previousValue);
+            const currentValue = this.$locale.appendDigitGroupingSymbol(this.userStore, this.currentValue);
 
             if (this.currentSymbol) {
                 return `${previousValue} ${this.currentSymbol} ${currentValue}`;
@@ -125,16 +124,19 @@ export default {
         }
     },
     methods: {
-        getStringValue(value) {
-            let str = numericCurrencyToString(value, this.isEnableThousandsSeparator);
+        getStringValue(userStore, value) {
+            let str = this.$locale.formatAmount(userStore, value);
 
-            if (str.indexOf(',')) {
-                str = str.replaceAll(/,/g, '');
+            const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(userStore);
+
+            if (str.indexOf(digitGroupingSymbol) >= 0) {
+                str = removeAll(str, digitGroupingSymbol);
             }
 
-            const dotPos = str.indexOf('.');
+            const decimalSeparator = this.$locale.getCurrentDecimalSeparator(userStore);
+            const decimalSeparatorPos = str.indexOf(decimalSeparator);
 
-            if (dotPos < 0) {
+            if (decimalSeparatorPos < 0) {
                 if (str === '0') {
                     return '';
                 }
@@ -142,8 +144,8 @@ export default {
                 return str;
             }
 
-            let integer = str.substring(0, dotPos);
-            let decimals = str.substring(dotPos + 1, str.length);
+            let integer = str.substring(0, decimalSeparatorPos);
+            let decimals = str.substring(decimalSeparatorPos + 1, str.length);
             let newDecimals = '';
 
             for (let i = decimals.length - 1; i >= 0; i--) {
@@ -160,7 +162,7 @@ export default {
                 return integer;
             }
 
-            return `${integer}.${newDecimals}`;
+            return `${integer}${decimalSeparator}${newDecimals}`;
         },
         inputNum(num) {
             if (!this.previousValue && this.currentSymbol === '−') {
@@ -176,36 +178,34 @@ export default {
                 return;
             }
 
-            const dotPos = this.currentValue.indexOf('.');
+            const decimalSeparatorPos = this.currentValue.indexOf(this.decimalSeparator);
 
-            if (dotPos >= 0 && this.currentValue.substring(dotPos + 1, this.currentValue.length).length >= 2) {
+            if (decimalSeparatorPos >= 0 && this.currentValue.substring(decimalSeparatorPos + 1, this.currentValue.length).length >= 2) {
                 return;
             }
 
             const newValue = this.currentValue + num.toString();
 
-            if (isString(this.minValue) && this.minValue !== '') {
-                const min = stringCurrencyToNumeric(this.minValue);
-                const current = stringCurrencyToNumeric(newValue);
+            if (isNumber(this.minValue)) {
+                const current = this.$locale.parseAmount(this.userStore, newValue);
 
-                if (current < min) {
+                if (current < this.minValue) {
                     return;
                 }
             }
 
-            if (isString(this.maxValue) && this.maxValue !== '') {
-                const max = stringCurrencyToNumeric(this.maxValue);
-                const current = stringCurrencyToNumeric(newValue);
+            if (isNumber(this.maxValue)) {
+                const current = this.$locale.parseAmount(this.userStore, newValue);
 
-                if (current > max) {
+                if (current > this.maxValue) {
                     return;
                 }
             }
 
             this.currentValue = newValue;
         },
-        inputDot() {
-            if (this.currentValue.indexOf('.') >= 0) {
+        inputDecimalSeparator() {
+            if (this.currentValue.indexOf(this.decimalSeparator) >= 0) {
                 return;
             }
 
@@ -220,7 +220,7 @@ export default {
                 this.currentValue = '-0';
             }
 
-            this.currentValue = this.currentValue + '.';
+            this.currentValue = this.currentValue + this.decimalSeparator;
         },
         setSymbol(symbol) {
             if (this.currentValue) {
@@ -258,8 +258,8 @@ export default {
         },
         confirm() {
             if (this.currentSymbol && this.currentValue.length >= 1) {
-                const previousValue = stringCurrencyToNumeric(this.previousValue);
-                const currentValue = stringCurrencyToNumeric(this.currentValue);
+                const previousValue = this.$locale.parseAmount(this.userStore, this.previousValue);
+                const currentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
                 let finalValue = 0;
 
                 switch (this.currentSymbol) {
@@ -276,25 +276,21 @@ export default {
                         finalValue = previousValue;
                 }
 
-                if (isString(this.minValue) && this.minValue !== '') {
-                    const min = stringCurrencyToNumeric(this.minValue);
-
-                    if (finalValue < min) {
+                if (isNumber(this.minValue)) {
+                    if (finalValue < this.minValue) {
                         this.$toast('Numeric Overflow');
                         return false;
                     }
                 }
 
-                if (isString(this.maxValue) && this.maxValue !== '') {
-                    const max = stringCurrencyToNumeric(this.maxValue);
-
-                    if (finalValue > max) {
+                if (isNumber(this.maxValue)) {
+                    if (finalValue > this.maxValue) {
                         this.$toast('Numeric Overflow');
                         return false;
                     }
                 }
 
-                this.currentValue = this.getStringValue(finalValue);
+                this.currentValue = this.getStringValue(this.userStore, finalValue);
                 this.previousValue = '';
                 this.currentSymbol = '';
 
@@ -306,7 +302,7 @@ export default {
 
                 return true;
             } else {
-                const value = stringCurrencyToNumeric(this.currentValue);
+                const value = this.$locale.parseAmount(this.userStore, this.currentValue);
 
                 this.$emit('update:modelValue', value);
                 this.close();
@@ -318,7 +314,7 @@ export default {
             this.$emit('update:show', false);
         },
         onSheetOpen() {
-            this.currentValue = this.getStringValue(this.modelValue);
+            this.currentValue = this.getStringValue(this.userStore, this.modelValue);
         },
         onSheetClosed() {
             this.close();

src/components/mobile/PieChart.vue

@@ -79,6 +79,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
 
 import colorConstants from '@/consts/color.js';
 import { formatPercent } from '@/lib/numeral.js';
@@ -113,7 +114,7 @@ export default {
         }
     },
     computed: {
-        ...mapStores(useSettingsStore),
+        ...mapStores(useSettingsStore, useUserStore),
         validItems: function () {
             let totalValidValue = 0;
 
@@ -272,10 +273,7 @@ export default {
             return this.circumference - allPreviousLength + offset;
         },
         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);
         }
     }
 }