zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
MaysWind
2023-08-19 23:31:03 +08:00
parent b8bdb03fc0
commit b8acff3e7c
7 changed files with 100 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/AmountInput.vue
+38 -16
View File
@@ -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();
} else if (e.target.value.charAt(0) === '0' && e.target.value.length > 1) {
e.target.value = e.target.value.substring(1);
this.currentValue = e.target.value;
e.preventDefault();
}
} catch (e) {
src/lib/currency.js
+21 -10
View File
@@ -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) {
str = '0.00';
} else if (str.length === 1) {
str = '0.0' + str;
let integer = '0';
let decimals = '00';
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;
} else {
let integer = str.substring(0, str.length - 2);
let decimals = str.substring(str.length - 2);
decimals = str;
} else if (str.length === 1) {
decimals = '0' + str;
}
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
+3 -3
View File
@@ -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
+12
View File
@@ -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
+11 -10
View File
@@ -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) {
const rateStr = this.getConvertedAmount(toExchangeRate).toString();
setAsBaseline(currency, amount) {
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
+2 -4
View File
@@ -124,8 +124,8 @@
/>
</v-col>
<v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
<amount-input persistent-placeholder
:disabled="loading || submitting || !!editAccountId"
<amount-input :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
+13 -6
View File
@@ -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);
}