add add/edit account dialog

This commit is contained in:
MaysWind
2023-08-13 01:35:52 +08:00
parent f91f9fcc94
commit 06ff9f2499
7 changed files with 740 additions and 4 deletions
+40 -1
View File
@@ -176,16 +176,19 @@
<v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
:disabled="loading"
:prepend-icon="element.hidden ? icons.show : icons.hide"
v-if="!activeSubAccount[element.id]"
@click="hide(element, !element.hidden)">
{{ element.hidden ? $t('Show') : $t('Hide') }}
</v-btn>
<v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
:disabled="loading" :prepend-icon="icons.edit"
v-if="!activeSubAccount[element.id]"
@click="edit(element)">
{{ $t('Edit') }}
</v-btn>
<v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
:disabled="loading" :prepend-icon="icons.remove"
v-if="!activeSubAccount[element.id]"
@click="remove(element)">
{{ $t('Delete') }}
</v-btn>
@@ -208,11 +211,15 @@
</v-col>
</v-row>
<edit-dialog ref="editDialog" :persistent="true" />
<confirm-dialog ref="confirmDialog"/>
<snack-bar ref="snackbar" />
</template>
<script>
import EditDialog from './list/dialogs/EditDialog.vue';
import { useDisplay } from 'vuetify';
import { mapStores } from 'pinia';
@@ -243,6 +250,9 @@ import {
} from '@mdi/js';
export default {
components: {
EditDialog
},
data() {
const { mdAndUp } = useDisplay();
@@ -470,10 +480,39 @@ export default {
});
},
add() {
const self = this;
self.$refs.editDialog.open({
category: self.activeAccountCategoryId
}).then(result => {
if (result && result.message) {
self.$refs.snackbar.showMessage(result.message);
}
}).catch(error => {
if (error) {
self.$refs.snackbar.showError(error);
}
});
},
edit() {
edit(account) {
const self = this;
self.$refs.editDialog.open({
id: account.id,
currentAccount: account
}).then(result => {
if (result && result.message) {
self.$refs.snackbar.showMessage(result.message);
}
if (self.accountsStore.accountListStateInvalid && !self.loading) {
self.reload(false);
}
}).catch(error => {
if (error) {
self.$refs.snackbar.showError(error);
}
});
},
hide(account, hidden) {
const self = this;
@@ -0,0 +1,551 @@
<template>
<v-dialog :width="account.type === allAccountTypes.MultiSubAccounts ? 1000 : 800" :persistent="!!persistent" v-model="showState">
<v-card class="pa-2 pa-sm-4 pa-md-8">
<template #title>
<div class="d-flex align-center justify-center">
<div class="d-flex w-100 align-center justify-center">
<h5 class="text-h5">{{ $t(title) }}</h5>
<v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
</div>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
:disabled="loading || submitting || !!editAccountId || account.type !== allAccountTypes.MultiSubAccounts">
<v-icon :icon="icons.more" />
<v-menu activator="parent">
<v-list>
<v-list-item :prepend-icon="icons.add"
:title="$t('Add Sub Account')"
@click="addSubAccount"></v-list-item>
</v-list>
</v-menu>
</v-btn>
</div>
</template>
<v-card-text class="d-flex flex-column flex-md-row mt-2 mt-md-4">
<div class="mb-4" v-if="account.type === allAccountTypes.MultiSubAccounts">
<v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex">
<v-tab :value="-1">
<span>{{ $t('Main Account') }}</span>
</v-tab>
<template v-if="account.type === allAccountTypes.MultiSubAccounts">
<v-tab :key="idx" :value="idx" v-for="(subAccount, idx) in subAccounts">
<span>{{ $t('Sub Account') + ' #' + (idx + 1) }}</span>
<v-btn class="ml-2" color="error" size="24" variant="text"
:icon="icons.delete" v-if="!editAccountId"
@click="removeSubAccount(subAccount)"></v-btn>
</v-tab>
</template>
</v-tabs>
</div>
<v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container"
:class="{ 'ml-md-5': account.type === allAccountTypes.MultiSubAccounts }"
v-model="activeTab">
<v-window-item value="account">
<v-form class="mt-2">
<v-row>
<v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex < 0">
<v-select
item-title="displayName"
item-value="id"
persistent-placeholder
:disabled="loading || submitting"
:label="$t('Account Category')"
:placeholder="$t('Account Category')"
:items="allAccountCategories"
:no-data-text="$t('No results')"
v-model="selectedAccount.category"
>
<template #item="{ props, item }">
<v-list-item :value="item.value" v-bind="props">
<template #title>
<v-list-item-title>
<div class="d-flex align-center">
<ItemIcon icon-type="account"
:icon-id="item.raw.defaultAccountIconId"
v-if="item.raw" />
<span class="ml-2">{{ item.title }}</span>
</div>
</v-list-item-title>
</template>
</v-list-item>
</template>
</v-select>
</v-col>
<v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex < 0">
<v-select
item-title="displayName"
item-value="id"
persistent-placeholder
:disabled="loading || submitting || !!editAccountId"
:label="$t('Account Type')"
:placeholder="$t('Account Type')"
:items="allAccountTypesArray"
:no-data-text="$t('No results')"
v-model="selectedAccount.type"
/>
</v-col>
<v-col cols="12" md="12">
<v-text-field
type="text"
clearable
persistent-placeholder
:disabled="loading || submitting"
:label="currentAccountIndex < 0 ? $t('Account Name') : $t('Sub Account Name')"
:placeholder="currentAccountIndex < 0 ? $t('Your account name') : $t('Your sub account name')"
v-model="selectedAccount.name"
/>
</v-col>
<v-col cols="12" md="6">
<icon-select icon-type="account"
:all-icon-infos="allAccountIcons"
:label="currentAccountIndex < 0 ? $t('Account Icon') : $t('Sub Account Icon')"
:color="selectedAccount.color"
:disabled="loading || submitting"
v-model="selectedAccount.icon" />
</v-col>
<v-col cols="12" md="6">
<color-select :all-color-infos="allAccountColors"
:label="currentAccountIndex < 0 ? $t('Account Color') : $t('Sub Account Color')"
:disabled="loading || submitting"
v-model="selectedAccount.color" />
</v-col>
<v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
<v-autocomplete
item-title="displayName"
item-value="code"
auto-select-first
persistent-placeholder
:disabled="loading || submitting || !!editAccountId"
:label="$t('Currency')"
:placeholder="$t('Currency')"
:items="allCurrencies"
:no-data-text="$t('No results')"
v-model="selectedAccount.currency"
/>
</v-col>
<v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
<amount-input persistent-placeholder
:disabled="loading || submitting || !!editAccountId"
:currency="selectedAccount.currency"
:label="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
:placeholder="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
v-model="selectedAccount.balance"/>
</v-col>
<v-col cols="12" md="12">
<v-textarea
type="text"
persistent-placeholder
rows="3"
:disabled="loading || submitting"
:label="$t('Description')"
:placeholder="currentAccountIndex < 0 ? $t('Your account description (optional)') : $t('Your sub account description (optional)')"
v-model="selectedAccount.comment"
/>
</v-col>
<v-col class="py-0" cols="12" md="12" v-if="editAccountId">
<v-switch inset :disabled="loading || submitting"
:label="$t('Visible')" v-model="selectedAccount.visible"/>
</v-col>
</v-row>
</v-form>
</v-window-item>
</v-window>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
<v-btn :disabled="isInputEmpty() || loading || submitting" @click="save">
{{ $t(saveButtonTitle) }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
</v-btn>
<v-btn color="secondary" variant="tonal"
:disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
</div>
</v-card-text>
</v-card>
</v-dialog>
<confirm-dialog ref="confirmDialog"/>
<snack-bar ref="snackbar" />
</template>
<script>
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.js';
import { useUserStore } from '@/stores/user.js';
import { useAccountsStore } from '@/stores/account.js';
import accountConstants from '@/consts/account.js';
import iconConstants from '@/consts/icon.js';
import colorConstants from '@/consts/color.js';
import currencyConstants from '@/consts/currency.js';
import { isNumber } from '@/lib/common.js';
import {
mdiDotsVertical,
mdiCreditCardPlusOutline,
mdiDeleteOutline
} from '@mdi/js';
export default {
props: [
'persistent',
'show'
],
expose: [
'open'
],
data() {
const userStore = useUserStore();
return {
showState: false,
activeTab: 'account',
editAccountId: null,
loading: false,
account: {
category: 1,
type: accountConstants.allAccountTypes.SingleAccount,
name: '',
icon: iconConstants.defaultAccountIconId,
color: colorConstants.defaultAccountColor,
currency: userStore.currentUserDefaultCurrency,
balance: 0,
comment: '',
visible: true
},
subAccounts: [],
currentAccountIndex: -1,
submitting: false,
resolve: null,
reject: null,
icons: {
more: mdiDotsVertical,
add: mdiCreditCardPlusOutline,
delete: mdiDeleteOutline
}
};
},
computed: {
...mapStores(useSettingsStore, useUserStore, useAccountsStore),
title() {
if (!this.editAccountId) {
return 'Add Account';
} else {
return 'Edit Account';
}
},
saveButtonTitle() {
if (!this.editAccountId) {
return 'Add';
} else {
return 'Save';
}
},
allAccountTypes() {
return accountConstants.allAccountTypes;
},
allAccountCategories() {
return this.$locale.getAllAccountCategories();
},
allAccountTypesArray() {
return this.$locale.getAllAccountTypes();
},
allAccountIcons() {
return iconConstants.allAccountIcons;
},
allAccountColors() {
return colorConstants.allAccountColors;
},
allCurrencies() {
return this.$locale.getAllCurrencies();
},
selectedAccount() {
if (this.currentAccountIndex < 0) {
return this.account;
}
return this.subAccounts[this.currentAccountIndex];
}
},
watch: {
'account.category': function (newValue, oldValue) {
this.chooseSuitableIcon(oldValue, newValue);
},
'account.type': function () {
if (this.subAccounts.length < 1) {
this.addSubAccount();
}
}
},
methods: {
open(options) {
const self = this;
self.showState = true;
self.loading = true;
self.submitting = false;
self.account.id = null;
self.account.category = 1;
self.account.type = accountConstants.allAccountTypes.SingleAccount;
self.account.name = '';
self.account.icon = iconConstants.defaultAccountIconId;
self.account.color = colorConstants.defaultAccountColor;
self.account.currency = self.userStore.currentUserDefaultCurrency;
self.account.balance = 0;
self.account.comment = '';
self.account.visible = true;
self.subAccounts = [];
self.currentAccountIndex = -1;
if (options && options.id) {
if (options.currentAccount) {
self.setAccount(options.currentAccount);
}
self.editAccountId = options.id;
self.accountsStore.getAccount({
accountId: self.editAccountId
}).then(account => {
self.setAccount(account);
self.loading = false;
}).catch(error => {
self.loading = false;
self.showState = false;
if (!error.processed) {
if (self.reject) {
self.reject(error);
}
}
});
} else {
if (isNumber(options.category)) {
self.account.category = options.category;
self.chooseSuitableIcon(1, options.category);
}
self.editAccountId = null;
self.loading = false;
}
return new Promise((resolve, reject) => {
self.resolve = resolve;
self.reject = reject;
});
},
addSubAccount() {
const self = this;
if (self.account.type !== self.allAccountTypes.MultiSubAccounts) {
return;
}
self.subAccounts.push({
category: null,
type: null,
name: '',
icon: self.account.icon,
color: self.account.color,
currency: self.userStore.currentUserDefaultCurrency,
balance: 0,
comment: '',
visible: true
});
},
removeSubAccount(subAccount) {
const self = this;
self.$refs.confirmDialog.open('Are you sure you want to remove this sub account?').then(() => {
for (let i = 0; i < self.subAccounts.length; i++) {
if (self.subAccounts[i] === subAccount) {
self.subAccounts.splice(i, 1);
if (self.currentAccountIndex >= self.subAccounts.length) {
self.currentAccountIndex = self.subAccounts.length - 1;
}
}
}
});
},
save() {
const self = this;
let problemMessage = self.getInputEmptyProblemMessage(self.account, false);
if (!problemMessage && self.account.type === self.allAccountTypes.MultiSubAccounts) {
for (let i = 0; i < self.subAccounts.length; i++) {
problemMessage = self.getInputEmptyProblemMessage(self.subAccounts[i], true);
if (problemMessage) {
break;
}
}
}
if (problemMessage) {
self.$refs.snackbar.showMessage(problemMessage);
return;
}
self.submitting = true;
const subAccounts = [];
if (self.account.type === self.allAccountTypes.MultiSubAccounts) {
for (let i = 0; i < self.subAccounts.length; i++) {
const subAccount = self.subAccounts[i];
const submitAccount = {
category: self.account.category,
type: self.allAccountTypes.SingleAccount,
name: subAccount.name,
icon: subAccount.icon,
color: subAccount.color,
currency: subAccount.currency,
balance: subAccount.balance * 100,
comment: subAccount.comment
};
if (self.editAccountId) {
submitAccount.id = subAccount.id;
submitAccount.hidden = !subAccount.visible;
}
subAccounts.push(submitAccount);
}
}
const submitAccount = {
category: self.account.category,
type: self.account.type,
name: self.account.name,
icon: self.account.icon,
color: self.account.color,
currency: self.account.type === self.allAccountTypes.SingleAccount ? self.account.currency : currencyConstants.parentAccountCurrencyPlaceholder,
balance: self.account.type === self.allAccountTypes.SingleAccount ? self.account.balance * 100 : 0,
comment: self.account.comment,
subAccounts: self.account.type === self.allAccountTypes.SingleAccount ? null : subAccounts,
};
if (self.editAccountId) {
submitAccount.id = self.account.id;
submitAccount.hidden = !self.account.visible;
}
self.accountsStore.saveAccount({
account: submitAccount
}).then(() => {
self.submitting = false;
let message = 'You have saved this account';
if (!self.editAccountId) {
message = 'You have added a new account';
}
if (self.resolve) {
self.resolve({
message: message
});
}
self.showState = false;
}).catch(error => {
self.submitting = false;
if (!error.processed) {
self.$refs.snackbar.showError(error);
}
});
},
cancel() {
if (this.reject) {
this.reject();
}
this.showState = false;
},
chooseSuitableIcon(oldCategory, newCategory) {
for (let i = 0; i < this.allAccountCategories.length; i++) {
if (this.allAccountCategories[i].id === oldCategory) {
if (this.account.icon !== this.allAccountCategories[i].defaultAccountIconId) {
return;
} else {
break;
}
}
}
for (let i = 0; i < this.allAccountCategories.length; i++) {
if (this.allAccountCategories[i].id === newCategory) {
this.account.icon = this.allAccountCategories[i].defaultAccountIconId;
}
}
},
isInputEmpty() {
const isAccountEmpty = !!this.getInputEmptyProblemMessage(this.account, false);
if (isAccountEmpty) {
return true;
}
if (this.account.type === this.allAccountTypes.MultiSubAccounts) {
for (let i = 0; i < this.subAccounts.length; i++) {
const isSubAccountEmpty = !!this.getInputEmptyProblemMessage(this.subAccounts[i], true);
if (isSubAccountEmpty) {
return true;
}
}
}
return false;
},
getInputEmptyProblemMessage(account, isSubAccount) {
if (!isSubAccount && !account.category) {
return 'Account category cannot be empty';
} else if (!isSubAccount && !account.type) {
return 'Account type cannot be empty';
} else if (!account.name) {
return 'Account name cannot be empty';
} else if (account.type === this.allAccountTypes.SingleAccount && !account.currency) {
return 'Account currency cannot be empty';
} else {
return null;
}
},
setAccount(account) {
this.account.id = account.id;
this.account.category = account.category;
this.account.type = account.type;
this.account.name = account.name;
this.account.icon = account.icon;
this.account.color = account.color;
this.account.currency = account.currency;
this.account.balance = account.balance / 100;
this.account.comment = account.comment;
this.account.visible = !account.hidden;
this.subAccounts = [];
if (account.subAccounts && account.subAccounts.length > 0) {
for (let i = 0; i < account.subAccounts.length; i++) {
const subAccount = account.subAccounts[i];
this.subAccounts.push({
id: subAccount.id,
category: subAccount.category,
type: subAccount.type,
name: subAccount.name,
icon: subAccount.icon,
color: subAccount.color,
currency: subAccount.currency,
balance: subAccount.balance / 100,
comment: subAccount.comment,
visible: !subAccount.hidden
});
}
}
}
}
}
</script>