change category selection to tree view

src/components/mobile/TreeViewSelectionSheet.vue

@@ -0,0 +1,133 @@
+<template>
+    <f7-sheet :class="{ 'tree-view-selection-huge-sheet': hugeTreeViewItems }" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-toolbar>
+            <div class="left"></div>
+            <div class="right">
+                <f7-link sheet-close :text="$t('Done')"></f7-link>
+            </div>
+        </f7-toolbar>
+        <f7-page-content>
+            <f7-treeview>
+                <f7-treeview-item v-for="item in items"
+                                  item-toggle
+                                  :opened="isPrimaryItemHasSecondaryValue(item)"
+                                  :key="primaryKeyField ? item[primaryKeyField] : item"
+                                  :label="primaryTitleField ? (primaryTitleI18n ? $t(item[primaryTitleField]) : item[primaryTitleField]) : (primaryTitleI18n ? $t(item) : item)">
+                    <f7-icon slot="media"
+                             :icon="item[primaryIconField] | icon(primaryIconType)"
+                             :style="{ color: (primaryColorField && item[primaryColorField] && item[primaryColorField] !== '000000' ? '#' + item[primaryColorField] : 'var(--default-icon-color)') }"
+                             v-if="primaryIconField"></f7-icon>
+
+                    <f7-treeview-item v-for="subItem in item[primarySubItemsField]"
+                                      selectable
+                                      :selected="isSecondarySelected(subItem)"
+                                      :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
+                                      :label="secondaryTitleField ? (secondaryTitleI18n ? $t(subItem[secondaryTitleField]) : subItem[secondaryTitleField]) : (secondaryTitleI18n ? $t(subItem) : subItem)"
+                                      @click="onSecondaryItemClicked(subItem)">
+                        <f7-icon slot="media"
+                                 :icon="subItem[secondaryIconField] | icon(secondaryIconType)"
+                                 :style="{ color: (secondaryColorField && subItem[secondaryColorField] && subItem[secondaryColorField] !== '000000' ? '#' + subItem[secondaryColorField] : 'var(--default-icon-color)') }"
+                                 v-if="secondaryIconField"></f7-icon>
+                    </f7-treeview-item>
+                </f7-treeview-item>
+            </f7-treeview>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'value',
+        'primaryKeyField',
+        'primaryValueField',
+        'primaryTitleField',
+        'primaryTitleI18n',
+        'primaryIconField',
+        'primaryIconType',
+        'primaryColorField',
+        'primarySubItemsField',
+        'secondaryKeyField',
+        'secondaryValueField',
+        'secondaryTitleField',
+        'secondaryTitleI18n',
+        'secondaryIconField',
+        'secondaryIconType',
+        'secondaryColorField',
+        'items',
+        'show'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            currentValue: self.value
+        }
+    },
+    computed: {
+        hugeTreeViewItems() {
+            if (this.$utilities.isArray(this.items)) {
+                return this.items.length > 10;
+            } else {
+                let count = 0;
+
+                for (let field in this.items) {
+                    if (!Object.prototype.hasOwnProperty.call(this.items, field)) {
+                        continue;
+                    }
+
+                    count++;
+                }
+
+                return count > 10;
+            }
+        }
+    },
+    methods: {
+        onSheetOpen() {
+            this.currentValue = this.value;
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        onSecondaryItemClicked(subItem) {
+            if (this.secondaryValueField) {
+                this.currentValue = subItem[this.secondaryValueField];
+            } else {
+                this.currentValue = subItem;
+            }
+
+            this.$emit('input', this.currentValue);
+            this.$emit('update:show', false);
+        },
+        isPrimaryItemHasSecondaryValue(primaryItem) {
+            for (let i = 0; i < primaryItem[this.primarySubItemsField].length; i++) {
+                const secondaryItem = primaryItem[this.primarySubItemsField][i];
+
+                if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === this.currentValue) {
+                    return true;
+                } else if (!this.secondaryValueField && secondaryItem === this.currentValue) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
+        isSecondarySelected(subItem) {
+            if (this.secondaryValueField) {
+                return this.currentValue === subItem[this.secondaryValueField];
+            } else {
+                return this.currentValue === subItem;
+            }
+        }
+    }
+}
+</script>
+
+<style>
+@media (min-height: 630px) {
+    .tree-view-selection-huge-sheet {
+        height: 400px;
+    }
+}
+</style>

src/mobile-main.js

@@ -43,6 +43,7 @@ import PasscodeInputSheet from "./components/mobile/PasscodeInputSheet.vue";
 import PinCodeInputSheet from "./components/mobile/PinCodeInputSheet.vue";
 import ListItemSelectionSheet from "./components/mobile/ListItemSelectionSheet.vue";
 import TwoColumnListItemSelectionSheet from "./components/mobile/TwoColumnListItemSelectionSheet.vue";
+import TreeViewSelectionSheet from "./components/mobile/TreeViewSelectionSheet.vue";
 import IconSelectionSheet from "./components/mobile/IconSelectionSheet.vue";
 import ColorSelectionSheet from "./components/mobile/ColorSelectionSheet.vue";
 import InformationSheet from "./components/mobile/InformationSheet.vue";
@@ -59,6 +60,7 @@ Vue.component('PasscodeInputSheet', PasscodeInputSheet);
 Vue.component('PinCodeInputSheet', PinCodeInputSheet);
 Vue.component('ListItemSelectionSheet', ListItemSelectionSheet);
 Vue.component('TwoColumnListItemSelectionSheet', TwoColumnListItemSelectionSheet);
+Vue.component('TreeViewSelectionSheet', TreeViewSelectionSheet);
 Vue.component('IconSelectionSheet', IconSelectionSheet);
 Vue.component('ColorSelectionSheet', ColorSelectionSheet);
 Vue.component('InformationSheet', InformationSheet);

src/views/mobile/transactions/Edit.vue

@@ -80,15 +80,15 @@
                             <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
                             <span>{{ transaction.expenseCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Expense]) }}</span>
                         </div>
-                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="id" primary-title-field="name"
+                        <tree-view-selection-sheet primary-key-field="id" primary-value-field="id" primary-title-field="name"
-                                                              primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
+                                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
-                                                              primary-sub-items-field="subCategories"
+                                                   primary-sub-items-field="subCategories"
-                                                              secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
-                                                              secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
-                                                              :items="allCategories[$constants.category.allCategoryTypes.Expense]"
+                                                   :items="allCategories[$constants.category.allCategoryTypes.Expense]"
-                                                              :show.sync="transaction.showCategorySheet"
+                                                   :show.sync="transaction.showCategorySheet"
-                                                              v-model="transaction.expenseCategory">
+                                                   v-model="transaction.expenseCategory">
-                        </two-column-list-item-selection-sheet>
+                        </tree-view-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item
@@ -105,15 +105,15 @@
                             <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
                             <span>{{ transaction.incomeCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Income]) }}</span>
                         </div>
-                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="id" primary-title-field="name"
+                        <tree-view-selection-sheet primary-key-field="id" primary-value-field="id" primary-title-field="name"
-                                                              primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
+                                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
-                                                              primary-sub-items-field="subCategories"
+                                                   primary-sub-items-field="subCategories"
-                                                              secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
-                                                              secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
-                                                              :items="allCategories[$constants.category.allCategoryTypes.Income]"
+                                                   :items="allCategories[$constants.category.allCategoryTypes.Income]"
-                                                              :show.sync="transaction.showCategorySheet"
+                                                   :show.sync="transaction.showCategorySheet"
-                                                              v-model="transaction.incomeCategory">
+                                                   v-model="transaction.incomeCategory">
-                        </two-column-list-item-selection-sheet>
+                        </tree-view-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item
@@ -130,15 +130,15 @@
                             <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
                             <span>{{ transaction.transferCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Transfer]) }}</span>
                         </div>
-                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="id" primary-title-field="name"
+                        <tree-view-selection-sheet primary-key-field="id" primary-value-field="id" primary-title-field="name"
-                                                              primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
+                                                   primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
-                                                              primary-sub-items-field="subCategories"
+                                                   primary-sub-items-field="subCategories"
-                                                              secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                   secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
-                                                              secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                                   secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
-                                                              :items="allCategories[$constants.category.allCategoryTypes.Transfer]"
+                                                   :items="allCategories[$constants.category.allCategoryTypes.Transfer]"
-                                                              :show.sync="transaction.showCategorySheet"
+                                                   :show.sync="transaction.showCategorySheet"
-                                                              v-model="transaction.transferCategory">
+                                                   v-model="transaction.transferCategory">
-                        </two-column-list-item-selection-sheet>
+                        </tree-view-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item