From f0470b321bf06a06e88854c36f1944ed47e1777a Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sun, 20 Dec 2020 17:11:35 +0800 Subject: [PATCH] adjust account edit page ui --- .../mobile/ListItemSelectionSheet.vue | 3 +- src/locales/en.js | 2 + src/locales/zh_Hans.js | 2 + src/views/mobile/accounts/Edit.vue | 240 ++++++++++++------ 4 files changed, 165 insertions(+), 82 deletions(-) diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue index ab2f36be..ff1a4405 100644 --- a/src/components/mobile/ListItemSelectionSheet.vue +++ b/src/components/mobile/ListItemSelectionSheet.vue @@ -12,7 +12,7 @@ v-for="(item, index) in items" :key="valueType === 'index' ? index : (keyField ? item[keyField] : item)" :value="valueType === 'index' ? index : (valueField ? item[valueField] : item)" - :title="titleField ? item[titleField] : item" + :title="titleField ? (titleI18n ? $t(item[titleField]) : item[titleField]) : (titleI18n ? $t(item) : item)" @click="onItemClicked(item, index)"> @@ -30,6 +30,7 @@ export default { 'keyField', // for value type == item 'valueField', // for value type == item 'titleField', + 'titleI18n', 'iconField', 'iconType', 'colorField', diff --git a/src/locales/en.js b/src/locales/en.js index df66d4fb..11f306b6 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -393,6 +393,7 @@ export default { 'Visible': 'Visible', 'Version': 'Version', 'Edit': 'Edit', + 'Remove': 'Remove', 'Delete': 'Delete', 'Search': 'Search', 'Sort': 'Sort', @@ -482,6 +483,7 @@ export default { 'Your sub account description (optional)': 'Your sub account description (optional)', 'Add Sub Account': 'Add Sub Account', 'Remove Sub Account': 'Remove Sub Account', + 'Are you sure you want to remove this sub account?': 'Are you sure you want to remove this sub account?', 'Account category cannot be empty': 'Account category cannot be empty', 'Account type cannot be empty': 'Account type cannot be empty', 'Account name cannot be empty': 'Account name cannot be empty', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index c9033d77..691399e5 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -393,6 +393,7 @@ export default { 'Visible': '可见', 'Version': '版本', 'Edit': '编辑', + 'Remove': '移除', 'Delete': '删除', 'Search': '搜索', 'Sort': '排序', @@ -482,6 +483,7 @@ export default { 'Your sub account description (optional)': '你的子账户描述 (可选)', 'Add Sub Account': '添加子账户', 'Remove Sub Account': '删除子账户', + 'Are you sure you want to remove this sub account?': '您确定要移除该子账户？', 'Account category cannot be empty': '账户分类不能为空', 'Account type cannot be empty': '账户类型不能为空', 'Account name cannot be empty': '账户名称不能为空', diff --git a/src/views/mobile/accounts/Edit.vue b/src/views/mobile/accounts/Edit.vue index 1afc2378..f5660555 100644 --- a/src/views/mobile/accounts/Edit.vue +++ b/src/views/mobile/accounts/Edit.vue @@ -4,6 +4,7 @@ + @@ -11,8 +12,8 @@ - - + + @@ -20,27 +21,37 @@ - - - + + + - - - - + + + @@ -48,21 +59,22 @@ - - - - - - + + + + + + - + - - @@ -227,7 +242,7 @@ @@ -238,25 +253,39 @@ > + + + + - - - - - - - + + + + {{ $t('Add Sub Account') }} + + + {{ $t('Cancel') }} + + + + + + {{ $t('Are you sure you want to remove this sub account?') }} + {{ $t('Remove') }} + + + {{ $t('Cancel') }} + + @@ -269,8 +298,8 @@ export default { editAccountId: null, loading: false, account: { - category: '1', - type: self.$constants.account.allAccountTypes.SingleAccount.toString(), + category: 1, + type: self.$constants.account.allAccountTypes.SingleAccount, name: '', icon: self.$constants.icons.defaultAccountIconId, color: self.$constants.colors.defaultAccountColor, @@ -283,7 +312,12 @@ export default { showBalanceSheet: false }, subAccounts: [], - submitting: false + subAccountToDelete: null, + submitting: false, + showAccountCategorySheet: false, + showAccountTypeSheet: false, + showMoreActionSheet: false, + showDeleteActionSheet: false }; }, computed: { @@ -314,6 +348,16 @@ export default { return this.$locale.getAllCurrencies(); } }, + watch: { + 'account.category': function (newValue, oldValue) { + this.chooseSuitableIcon(oldValue, newValue); + }, + 'account.type': function () { + if (this.subAccounts.length < 1) { + this.addSubAccount(); + } + } + }, created() { const self = this; const query = self.$f7route.query; @@ -336,8 +380,8 @@ export default { const account = data.result; self.account.id = account.id; - self.account.category = account.category.toString(); - self.account.type = account.type.toString(); + self.account.category = account.category; + self.account.type = account.type; self.account.name = account.name; self.account.icon = account.icon; self.account.color = account.color; @@ -352,8 +396,8 @@ export default { self.subAccounts.push({ id: subAccount.id, - category: subAccount.category.toString(), - type: subAccount.type.toString(), + category: subAccount.category, + type: subAccount.type, name: subAccount.name, icon: subAccount.icon, color: subAccount.color, @@ -388,7 +432,7 @@ export default { addSubAccount() { const self = this; - if (self.account.type !== self.$constants.account.allAccountTypes.MultiSubAccounts.toString()) { + if (self.account.type !== self.$constants.account.allAccountTypes.MultiSubAccounts) { return; } @@ -408,6 +452,20 @@ export default { }); }, removeSubAccount(subAccount) { + if (!subAccount) { + this.$alert('An error has occurred'); + return; + } + + if (!this.showDeleteActionSheet) { + this.subAccountToDelete = subAccount; + this.showDeleteActionSheet = true; + return; + } + + this.showDeleteActionSheet = false; + this.subAccountToDelete = null; + for (let i = 0; i < this.subAccounts.length; i++) { if (this.subAccounts[i] === subAccount) { this.subAccounts.splice(i, 1); @@ -420,7 +478,7 @@ export default { let problemMessage = self.getInputEmptyProblemMessage(self.account, false); - if (!problemMessage && self.account.type === self.$constants.account.allAccountTypes.MultiSubAccounts.toString()) { + if (!problemMessage && self.account.type === self.$constants.account.allAccountTypes.MultiSubAccounts) { for (let i = 0; i < self.subAccounts.length; i++) { problemMessage = self.getInputEmptyProblemMessage(self.subAccounts[i], true); @@ -440,11 +498,11 @@ export default { const subAccounts = []; - if (self.account.type === self.$constants.account.allAccountTypes.MultiSubAccounts.toString()) { + if (self.account.type === self.$constants.account.allAccountTypes.MultiSubAccounts) { for (let i = 0; i < self.subAccounts.length; i++) { const subAccount = self.subAccounts[i]; const submitAccount = { - category: parseInt(self.account.category), + category: self.account.category, type: self.$constants.account.allAccountTypes.SingleAccount, name: subAccount.name, icon: subAccount.icon, @@ -464,15 +522,15 @@ export default { } const submitAccount = { - category: parseInt(self.account.category), - type: parseInt(self.account.type), + 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.$constants.account.allAccountTypes.SingleAccount.toString() ? self.account.currency : self.$constants.currency.parentAccountCurrencyPlaceholder, - balance: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? self.account.balance : 0, + currency: self.account.type === self.$constants.account.allAccountTypes.SingleAccount ? self.account.currency : self.$constants.currency.parentAccountCurrencyPlaceholder, + balance: self.account.type === self.$constants.account.allAccountTypes.SingleAccount ? self.account.balance : 0, comment: self.account.comment, - subAccounts: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? null : subAccounts, + subAccounts: self.account.type === self.$constants.account.allAccountTypes.SingleAccount ? null : subAccounts, }; let promise = null; @@ -527,7 +585,7 @@ export default { const allCategories = this.$constants.account.allCategories; for (let i = 0; i < allCategories.length; i++) { - if (allCategories[i].id.toString() === oldCategory) { + if (allCategories[i].id === oldCategory) { if (this.account.icon !== allCategories[i].defaultAccountIconId) { return; } else { @@ -537,7 +595,7 @@ export default { } for (let i = 0; i < allCategories.length; i++) { - if (allCategories[i].id.toString() === newCategory) { + if (allCategories[i].id === newCategory) { this.account.icon = allCategories[i].defaultAccountIconId; } } @@ -549,7 +607,7 @@ export default { return true; } - if (this.account.type === this.$constants.account.allAccountTypes.MultiSubAccounts.toString()) { + if (this.account.type === this.$constants.account.allAccountTypes.MultiSubAccounts) { for (let i = 0; i < this.subAccounts.length; i++) { const isSubAccountEmpty = !!this.getInputEmptyProblemMessage(this.subAccounts[i], true); @@ -568,12 +626,32 @@ export default { return 'Account type cannot be empty'; } else if (!account.name) { return 'Account name cannot be empty'; - } else if (account.type === this.$constants.account.allAccountTypes.SingleAccount.toString() && !account.currency) { + } else if (account.type === this.$constants.account.allAccountTypes.SingleAccount && !account.currency) { return 'Account currency cannot be empty'; } else { return null; } } + }, + filters: { + accountCategoryName(categoryId, allCategories) { + for (let i = 0; i < allCategories.length; i++) { + if (allCategories[i].id === categoryId) { + return allCategories[i].name; + } + } + + return ''; + }, + accountTypeName(type) { + if (type === 1) { + return 'Single Account'; + } else if (type === 2) { + return 'Multi Sub Accounts'; + } + + return ''; + } } }