show no available category / account in transaction statistics filter page when there are no available category or account

This commit is contained in:
MaysWind
2023-04-22 16:08:49 +08:00
parent 4fb115fcbc
commit bcaf3a246c
2 changed files with 57 additions and 6 deletions
@@ -4,8 +4,8 @@
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t(title)"></f7-nav-title>
<f7-nav-right>
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="$t(applyText)" @click="save"></f7-link>
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -38,10 +38,14 @@
</f7-accordion-item>
</f7-block>
<f7-list strong inset dividers accordion-list class="margin-top" v-if="!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"
v-else-if="!loading">
v-else-if="!loading && hasAnyAvailableAccount">
<f7-accordion-item :opened="collapseStates[accountCategory.id].opened"
v-show="hasShownAccount(accountCategory)"
@accordion:open="collapseStates[accountCategory.id].opened = true"
@@ -149,6 +153,9 @@ export default {
},
categorizedAccounts() {
return this.$store.state.allCategorizedAccounts;
},
hasAnyAvailableAccount() {
return this.$store.getters.allVisibleAccountsCount > 0;
}
},
created() {
@@ -4,8 +4,8 @@
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t(title)"></f7-nav-title>
<f7-nav-right>
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="$t(applyText)" @click="save"></f7-link>
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -70,7 +70,10 @@
</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">
<f7-list strong inset dividers accordion-list class="combination-list-content" v-if="!hasAvailableCategory[categoryType]">
<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-item checkbox
:title="category.name"
:value="category.id"
@@ -154,6 +157,47 @@ export default {
},
allTransactionCategories: function () {
return this.$store.state.allTransactionCategories;
},
hasAnyAvailableCategory() {
for (let categoryType in this.allTransactionCategories) {
if (!Object.prototype.hasOwnProperty.call(this.allTransactionCategories, categoryType)) {
continue;
}
const categories = this.allTransactionCategories[categoryType];
for (let i = 0; i < categories.length; i++) {
if (!categories[i].hidden) {
return true;
}
}
}
return false;
},
hasAvailableCategory() {
const result = {};
for (let categoryType in this.allTransactionCategories) {
if (!Object.prototype.hasOwnProperty.call(this.allTransactionCategories, categoryType)) {
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;
}
}
return result;
}
},
created() {