code refactor

src/components/desktop/AmountInput.vue

@@ -1,9 +1,12 @@
 <template>
-    <v-text-field :type="hide ? 'password' : 'number'" :class="extraClass"
+    <v-text-field class="text-field-with-colored-label"
+                  :type="hide ? 'password' : 'number'" :class="extraClass"
+                  :color="!readonly && !disabled ? color : undefined"
+                  :base-color="!readonly && !disabled ? color : undefined"
                   :density="density" :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
-                  :rules="enableRules ? rules : []" v-model="value"
+                  :rules="enableRules ? rules : []" v-model="currentValue"
                   @keydown="onKeyUpDown" @keyup="onKeyUpDown">
         <template #prepend-inner v-if="currency && prependText">
             <div style="margin-top: 2px">{{ prependText }}</div>
@@ -19,10 +22,12 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 
 import transactionConstants from '@/consts/transaction.js';
+import { numericCurrencyToString, stringCurrencyToNumeric } from '@/lib/currency.js';
 
 export default {
     props: [
         'class',
+        'color',
         'density',
         'currency',
         'label',
@@ -41,6 +46,7 @@ export default {
         const self = this;
 
         return {
+            currentValue: numericCurrencyToString(self.modelValue),
             rules: [
                 (v) => {
                     if (v === '') {
@@ -59,16 +65,14 @@ export default {
     },
     computed: {
         ...mapStores(useSettingsStore),
-        value: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (value) {
-                this.$emit('update:modelValue', value);
-            }
-        },
         extraClass() {
-            return this.class;
+            let finalClass = this.class;
+
+            if (this.color && !this.readonly && !this.disabled) {
+                finalClass += ` text-${this.color}`;
+            }
+
+            return finalClass;
         },
         prependText() {
             if (!this.currency) {
@@ -97,6 +101,22 @@ export default {
             return texts.appendText;
         }
     },
+    watch: {
+        'modelValue': function (newValue) {
+            const numericCurrentValue = stringCurrencyToNumeric(this.currentValue);
+
+            if (newValue !== numericCurrentValue) {
+                const newStringValue = numericCurrencyToString(newValue, false, true);
+
+                if (!(newStringValue === '0' && this.currentValue === '')) {
+                    this.currentValue = newStringValue;
+                }
+            }
+        },
+        'currentValue': function (newValue) {
+            this.$emit('update:modelValue', stringCurrencyToNumeric(newValue));
+        }
+    },
     methods: {
         onKeyUpDown(e) {
             if (e.target.value === '' || e.target.value === 0) {
@@ -104,13 +124,15 @@ export default {
             }
 
             let decimalLength = 0;
+            let decimalIndex = e.target.value.indexOf('.');
 
-            if (e.target.value.indexOf('.') > 0) {
+            if (decimalIndex >= 0) {
                 decimalLength = e.target.value.length - e.target.value.indexOf('.') - 1;
             }
 
             if (decimalLength > 2) {
-                e.target.value = e.target.value.substring(0, e.target.value.length - 1);
+                e.target.value = e.target.value.substring(0, Math.min(decimalIndex + 3, e.target.value.length - 1));
+                this.currentValue = e.target.value;
                 e.preventDefault();
                 return;
             }
@@ -126,15 +148,15 @@ export default {
 
                 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);
-                    e.preventDefault();
+                    this.currentValue = e.target.value;
-                } else if (e.target.value.charAt(0) === '0' && e.target.value.length > 1) {
-                    e.target.value = e.target.value.substring(1);
                     e.preventDefault();
                 }
             } catch (e) {

src/lib/currency.js

@@ -1,6 +1,6 @@
 import { isNumber, appendThousandsSeparator } from './common.js';
 
-export function numericCurrencyToString(num, enableThousandsSeparator) {
+export function numericCurrencyToString(num, enableThousandsSeparator, trimTailZero) {
     let str = num.toString();
     const negative = str.charAt(0) === '-';
 
@@ -8,19 +8,30 @@ export function numericCurrencyToString(num, enableThousandsSeparator) {
         str = str.substring(1);
     }
 
-    if (str.length === 0) {
+    let integer = '0';
-        str = '0.00';
+    let decimals = '00';
-    } else if (str.length === 1) {
+
-        str = '0.0' + str;
+    if (str.length > 2) {
+        integer = str.substring(0, str.length - 2);
+        decimals = str.substring(str.length - 2);
     } else if (str.length === 2) {
-        str = '0.' + str;
+        decimals = str;
-    } else {
+    } else if (str.length === 1) {
-        let integer = str.substring(0, str.length - 2);
+        decimals = '0' + str;
-        let decimals = str.substring(str.length - 2);
+    }
 
-        integer = appendThousandsSeparator(integer, enableThousandsSeparator);
+    if (trimTailZero) {
+        if (decimals.charAt(0) === '0' && decimals.charAt(1) === '0') {
+            decimals = '';
+        } else if (decimals.charAt(0) !== '0' && decimals.charAt(1) === '0') {
+            decimals = decimals.charAt(0);
+        }
+    }
 
+    if (decimals !== '') {
         str = `${integer}.${decimals}`;
+    } else {
+        str = integer;
     }
 
     if (negative) {

src/stores/account.js

@@ -736,7 +736,7 @@ export const useAccountsStore = defineStore('accounts', {
                 });
             });
         },
-        saveAccount({ account, subAccounts, isEdit, isFloatBalance }) {
+        saveAccount({ account, subAccounts, isEdit }) {
             const self = this;
 
             const submitSubAccounts = [];
@@ -751,7 +751,7 @@ export const useAccountsStore = defineStore('accounts', {
                         icon: subAccount.icon,
                         color: subAccount.color,
                         currency: subAccount.currency,
-                        balance: isFloatBalance ? subAccount.balance * 100 : subAccount.balance,
+                        balance: subAccount.balance,
                         comment: subAccount.comment
                     };
 
@@ -771,7 +771,7 @@ export const useAccountsStore = defineStore('accounts', {
                 icon: account.icon,
                 color: account.color,
                 currency: account.type === accountConstants.allAccountTypes.SingleAccount ? account.currency : currencyConstants.parentAccountCurrencyPlaceholder,
-                balance: account.type === accountConstants.allAccountTypes.SingleAccount ? (isFloatBalance ? account.balance * 100 : account.balance) : 0,
+                balance: account.type === accountConstants.allAccountTypes.SingleAccount ? account.balance : 0,
                 comment: account.comment,
                 subAccounts: account.type === accountConstants.allAccountTypes.SingleAccount ? null : submitSubAccounts,
             };

src/styles/desktop/global.scss

@@ -223,6 +223,18 @@ input[type=number] {
     height: 38px;
 }
 
+.text-field-with-colored-label.v-text-field.text-primary .v-field-label.v-label {
+    color: rgba(var(--v-theme-primary), var(--v-medium-emphasis-opacity)) !important;
+}
+
+.text-field-with-colored-label.v-text-field.text-expense .v-field-label.v-label {
+    color: rgba(var(--v-theme-expense), var(--v-medium-emphasis-opacity)) !important;
+}
+
+.text-field-with-colored-label.v-text-field.text-income .v-field-label.v-label {
+    color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important;
+}
+
 /** Replacing the default style of @vuepic/vue-datepicker **/
 .dp__theme_light {
     --dp-primary-color: #c67e48;

src/views/desktop/ExchangeRatesPage.vue

@@ -109,7 +109,7 @@
                                                     <v-btn class="px-2 ml-2 mr-3" color="default"
                                                            density="comfortable" variant="text"
                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                           @click="setAsBaseline(exchangeRate.currencyCode, exchangeRate)">
+                                                           @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))">
                                                         {{ $t('Set As Baseline') }}
                                                     </v-btn>
                                                     <span>{{ getDisplayConvertedAmount(exchangeRate, isEnableThousandsSeparator) }}</span>
@@ -138,7 +138,9 @@ 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';
@@ -156,7 +158,7 @@ export default {
         return {
             activeTab: 'exchangeRatesPage',
             baseCurrency: userStore.currentUserDefaultCurrency,
-            baseAmount: '1',
+            baseAmount: 100,
             loading: true,
             alwaysShowNav: mdAndUp.value,
             showNav: mdAndUp.value,
@@ -246,23 +248,22 @@ export default {
             const fromExchangeRate = this.exchangeRatesStore.latestExchangeRateMap[this.baseCurrency];
 
             try {
-                return getConvertedAmount(parseFloat(this.baseAmount), fromExchangeRate, toExchangeRate);
+                return getConvertedAmount(this.baseAmount / 100, fromExchangeRate, toExchangeRate);
             } catch (e) {
                 return 0;
             }
         },
         getDisplayConvertedAmount(toExchangeRate, isEnableThousandsSeparator) {
-            if (this.baseAmount === '') {
-                return '';
-            }
-
             const rateStr = this.getConvertedAmount(toExchangeRate).toString();
             return getDisplayExchangeRateAmount(rateStr, isEnableThousandsSeparator);
         },
-        setAsBaseline(currency, toExchangeRate) {
+        setAsBaseline(currency, amount) {
-            const rateStr = this.getConvertedAmount(toExchangeRate).toString();
+            if (!isNumber(amount)) {
+                amount = '';
+            }
+
             this.baseCurrency = currency;
-            this.baseAmount = getDisplayExchangeRateAmount(rateStr, false)
+            this.baseAmount = stringCurrencyToNumeric(amount.toString());
         }
     }
 }

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

@@ -124,8 +124,8 @@
                                     />
                                 </v-col>
                                 <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
-                                    <amount-input persistent-placeholder
+                                    <amount-input :disabled="loading || submitting || !!editAccountId"
-                                                  :disabled="loading || submitting || !!editAccountId"
+                                                  :persistent-placeholder="true"
                                                   :currency="selectedAccount.currency"
                                                   :label="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
                                                   :placeholder="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
@@ -436,14 +436,12 @@ export default {
         },
         setAccount(account) {
             setAccountModelByAnotherAccount(this.account, account);
-            this.account.balance = this.account.balance / 100;
             this.subAccounts = [];
 
             if (account.subAccounts && account.subAccounts.length > 0) {
                 for (let i = 0; i < account.subAccounts.length; i++) {
                     const subAccount = this.accountsStore.generateNewSubAccountModel(this.account);
                     setAccountModelByAnotherAccount(subAccount, account.subAccounts[i]);
-                    subAccount.balance = subAccount.balance / 100;
 
                     this.subAccounts.push(subAccount);
                 }

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

@@ -54,18 +54,20 @@
                         <v-form class="mt-2">
                             <v-row>
                                 <v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
-                                    <amount-input persistent-placeholder
+                                    <amount-input :color="sourceAmountColor"
                                                   :readonly="mode === 'view'"
                                                   :disabled="loading || submitting"
+                                                  :persistent-placeholder="true"
                                                   :hide="transaction.hideAmount"
                                                   :label="$t(sourceAmountName)"
                                                   :placeholder="$t(sourceAmountName)"
                                                   v-model="transaction.sourceAmount"/>
                                 </v-col>
                                 <v-col cols="12" :md="6" v-if="transaction.type === allTransactionTypes.Transfer">
-                                    <amount-input persistent-placeholder
+                                    <amount-input color="primary"
                                                   :readonly="mode === 'view'"
                                                   :disabled="loading || submitting"
+                                                  :persistent-placeholder="true"
                                                   :hide="transaction.hideAmount"
                                                   :label="$t('Transfer In Amount')"
                                                   :placeholder="$t('Transfer In Amount')"
@@ -464,6 +466,15 @@ export default {
         transactionTimezoneTimeDifference() {
             return this.$locale.getTimezoneDifferenceDisplayText(this.transaction.utcOffset);
         },
+        sourceAmountColor() {
+            if (this.transaction.type === this.allTransactionTypes.Expense) {
+                return 'expense';
+            } else if (this.transaction.type === this.allTransactionTypes.Income) {
+                return 'income';
+            } else if (this.transaction.type === this.allTransactionTypes.Transfer) {
+                return 'primary';
+            }
+        },
         geoLocationStatusInfo() {
             if (this.geoLocationStatus === 'success') {
                 return '';
@@ -538,8 +549,6 @@ export default {
             if (options && options.id) {
                 if (options.currentTransaction) {
                     self.setTransaction(options.currentTransaction, options, true);
-                    self.transaction.sourceAmount = self.transaction.sourceAmount / 100;
-                    self.transaction.destinationAmount = self.transaction.destinationAmount / 100;
                 }
 
                 self.mode = 'view';
@@ -574,8 +583,6 @@ export default {
                 if (options.id && responses[3]) {
                     const transaction = responses[3];
                     self.setTransaction(transaction, options, true);
-                    self.transaction.sourceAmount = self.transaction.sourceAmount / 100;
-                    self.transaction.destinationAmount = self.transaction.destinationAmount / 100;
                 } else {
                     self.setTransaction(null, options, true);
                 }