improve ui

src/MobileApp.vue

@@ -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 {
+.nested-list-item.has-child-list-item > .swipeout-content > .item-content > .item-inner,
-    padding-right: 0;
+.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

@@ -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

@@ -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

@@ -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

@@ -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"
+                  :key="accountCategory.category"
-                  v-for="accountCategory in allAccountCategories"
+                  v-for="accountCategory in allVisibleCategorizedAccounts"
                   v-else-if="!loading && hasAnyAvailableAccount">
-            <f7-accordion-item :opened="collapseStates[accountCategory.id].opened"
+            <f7-accordion-item :opened="collapseStates[accountCategory.category].opened"
-                               v-show="hasShownAccount(accountCategory)"
+                               @accordion:open="collapseStates[accountCategory.category].opened = true"
-                               @accordion:open="collapseStates[accountCategory.id].opened = true"
+                               @accordion:close="collapseStates[accountCategory.category].opened = false">
-                               @accordion:close="collapseStates[accountCategory.id].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-accordion-content :style="{ height: collapseStates[accountCategory.category].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="categorizedAccounts[accountCategory.id]">
                         <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-for="account in accountCategory.visibleAccounts"
-                                      v-show="!account.hidden"
                                       @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-for="subAccount in accountCategory.visibleSubAccounts[account.id]"
-                                                  v-show="!subAccount.hidden"
                                                   @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() {
+        allVisibleCategorizedAccounts() {
-            return this.$constants.account.allCategories;
+            return this.$utilities.getVisibleCategorizedAccounts(this.$store.state.allCategorizedAccounts);
-        },
-        categorizedAccounts() {
-            return 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

@@ -49,53 +49,53 @@
         </f7-block>
 
         <f7-block class="combination-list-wrapper margin-vertical"
-                  :key="categoryType"
+                  :key="transactionType.type"
-                  v-for="(categories, categoryType) in allTransactionCategories"
+                  v-for="transactionType in allVisibleTransactionCategories"
                   v-else-if="!loading">
-            <f7-accordion-item :opened="collapseStates[categoryType].opened"
+            <f7-accordion-item :opened="collapseStates[transactionType.type].opened"
-                               @accordion:open="collapseStates[categoryType].opened = true"
+                               @accordion:open="collapseStates[transactionType.type].opened = true"
-                               @accordion:close="collapseStates[categoryType].opened = false">
+                               @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>
+                                    <span>{{ getCategoryTypeName(transactionType.type) }}</span>
-                                    <f7-icon class="combination-list-chevron-icon" :f7="collapseStates[categoryType].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
+                                    <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-accordion-content :style="{ height: collapseStates[transactionType.type].opened ? 'auto' : '' }">
-                    <f7-list strong inset dividers accordion-list class="combination-list-content" v-if="!hasAvailableCategory[categoryType]">
+                    <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-for="category in transactionType.visibleCategories"
-                                      v-show="!category.hidden"
                                       @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-for="subCategory in transactionType.visibleSubCategories[category.id]"
-                                                  v-show="!subCategory.hidden"
                                                   @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 () {
+        allVisibleTransactionCategories() {
-            return this.$store.state.allTransactionCategories;
+            return this.$utilities.allVisibleTransactionCategories(this.$store.state.allTransactionCategories);
         },
         hasAnyAvailableCategory() {
-            for (let categoryType in this.allTransactionCategories) {
+            for (let type in this.allVisibleTransactionCategories) {
-                if (!Object.prototype.hasOwnProperty.call(this.allTransactionCategories, categoryType)) {
+                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 (categoryType.visibleCategories && categoryType.visibleCategories.length > 0) {
-                    if (!categories[i].hidden) {
+                    return true;
-                        return true;
-                    }
                 }
             }
 
@@ -178,23 +176,13 @@ export default {
         hasAvailableCategory() {
             const result = {};
 
-            for (let categoryType in this.allTransactionCategories) {
+            for (let type in this.allVisibleTransactionCategories) {
-                if (!Object.prototype.hasOwnProperty.call(this.allTransactionCategories, categoryType)) {
+                if (!Object.prototype.hasOwnProperty.call(this.allVisibleTransactionCategories, type)) {
                     continue;
                 }
 
-                const categories = this.allTransactionCategories[categoryType];
+                const categoryType = this.allVisibleTransactionCategories[type];
-
+                result[type] = categoryType.visibleCategories && categoryType.visibleCategories.length > 0;
-                for (let i = 0; i < categories.length; i++) {
-                    if (!categories[i].hidden) {
-                        result[categoryType] = true;
-                        break;
-                    }
-                }
-
-                if (!result[categoryType]) {
-                    result[categoryType] = false;
-                }
             }
 
             return result;

src/views/mobile/tags/ListPage.vue

@@ -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) {