From 579322578bb6ce1251418e71c9c71e4cab7f9336 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 20 Aug 2023 22:15:00 +0800
Subject: [PATCH] modify style

---
 src/components/desktop/TwoColumnSelect.vue    | 30 +++++++---
 .../settings/tabs/UserBasicSettingTab.vue     | 57 +++++++------------
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/src/components/desktop/TwoColumnSelect.vue b/src/components/desktop/TwoColumnSelect.vue
index a286ece8..6093be58 100644
--- a/src/components/desktop/TwoColumnSelect.vue
+++ b/src/components/desktop/TwoColumnSelect.vue
@@ -12,6 +12,10 @@
             <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" />
+                <ItemIcon class="mr-2" icon-type="account" size="21.5px"
+                          :icon-id="selectedSecondaryItem ? selectedSecondaryItem[secondaryIconField] : null"
+                          :color="selectedSecondaryItem ? selectedSecondaryItem[secondaryColorField] : null"
+                          v-if="selectedSecondaryItem && showSecondaryIcon" />
                 <span class="text-truncate">{{ secondaryItemDisplayName }}</span>
             </div>
         </template>
@@ -33,7 +37,7 @@
                     </v-list>
                 </div>
                 <div class="secondary-list-container">
-                    <v-list>
+                    <v-list v-if="selectedPrimaryItem && primarySubItemsField && selectedPrimaryItem[primarySubItemsField]">
                         <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"
@@ -71,6 +75,7 @@ export default {
         'readonly',
         'label',
         'showPrimaryName',
+        'showSecondaryIcon',
         'primaryKeyField',
         'primaryValueField',
         'primaryTitleField',
@@ -90,6 +95,7 @@ export default {
         'secondaryIconField',
         'secondaryIconType',
         'secondaryColorField',
+        'noItemText',
         'items'
     ],
     emits: [
@@ -133,12 +139,22 @@ export default {
                 return this.currentPrimaryValue;
             }
         },
+        selectedSecondaryItem() {
+            if (this.currentSecondaryValue && this.selectedPrimaryItem && this.selectedPrimaryItem[this.primarySubItemsField]) {
+                return getItemByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField);
+            } else {
+                return null;
+            }
+        },
+        noItemDisplayName() {
+            return this.noItemText ? this.noItemText : this.$t('None');
+        },
         primaryItemDisplayName() {
             if (this.primaryValueField && this.primaryTitleField) {
                 if (this.currentPrimaryValue) {
-                    return getNameByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField, this.primaryTitleField);
+                    return getNameByKeyValue(this.items, this.currentPrimaryValue, this.primaryValueField, this.primaryTitleField, this.noItemDisplayName);
                 } else {
-                    return this.$t('None');
+                    return this.noItemDisplayName;
                 }
             } else {
                 return this.currentPrimaryValue;
@@ -146,10 +162,10 @@ export default {
         },
         secondaryItemDisplayName() {
             if (this.secondaryValueField && this.secondaryTitleField) {
-                if (this.currentSecondaryValue) {
-                    return getNameByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField, this.secondaryTitleField);
+                if (this.currentSecondaryValue && this.selectedPrimaryItem && this.selectedPrimaryItem[this.primarySubItemsField]) {
+                    return getNameByKeyValue(this.selectedPrimaryItem[this.primarySubItemsField], this.currentSecondaryValue, this.secondaryValueField, this.secondaryTitleField, this.noItemDisplayName);
                 } else {
-                    return this.$t('None');
+                    return this.noItemDisplayName;
                 }
             } else {
                 return this.currentSecondaryValue;
@@ -215,7 +231,7 @@ export default {
 .two-column-select-menu .primary-list-container,
 .two-column-select-menu .secondary-list-container {
     width: 100%;
-    height: 310px;
+    max-height: 310px;
     overflow-y: scroll;
 }
 </style>
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index 54eb797a..0eb4185e 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -62,43 +62,22 @@
                             </v-col>
 
                             <v-col cols="12" md="6">
-                                <v-select
-                                    item-title="name"
-                                    item-value="id"
-                                    persistent-placeholder
-                                    :disabled="loading || saving || !allVisibleAccounts.length"
-                                    :label="$t('Default Account')"
-                                    :placeholder="$t('Default Account')"
-                                    :items="allVisibleAccounts"
-                                    :no-data-text="$t('No results')"
-                                    v-model="newProfile.defaultAccountId"
-                                >
-                                    <template #selection="{ item }">
-                                        <v-label class="cursor-pointer" v-if="item && item.value !== 0 && item.value !== '0'">
-                                            <ItemIcon class="mr-2" icon-type="account" size="23px"
-                                                      :icon-id="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'icon')"
-                                                      :color="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'color')"
-                                                      v-if="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'icon')" />
-                                            <span>{{ getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'name', $t('Not Specified')) }}</span>
-                                        </v-label>
-                                        <v-label v-if="!item || item.value === 0 || item.value === '0'">{{ $t('Not Specified') }}</v-label>
-                                    </template>
-
-                                    <template #item="{ props, item }">
-                                        <v-list-item :value="item.value" v-bind="props">
-                                            <template #title>
-                                                <v-list-item-title>
-                                                    <div class="d-flex align-center">
-                                                        <ItemIcon icon-type="account"
-                                                                  :icon-id="item.raw.icon" :color="item.raw.color"
-                                                                  v-if="item.raw" />
-                                                        <span class="ml-2">{{ item.title }}</span>
-                                                    </div>
-                                                </v-list-item-title>
-                                            </template>
-                                        </v-list-item>
-                                    </template>
-                                </v-select>
+                                <two-column-select primary-key-field="id" primary-value-field="category"
+                                                   primary-title-field="name"
+                                                   primary-icon-field="icon" primary-icon-type="account"
+                                                   primary-sub-items-field="accounts"
+                                                   :primary-title-i18n="true"
+                                                   secondary-key-field="id" secondary-value-field="id"
+                                                   secondary-title-field="name"
+                                                   secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
+                                                   :disabled="loading || saving || !allVisibleAccounts.length"
+                                                   :show-secondary-icon="true"
+                                                   :label="$t('Default Account')"
+                                                   :placeholder="$t('Default Account')"
+                                                   :items="allCategorizedAccounts"
+                                                   :no-item-text="$t('Not Specified')"
+                                                   v-model="newProfile.defaultAccountId">
+                                </two-column-select>
                             </v-col>
 
                             <v-col cols="12" md="6">
@@ -249,6 +228,7 @@ import { getNameByKeyValue } from '@/lib/common.js';
 import {
     mdiAccount
 } from '@mdi/js';
+import {getCategorizedAccounts} from "@/lib/account";
 
 export default {
     data() {
@@ -304,6 +284,9 @@ export default {
         allVisibleAccounts() {
             return this.accountsStore.allVisiblePlainAccounts;
         },
+        allCategorizedAccounts() {
+            return getCategorizedAccounts(this.allVisibleAccounts);
+        },
         allWeekDays() {
             return this.$locale.getAllWeekDays();
         },