do not reload transaction list when filter is not changed actually

This commit is contained in:
MaysWind
2024-07-07 11:07:26 +08:00
parent 9eddab3dd8
commit 297f8b9987
8 changed files with 175 additions and 95 deletions
+20 -8
View File
@@ -489,37 +489,49 @@ export const useTransactionsStore = defineStore('transactions', {
} }
}, },
updateTransactionListFilter(filter) { updateTransactionListFilter(filter) {
if (filter && isNumber(filter.dateType)) { let changed = false;
if (filter && isNumber(filter.dateType) && this.transactionsFilter.dateType !== filter.dateType) {
this.transactionsFilter.dateType = filter.dateType; this.transactionsFilter.dateType = filter.dateType;
changed = true;
} }
if (filter && isNumber(filter.maxTime)) { if (filter && isNumber(filter.maxTime) && this.transactionsFilter.maxTime !== filter.maxTime) {
this.transactionsFilter.maxTime = filter.maxTime; this.transactionsFilter.maxTime = filter.maxTime;
changed = true;
} }
if (filter && isNumber(filter.minTime)) { if (filter && isNumber(filter.minTime) && this.transactionsFilter.minTime !== filter.minTime) {
this.transactionsFilter.minTime = filter.minTime; this.transactionsFilter.minTime = filter.minTime;
changed = true;
} }
if (filter && isNumber(filter.type)) { if (filter && isNumber(filter.type) && this.transactionsFilter.type !== filter.type) {
this.transactionsFilter.type = filter.type; this.transactionsFilter.type = filter.type;
changed = true;
} }
if (filter && isString(filter.categoryIds)) { if (filter && isString(filter.categoryIds) && this.transactionsFilter.categoryIds !== filter.categoryIds) {
this.transactionsFilter.categoryIds = filter.categoryIds; this.transactionsFilter.categoryIds = filter.categoryIds;
changed = true;
} }
if (filter && isString(filter.accountIds)) { if (filter && isString(filter.accountIds) && this.transactionsFilter.accountIds !== filter.accountIds) {
this.transactionsFilter.accountIds = filter.accountIds; this.transactionsFilter.accountIds = filter.accountIds;
changed = true;
} }
if (filter && isString(filter.amountFilter)) { if (filter && isString(filter.amountFilter) && this.transactionsFilter.amountFilter !== filter.amountFilter) {
this.transactionsFilter.amountFilter = filter.amountFilter; this.transactionsFilter.amountFilter = filter.amountFilter;
changed = true;
} }
if (filter && isString(filter.keyword)) { if (filter && isString(filter.keyword) && this.transactionsFilter.keyword !== filter.keyword) {
this.transactionsFilter.keyword = filter.keyword; this.transactionsFilter.keyword = filter.keyword;
changed = true;
} }
return changed;
}, },
getTransactionListPageParams() { getTransactionListPageParams() {
const querys = []; const querys = [];
@@ -252,7 +252,9 @@ export default {
const self = this; const self = this;
const filteredAccountIds = {}; const filteredAccountIds = {};
let isAllSelected = true;
let finalAccountIds = ''; let finalAccountIds = '';
let changed = true;
for (let accountId in self.filterAccountIds) { for (let accountId in self.filterAccountIds) {
if (!Object.prototype.hasOwnProperty.call(self.filterAccountIds, accountId)) { if (!Object.prototype.hasOwnProperty.call(self.filterAccountIds, accountId)) {
@@ -263,6 +265,7 @@ export default {
if (!isAccountOrSubAccountsAllChecked(account, self.filterAccountIds)) { if (!isAccountOrSubAccountsAllChecked(account, self.filterAccountIds)) {
filteredAccountIds[accountId] = true; filteredAccountIds[accountId] = true;
isAllSelected = false;
} else { } else {
if (finalAccountIds.length > 0) { if (finalAccountIds.length > 0) {
finalAccountIds += ','; finalAccountIds += ',';
@@ -279,13 +282,16 @@ export default {
filterAccountIds: filteredAccountIds filterAccountIds: filteredAccountIds
}); });
} else if (this.type === 'transactionListCurrent') { } else if (this.type === 'transactionListCurrent') {
self.transactionsStore.updateTransactionListFilter({ changed = self.transactionsStore.updateTransactionListFilter({
accountIds: finalAccountIds accountIds: isAllSelected ? '' : finalAccountIds
}); });
self.transactionsStore.updateTransactionListInvalidState(true);
if (changed) {
self.transactionsStore.updateTransactionListInvalidState(true);
}
} }
self.$emit('settings:change', true); self.$emit('settings:change', changed);
}, },
cancel() { cancel() {
this.$emit('settings:change', false); this.$emit('settings:change', false);
@@ -260,7 +260,9 @@ export default {
const self = this; const self = this;
const filteredCategoryIds = {}; const filteredCategoryIds = {};
let isAllSelected = true;
let finalCategoryIds = ''; let finalCategoryIds = '';
let changed = true;
for (let categoryId in self.filterCategoryIds) { for (let categoryId in self.filterCategoryIds) {
if (!Object.prototype.hasOwnProperty.call(self.filterCategoryIds, categoryId)) { if (!Object.prototype.hasOwnProperty.call(self.filterCategoryIds, categoryId)) {
@@ -271,6 +273,7 @@ export default {
if (!isCategoryOrSubCategoriesAllChecked(category, self.filterCategoryIds)) { if (!isCategoryOrSubCategoriesAllChecked(category, self.filterCategoryIds)) {
filteredCategoryIds[categoryId] = true; filteredCategoryIds[categoryId] = true;
isAllSelected = false;
} else { } else {
if (finalCategoryIds.length > 0) { if (finalCategoryIds.length > 0) {
finalCategoryIds += ','; finalCategoryIds += ',';
@@ -287,13 +290,16 @@ export default {
filterCategoryIds: filteredCategoryIds filterCategoryIds: filteredCategoryIds
}); });
} else if (this.type === 'transactionListCurrent') { } else if (this.type === 'transactionListCurrent') {
self.transactionsStore.updateTransactionListFilter({ changed = self.transactionsStore.updateTransactionListFilter({
categoryIds: finalCategoryIds categoryIds: isAllSelected ? '' : finalCategoryIds
}); });
self.transactionsStore.updateTransactionListInvalidState(true);
if (changed) {
self.transactionsStore.updateTransactionListInvalidState(true);
}
} }
self.$emit('settings:change', true); self.$emit('settings:change', changed);
}, },
cancel() { cancel() {
this.$emit('settings:change', false); this.$emit('settings:change', false);
+76 -55
View File
@@ -11,7 +11,7 @@
{ name: $t('Income'), value: 2 }, { name: $t('Income'), value: 2 },
{ name: $t('Expense'), value: 3 }, { name: $t('Expense'), value: 3 },
{ name: $t('Transfer'), value: 4 } { name: $t('Transfer'), value: 4 }
]" v-model="query.type" @update:model-value="changeTypeFilter" /> ]" v-model="queryType" />
</div> </div>
<v-divider /> <v-divider />
<div class="mx-6 mt-4"> <div class="mx-6 mt-4">
@@ -573,6 +573,14 @@ export default {
query() { query() {
return this.transactionsStore.transactionsFilter; return this.transactionsStore.transactionsFilter;
}, },
queryType: {
get: function () {
return this.query.type;
},
set: function(value) {
this.changeTypeFilter(value);
}
},
queryMinTime() { queryMinTime() {
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.minTime); return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.minTime);
}, },
@@ -913,16 +921,18 @@ export default {
const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal); const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
dateType: newDateRange.dateType, dateType: newDateRange.dateType,
maxTime: newDateRange.maxTime, maxTime: newDateRange.maxTime,
minTime: newDateRange.minTime minTime: newDateRange.minTime
}); });
this.loading = true; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPageTransactions = [];
this.$router.push(this.getFilterLinkUrl()); this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
changeDateFilter(recentDateRange) { changeDateFilter(recentDateRange) {
if (recentDateRange.dateType === datetimeConstants.allDateRanges.Custom.type && if (recentDateRange.dateType === datetimeConstants.allDateRanges.Custom.type &&
@@ -943,16 +953,18 @@ export default {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
dateType: recentDateRange.dateType, dateType: recentDateRange.dateType,
maxTime: recentDateRange.maxTime, maxTime: recentDateRange.maxTime,
minTime: recentDateRange.minTime minTime: recentDateRange.minTime
}); });
this.loading = true; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPageTransactions = [];
this.$router.push(this.getFilterLinkUrl()); this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
changeCustomDateFilter(minTime, maxTime) { changeCustomDateFilter(minTime, maxTime) {
if (!minTime || !maxTime) { if (!minTime || !maxTime) {
@@ -966,7 +978,7 @@ export default {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
dateType: dateType, dateType: dateType,
maxTime: maxTime, maxTime: maxTime,
minTime: minTime minTime: minTime
@@ -974,10 +986,12 @@ export default {
this.showCustomDateRangeDialog = false; this.showCustomDateRangeDialog = false;
this.loading = true; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPageTransactions = [];
this.$router.push(this.getFilterLinkUrl()); this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
changeTypeFilter(type) { changeTypeFilter(type) {
let newCategoryFilter = undefined; let newCategoryFilter = undefined;
@@ -1002,15 +1016,17 @@ export default {
} }
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
type: type, type: type,
categoryIds: newCategoryFilter categoryIds: newCategoryFilter
}); });
this.loading = true; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPageTransactions = [];
this.$router.push(this.getFilterLinkUrl()); this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
changeCategoryFilter(categoryIds) { changeCategoryFilter(categoryIds) {
this.categoryMenuState = false; this.categoryMenuState = false;
@@ -1019,27 +1035,27 @@ export default {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
categoryIds: categoryIds categoryIds: categoryIds
}); });
this.loading = true; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPageTransactions = [];
this.$router.push(this.getFilterLinkUrl()); this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
changeMultipleCategoriesFilter(changed) { changeMultipleCategoriesFilter(changed) {
this.categoryMenuState = false; this.categoryMenuState = false;
this.showFilterCategoryDialog = false; this.showFilterCategoryDialog = false;
if (!changed) { if (changed) {
return; this.loading = true;
this.currentPageTransactions = [];
this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
} }
this.loading = true;
this.currentPageTransactions = [];
this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}, },
changeAmountFilter(filterType) { changeAmountFilter(filterType) {
this.currentAmountFilterType = ''; this.currentAmountFilterType = '';
@@ -1076,54 +1092,59 @@ export default {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
amountFilter: amountFilter amountFilter: amountFilter
}); });
this.loading = true; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPageTransactions = [];
this.$router.push(this.getFilterLinkUrl()); this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
changeAccountFilter(accountIds) { changeAccountFilter(accountIds) {
if (this.query.accountIds === accountIds) { if (this.query.accountIds === accountIds) {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
accountIds: accountIds accountIds: accountIds
}); });
this.loading = true; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPageTransactions = [];
this.$router.push(this.getFilterLinkUrl()); this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
changeMultipleAccountsFilter(changed) { changeMultipleAccountsFilter(changed) {
this.showFilterAccountDialog = false; this.showFilterAccountDialog = false;
if (!changed) { if (changed) {
return; this.loading = true;
this.currentPageTransactions = [];
this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
} }
this.loading = true;
this.currentPageTransactions = [];
this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}, },
changeKeywordFilter(keyword) { changeKeywordFilter(keyword) {
if (this.query.keyword === keyword) { if (this.query.keyword === keyword) {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
keyword: keyword keyword: keyword
}); });
this.currentPage = 1; if (changed) {
this.currentPageTransactions = []; this.loading = true;
this.transactionsStore.clearTransactions(); this.currentPage = 1;
this.$router.push(this.getFilterLinkUrl()); this.currentPageTransactions = [];
this.transactionsStore.clearTransactions();
this.$router.push(this.getFilterLinkUrl());
}
}, },
add() { add() {
const self = this; const self = this;
@@ -241,6 +241,7 @@ export default {
const router = self.f7router; const router = self.f7router;
const filteredAccountIds = {}; const filteredAccountIds = {};
let isAllSelected = true;
let finalAccountIds = ''; let finalAccountIds = '';
for (let accountId in self.filterAccountIds) { for (let accountId in self.filterAccountIds) {
@@ -252,6 +253,7 @@ export default {
if (!isAccountOrSubAccountsAllChecked(account, self.filterAccountIds)) { if (!isAccountOrSubAccountsAllChecked(account, self.filterAccountIds)) {
filteredAccountIds[accountId] = true; filteredAccountIds[accountId] = true;
isAllSelected = false;
} else { } else {
if (finalAccountIds.length > 0) { if (finalAccountIds.length > 0) {
finalAccountIds += ','; finalAccountIds += ',';
@@ -268,10 +270,13 @@ export default {
filterAccountIds: filteredAccountIds filterAccountIds: filteredAccountIds
}); });
} else if (this.type === 'transactionListCurrent') { } else if (this.type === 'transactionListCurrent') {
self.transactionsStore.updateTransactionListFilter({ const changed = self.transactionsStore.updateTransactionListFilter({
accountIds: finalAccountIds accountIds: isAllSelected ? '' : finalAccountIds
}); });
self.transactionsStore.updateTransactionListInvalidState(true);
if (changed) {
self.transactionsStore.updateTransactionListInvalidState(true);
}
} }
router.back(); router.back();
@@ -256,6 +256,7 @@ export default {
const router = self.f7router; const router = self.f7router;
const filteredCategoryIds = {}; const filteredCategoryIds = {};
let isAllSelected = true;
let finalCategoryIds = ''; let finalCategoryIds = '';
for (let categoryId in self.filterCategoryIds) { for (let categoryId in self.filterCategoryIds) {
@@ -267,6 +268,7 @@ export default {
if (!isCategoryOrSubCategoriesAllChecked(category, self.filterCategoryIds)) { if (!isCategoryOrSubCategoriesAllChecked(category, self.filterCategoryIds)) {
filteredCategoryIds[categoryId] = true; filteredCategoryIds[categoryId] = true;
isAllSelected = false;
} else { } else {
if (finalCategoryIds.length > 0) { if (finalCategoryIds.length > 0) {
finalCategoryIds += ','; finalCategoryIds += ',';
@@ -283,10 +285,13 @@ export default {
filterCategoryIds: filteredCategoryIds filterCategoryIds: filteredCategoryIds
}); });
} else if (this.type === 'transactionListCurrent') { } else if (this.type === 'transactionListCurrent') {
self.transactionsStore.updateTransactionListFilter({ const changed = self.transactionsStore.updateTransactionListFilter({
categoryIds: finalCategoryIds categoryIds: isAllSelected ? '' : finalCategoryIds
}); });
self.transactionsStore.updateTransactionListInvalidState(true);
if (changed) {
self.transactionsStore.updateTransactionListInvalidState(true);
}
} }
router.back(); router.back();
@@ -162,10 +162,14 @@ export default {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
amountFilter: amountFilter amountFilter: amountFilter
}); });
this.transactionsStore.updateTransactionListInvalidState(true);
if (changed) {
this.transactionsStore.updateTransactionListInvalidState(true);
}
router.back(); router.back();
}, },
getDisplayAmount(value) { getDisplayAmount(value) {
+37 -16
View File
@@ -772,14 +772,17 @@ export default {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
dateType: dateRange.dateType, dateType: dateRange.dateType,
maxTime: dateRange.maxTime, maxTime: dateRange.maxTime,
minTime: dateRange.minTime minTime: dateRange.minTime
}); });
this.showDatePopover = false; this.showDatePopover = false;
this.reload(null);
if (changed) {
this.reload(null);
}
}, },
changeCustomDateFilter(minTime, maxTime) { changeCustomDateFilter(minTime, maxTime) {
if (!minTime || !maxTime) { if (!minTime || !maxTime) {
@@ -788,7 +791,7 @@ export default {
const dateType = getDateTypeByDateRange(minTime, maxTime, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal); const dateType = getDateTypeByDateRange(minTime, maxTime, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
dateType: dateType, dateType: dateType,
maxTime: maxTime, maxTime: maxTime,
minTime: minTime minTime: minTime
@@ -796,7 +799,9 @@ export default {
this.showCustomDateRangeSheet = false; this.showCustomDateRangeSheet = false;
this.reload(null); if (changed) {
this.reload(null);
}
}, },
changeTypeFilter(type) { changeTypeFilter(type) {
if (this.query.type === type) { if (this.query.type === type) {
@@ -825,37 +830,46 @@ export default {
} }
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
type: type, type: type,
categoryIds: newCategoryFilter categoryIds: newCategoryFilter
}); });
this.showMorePopover = false; this.showMorePopover = false;
this.reload(null);
if (changed) {
this.reload(null);
}
}, },
changeCategoryFilter(categoryIds) { changeCategoryFilter(categoryIds) {
if (this.query.categoryIds === categoryIds) { if (this.query.categoryIds === categoryIds) {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
categoryIds: categoryIds categoryIds: categoryIds
}); });
this.showCategoryPopover = false; this.showCategoryPopover = false;
this.reload(null);
if (changed) {
this.reload(null);
}
}, },
changeAccountFilter(accountIds) { changeAccountFilter(accountIds) {
if (this.query.accountIds === accountIds) { if (this.query.accountIds === accountIds) {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
accountIds: accountIds accountIds: accountIds
}); });
this.showAccountPopover = false; this.showAccountPopover = false;
this.reload(null);
if (changed) {
this.reload(null);
}
}, },
changeAmountFilter(filterType) { changeAmountFilter(filterType) {
if (this.query.amountFilter === filterType) { if (this.query.amountFilter === filterType) {
@@ -868,23 +882,28 @@ export default {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
amountFilter: filterType amountFilter: filterType
}); });
this.showMorePopover = false; this.showMorePopover = false;
this.reload(null);
if (changed) {
this.reload(null);
}
}, },
changeKeywordFilter(keyword) { changeKeywordFilter(keyword) {
if (this.query.keyword === keyword) { if (this.query.keyword === keyword) {
return; return;
} }
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
keyword: keyword keyword: keyword
}); });
this.reload(null); if (changed) {
this.reload(null);
}
}, },
filterMultipleCategories() { filterMultipleCategories() {
this.f7router.navigate('/settings/filter/category?type=transactionListCurrent'); this.f7router.navigate('/settings/filter/category?type=transactionListCurrent');
@@ -939,13 +958,15 @@ export default {
const newDateRange = getShiftedDateRangeAndDateType(minTime, maxTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal); const newDateRange = getShiftedDateRangeAndDateType(minTime, maxTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
this.transactionsStore.updateTransactionListFilter({ const changed = this.transactionsStore.updateTransactionListFilter({
dateType: newDateRange.dateType, dateType: newDateRange.dateType,
maxTime: newDateRange.maxTime, maxTime: newDateRange.maxTime,
minTime: newDateRange.minTime minTime: newDateRange.minTime
}); });
this.reload(null); if (changed) {
this.reload(null);
}
}, },
scrollPopoverToSelectedItem(event) { scrollPopoverToSelectedItem(event) {
scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected'); scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected');