diff options
Diffstat (limited to 'src/components/AppNavigation/Settings/SettingsImportContacts.vue')
| -rw-r--r-- | src/components/AppNavigation/Settings/SettingsImportContacts.vue | 31 |
1 files changed, 27 insertions, 4 deletions
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue index 5a578c1b..54bd70e3 100644 --- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue +++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue @@ -2,6 +2,7 @@ - @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com> - - @author Team Popcorn <teampopcornberlin@gmail.com> + - @author Richard Steinmetz <richard@steinmetz.cloud> - - @license GNU AGPL version 3 or any later version - @@ -38,15 +39,16 @@ <h2>{{ t('contacts', 'Import contacts') }}</h2> <NcSelect v-if="!isSingleAddressbook" id="select-addressbook" - v-model="importDestination" + v-model="selectedAddressbookOption" :allow-empty="false" + :clearable="false" :options="options" :disabled="isSingleAddressbook || isImporting" :placeholder="t('contacts', 'Contacts')" label="displayName" - class="import-contact__multiselect"> - <template slot="singleLabel" slot-scope="{ option }"> - {{ t('contacts', 'Import into the {addressbookName} address book', { addressbookName: option.displayName }) }} + class="import-contact__modal-addressbook__select"> + <template #selected-option="{ displayName }"> + <span>{{ t('contacts', 'Import into the {addressbookName} address book', { addressbookName: displayName }) }}</span> </template> </NcSelect> </section> @@ -171,6 +173,20 @@ export default { }, }, + /** + * The selected address book option for the select component. + * We can't use the actual address book here as it can't be converted to JSON. + */ + selectedAddressbookOption: { + get() { + return this.options.find((option) => option.id === this.selectedAddressbook.id) + }, + set(value) { + this.selectedAddressbook = this.availableAddressbooks + .find((addressbook) => addressbook.id === value.id) + }, + }, + // disable multiselect when there is only one address book isSingleAddressbook() { return this.options.length === 1 @@ -319,6 +335,13 @@ export default { padding-top: 0 !important; } } + + &__modal-addressbook { + &__select { + width: 100%; + } + } + &__button { display: flex; align-items: center; |