not allow to click continue button or batch replace menu when there is an editing transaction, only update the display transaction content after clicking the confirm button

This commit is contained in:
MaysWind
2024-09-24 01:29:46 +08:00
parent a49490baa7
commit 73f234d8f5
@@ -13,44 +13,44 @@
<v-menu activator="parent"> <v-menu activator="parent">
<v-list> <v-list>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="selectedExpenseTransactionCount < 1" :disabled="editingTransaction || selectedExpenseTransactionCount < 1"
:title="$t('Batch Replace Selected Expense Categories')" :title="$t('Batch Replace Selected Expense Categories')"
@click="showBatchReplaceDialog('expenseCategory')"></v-list-item> @click="showBatchReplaceDialog('expenseCategory')"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="selectedIncomeTransactionCount < 1" :disabled="editingTransaction || selectedIncomeTransactionCount < 1"
:title="$t('Batch Replace Selected Income Categories')" :title="$t('Batch Replace Selected Income Categories')"
@click="showBatchReplaceDialog('incomeCategory')"></v-list-item> @click="showBatchReplaceDialog('incomeCategory')"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="selectedTransferTransactionCount < 1" :disabled="editingTransaction || selectedTransferTransactionCount < 1"
:title="$t('Batch Replace Selected Transfer Categories')" :title="$t('Batch Replace Selected Transfer Categories')"
@click="showBatchReplaceDialog('transferCategory')"></v-list-item> @click="showBatchReplaceDialog('transferCategory')"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="selectedImportTransactionCount < 1" :disabled="editingTransaction || selectedImportTransactionCount < 1"
:title="$t('Batch Replace Selected Accounts')" :title="$t('Batch Replace Selected Accounts')"
@click="showBatchReplaceDialog('account')"></v-list-item> @click="showBatchReplaceDialog('account')"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="selectedTransferTransactionCount < 1" :disabled="editingTransaction || selectedTransferTransactionCount < 1"
:title="$t('Batch Replace Selected Destination Accounts')" :title="$t('Batch Replace Selected Destination Accounts')"
@click="showBatchReplaceDialog('destinationAccount')"></v-list-item> @click="showBatchReplaceDialog('destinationAccount')"></v-list-item>
<v-divider class="my-2"/> <v-divider class="my-2"/>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="allInvalidExpenseCategoryNames < 1" :disabled="editingTransaction || allInvalidExpenseCategoryNames < 1"
:title="$t('Replace Invalid Expense Categories')" :title="$t('Replace Invalid Expense Categories')"
@click="showReplaceInvalidItemDialog('expenseCategory', allInvalidExpenseCategoryNames)"></v-list-item> @click="showReplaceInvalidItemDialog('expenseCategory', allInvalidExpenseCategoryNames)"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="allInvalidIncomeCategoryNames < 1" :disabled="editingTransaction || allInvalidIncomeCategoryNames < 1"
:title="$t('Replace Invalid Income Categories')" :title="$t('Replace Invalid Income Categories')"
@click="showReplaceInvalidItemDialog('incomeCategory', allInvalidIncomeCategoryNames)"></v-list-item> @click="showReplaceInvalidItemDialog('incomeCategory', allInvalidIncomeCategoryNames)"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="allInvalidTransferCategoryNames < 1" :disabled="editingTransaction || allInvalidTransferCategoryNames < 1"
:title="$t('Replace Invalid Transfer Categories')" :title="$t('Replace Invalid Transfer Categories')"
@click="showReplaceInvalidItemDialog('transferCategory', allInvalidTransferCategoryNames)"></v-list-item> @click="showReplaceInvalidItemDialog('transferCategory', allInvalidTransferCategoryNames)"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="allInvalidAccountNames < 1" :disabled="editingTransaction || allInvalidAccountNames < 1"
:title="$t('Replace Invalid Accounts')" :title="$t('Replace Invalid Accounts')"
@click="showReplaceInvalidItemDialog('account', allInvalidAccountNames)"></v-list-item> @click="showReplaceInvalidItemDialog('account', allInvalidAccountNames)"></v-list-item>
<v-list-item :prepend-icon="icons.replace" <v-list-item :prepend-icon="icons.replace"
:disabled="allInvalidTransactionTagNames < 1" :disabled="editingTransaction || allInvalidTransactionTagNames < 1"
:title="$t('Replace Invalid Transaction Tags')" :title="$t('Replace Invalid Transaction Tags')"
@click="showReplaceInvalidItemDialog('tag', allInvalidTransactionTagNames)"></v-list-item> @click="showReplaceInvalidItemDialog('tag', allInvalidTransactionTagNames)"></v-list-item>
</v-list> </v-list>
@@ -210,8 +210,7 @@
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Expense])" :custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Expense])"
:placeholder="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Expense]" :items="allCategories[allCategoryTypes.Expense]"
v-model="item.categoryId" v-model="item.categoryId">
@update:model-value="updateTransactionData(item)">
</two-column-select> </two-column-select>
</div> </div>
<div style="width: 260px" v-if="editingTransaction === item && item.type === allTransactionTypes.Income"> <div style="width: 260px" v-if="editingTransaction === item && item.type === allTransactionTypes.Income">
@@ -228,8 +227,7 @@
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Income])" :custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Income])"
:placeholder="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Income]" :items="allCategories[allCategoryTypes.Income]"
v-model="item.categoryId" v-model="item.categoryId">
@update:model-value="updateTransactionData(item)">
</two-column-select> </two-column-select>
</div> </div>
<div style="width: 260px" v-if="editingTransaction === item && item.type === allTransactionTypes.Transfer"> <div style="width: 260px" v-if="editingTransaction === item && item.type === allTransactionTypes.Transfer">
@@ -246,8 +244,7 @@
:custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Transfer])" :custom-selection-secondary-text="getSecondaryCategoryName(item.categoryId, allCategories[allCategoryTypes.Transfer])"
:placeholder="$t('Category')" :placeholder="$t('Category')"
:items="allCategories[allCategoryTypes.Transfer]" :items="allCategories[allCategoryTypes.Transfer]"
v-model="item.categoryId" v-model="item.categoryId">
@update:model-value="updateTransactionData(item)">
</two-column-select> </two-column-select>
</div> </div>
</template> </template>
@@ -284,8 +281,7 @@
:custom-selection-primary-text="getSourceAccountDisplayName(item)" :custom-selection-primary-text="getSourceAccountDisplayName(item)"
:placeholder="getSourceAccountTitle(item)" :placeholder="getSourceAccountTitle(item)"
:items="allVisibleCategorizedAccounts" :items="allVisibleCategorizedAccounts"
v-model="item.sourceAccountId" v-model="item.sourceAccountId">
@update:model-value="updateTransactionData(item)">
</two-column-select> </two-column-select>
<v-icon class="mx-1" size="13" :icon="icons.arrowRight" v-if="item.type === allTransactionTypes.Transfer"></v-icon> <v-icon class="mx-1" size="13" :icon="icons.arrowRight" v-if="item.type === allTransactionTypes.Transfer"></v-icon>
<two-column-select density="compact" variant="plain" <two-column-select density="compact" variant="plain"
@@ -302,8 +298,7 @@
:placeholder="$t('Destination Account')" :placeholder="$t('Destination Account')"
:items="allVisibleCategorizedAccounts" :items="allVisibleCategorizedAccounts"
v-model="item.destinationAccountId" v-model="item.destinationAccountId"
v-if="item.type === allTransactionTypes.Transfer" v-if="item.type === allTransactionTypes.Transfer">
@update:model-value="updateTransactionData(item)">
</two-column-select> </two-column-select>
</div> </div>
</template> </template>
@@ -338,14 +333,13 @@
:placeholder="$t('None')" :placeholder="$t('None')"
:items="allTags" :items="allTags"
:no-data-text="$t('No available tag')" :no-data-text="$t('No available tag')"
v-model="item.tagIds" v-model="editingTags"
@update:model-value="updateTransactionData(item)"
> >
<template #chip="{ props, index }"> <template #chip="{ props, index }">
<v-chip :class="{ 'font-italic': !isTagValid(item, index) }" <v-chip :class="{ 'font-italic': !isTagValid(editingTags, index) }"
:prepend-icon="isTagValid(item, index) ? icons.tag : icons.alert" :prepend-icon="isTagValid(editingTags, index) ? icons.tag : icons.alert"
:color="isTagValid(item, index) ? 'default' : 'error'" :color="isTagValid(editingTags, index) ? 'default' : 'error'"
:text="isTagValid(item, index) ? allTagsMap[item.tagIds[index]].name : item.originalTagNames[index]" :text="isTagValid(editingTags, index) ? allTagsMap[editingTags[index]].name : item.originalTagNames[index]"
v-bind="props"/> v-bind="props"/>
</template> </template>
@@ -439,7 +433,7 @@
{{ $t('Next') }} {{ $t('Next') }}
<v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular> <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
</v-btn> </v-btn>
<v-btn color="teal" :disabled="submitting || selectedImportTransactionCount < 1 || selectedInvalidTransactionCount > 0" <v-btn color="teal" :disabled="submitting || editingTransaction || selectedImportTransactionCount < 1 || selectedInvalidTransactionCount > 0"
:append-icon="!submitting ? icons.next : null" @click="submit" :append-icon="!submitting ? icons.next : null" @click="submit"
v-if="currentStep === 'checkData'"> v-if="currentStep === 'checkData'">
{{ $t('Import') }} {{ $t('Import') }}
@@ -523,6 +517,7 @@ export default {
importFile: null, importFile: null,
importTransactions: null, importTransactions: null,
editingTransaction: null, editingTransaction: null,
editingTags: [],
currentPage: 1, currentPage: 1,
countPerPage: 10, countPerPage: 10,
importedCount: null, importedCount: null,
@@ -804,6 +799,7 @@ export default {
this.importFile = null; this.importFile = null;
this.importTransactions = null; this.importTransactions = null;
this.editingTransaction = null; this.editingTransaction = null;
this.editingTags = [];
this.currentPage = 1; this.currentPage = 1;
this.countPerPage = 10; this.countPerPage = 10;
} }
@@ -816,6 +812,7 @@ export default {
self.importFile = null; self.importFile = null;
self.importTransactions = null; self.importTransactions = null;
self.editingTransaction = null; self.editingTransaction = null;
self.editingTags = [];
self.currentPage = 1; self.currentPage = 1;
self.countPerPage = 10; self.countPerPage = 10;
self.showState = true; self.showState = true;
@@ -885,6 +882,7 @@ export default {
self.importTransactions = parsedTransactions; self.importTransactions = parsedTransactions;
self.editingTransaction = null; self.editingTransaction = null;
self.editingTags = [];
self.currentPage = 1; self.currentPage = 1;
if (self.importTransactions && self.importTransactions.length >= 0 && self.importTransactions.length < 10) { if (self.importTransactions && self.importTransactions.length >= 0 && self.importTransactions.length < 10) {
@@ -905,6 +903,11 @@ export default {
}, },
submit() { submit() {
const self = this; const self = this;
if (self.editingTransaction) {
return;
}
const transactions = []; const transactions = [];
for (let i = 0; i < self.importTransactions.length; i++) { for (let i = 0; i < self.importTransactions.length; i++) {
@@ -927,6 +930,7 @@ export default {
count: transactions.length count: transactions.length
}).then(() => { }).then(() => {
self.editingTransaction = null; self.editingTransaction = null;
self.editingTags = [];
self.submitting = true; self.submitting = true;
self.transactionsStore.importTransactions({ self.transactionsStore.importTransactions({
@@ -1009,10 +1013,17 @@ export default {
} }
}, },
editTransaction(transaction) { editTransaction(transaction) {
if (this.editingTransaction) {
this.editingTransaction.tagIds = this.editingTags;
this.updateTransactionData(this.editingTransaction);
}
if (this.editingTransaction === transaction) { if (this.editingTransaction === transaction) {
this.editingTags = [];
this.editingTransaction = null; this.editingTransaction = null;
} else { } else {
this.editingTransaction = transaction; this.editingTransaction = transaction;
this.editingTags = this.editingTransaction.tagIds;
} }
}, },
updateTransactionData(transaction) { updateTransactionData(transaction) {
@@ -1029,6 +1040,10 @@ export default {
showBatchReplaceDialog(type) { showBatchReplaceDialog(type) {
const self = this; const self = this;
if (self.editingTransaction) {
return;
}
self.$refs.batchReplaceDialog.open({ self.$refs.batchReplaceDialog.open({
mode: 'batchReplace', mode: 'batchReplace',
type: type type: type
@@ -1089,6 +1104,10 @@ export default {
showReplaceInvalidItemDialog(type, invalidItems) { showReplaceInvalidItemDialog(type, invalidItems) {
const self = this; const self = this;
if (self.editingTransaction) {
return;
}
self.$refs.batchReplaceDialog.open({ self.$refs.batchReplaceDialog.open({
mode: 'replaceInvalidItems', mode: 'replaceInvalidItems',
type: type, type: type,
@@ -1283,16 +1302,16 @@ export default {
return true; return true;
}, },
isTagValid(transaction, tagIndex) { isTagValid(tagIds, tagIndex) {
if (!transaction || !transaction.tagIds || !transaction.tagIds[tagIndex]) { if (!tagIds || !tagIds[tagIndex]) {
return false; return false;
} }
if (transaction.tagIds[tagIndex] === '0') { if (tagIds[tagIndex] === '0') {
return false; return false;
} }
const tagId = transaction.tagIds[tagIndex]; const tagId = tagIds[tagIndex];
return !!this.allTagsMap[tagId]; return !!this.allTagsMap[tagId];
}, },
getDisplayDateTime(transaction) { getDisplayDateTime(transaction) {