Merge pull request #825 from nextcloud/gender

fix gender field select

5 files changed, 23 insertions, 38 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index a954d01f..3033f270 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -103,7 +103,8 @@
 					empty property because this is a required prop on regular property-select. But since
 					we are hijacking this... (this is supposed to be used with a ICAL.property, but to avoid code
 					duplication, we created a fake propModel and property with our own options here) -->
-				<property-select :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true"
+				<property-select :prop-model="addressbookModel" :select-type.sync="addressbook" value=""
+					:is-first-property="true"
 					:is-last-property="true" :property="{}" class="property--addressbooks property--last" />
 
 				<!-- Groups always visible -->
@@ -272,15 +273,16 @@ export default {
 		/**
 		 * Usable addressbook object linked to the local contact
 		 *
-		 * @param {string} [addressbookId] set the addressbook id
+		 * @param {string} [addressbook] set the addressbook object
 		 * @returns {string}
 		 */
 		addressbook: {
 			get: function() {
-				return this.contact.addressbook.id
+				return this.addressbooksOptions
+					.find(addressbook => addressbook.id === this.contact.addressbook.id)
 			},
-			set: function(addressbookId) {
-				this.moveContactToAddressbook(addressbookId)
+			set: function(addressbook) {
+				this.moveContactToAddressbook(addressbook.id)
 			}
 		},
 
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index 7562a9a7..5ccaa2b5 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -93,7 +93,7 @@ export default {
 		 */
 		addProp({ id }) {
 			let defaultData = rfcProps.properties[id].defaultValue
-			let property = this.contact.vCard.addPropertyWithValue(id, defaultData ? defaultData.value : '')
+			let property = this.contact.vCard.addPropertyWithValue(id, defaultData && defaultData.value ? defaultData.value : '')
 			if (defaultData && defaultData.type) {
 				property.setParameter('type', defaultData.type)
 			}
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 51ccd032..e032363e 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -27,13 +27,8 @@
 			:info="propModel.info" />
 
 		<div class="property__row">
-			<!-- if we do not support any type on our model but one is set anyway -->
-			<div v-if="selectType" class="property__label">
-				{{ selectType.name }}
-			</div>
-
 			<!-- no options, empty space -->
-			<div v-else class="property__label">
+			<div class="property__label">
 				{{ propModel.readableName }}
 			</div>
 
@@ -41,9 +36,10 @@
 			<button v-if="!isReadOnly" :title="t('contacts', 'Delete')" class="property__delete icon-delete"
 				@click="deleteProperty" />
 
-			<multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')"
+			<multiselect v-model="localType"
+				:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select option')"
 				:disabled="isSingleOption || isReadOnly" class="property__value" track-by="id"
-				label="name" @input="updateValue" />
+				label="name" @input="updateType" />
 		</div>
 	</div>
 </template>
@@ -76,23 +72,10 @@ export default {
 			// length is one & add one space at the end
 			return hasTitle + 1 + isLast
 		},
+
 		// is there only one option available
 		isSingleOption() {
 			return this.propModel.options.length <= 1
-		},
-
-		// matching value to the options we provide
-		matchedOptions: {
-			get() {
-				let selected = this.propModel.options.find(option => option.id === this.localValue)
-				return selected || {
-					id: this.localValue,
-					name: this.localValue
-				}
-			},
-			set(value) {
-				this.localValue = value.id
-			}
 		}
 	}
 }
diff --git a/src/mixins/PropertyMixin.js b/src/mixins/PropertyMixin.js
index 73b3f21c..342eaa75 100644
--- a/src/mixins/PropertyMixin.js
+++ b/src/mixins/PropertyMixin.js
@@ -25,7 +25,7 @@ export default {
 	props: {
 		// Default property type. e.g. "WORK,HOME"
 		selectType: {
-			type: [Object],
+			type: Object,
 			default: () => {}
 		},
 		// Coming fro the rfcProps Model
@@ -79,7 +79,8 @@ export default {
 	watch: {
 		/**
 		 * Since we're updating a local data based on the value prop,
-		 * we need to make sure to update the local data on pop change
+		 * we need to make sure to update the local data on prop change
+		 * ! this prevent virtual doms to have outdated local data
 		 */
 		value: function() {
 			this.localValue = this.value
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index 122736f2..397d66f1 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -56,7 +56,6 @@ const properties = {
 		readableName: t('contacts', 'Federated Cloud ID'),
 		force: 'text',
 		defaultValue: {
-			value: [''],
 			type: ['HOME']
 		},
 		options: [
@@ -118,7 +117,6 @@ const properties = {
 		icon: 'icon-mail',
 		default: true,
 		defaultValue: {
-			value: '',
 			type: ['HOME']
 		},
 		options: [
@@ -132,7 +130,6 @@ const properties = {
 		readableName: t('contacts', 'Instant messaging'),
 		icon: 'icon-comment',
 		defaultValue: {
-			value: [''],
 			type: ['SKYPE']
 		},
 		options: [
@@ -149,7 +146,6 @@ const properties = {
 		icon: 'icon-phone',
 		default: true,
 		defaultValue: {
-			value: '',
 			type: ['HOME', 'VOICE']
 		},
 		options: [
@@ -176,8 +172,7 @@ const properties = {
 		icon: 'icon-social',
 		readableName: t('contacts', 'Social network'),
 		defaultValue: {
-			value: '',
-			type: ['facebook']
+			type: ['FACEBOOK']
 		},
 		info: t(
 			'contacts',
@@ -208,6 +203,9 @@ const properties = {
 			'contacts',
 			'Specify a relationship between you and the entity represented by this vCard.'
 		),
+		defaultValue: {
+			type: ['COLLEAGUE']
+		},
 		options: [
 			{ id: 'SPOUSE', name: t('contacts', 'Spouse') },
 			{ id: 'CHILD', name: t('contacts', 'Child') },
@@ -232,7 +230,6 @@ const properties = {
 			'Specify a relationship between another entity and the entity represented by this vCard.'
 		),
 		defaultValue: {
-			value: [''],
 			type: ['CONTACT']
 		},
 		options: [
@@ -256,11 +253,13 @@ const properties = {
 	},
 	gender: {
 		readableName: t('contacts', 'Gender'),
+		force: 'select',
 		defaultValue: {
 			// default to Female 🙋
-			value: ['F']
+			type: ['F']
 		},
 		options: [
+			// TODO? make X-WAB-GENDER print in VCARD as well for MS compatibility
 			{ id: 'F', name: t('contacts', 'Female') },
 			{ id: 'M', name: t('contacts', 'Male') },
 			{ id: 'O', name: t('contacts', 'Other') }