mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
improve ui
This commit is contained in:
MaysWind
@@ -61,7 +61,7 @@
|
||||
<div :key="accountCategory.id"
|
||||
v-for="accountCategory in allAccountCategories"
|
||||
v-show="(showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true)">
|
||||
<f7-list strong inset dividers sortable class="account-list margin-vertical"
|
||||
<f7-list strong inset dividers sortable class="list-has-group-title account-list margin-vertical"
|
||||
:sortable-enabled="sortable"
|
||||
v-if="categorizedAccounts[accountCategory.id]"
|
||||
@sortable:sort="onSort">
|
||||
@@ -72,8 +72,9 @@
|
||||
</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item swipeout
|
||||
class="nested-list-item"
|
||||
:id="getAccountDomId(account)"
|
||||
:class="{ 'nested-list-item': true, 'has-child-list-item': account.type === $constants.account.allAccountTypes.MultiSubAccounts }"
|
||||
:class="{ 'has-child-list-item': account.type === $constants.account.allAccountTypes.MultiSubAccounts && hasVisibleSubAccount(account), 'actual-first-child': account.id === firstShowingIds.accounts[accountCategory.id], 'actual-last-child': account.id === lastShowingIds.accounts[accountCategory.id] }"
|
||||
:after="$locale.getDisplayCurrency(accountBalance(account), account.currency)"
|
||||
:link="!sortable ? '/transaction/list?accountId=' + account.id : null"
|
||||
:key="account.id"
|
||||
@@ -81,9 +82,18 @@
|
||||
v-show="showHidden || !account.hidden"
|
||||
@taphold="setSortable()"
|
||||
>
|
||||
<template #media v-if="account.type !== $constants.account.allAccountTypes.MultiSubAccounts || !hasVisibleSubAccount(account)">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
</ItemIcon>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"
|
||||
v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts && hasVisibleSubAccount(account)">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
@@ -96,6 +106,7 @@
|
||||
<li v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts">
|
||||
<ul class="no-padding">
|
||||
<f7-list-item class="no-sortable nested-list-item-child"
|
||||
:class="{ 'actual-first-child': subAccount.id === firstShowingIds.subAccounts[account.id], 'actual-last-child': subAccount.id === lastShowingIds.subAccounts[account.id] }"
|
||||
:id="getAccountDomId(subAccount)"
|
||||
:title="subAccount.name" :footer="subAccount.comment" :after="$locale.getDisplayCurrency(accountBalance(subAccount), subAccount.currency)"
|
||||
:link="!sortable ? '/transaction/list?accountId=' + subAccount.id : null"
|
||||
@@ -185,6 +196,86 @@ export default {
|
||||
allAccountCount() {
|
||||
return this.$store.getters.allAvailableAccountsCount;
|
||||
},
|
||||
firstShowingIds() {
|
||||
const ret = {
|
||||
accounts: {},
|
||||
subAccounts: {}
|
||||
};
|
||||
|
||||
for (let category in this.categorizedAccounts) {
|
||||
if (!Object.prototype.hasOwnProperty.call(this.categorizedAccounts, category)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!this.categorizedAccounts[category] || !this.categorizedAccounts[category].accounts) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const accounts = this.categorizedAccounts[category].accounts;
|
||||
|
||||
for (let i = 0; i < accounts.length; i++) {
|
||||
const account = accounts[i];
|
||||
|
||||
if (account.type === this.$constants.account.allAccountTypes.MultiSubAccounts && account.subAccounts) {
|
||||
for (let j = 0; j < account.subAccounts.length; j++) {
|
||||
const subAccount = account.subAccounts[j];
|
||||
|
||||
if (this.showHidden || !subAccount.hidden) {
|
||||
ret.subAccounts[account.id] = subAccount.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.showHidden || !account.hidden) {
|
||||
ret.accounts[category] = account.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
lastShowingIds() {
|
||||
const ret = {
|
||||
accounts: {},
|
||||
subAccounts: {}
|
||||
};
|
||||
|
||||
for (let category in this.categorizedAccounts) {
|
||||
if (!Object.prototype.hasOwnProperty.call(this.categorizedAccounts, category)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!this.categorizedAccounts[category] || !this.categorizedAccounts[category].accounts) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const accounts = this.categorizedAccounts[category].accounts;
|
||||
|
||||
for (let i = accounts.length - 1; i >= 0; i--) {
|
||||
const account = accounts[i];
|
||||
|
||||
if (account.type === this.$constants.account.allAccountTypes.MultiSubAccounts && account.subAccounts) {
|
||||
for (let j = account.subAccounts.length - 1; j >= 0; j--) {
|
||||
const subAccount = account.subAccounts[j];
|
||||
|
||||
if (this.showHidden || !subAccount.hidden) {
|
||||
ret.subAccounts[account.id] = subAccount.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.showHidden || !account.hidden) {
|
||||
ret.accounts[category] = account.id;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
noAvailableAccount() {
|
||||
if (this.showHidden) {
|
||||
return this.$store.getters.allAvailableAccountsCount < 1;
|
||||
@@ -352,6 +443,19 @@ export default {
|
||||
|
||||
return shownCount > 0;
|
||||
},
|
||||
hasVisibleSubAccount(account) {
|
||||
if (!account || account.type !== this.$constants.account.allAccountTypes.MultiSubAccounts || !account.subAccounts) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (let i = 0; i < account.subAccounts.length; i++) {
|
||||
if (this.showHidden || !account.subAccounts[i].hidden) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
toggleShowAccountBalance() {
|
||||
this.showAccountBalance = !this.showAccountBalance;
|
||||
this.$settings.setShowAccountBalance(this.showAccountBalance);
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
v-if="!loading"
|
||||
@sortable:sort="onSort">
|
||||
<f7-list-item swipeout
|
||||
:class="{ 'actual-first-child': category.id === firstShowingId, 'actual-last-child': category.id === lastShowingId }"
|
||||
:id="getCategoryDomId(category)"
|
||||
:title="category.name"
|
||||
:footer="category.comment"
|
||||
@@ -154,6 +155,24 @@ export default {
|
||||
|
||||
return title + ' Categories';
|
||||
},
|
||||
firstShowingId() {
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
if (this.showHidden || !this.categories[i].hidden) {
|
||||
return this.categories[i].id;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
lastShowingId() {
|
||||
for (let i = this.categories.length - 1; i >= 0; i--) {
|
||||
if (this.showHidden || !this.categories[i].hidden) {
|
||||
return this.categories[i].id;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
noAvailableCategory() {
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
if (this.showHidden || !this.categories[i].hidden) {
|
||||
|
||||
@@ -38,57 +38,55 @@
|
||||
</f7-accordion-item>
|
||||
</f7-block>
|
||||
|
||||
<f7-list strong inset dividers accordion-list class="margin-top" v-if="!hasAnyAvailableAccount">
|
||||
<f7-list strong inset dividers accordion-list class="margin-top" v-if="!loading && !hasAnyAvailableAccount">
|
||||
<f7-list-item :title="$t('No available account')"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-block class="combination-list-wrapper margin-vertical"
|
||||
:key="accountCategory.id"
|
||||
v-for="accountCategory in allAccountCategories"
|
||||
:key="accountCategory.category"
|
||||
v-for="accountCategory in allVisibleCategorizedAccounts"
|
||||
v-else-if="!loading && hasAnyAvailableAccount">
|
||||
<f7-accordion-item :opened="collapseStates[accountCategory.id].opened"
|
||||
v-show="hasShownAccount(accountCategory)"
|
||||
@accordion:open="collapseStates[accountCategory.id].opened = true"
|
||||
@accordion:close="collapseStates[accountCategory.id].opened = false">
|
||||
<f7-accordion-item :opened="collapseStates[accountCategory.category].opened"
|
||||
@accordion:open="collapseStates[accountCategory.category].opened = true"
|
||||
@accordion:close="collapseStates[accountCategory.category].opened = false">
|
||||
<f7-block-title>
|
||||
<f7-accordion-toggle>
|
||||
<f7-list strong inset dividers media-list
|
||||
class="combination-list-header"
|
||||
:class="collapseStates[accountCategory.id].opened ? 'combination-list-opened' : 'combination-list-closed'">
|
||||
:class="collapseStates[accountCategory.category].opened ? 'combination-list-opened' : 'combination-list-closed'">
|
||||
<f7-list-item>
|
||||
<template #title>
|
||||
<span>{{ $t(accountCategory.name) }}</span>
|
||||
<f7-icon class="combination-list-chevron-icon" :f7="collapseStates[accountCategory.id].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
|
||||
<f7-icon class="combination-list-chevron-icon" :f7="collapseStates[accountCategory.category].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-accordion-toggle>
|
||||
</f7-block-title>
|
||||
<f7-accordion-content :style="{ height: collapseStates[accountCategory.id].opened ? 'auto' : '' }">
|
||||
<f7-list strong inset dividers accordion-list class="combination-list-content"
|
||||
v-if="categorizedAccounts[accountCategory.id]">
|
||||
<f7-accordion-content :style="{ height: collapseStates[accountCategory.category].opened ? 'auto' : '' }">
|
||||
<f7-list strong inset dividers accordion-list class="combination-list-content">
|
||||
<f7-list-item checkbox
|
||||
:class="{ 'has-child-list-item': account.type === $constants.account.allAccountTypes.MultiSubAccounts && accountCategory.visibleSubAccounts[account.id] }"
|
||||
:title="account.name"
|
||||
:value="account.id"
|
||||
:checked="isAccountOrSubAccountsAllChecked(account, filterAccountIds)"
|
||||
:indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)"
|
||||
:key="account.id"
|
||||
v-for="account in categorizedAccounts[accountCategory.id].accounts"
|
||||
v-show="!account.hidden"
|
||||
v-for="account in accountCategory.visibleAccounts"
|
||||
@change="selectAccountOrSubAccounts">
|
||||
<template #media>
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"></ItemIcon>
|
||||
</template>
|
||||
|
||||
<template #root>
|
||||
<ul v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts" class="padding-left">
|
||||
<ul class="padding-left"
|
||||
v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts && accountCategory.visibleSubAccounts[account.id]">
|
||||
<f7-list-item checkbox
|
||||
:title="subAccount.name"
|
||||
:value="subAccount.id"
|
||||
:checked="isAccountChecked(subAccount, filterAccountIds)"
|
||||
:key="subAccount.id"
|
||||
v-for="subAccount in account.subAccounts"
|
||||
v-show="!subAccount.hidden"
|
||||
v-for="subAccount in accountCategory.visibleSubAccounts[account.id]"
|
||||
@change="selectAccount">
|
||||
<template #media>
|
||||
<ItemIcon icon-type="account" :icon-id="subAccount.icon" :color="subAccount.color"></ItemIcon>
|
||||
@@ -148,11 +146,8 @@ export default {
|
||||
return 'Apply';
|
||||
}
|
||||
},
|
||||
allAccountCategories() {
|
||||
return this.$constants.account.allCategories;
|
||||
},
|
||||
categorizedAccounts() {
|
||||
return this.$store.state.allCategorizedAccounts;
|
||||
allVisibleCategorizedAccounts() {
|
||||
return this.$utilities.getVisibleCategorizedAccounts(this.$store.state.allCategorizedAccounts);
|
||||
},
|
||||
hasAnyAvailableAccount() {
|
||||
return this.$store.getters.allVisibleAccountsCount > 0;
|
||||
@@ -327,23 +322,6 @@ export default {
|
||||
|
||||
return checkedCount > 0 && checkedCount < account.subAccounts.length;
|
||||
},
|
||||
hasShownAccount(accountCategory) {
|
||||
if (!this.categorizedAccounts[accountCategory.id] ||
|
||||
!this.categorizedAccounts[accountCategory.id].accounts ||
|
||||
!this.categorizedAccounts[accountCategory.id].accounts.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.categorizedAccounts[accountCategory.id].accounts.length; i++) {
|
||||
const account = this.categorizedAccounts[accountCategory.id].accounts[i];
|
||||
|
||||
if (!account.hidden) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
getCollapseStates() {
|
||||
const collapseStates = {};
|
||||
|
||||
|
||||
@@ -49,53 +49,53 @@
|
||||
</f7-block>
|
||||
|
||||
<f7-block class="combination-list-wrapper margin-vertical"
|
||||
:key="categoryType"
|
||||
v-for="(categories, categoryType) in allTransactionCategories"
|
||||
:key="transactionType.type"
|
||||
v-for="transactionType in allVisibleTransactionCategories"
|
||||
v-else-if="!loading">
|
||||
<f7-accordion-item :opened="collapseStates[categoryType].opened"
|
||||
@accordion:open="collapseStates[categoryType].opened = true"
|
||||
@accordion:close="collapseStates[categoryType].opened = false">
|
||||
<f7-accordion-item :opened="collapseStates[transactionType.type].opened"
|
||||
@accordion:open="collapseStates[transactionType.type].opened = true"
|
||||
@accordion:close="collapseStates[transactionType.type].opened = false">
|
||||
<f7-block-title>
|
||||
<f7-accordion-toggle>
|
||||
<f7-list strong inset dividers media-list
|
||||
class="combination-list-header"
|
||||
:class="collapseStates[categoryType].opened ? 'combination-list-opened' : 'combination-list-closed'">
|
||||
:class="collapseStates[transactionType.type].opened ? 'combination-list-opened' : 'combination-list-closed'">
|
||||
<f7-list-item>
|
||||
<template #title>
|
||||
<span>{{ getCategoryTypeName(categoryType) }}</span>
|
||||
<f7-icon class="combination-list-chevron-icon" :f7="collapseStates[categoryType].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
|
||||
<span>{{ getCategoryTypeName(transactionType.type) }}</span>
|
||||
<f7-icon class="combination-list-chevron-icon" :f7="collapseStates[transactionType.type].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-accordion-toggle>
|
||||
</f7-block-title>
|
||||
<f7-accordion-content :style="{ height: collapseStates[categoryType].opened ? 'auto' : '' }">
|
||||
<f7-list strong inset dividers accordion-list class="combination-list-content" v-if="!hasAvailableCategory[categoryType]">
|
||||
<f7-accordion-content :style="{ height: collapseStates[transactionType.type].opened ? 'auto' : '' }">
|
||||
<f7-list strong inset dividers accordion-list class="combination-list-content" v-if="!hasAvailableCategory[transactionType.type]">
|
||||
<f7-list-item :title="$t('No available category')"></f7-list-item>
|
||||
</f7-list>
|
||||
<f7-list strong inset dividers accordion-list class="combination-list-content" v-else-if="hasAvailableCategory[categoryType]">
|
||||
<f7-list strong inset dividers accordion-list class="combination-list-content" v-else-if="hasAvailableCategory[transactionType.type]">
|
||||
<f7-list-item checkbox
|
||||
:class="{ 'has-child-list-item': transactionType.visibleSubCategories[category.id] }"
|
||||
:title="category.name"
|
||||
:value="category.id"
|
||||
:checked="isSubCategoriesAllChecked(category, filterCategoryIds)"
|
||||
:indeterminate="isSubCategoriesHasButNotAllChecked(category, filterCategoryIds)"
|
||||
:key="category.id"
|
||||
v-for="category in categories"
|
||||
v-show="!category.hidden"
|
||||
v-for="category in transactionType.visibleCategories"
|
||||
@change="selectSubCategories">
|
||||
<template #media>
|
||||
<ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
|
||||
</template>
|
||||
|
||||
<template #root>
|
||||
<ul v-if="category.subCategories.length" class="padding-left">
|
||||
<ul class="padding-left"
|
||||
v-if="transactionType.visibleSubCategories[category.id]">
|
||||
<f7-list-item checkbox
|
||||
:title="subCategory.name"
|
||||
:value="subCategory.id"
|
||||
:checked="isCategoryChecked(subCategory, filterCategoryIds)"
|
||||
:key="subCategory.id"
|
||||
v-for="subCategory in category.subCategories"
|
||||
v-show="!subCategory.hidden"
|
||||
v-for="subCategory in transactionType.visibleSubCategories[category.id]"
|
||||
@change="selectCategory">
|
||||
<template #media>
|
||||
<ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
|
||||
@@ -155,21 +155,19 @@ export default {
|
||||
return 'Apply';
|
||||
}
|
||||
},
|
||||
allTransactionCategories: function () {
|
||||
return this.$store.state.allTransactionCategories;
|
||||
allVisibleTransactionCategories() {
|
||||
return this.$utilities.allVisibleTransactionCategories(this.$store.state.allTransactionCategories);
|
||||
},
|
||||
hasAnyAvailableCategory() {
|
||||
for (let categoryType in this.allTransactionCategories) {
|
||||
if (!Object.prototype.hasOwnProperty.call(this.allTransactionCategories, categoryType)) {
|
||||
for (let type in this.allVisibleTransactionCategories) {
|
||||
if (!Object.prototype.hasOwnProperty.call(this.allVisibleTransactionCategories, type)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const categories = this.allTransactionCategories[categoryType];
|
||||
const categoryType = this.allVisibleTransactionCategories[type];
|
||||
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
if (!categories[i].hidden) {
|
||||
return true;
|
||||
}
|
||||
if (categoryType.visibleCategories && categoryType.visibleCategories.length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,23 +176,13 @@ export default {
|
||||
hasAvailableCategory() {
|
||||
const result = {};
|
||||
|
||||
for (let categoryType in this.allTransactionCategories) {
|
||||
if (!Object.prototype.hasOwnProperty.call(this.allTransactionCategories, categoryType)) {
|
||||
for (let type in this.allVisibleTransactionCategories) {
|
||||
if (!Object.prototype.hasOwnProperty.call(this.allVisibleTransactionCategories, type)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const categories = this.allTransactionCategories[categoryType];
|
||||
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
if (!categories[i].hidden) {
|
||||
result[categoryType] = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!result[categoryType]) {
|
||||
result[categoryType] = false;
|
||||
}
|
||||
const categoryType = this.allVisibleTransactionCategories[type];
|
||||
result[type] = categoryType.visibleCategories && categoryType.visibleCategories.length > 0;
|
||||
}
|
||||
|
||||
return result;
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
:sortable-enabled="sortable" @sortable:sort="onSort"
|
||||
v-if="!loading">
|
||||
<f7-list-item swipeout
|
||||
:class="{ 'actual-first-child': tag.id === firstShowingId, 'actual-last-child': tag.id === lastShowingId }"
|
||||
:id="getTagDomId(tag)"
|
||||
:key="tag.id"
|
||||
v-for="tag in tags"
|
||||
@@ -170,6 +171,24 @@ export default {
|
||||
tags() {
|
||||
return this.$store.state.allTransactionTags;
|
||||
},
|
||||
firstShowingId() {
|
||||
for (let i = 0; i < this.tags.length; i++) {
|
||||
if (this.showHidden || !this.tags[i].hidden) {
|
||||
return this.tags[i].id;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
lastShowingId() {
|
||||
for (let i = this.tags.length - 1; i >= 0; i--) {
|
||||
if (this.showHidden || !this.tags[i].hidden) {
|
||||
return this.tags[i].id;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
noAvailableTag() {
|
||||
for (let i = 0; i < this.tags.length; i++) {
|
||||
if (this.showHidden || !this.tags[i].hidden) {
|
||||
|
||||
Reference in New Issue
Block a user