add add/edit account dialog
This commit is contained in:
MaysWind
@@ -1,17 +1,34 @@
|
||||
<template>
|
||||
<v-text-field type="number" :class="extraClass" :density="density" :disabled="disabled"
|
||||
<v-text-field type="number" :class="extraClass"
|
||||
:density="density" :disabled="disabled"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:persistent-placeholder="persistentPlaceholder"
|
||||
:rules="enableRules ? rules : []" v-model="value"
|
||||
@keydown="onKeyUpDown" @keyup="onKeyUpDown"
|
||||
></v-text-field>
|
||||
@keydown="onKeyUpDown" @keyup="onKeyUpDown">
|
||||
<template #prepend-inner v-if="currency && prependText">
|
||||
<div style="margin-top: 2px">{{ prependText }}</div>
|
||||
</template>
|
||||
<template #append-inner v-if="currency && appendText">
|
||||
<div class="text-no-wrap">{{ appendText }}</div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.js';
|
||||
|
||||
import transactionConstants from '@/consts/transaction.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'class',
|
||||
'density',
|
||||
'currency',
|
||||
'label',
|
||||
'placeholder',
|
||||
'persistentPlaceholder',
|
||||
'disabled',
|
||||
'enableRules',
|
||||
'modelValue'
|
||||
@@ -40,6 +57,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useSettingsStore),
|
||||
value: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
@@ -50,6 +68,32 @@ export default {
|
||||
},
|
||||
extraClass() {
|
||||
return this.class;
|
||||
},
|
||||
prependText() {
|
||||
if (!this.currency) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const texts = this.getDisplayCurrencyPrependAndAppendText();
|
||||
|
||||
if (!texts) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return texts.prependText;
|
||||
},
|
||||
appendText() {
|
||||
if (!this.currency) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const texts = this.getDisplayCurrencyPrependAndAppendText();
|
||||
|
||||
if (!texts) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return texts.appendText;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -95,6 +139,9 @@ export default {
|
||||
} catch (e) {
|
||||
e.target.value = 0;
|
||||
}
|
||||
},
|
||||
getDisplayCurrencyPrependAndAppendText() {
|
||||
return this.$locale.getDisplayCurrencyPrependAndAppendText(this.currency, this.settingsStore.appSettings.currencyDisplayMode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -167,6 +167,35 @@ export function limitText(value, maxLength) {
|
||||
return value.substring(0, maxLength - 3) + '...';
|
||||
}
|
||||
|
||||
export function getTextBefore(fullText, text) {
|
||||
if (!text) {
|
||||
return fullText;
|
||||
}
|
||||
|
||||
const index = fullText.indexOf(text);
|
||||
|
||||
if (index >= 0) {
|
||||
return fullText.substring(0, index);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
export function getTextAfter(fullText, text) {
|
||||
if (!text) {
|
||||
return fullText;
|
||||
}
|
||||
|
||||
let index = fullText.indexOf(text);
|
||||
|
||||
if (index >= 0) {
|
||||
index += text.length;
|
||||
return fullText.substring(index);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
export function base64encode(arrayBuffer) {
|
||||
if (!arrayBuffer || arrayBuffer.length === 0) {
|
||||
return null;
|
||||
|
||||
@@ -4,12 +4,15 @@ import { defaultLanguage, allLanguages } from '@/locales/index.js';
|
||||
import datetime from '@/consts/datetime.js';
|
||||
import timezone from '@/consts/timezone.js';
|
||||
import currency from '@/consts/currency.js';
|
||||
import account from '@/consts/account.js';
|
||||
import category from '@/consts/category.js';
|
||||
import statistics from '@/consts/statistics.js';
|
||||
|
||||
import {
|
||||
isString,
|
||||
isNumber,
|
||||
getTextBefore,
|
||||
getTextAfter,
|
||||
copyArrayTo
|
||||
} from './common.js';
|
||||
|
||||
@@ -685,6 +688,37 @@ function getDateRangeDisplayName(userStore, dateType, startTime, endTime, transl
|
||||
return `${displayStartTime} ~ ${displayEndTime}`;
|
||||
}
|
||||
|
||||
function getAllAccountCategories(translateFn) {
|
||||
const allAccountCategories = [];
|
||||
|
||||
for (let i = 0; i < account.allCategories.length; i++) {
|
||||
const accountCategory = account.allCategories[i];
|
||||
|
||||
allAccountCategories.push({
|
||||
id: accountCategory.id,
|
||||
displayName: translateFn(accountCategory.name),
|
||||
defaultAccountIconId: accountCategory.defaultAccountIconId
|
||||
});
|
||||
}
|
||||
|
||||
return allAccountCategories;
|
||||
}
|
||||
|
||||
function getAllAccountTypes(translateFn) {
|
||||
const allAccountTypes = [];
|
||||
|
||||
for (let i = 0; i < account.allAccountTypesArray.length; i++) {
|
||||
const accountType = account.allAccountTypesArray[i];
|
||||
|
||||
allAccountTypes.push({
|
||||
id: accountType.id,
|
||||
displayName: translateFn(accountType.name)
|
||||
});
|
||||
}
|
||||
|
||||
return allAccountTypes;
|
||||
}
|
||||
|
||||
function getAllStatisticsChartDataTypes(translateFn) {
|
||||
const allChartDataTypes = [];
|
||||
|
||||
@@ -891,6 +925,37 @@ function getDisplayCurrency(value, currencyCode, options, translateFn) {
|
||||
}
|
||||
}
|
||||
|
||||
function getDisplayCurrencyPrependAndAppendText(currencyCode, currencyDisplayMode, translateFn) {
|
||||
const options = {
|
||||
currencyDisplayMode: currencyDisplayMode,
|
||||
notConvertValue: true
|
||||
};
|
||||
|
||||
const placeholder = '***';
|
||||
const finalText = getDisplayCurrency(placeholder, currencyCode, options, translateFn);
|
||||
|
||||
if (!finalText) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let prependText = getTextBefore(finalText, placeholder);
|
||||
|
||||
if (prependText) {
|
||||
prependText = prependText.trim();
|
||||
}
|
||||
|
||||
let appendText = getTextAfter(finalText, placeholder);
|
||||
|
||||
if (appendText) {
|
||||
appendText = appendText.trim();
|
||||
}
|
||||
|
||||
return {
|
||||
prependText: prependText,
|
||||
appendText: appendText
|
||||
};
|
||||
}
|
||||
|
||||
function joinMultiText(textArray, translateFn) {
|
||||
if (!textArray || !textArray.length) {
|
||||
return '';
|
||||
@@ -1123,6 +1188,8 @@ export function i18nFunctions(i18nGlobal) {
|
||||
getAllDateRanges: (includeCustom) => getAllDateRanges(includeCustom, i18nGlobal.t),
|
||||
getAllRecentMonthDateRanges: (userStore, includeAll, includeCustom) => getAllRecentMonthDateRanges(userStore, includeAll, includeCustom, i18nGlobal.t),
|
||||
getDateRangeDisplayName: (userStore, dateType, startTime, endTime) => getDateRangeDisplayName(userStore, dateType, startTime, endTime, i18nGlobal.t),
|
||||
getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),
|
||||
getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t),
|
||||
getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t),
|
||||
getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t),
|
||||
getAllTransactionEditScopeTypes: () => getAllTransactionEditScopeTypes(i18nGlobal.t),
|
||||
@@ -1130,6 +1197,7 @@ export function i18nFunctions(i18nGlobal) {
|
||||
getAllDisplayExchangeRates: (exchangeRatesData) => getAllDisplayExchangeRates(exchangeRatesData, i18nGlobal.t),
|
||||
getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t),
|
||||
getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, i18nGlobal.t),
|
||||
getDisplayCurrencyPrependAndAppendText: (currencyCode, currencyDisplayMode) => getDisplayCurrencyPrependAndAppendText(currencyCode, currencyDisplayMode, i18nGlobal.t),
|
||||
joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t),
|
||||
setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
|
||||
setTimeZone: (timezone) => setTimeZone(timezone),
|
||||
|
||||
@@ -877,6 +877,7 @@ export default {
|
||||
'Account Type': 'Account Type',
|
||||
'Account Name': 'Account Name',
|
||||
'Your account name': 'Your account name',
|
||||
'Main Account': 'Main Account',
|
||||
'Sub Account': 'Sub Account',
|
||||
'Sub Account Name': 'Sub Account Name',
|
||||
'Your sub account name': 'Your sub account name',
|
||||
|
||||
@@ -877,6 +877,7 @@ export default {
|
||||
'Account Type': '账户类型',
|
||||
'Account Name': '账户名称',
|
||||
'Your account name': '你的账户名称',
|
||||
'Main Account': '主账户',
|
||||
'Sub Account': '子账户',
|
||||
'Sub Account Name': '子账户名称',
|
||||
'Your sub account name': '你的子账户名称',
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user