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
2024-07-06 19:16:38 +08:00
parent 628bd48f73
commit dc13afc071
3 changed files with 121 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/transaction.js
+38
View File
@@ -14,6 +14,14 @@ import {
getFirstAvaiableSubCategoryId
} from './category.js';
function getDisplayAmount(amount, currency, hideAmount, formatAmountWithCurrencyFunc) {
if (hideAmount) {
return formatAmountWithCurrencyFunc('***', currency);
}
return formatAmountWithCurrencyFunc(amount, currency);
}
export function setTransactionModelByTransaction(transaction, transaction2, allCategories, allCategoriesMap, allVisibleAccounts, allAccountsMap, defaultAccountId, options, setContextData, convertContextTime) {
if ((!options.type || options.type === '0') && options.categoryId && options.categoryId !== '0' && allCategoriesMap[options.categoryId]) {
const category = allCategoriesMap[options.categoryId];
@@ -148,3 +156,33 @@ export function setTransactionModelByTransaction(transaction, transaction2, allC
}
}
}
export function getTransactionDisplayAmount(transaction, allFilterAccountIdsCount, allFilterAccountIds, formatAmountWithCurrencyFunc) {
if (allFilterAccountIdsCount < 1) {
if (transaction.sourceAccount) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount, formatAmountWithCurrencyFunc);
}
} else if (allFilterAccountIdsCount === 1) {
if (transaction.sourceAccount && (allFilterAccountIds[transaction.sourceAccount.id] || allFilterAccountIds[transaction.sourceAccount.parentId])) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
} else if (transaction.destinationAccount && (allFilterAccountIds[transaction.destinationAccount.id] || allFilterAccountIds[transaction.destinationAccount.parentId])) {
return getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
}
} else { // allFilterAccountIdsCount > 1
if (transaction.sourceAccount && transaction.destinationAccount) {
if ((allFilterAccountIds[transaction.sourceAccount.id] || allFilterAccountIds[transaction.sourceAccount.parentId])
&& !allFilterAccountIds[transaction.destinationAccount.id] && !allFilterAccountIds[transaction.destinationAccount.parentId]) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
} else if ((allFilterAccountIds[transaction.destinationAccount.id] || allFilterAccountIds[transaction.destinationAccount.parentId])
&& !allFilterAccountIds[transaction.sourceAccount.id] && !allFilterAccountIds[transaction.sourceAccount.parentId]) {
return getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount , formatAmountWithCurrencyFunc);
}
}
}
if (transaction.sourceAccount) {
return getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount, formatAmountWithCurrencyFunc);
}
return '';
}
src/views/desktop/transactions/ListPage.vue
+45 -24
View File
@@ -133,6 +133,17 @@
</div>
</v-list-item-title>
</v-list-item>
<v-list-item key="multiple" value="multiple" class="text-sm" density="compact"
:class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }"
:append-icon="(query.categoryIds && queryAllFilterCategoryIdsCount > 1 ? icons.check : null)">
<v-list-item-title class="cursor-pointer"
@click="showMultipleCategoriesDialog()">
<div class="d-flex align-center">
<v-icon :icon="icons.multiple" />
<span class="text-sm ml-3">{{ $t('Multiple Categories') }}</span>
</div>
</v-list-item-title>
</v-list-item>
<template :key="categoryType"
v-for="(categories, categoryType) in allPrimaryCategories">
@@ -160,7 +171,7 @@
<v-divider />
<v-list-item class="text-sm" density="compact"
:value="category.id"
:append-icon="(query.categoryIds === category.id ? icons.check : null)">
:append-icon="(queryAllFilterCategoryIds[category.id] ? icons.check : null)">
<v-list-item-title class="cursor-pointer"
@click="changeCategoryFilter(category.id)">
<div class="d-flex align-center">
@@ -175,8 +186,8 @@
<v-divider v-if="!subCategory.hidden" />
<v-list-item class="text-sm" density="compact"
:value="subCategory.id"
:class="{ 'list-item-selected': query.categoryIds === subCategory.id }"
:append-icon="(query.categoryIds === subCategory.id ? icons.check : null)"
:class="{ 'list-item-selected': queryAllFilterCategoryIds[subCategory.id] }"
:append-icon="(queryAllFilterCategoryIds[subCategory.id] ? icons.check : null)"
v-if="!subCategory.hidden">
<v-list-item-title class="cursor-pointer"
@click="changeCategoryFilter(subCategory.id)">
@@ -265,13 +276,24 @@
</div>
</v-list-item-title>
</v-list-item>
<v-list-item key="multiple" value="multiple" class="text-sm" density="compact"
:class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }"
:append-icon="(query.accountIds && queryAllFilterAccountIdsCount > 1 ? icons.check : null)">
<v-list-item-title class="cursor-pointer"
@click="showMultipleAccountsDialog()">
<div class="d-flex align-center">
<v-icon :icon="icons.multiple" />
<span class="text-sm ml-3">{{ $t('Multiple Accounts') }}</span>
</div>
</v-list-item-title>
</v-list-item>
<template :key="account.id"
v-for="account in allAccounts">
<v-divider v-if="!account.hidden" />
<v-list-item class="text-sm" density="compact"
:value="account.id"
:class="{ 'list-item-selected': query.accountIds === account.id }"
:append-icon="(query.accountIds === account.id ? icons.check : null)"
:class="{ 'list-item-selected': queryAllFilterAccountIds[account.id] }"
:append-icon="(queryAllFilterAccountIds[account.id] ? icons.check : null)"
v-if="!account.hidden">
<v-list-item-title class="cursor-pointer"
@click="changeAccountFilter(account.id)">
@@ -347,9 +369,7 @@
</td>
<td class="transaction-table-column-amount" :class="{ 'text-expense': transaction.type === allTransactionTypes.Expense, 'text-income': transaction.type === allTransactionTypes.Income }">
<div v-if="transaction.sourceAccount">
<span v-if="!query.accountIds || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountIds || transaction.sourceAccount.parentId === query.accountIds))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
<span v-else-if="query.accountIds && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountIds || transaction.destinationAccount.parentId === query.accountIds)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
<span v-else></span>
<span>{{ getTransactionDisplayAmount(transaction) }}</span>
</div>
</td>
<td class="transaction-table-column-account">
@@ -431,12 +451,14 @@ import {
transactionTypeToCategoryType
} from '@/lib/category.js';
import { getUnifiedSelectedAccountsCurrencyOrDefaultCurrency } from '@/lib/account.js';
import { getTransactionDisplayAmount } from '@/lib/transaction.js';
import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
import {
mdiMagnify,
mdiCheck,
mdiTextBoxCheckOutline,
mdiViewGridOutline,
mdiVectorArrangeBelow,
mdiRefresh,
mdiMenu,
mdiMenuDown,
@@ -485,7 +507,8 @@ export default {
icons: {
search: mdiMagnify,
check: mdiCheck,
all: mdiTextBoxCheckOutline,
all: mdiViewGridOutline,
multiple: mdiVectorArrangeBelow,
refresh: mdiRefresh,
menu: mdiMenu,
dropdownMenu: mdiMenuDown,
@@ -502,11 +525,7 @@ export default {
return getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(this.allAccounts, this.queryAllFilterAccountIds, this.userStore.currentUserDefaultCurrency);
},
canAddTransaction() {
if (this.queryAllFilterCategoryIdsCount > 1 || this.queryAllFilterAccountIdsCount > 1) {
return false;
}
if (this.query.accountIds) {
if (this.query.accountIds && this.queryAllFilterAccountIdsCount === 1) {
const account = this.allAccounts[this.query.accountIds];
if (account && account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
@@ -1040,14 +1059,20 @@ export default {
this.currentPageTransactions = [];
this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
},
showMultipleCategoriesDialog() {
},
showMultipleAccountsDialog() {
},
add() {
const self = this;
self.$refs.editDialog.open({
type: self.query.type,
categoryId: self.query.categoryIds,
accountId: self.query.accountIds
categoryId: self.queryAllFilterCategoryIdsCount === 1 ? self.query.categoryIds : '',
accountId: self.queryAllFilterAccountIdsCount === 1 ? self.query.accountIds : ''
}).then(result => {
if (result && result.message) {
self.$refs.snackbar.showMessage(result.message);
@@ -1134,13 +1159,6 @@ export default {
getDisplayTimezone(transaction) {
return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
},
getDisplayAmount(amount, currency, hideAmount) {
if (hideAmount) {
return this.getDisplayCurrency('***', currency);
}
return this.getDisplayCurrency(amount, currency);
},
getDisplayMonthTotalAmount(amount, currency, symbol, incomplete) {
const displayAmount = this.getDisplayCurrency(amount, currency);
return symbol + displayAmount + (incomplete ? '+' : '');
@@ -1172,6 +1190,9 @@ export default {
getTransactionTypeFromCategoryType(categoryType) {
return categoryTypeToTransactionType(parseInt(categoryType));
},
getTransactionDisplayAmount(transaction) {
return getTransactionDisplayAmount(transaction, this.queryAllFilterAccountIdsCount, this.queryAllFilterAccountIds, this.getDisplayCurrency);
},
getCategoryListItemCheckedClass(category, queryCategoryIds) {
if (queryCategoryIds && queryCategoryIds[category.id]) {
return {
src/views/mobile/transactions/ListPage.vue
+38 -25
View File
@@ -11,7 +11,7 @@
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t('Transaction List')"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="plus" :class="{ 'disabled': !canAddTransaction }" :href="`/transaction/add?type=${query.type}&categoryId=${query.categoryIds}&accountId=${query.accountIds}`"></f7-link>
<f7-link icon-f7="plus" :class="{ 'disabled': !canAddTransaction }" :href="`/transaction/add?type=${query.type}&categoryId=${queryAllFilterCategoryIdsCount === 1 ? query.categoryIds : ''}&accountId=${queryAllFilterAccountIdsCount === 1 ? query.accountIds : ''}`"></f7-link>
</f7-nav-right>
<f7-subnavbar :inner="false">
@@ -200,9 +200,7 @@
<div class="item-after">
<div class="transaction-amount" v-if="transaction.sourceAccount"
:class="{ 'text-color-teal': transaction.type === allTransactionTypes.Expense, 'text-color-red': transaction.type === allTransactionTypes.Income }">
<span v-if="!query.accountIds || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountIds || transaction.sourceAccount.parentId === query.accountIds))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
<span v-else-if="query.accountIds && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountIds || transaction.destinationAccount.parentId === query.accountIds)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
<span v-else></span>
<span>{{ getTransactionDisplayAmount(transaction) }}</span>
</div>
</div>
</div>
@@ -286,12 +284,20 @@
<f7-list dividers accordion-list>
<f7-list-item :class="{ 'list-item-selected': !query.categoryIds }" :title="$t('All')" @click="changeCategoryFilter('')">
<template #media>
<f7-icon f7="rectangle_badge_checkmark"></f7-icon>
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
</template>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.categoryIds"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }" :title="$t('Multiple Categories')" @click="showMultipleCategoriesPopup()">
<template #media>
<f7-icon f7="rectangle_on_rectangle"></f7-icon>
</template>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds && queryAllFilterCategoryIdsCount > 1"></f7-icon>
</template>
</f7-list-item>
</f7-list>
<f7-list dividers accordion-list
class="no-margin-vertical"
@@ -311,16 +317,16 @@
</template>
<f7-accordion-content>
<f7-list dividers class="padding-left">
<f7-list-item :class="{ 'list-item-selected': query.categoryIds === category.id }" :title="$t('All')" @click="changeCategoryFilter(category.id)">
<f7-list-item :class="{ 'list-item-selected': queryAllFilterCategoryIds[category.id] }" :title="$t('All')" @click="changeCategoryFilter(category.id)">
<template #media>
<f7-icon f7="rectangle_badge_checkmark"></f7-icon>
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
</template>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds === category.id"></f7-icon>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="queryAllFilterCategoryIds[category.id]"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :title="subCategory.name"
:class="{ 'list-item-selected': query.categoryIds === subCategory.id }"
:class="{ 'list-item-selected': queryAllFilterCategoryIds[subCategory.id] }"
:key="subCategory.id"
v-for="subCategory in category.subCategories"
v-show="!subCategory.hidden"
@@ -332,7 +338,7 @@
<template #after>
<f7-icon class="list-item-checked-icon"
f7="checkmark_alt"
v-if="query.categoryIds === subCategory.id">
v-if="queryAllFilterCategoryIds[subCategory.id]">
</f7-icon>
</template>
</f7-list-item>
@@ -348,14 +354,22 @@
<f7-list dividers>
<f7-list-item :class="{ 'list-item-selected': !query.accountIds }" :title="$t('All')" @click="changeAccountFilter('')">
<template #media>
<f7-icon f7="rectangle_badge_checkmark"></f7-icon>
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
</template>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.accountIds"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }" :title="$t('Multiple Accounts')" @click="showMultipleAccountsPopup()">
<template #media>
<f7-icon f7="rectangle_on_rectangle"></f7-icon>
</template>
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.accountIds && queryAllFilterAccountIdsCount > 1"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :title="account.name"
:class="{ 'list-item-selected': query.accountIds === account.id }"
:class="{ 'list-item-selected': queryAllFilterAccountIds[account.id] }"
:key="account.id"
v-for="account in allAccounts"
v-show="!account.hidden"
@@ -367,7 +381,7 @@
<template #after>
<f7-icon class="list-item-checked-icon"
f7="checkmark_alt"
v-if="query.accountIds === account.id">
v-if="queryAllFilterAccountIds[account.id]">
</f7-icon>
</template>
</f7-list-item>
@@ -461,6 +475,7 @@ import {
} from '@/lib/datetime.js';
import { categoryTypeToTransactionType, transactionTypeToCategoryType } from '@/lib/category.js';
import { getUnifiedSelectedAccountsCurrencyOrDefaultCurrency } from '@/lib/account.js';
import { getTransactionDisplayAmount } from '@/lib/transaction.js';
import { onSwipeoutDeleted, scrollToSelectedItem } from '@/lib/ui.mobile.js';
export default {
@@ -490,11 +505,7 @@ export default {
return getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(this.allAccounts, this.queryAllFilterAccountIds, this.userStore.currentUserDefaultCurrency);
},
canAddTransaction() {
if (this.queryAllFilterCategoryIdsCount > 1 || this.queryAllFilterAccountIdsCount > 1) {
return false;
}
if (this.query.accountIds) {
if (this.query.accountIds && this.queryAllFilterAccountIdsCount === 1) {
const account = this.allAccounts[this.query.accountIds];
if (account && account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
@@ -868,6 +879,12 @@ export default {
});
this.reload(null);
},
showMultipleCategoriesPopup() {
},
showMultipleAccountsPopup() {
},
duplicate(transaction) {
this.f7router.navigate(`/transaction/add?id=${transaction.id}&type=${transaction.type}`);
@@ -936,13 +953,6 @@ export default {
getDisplayTimezone(transaction) {
return `UTC${getUtcOffsetByUtcOffsetMinutes(transaction.utcOffset)}`;
},
getDisplayAmount(amount, currency, hideAmount) {
if (hideAmount) {
return this.getDisplayCurrency('***', currency);
}
return this.getDisplayCurrency(amount, currency);
},
getDisplayMonthTotalAmount(amount, currency, symbol, incomplete) {
const displayAmount = this.getDisplayCurrency(amount, currency);
return symbol + displayAmount + (incomplete ? '+' : '');
@@ -970,6 +980,9 @@ export default {
getTransactionTypeFromCategoryType(categoryType) {
return categoryTypeToTransactionType(parseInt(categoryType));
},
getTransactionDisplayAmount(transaction) {
return getTransactionDisplayAmount(transaction, this.queryAllFilterAccountIdsCount, this.queryAllFilterAccountIds, this.getDisplayCurrency);
},
getTransactionDomId(transaction) {
return 'transaction_' + transaction.id;
},