transaction edit dialog supports transaction category

src/components/desktop/TwoColumnSelect.vue

@@ -0,0 +1,221 @@
+<template>
+    <v-select
+        persistent-placeholder
+        :readonly="readonly"
+        :disabled="disabled"
+        :label="label"
+        :menu-props="{ 'content-class': 'two-column-select-menu' }"
+        v-model="currentSecondaryValue"
+        @update:menu="onMenuStateChanged"
+    >
+        <template #selection>
+            <div class="d-flex align-center text-truncate cursor-pointer">
+                <span class="text-truncate" v-if="showPrimaryName">{{ primaryItemDisplayName }}</span>
+                <v-icon class="disabled" :icon="icons.chevronRight" size="23" v-if="showPrimaryName" />
+                <span class="text-truncate">{{ secondaryItemDisplayName }}</span>
+            </div>
+        </template>
+
+        <template #no-data>
+            <div ref="dropdownMenu" class="two-column-list-container">
+                <div class="primary-list-container">
+                    <v-list>
+                        <v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
+                                     :title="$tIf(item[primaryTitleField], primaryTitleI18n)"
+                                     :key="primaryKeyField ? item[primaryKeyField] : item"
+                                     v-for="item in items"
+                                     @click="onPrimaryItemClicked(item)">
+                            <template #prepend>
+                                <ItemIcon class="mr-2" :icon-type="primaryIconType"
+                                          :icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
+                            </template>
+                        </v-list-item>
+                    </v-list>
+                </div>
+                <div class="secondary-list-container">
+                    <v-list>
+                        <v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
+                                     :title="$tIf(subItem[secondaryTitleField], secondaryTitleI18n)"
+                                     :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
+                                     v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
+                                     @click="onSecondaryItemClicked(subItem)">
+                            <template #prepend>
+                                <ItemIcon class="mr-2" :icon-type="secondaryIconType"
+                                          :icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
+                            </template>
+                        </v-list-item>
+                    </v-list>
+                </div>
+            </div>
+        </template>
+    </v-select>
+</template>
+
+<script>
+import {
+    getFirstItem,
+    getItemByKeyValue,
+    getNameByKeyValue,
+    getPrimaryValueBySecondaryValue
+} from '@/lib/common.js';
+import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
+
+import {
+    mdiChevronRight
+} from '@mdi/js';
+
+export default {
+    props: [
+        'modelValue',
+        'disabled',
+        'readonly',
+        'label',
+        'showPrimaryName',
+        'primaryKeyField',
+        'primaryValueField',
+        'primaryTitleField',
+        'primaryTitleI18n',
+        'primaryFooterField',
+        'primaryFooterI18n',
+        'primaryIconField',
+        'primaryIconType',
+        'primaryColorField',
+        'primarySubItemsField',
+        'secondaryKeyField',
+        'secondaryValueField',
+        'secondaryTitleField',
+        'secondaryTitleI18n',
+        'secondaryFooterField',
+        'secondaryFooterI18n',
+        'secondaryIconField',
+        'secondaryIconType',
+        'secondaryColorField',
+        'items'
+    ],
+    emits: [
+        'update:modelValue'
+    ],
+    data() {
+        return {
+            icons: {
+                chevronRight: mdiChevronRight
+            }
+        }
+    },
+    computed: {
+        currentPrimaryValue: {
+            get: function () {
+                return this.getPrimaryValueBySecondaryValue(this.modelValue);
+            },
+            set: function (value) {
+                const primaryItem = getItemByKeyValue(this.items, value, this.primaryValueField);
+                const secondaryItem = getFirstItem(primaryItem[this.primarySubItemsField]);
+
+                if (secondaryItem) {
+                    if (this.secondaryValueField) {
+                        this.$emit('update:modelValue', secondaryItem[this.secondaryValueField]);
+                    }
+                }
+            }
+        },
+        currentSecondaryValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (value) {
+                this.$emit('update:modelValue', value);
+            }
+        },
+        selectedPrimaryItem() {
+            if (this.primaryValueField) {
+                return getItemByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField);
+            } else {
+                return this.currentPrimaryValue;
+            }
+        },
+        primaryItemDisplayName() {
+            if (this.primaryValueField && this.primaryTitleField) {
+                if (this.currentPrimaryValue) {
+                    return getNameByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField, this.primaryTitleField);
+                } else {
+                    return this.$t('None');
+                }
+            } else {
+                return this.currentPrimaryValue;
+            }
+        },
+        secondaryItemDisplayName() {
+            if (this.secondaryValueField && this.secondaryTitleField) {
+                if (this.currentSecondaryValue) {
+                    return getNameByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField, this.secondaryTitleField);
+                } else {
+                    return this.$t('None');
+                }
+            } else {
+                return this.currentSecondaryValue;
+            }
+        }
+    },
+    methods: {
+        onPrimaryItemClicked(item) {
+            if (this.primaryValueField) {
+                this.currentPrimaryValue = item[this.primaryValueField];
+            } else {
+                this.currentPrimaryValue = item;
+            }
+        },
+        onSecondaryItemClicked(subItem) {
+            if (this.secondaryValueField) {
+                this.currentSecondaryValue = subItem[this.secondaryValueField];
+            } else {
+                this.currentSecondaryValue = subItem;
+            }
+        },
+        isSecondarySelected(subItem) {
+            if (this.secondaryValueField) {
+                return this.currentSecondaryValue === subItem[this.secondaryValueField];
+            } else {
+                return this.currentSecondaryValue === subItem;
+            }
+        },
+        getPrimaryValueBySecondaryValue(secondaryValue) {
+            return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
+        },
+        onMenuStateChanged(state) {
+            const self = this;
+
+            if (state) {
+                self.$nextTick(() => {
+                    if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
+                        scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, '.primary-list-container', '.primary-list-item-selected');
+                        scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, '.secondary-list-container', '.secondary-list-item-selected');
+                    }
+                });
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.two-column-select-menu {
+    max-height: inherit !important;
+}
+
+.two-column-select-menu > .v-list {
+    padding: 0;
+}
+
+.two-column-select-menu .two-column-list-container {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.two-column-select-menu .primary-list-container,
+.two-column-select-menu .secondary-list-container {
+    width: 100%;
+    height: 310px;
+    overflow-y: scroll;
+}
+</style>

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -60,7 +60,10 @@
 </template>
 
 <script>
-import { isArray } from '@/lib/common.js';
+import {
+    getItemByKeyValue,
+    getPrimaryValueBySecondaryValue
+} from '@/lib/common.js';
 import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
@@ -107,32 +110,10 @@ export default {
     computed: {
         selectedPrimaryItem() {
             if (this.primaryValueField) {
-                if (isArray(this.items)) {
+                return getItemByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField);
-                    for (let i = 0; i < this.items.length; i++) {
-                        const item = this.items[i];
-
-                        if (this.currentPrimaryValue === item[this.primaryValueField]) {
-                            return item;
-                        }
-                    }
-                } else {
-                    for (let field in this.items) {
-                        if (!Object.prototype.hasOwnProperty.call(this.items, field)) {
-                            continue;
-                        }
-
-                        const item = this.items[field];
-
-                        if (this.currentPrimaryValue === item[this.primaryValueField]) {
-                            return item;
-                        }
-                    }
-                }
             } else {
                 return this.currentPrimaryValue;
             }
-
-            return null;
         }
     },
     methods: {
@@ -169,53 +150,8 @@ export default {
                 return this.currentSecondaryValue === subItem;
             }
         },
-        isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue) {
-            for (let i = 0; i < primaryItem[this.primarySubItemsField].length; i++) {
-                const secondaryItem = primaryItem[this.primarySubItemsField][i];
-
-                if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === secondaryValue) {
-                    return true;
-                } else if (!this.secondaryValueField && secondaryItem === secondaryValue) {
-                    return true;
-                }
-            }
-
-            return false;
-        },
         getPrimaryValueBySecondaryValue(secondaryValue) {
-            if (this.primarySubItemsField) {
+            return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
-                if (isArray(this.items)) {
-                    for (let i = 0; i < this.items.length; i++) {
-                        const primaryItem = this.items[i];
-
-                        if (this.isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue)) {
-                            if (this.primaryValueField) {
-                                return primaryItem[this.primaryValueField];
-                            } else {
-                                return primaryItem;
-                            }
-                        }
-                    }
-                } else {
-                    for (let field in this.items) {
-                        if (!Object.prototype.hasOwnProperty.call(this.items, field)) {
-                            continue;
-                        }
-
-                        const primaryItem = this.items[field];
-
-                        if (this.isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue)) {
-                            if (this.primaryValueField) {
-                                return primaryItem[this.primaryValueField];
-                            } else {
-                                return primaryItem;
-                            }
-                        }
-                    }
-                }
-            }
-
-            return null;
         },
         close() {
             this.$emit('update:show', false);

src/desktop-main.js

@@ -87,6 +87,7 @@ import AmountInput from '@/components/desktop/AmountInput.vue';
 import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
 import ColorSelect from '@/components/desktop/ColorSelect.vue';
 import IconSelect from '@/components/desktop/IconSelect.vue';
+import TwoColumnSelect from '@/components/desktop/TwoColumnSelect.vue';
 import StepsBar from '@/components/desktop/StepsBar.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
@@ -402,6 +403,7 @@ app.component('AmountInput', AmountInput);
 app.component('DateTimeSelect', DateTimeSelect);
 app.component('ColorSelect', ColorSelect);
 app.component('IconSelect', IconSelect);
+app.component('TwoColumnSelect', TwoColumnSelect);
 app.component('StepsBar', StepsBar);
 app.component('ConfirmDialog', ConfirmDialog);
 app.component('SnackBar', SnackBar);

src/lib/common.js

@@ -220,6 +220,50 @@ export function stringToArrayBuffer(str){
     return Uint8Array.from(str, c => c.charCodeAt(0)).buffer;
 }
 
+export function getFirstItem(items) {
+    if (isArray(items)) {
+        if (items.length > 0) {
+            return items[0];
+        }
+    } else {
+        for (let field in items) {
+            if (!Object.prototype.hasOwnProperty.call(items, field)) {
+                continue;
+            }
+
+            return items[field];
+        }
+    }
+
+    return null;
+}
+
+export function getItemByKeyValue(src, value, keyField) {
+    if (isArray(src)) {
+        for (let i = 0; i < src.length; i++) {
+            const item = src[i];
+
+            if (item[keyField] === value) {
+                return item;
+            }
+        }
+    } else {
+        for (let field in src) {
+            if (!Object.prototype.hasOwnProperty.call(src, field)) {
+                continue;
+            }
+
+            const item = src[field];
+
+            if (item[keyField] === value) {
+                return item;
+            }
+        }
+    }
+
+    return null;
+}
+
 export function getNameByKeyValue(src, value, keyField, nameField, defaultName) {
     if (isArray(src)) {
         if (keyField) {
@@ -363,6 +407,56 @@ export function categorizedArrayToPlainArray(object) {
     return ret;
 }
 
+export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue) {
+    for (let i = 0; i < primaryItem[primarySubItemsField].length; i++) {
+        const secondaryItem = primaryItem[primarySubItemsField][i];
+
+        if (secondaryValueField && secondaryItem[secondaryValueField] === secondaryValue) {
+            return true;
+        } else if (!secondaryValueField && secondaryItem === secondaryValue) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, secondaryValueField, secondaryValue) {
+    if (primarySubItemsField) {
+        if (isArray(items)) {
+            for (let i = 0; i < items.length; i++) {
+                const primaryItem = items[i];
+
+                if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
+                    if (primaryValueField) {
+                        return primaryItem[primaryValueField];
+                    } else {
+                        return primaryItem;
+                    }
+                }
+            }
+        } else {
+            for (let field in items) {
+                if (!Object.prototype.hasOwnProperty.call(items, field)) {
+                    continue;
+                }
+
+                const primaryItem = items[field];
+
+                if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
+                    if (primaryValueField) {
+                        return primaryItem[primaryValueField];
+                    } else {
+                        return primaryItem;
+                    }
+                }
+            }
+        }
+    }
+
+    return null;
+}
+
 export function arrangeArrayWithNewStartIndex(array, startIndex) {
     if (startIndex <= 0 || startIndex >= array.length) {
         return array;

src/views/desktop/transactions/list/dialogs/EditDialog.vue

@@ -74,12 +74,47 @@
                                                   :placeholder="$t('Transfer In Amount')"
                                                   v-model="transaction.destinationAmount"/>
                                 </v-col>
-                                <v-col cols="12" md="12">
+                                <v-col cols="12" md="12" v-if="transaction.type === allTransactionTypes.Expense">
-                                    <v-text-field
+                                    <two-column-select primary-key-field="id" primary-value-field="id" primary-title-field="name"
-                                        disabled
+                                                       primary-icon-field="icon" primary-icon-type="category" primary-color-field="color"
-                                        persistent-placeholder
+                                                       primary-sub-items-field="subCategories"
-                                        :label="$t('Category')"
+                                                       secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
-                                        :placeholder="$t('Category')" />
+                                                       secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                                       :readonly="mode === 'view'"
+                                                       :disabled="loading || submitting"
+                                                       :show-primary-name="true"
+                                                       :label="$t('Category')" :placeholder="$t('Category')"
+                                                       :items="allCategories[allCategoryTypes.Expense]"
+                                                       v-model="transaction.expenseCategory">
+                                    </two-column-select>
+                                </v-col>
+                                <v-col cols="12" md="12" v-if="transaction.type === allTransactionTypes.Income">
+                                    <two-column-select 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-sub-items-field="subCategories"
+                                                       secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                       secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                                       :readonly="mode === 'view'"
+                                                       :disabled="loading || submitting"
+                                                       :show-primary-name="true"
+                                                       :label="$t('Category')" :placeholder="$t('Category')"
+                                                       :items="allCategories[allCategoryTypes.Income]"
+                                                       v-model="transaction.incomeCategory">
+                                    </two-column-select>
+                                </v-col>
+                                <v-col cols="12" md="12" v-if="transaction.type === allTransactionTypes.Transfer">
+                                    <two-column-select 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-sub-items-field="subCategories"
+                                                       secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                       secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
+                                                       :readonly="mode === 'view'"
+                                                       :disabled="loading || submitting"
+                                                       :show-primary-name="true"
+                                                       :label="$t('Category')" :placeholder="$t('Category')"
+                                                       :items="allCategories[allCategoryTypes.Transfer]"
+                                                       v-model="transaction.transferCategory">
+                                    </two-column-select>
                                 </v-col>
                                 <v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
                                     <v-select