Use type for select and make sure default type is applied

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

5 files changed, 24 insertions, 34 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 bd404315..86f93c9e 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -230,8 +230,7 @@ const properties = {
 			'Specify a relationship between another entity and the entity represented by this vCard.'
 		),
 		defaultValue: {
-			value: [''],
-			type: ['CONTACT']
+			type: 'CONTACT'
 		},
 		options: [
 			{ id: 'CONTACT', name: t('contacts', 'Contact') },
@@ -255,9 +254,14 @@ const properties = {
 	gender: {
 		readableName: t('contacts', 'Gender'),
 		force: 'select',
+		defaultValue: {
+			// default to Female 🙋
+			type: 'F'
+		},
 		options: [
-			{ id: 'F', name: t('contacts', 'Female'), xadd: 'X-WAB-GENDER:1' }, // Female first 🙋, TODO: make X-WAB-GENDER print in VCARD as well for MS compatibility
-			{ id: 'M', name: t('contacts', 'Male'), xadd: 'X-WAB-GENDER:2' }, // TODO: make X-WAB-GENDER print in VCARD as well for MS compatibility
+			// 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') }
 		]
 	}