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

src/views/mobile/statistics/AccountFilterSettings.vue

@@ -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 icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="$t(applyText)" @click="save"></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() {

src/views/mobile/statistics/CategoryFilterSettings.vue

@@ -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 icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="$t(applyText)" @click="save"></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() {