modify style
This commit is contained in:
MaysWind
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user