display amounts according to currency decimals number count

mayswind · Dec 6, 2024 · e549779 · e549779
1 parent e2f2b32
commit e549779
Show file tree

Hide file tree

Showing 15 changed files with 313 additions and 23 deletions.
diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue
@@ -44,6 +44,7 @@ export default {
         'color',
         'density',
         'currency',
+        'showCurrency',
         'label',
         'placeholder',
         'persistentPlaceholder',
@@ -100,7 +101,7 @@ export default {
             return finalClass;
         },
         prependText() {
-            if (!this.currency) {
+            if (!this.currency || !this.showCurrency) {
                 return '';
             }
 
@@ -113,7 +114,7 @@ export default {
             return texts.prependText;
         },
         appendText() {
-            if (!this.currency) {
+            if (!this.currency || !this.showCurrency) {
                 return '';
             }
 
@@ -127,6 +128,13 @@ export default {
         }
     },
     watch: {
+        'currency': function () {
+            const newStringValue = this.getFormattedValue(this.userStore, this.modelValue);
+
+            if (!(newStringValue === '0' && this.currentValue === '')) {
+                this.currentValue = newStringValue;
+            }
+        },
         'modelValue': function (newValue) {
             const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
 
@@ -300,7 +308,7 @@ export default {
         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 removeAll(this.$locale.formatAmount(userStore, value, this.currency), digitGroupingSymbol);
             }
 
             return '0';

diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
@@ -43,9 +43,12 @@
                 <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="inputDecimalSeparator()">
+                <f7-button class="numpad-button numpad-button-num" v-if="supportDecimalSeparator" @click="inputDecimalSeparator()">
                     <span class="numpad-button-text numpad-button-text-normal">{{ decimalSeparator }}</span>
                 </f7-button>
+                <f7-button class="numpad-button numpad-button-num" v-if="!supportDecimalSeparator" @click="inputDoubleNum(0)">
+                    <span class="numpad-button-text numpad-button-text-normal">00</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>
                 </f7-button>
@@ -66,13 +69,15 @@
 import { mapStores } from 'pinia';
 import { useUserStore } from '@/stores/user.js';
 
+import currencyConstants from '@/consts/currency.js';
 import { isString, isNumber, removeAll } from '@/lib/common.js';
 
 export default {
     props: [
         'modelValue',
         'minValue',
         'maxValue',
+        'currency',
         'show'
     ],
     emits: [
@@ -94,6 +99,13 @@ export default {
         decimalSeparator() {
             return this.$locale.getCurrentDecimalSeparator(this.userStore);
         },
+        supportDecimalSeparator() {
+            if (!this.currency || !currencyConstants.all[this.currency] || !isNumber(currencyConstants.all[this.currency].fraction)) {
+                return true;
+            }
+
+            return currencyConstants.all[this.currency].fraction > 0;
+        },
         currentDisplay() {
             const previousValue = this.$locale.appendDigitGroupingSymbol(this.userStore, this.previousValue);
             const currentValue = this.$locale.appendDigitGroupingSymbol(this.userStore, this.currentValue);
@@ -129,7 +141,7 @@ export default {
                 return '';
             }
 
-            let str = this.$locale.formatAmount(userStore, value);
+            let str = this.$locale.formatAmount(userStore, value, this.currency);
 
             const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(userStore);
 
@@ -208,6 +220,10 @@ export default {
 
             this.currentValue = newValue;
         },
+        inputDoubleNum(num) {
+            this.inputNum(num);
+            this.inputNum(num);
+        },
         inputDecimalSeparator() {
             if (this.currentValue.indexOf(this.decimalSeparator) >= 0) {
                 return;