zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
MaysWind
2023-06-03 20:11:15 +08:00
parent 0c3b56e44a
commit 73d271b8bc
7 changed files with 398 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/MobileApp.vue
+99 -7
View File
@@ -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;
}
src/lib/utils.js
+110
View File
@@ -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,
src/views/mobile/accounts/ListPage.vue
+107 -3
View File
@@ -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);
src/views/mobile/categories/ListPage.vue
+19
View File
@@ -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) {
src/views/mobile/statistics/AccountFilterSettingsPage.vue
+17 -39
View File
@@ -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 = {};
src/views/mobile/statistics/CategoryFilterSettingsPage.vue
+27 -39
View File
@@ -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;
src/views/mobile/tags/ListPage.vue
+19
View File
@@ -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) {