improve ui
This commit is contained in:
MaysWind
+99
-7
@@ -324,15 +324,36 @@ i.icon.la, i.icon.las, i.icon.lab {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.list.list-dividers li.list-group-title:first-child {
|
||||
.list.list-dividers li.has-child-list-item .item-inner:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--f7-list-item-border-color);
|
||||
display: block !important;
|
||||
z-index: 15;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
|
||||
}
|
||||
|
||||
.list.list-dividers li.list-group-title:first-child,
|
||||
.list.list-dividers li.list-group-title.actual-first-child {
|
||||
border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.list.list-dividers li.list-group-title:first-child:before {
|
||||
.list.list-dividers li.list-group-title:first-child:before,
|
||||
.list.list-dividers li.list-group-title.actual-first-child:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.list.list-dividers li:last-child > .swipeout-content > .item-link > .item-content > .item-inner:after {
|
||||
.list.list-dividers li:last-child > .swipeout-content > .item-content > .item-inner:after,
|
||||
.list.list-dividers li:last-child > .swipeout-content > .item-link > .item-content > .item-inner:after,
|
||||
.list.list-dividers li.actual-last-child > .swipeout-content > .item-content > .item-inner:after,
|
||||
.list.list-dividers li.actual-last-child > .swipeout-content > .item-link > .item-content > .item-inner:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -340,6 +361,45 @@ i.icon.la, i.icon.las, i.icon.lab {
|
||||
border-radius: var(--f7-button-border-radius);
|
||||
}
|
||||
|
||||
.list.inset li.swipeout.actual-first-child,
|
||||
.list.inset li.actual-first-child > a {
|
||||
border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.list.inset li.swipeout.actual-last-child,
|
||||
.list.inset li.actual-last-child > a {
|
||||
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
|
||||
}
|
||||
|
||||
.list.inset li.swipeout.actual-first-child.actual-last-child,
|
||||
.list.inset li.actual-first-child.actual-last-child > a {
|
||||
border-radius: var(--f7-list-inset-border-radius);
|
||||
}
|
||||
|
||||
.list.inset.list-has-group-title li.swipeout.actual-first-child,
|
||||
.list.inset.list-has-group-title li.actual-first-child > a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list.inset.list-has-group-title li.swipeout:first-child:last-child,
|
||||
.list.inset.list-has-group-title li:first-child:last-child > a,
|
||||
.list.inset.list-has-group-title li.swipeout.actual-first-child.actual-last-child,
|
||||
.list.inset.list-has-group-title li.actual-first-child.actual-last-child > a {
|
||||
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
|
||||
}
|
||||
|
||||
.accordion-item .block-title+.accordion-item-content .list.inset li.swipeout:first-child:not(:last-child),
|
||||
.accordion-item .block-title+.accordion-item-content .list.inset li:first-child:not(:last-child) > a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.accordion-item .block-title+.accordion-item-content .list.inset li.swipeout:first-child:last-child,
|
||||
.accordion-item .block-title+.accordion-item-content .list.inset li:first-child:last-child > a,
|
||||
.accordion-item .block-title+.accordion-item-content .list.inset li.swipeout.actual-last-child:first-child,
|
||||
.accordion-item .block-title+.accordion-item-content .list.inset li.actual-last-child:first-child > a {
|
||||
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
|
||||
}
|
||||
|
||||
.list .item-content .list-item-checked-icon {
|
||||
font-size: 20px;
|
||||
color: var(--f7-radio-active-color, var(--f7-theme-color));
|
||||
@@ -490,8 +550,10 @@ i.icon.la, i.icon.las, i.icon.lab {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nested-list-item .item-inner {
|
||||
padding-right: 0;
|
||||
.nested-list-item.has-child-list-item > .swipeout-content > .item-content > .item-inner,
|
||||
.nested-list-item.has-child-list-item > .swipeout-content > .item-link > .item-content > .item-inner {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.nested-list-item.has-child-list-item .nested-list-item-child .item-inner {
|
||||
@@ -524,13 +586,43 @@ i.icon.la, i.icon.las, i.icon.lab {
|
||||
|
||||
.nested-list-item .nested-list-item-title {
|
||||
align-self: center;
|
||||
margin-left: var(--f7-list-item-media-margin);
|
||||
margin-right: var(--f7-list-item-media-margin);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.nested-list-item:last-child > .swipeout-content > .item-link > .item-content > .item-inner:after {
|
||||
.nested-list-item.has-child-list-item .nested-list-item-title {
|
||||
margin-left: var(--f7-list-item-media-margin);
|
||||
}
|
||||
|
||||
.nested-list-item.has-child-list-item > .swipeout-content > .item-content > .item-inner:after,
|
||||
.nested-list-item.has-child-list-item > .swipeout-content > .item-link > .item-content > .item-inner:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.list.inset li.nested-list-item.has-child-list-item .item-inner li.nested-list-item-child,
|
||||
.list.inset li.nested-list-item.has-child-list-item .item-inner li.nested-list-item-child > a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list.list-dividers li.nested-list-item.has-child-list-item .item-inner .nested-list-item-child .item-inner:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--f7-list-item-border-color);
|
||||
display: block !important;
|
||||
z-index: 15;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
|
||||
}
|
||||
|
||||
.list.list-dividers li.nested-list-item.has-child-list-item:last-child .item-inner .nested-list-item-child:last-child .item-inner:after,
|
||||
.list.list-dividers li.nested-list-item.has-child-list-item.actual-last-child .item-inner .nested-list-item-child.actual-last-child .item-inner:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
@@ -778,6 +778,60 @@ function categroyTypeToTransactionType(categoryType) {
|
||||
}
|
||||
}
|
||||
|
||||
function allVisibleTransactionCategories(allTransactionCategories) {
|
||||
const ret = {};
|
||||
|
||||
for (let key in transactionConstants.allTransactionTypes) {
|
||||
if (!Object.prototype.hasOwnProperty.call(transactionConstants.allTransactionTypes, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const transactionType = transactionConstants.allTransactionTypes[key];
|
||||
|
||||
if (!allTransactionCategories[transactionType]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const allCategories = allTransactionCategories[transactionType];
|
||||
const visibleCategories = [];
|
||||
const allVisibleSubCategories = {};
|
||||
|
||||
for (let j = 0; j < allCategories.length; j++) {
|
||||
const category = allCategories[j];
|
||||
|
||||
if (category.hidden) {
|
||||
continue;
|
||||
}
|
||||
|
||||
visibleCategories.push(category);
|
||||
|
||||
if (category.subCategories) {
|
||||
const visibleSubCategories = [];
|
||||
|
||||
for (let k = 0; k < category.subCategories.length; k++) {
|
||||
const subCategory = category.subCategories[k];
|
||||
|
||||
if (!subCategory.hidden) {
|
||||
visibleSubCategories.push(subCategory);
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleSubCategories.length > 0) {
|
||||
allVisibleSubCategories[category.id] = visibleSubCategories;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ret[transactionType.toString()] = {
|
||||
type: transactionType.toString(),
|
||||
visibleCategories: visibleCategories,
|
||||
visibleSubCategories: allVisibleSubCategories
|
||||
};
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getCategoryInfo(categoryId) {
|
||||
for (let i = 0; i < accountConstants.allCategories.length; i++) {
|
||||
if (accountConstants.allCategories[i].id === categoryId) {
|
||||
@@ -816,6 +870,60 @@ function getCategorizedAccounts(allAccounts) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getVisibleCategorizedAccounts(categorizedAccounts) {
|
||||
const ret = {};
|
||||
|
||||
for (let i = 0; i < accountConstants.allCategories.length; i++) {
|
||||
const accountCategory = accountConstants.allCategories[i];
|
||||
|
||||
if (!categorizedAccounts[accountCategory.id] || !categorizedAccounts[accountCategory.id].accounts) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const allAccounts = categorizedAccounts[accountCategory.id].accounts;
|
||||
const visibleAccounts = [];
|
||||
const allVisibleSubAccounts = {};
|
||||
|
||||
for (let j = 0; j < allAccounts.length; j++) {
|
||||
const account = allAccounts[j];
|
||||
|
||||
if (account.hidden) {
|
||||
continue;
|
||||
}
|
||||
|
||||
visibleAccounts.push(account);
|
||||
|
||||
if (account.type === accountConstants.allAccountTypes.MultiSubAccounts && account.subAccounts) {
|
||||
const visibleSubAccounts = [];
|
||||
|
||||
for (let k = 0; k < account.subAccounts.length; k++) {
|
||||
const subAccount = account.subAccounts[k];
|
||||
|
||||
if (!subAccount.hidden) {
|
||||
visibleSubAccounts.push(subAccount);
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleSubAccounts.length > 0) {
|
||||
allVisibleSubAccounts[account.id] = visibleSubAccounts;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleAccounts.length > 0) {
|
||||
ret[accountCategory.id] = {
|
||||
category: accountCategory.id,
|
||||
name: accountCategory.name,
|
||||
icon: accountCategory.defaultAccountIconId,
|
||||
visibleAccounts: visibleAccounts,
|
||||
visibleSubAccounts: allVisibleSubAccounts
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getAllFilteredAccountsBalance(categorizedAccounts, accountFilter) {
|
||||
const allAccountCategories = accountConstants.allCategories;
|
||||
const ret = [];
|
||||
@@ -961,8 +1069,10 @@ export default {
|
||||
parseDeviceInfo,
|
||||
transactionTypeToCategroyType,
|
||||
categroyTypeToTransactionType,
|
||||
allVisibleTransactionCategories,
|
||||
getCategoryInfo,
|
||||
getCategorizedAccounts,
|
||||
getVisibleCategorizedAccounts,
|
||||
getAllFilteredAccountsBalance,
|
||||
makeButtonCopyToClipboard,
|
||||
changeClipboardObjectText,
|
||||
|
||||
@@ -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,46 +155,34 @@ 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) {
|
||||
if (categoryType.visibleCategories && categoryType.visibleCategories.length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
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