Support ABLABEL custom labels

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

4 files changed, 63 insertions, 8 deletions

diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index 1d7d9fd1..7776935e 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -27,7 +27,7 @@
 		:property="property" :is-last-property="isLastProperty" :class="{'property--last': isLastProperty}"
 		:contact="contact" :prop-name="propName" :prop-type="propType"
 		:options="sortedModelOptions" :is-read-only="isReadOnly"
-		@delete="deleteProp" />
+		@delete="deleteProp" @update="updateProp" />
 </template>
 
 <script>
@@ -261,6 +261,16 @@ export default {
 					this.type = data.id.split(',')
 					// only one can coexist
 					this.contact.vCard.removeProperty(`${this.propGroup[0]}.x-ablabel`)
+
+					// checking if there is any other property in this group
+					const groups = this.contact.jCal[1]
+						.map(prop => prop[0])
+						.filter(name => name.startsWith(`${this.propGroup[0]}.`))
+					if (groups.length === 1) {
+						// then this prop is the latest of its group
+						// -> converting back to simple prop
+						this.property.jCal[0] = this.propGroup[1]
+					}
 				}
 				this.$emit('updatedcontact')
 			}
@@ -322,8 +332,16 @@ export default {
 		 * Delete this property
 		 */
 		deleteProp() {
+			console.info('removing', this.property, this.propGroup)
 			this.contact.vCard.removeProperty(this.property)
 			this.$emit('updatedcontact')
+		},
+
+		/**
+		 * Update this property
+		 */
+		updateProp() {
+			this.$emit('updatedcontact')
 		}
 	}
 }
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 68f7be9d..1ce64281 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -29,9 +29,10 @@
 		<div class="property__row">
 			<!-- type selector -->
 			<multiselect v-if="propModel.options" v-model="localType"
-				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				:disabled="isReadOnly" class="property__label" track-by="id"
-				label="name" @input="updateType" />
+				:options="options" :placeholder="t('contacts', 'Select type')"
+				:taggable="true" tag-placeholder="create" :disabled="isReadOnly"
+				class="property__label" track-by="id" label="name"
+				@tag="createLabel" @input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
 			<div v-else-if="selectType" class="property__label">
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 02ee97d2..c13baf1d 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -29,9 +29,10 @@
 		<div class="property__row">
 			<!-- type selector -->
 			<multiselect v-if="propModel.options" v-model="localType"
-				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				:disabled="isReadOnly" class="property__label" track-by="id"
-				label="name" @input="updateType" />
+				:options="options" :placeholder="t('contacts', 'Select type')"
+				:taggable="true" tag-placeholder="create" :disabled="isReadOnly"
+				class="property__label" track-by="id" label="name"
+				@tag="createLabel" @input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
 			<div v-else-if="selectType" class="property__label">
diff --git a/src/mixins/PropertyMixin.js b/src/mixins/PropertyMixin.js
index 5092420e..8a86e645 100644
--- a/src/mixins/PropertyMixin.js
+++ b/src/mixins/PropertyMixin.js
@@ -21,6 +21,7 @@
  */
 import debounce from 'debounce'
 import Contact from 'Models/contact'
+import ICAL from 'ical.js'
 
 export default {
 	props: {
@@ -129,6 +130,40 @@ export default {
 		updateType: debounce(function(e) {
 			// https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
 			this.$emit('update:selectType', this.localType)
-		}, 500)
+		}, 500),
+
+		createLabel(label) {
+			let propGroup = this.property.name
+			if (!this.property.name.startsWith('nextcloud')) {
+				propGroup = `nextcloud${this.getNcGroupCount() + 1}.${this.property.name}`
+				this.property.jCal[0] = propGroup
+			}
+			const group = propGroup.split('.')[0]
+			const name = propGroup.split('.')[1]
+
+			this.contact.vCard.addPropertyWithValue(`${group}.x-ablabel`, label)
+
+			// force update the main design sets
+			if (ICAL.design.vcard.property[name]) {
+				ICAL.design.vcard.property[propGroup]
+					= ICAL.design.vcard.property[name]
+			}
+			if (ICAL.design.vcard3.property[name]) {
+				ICAL.design.vcard3.property[propGroup]
+					= ICAL.design.vcard3.property[name]
+			}
+
+			this.$emit('update')
+		},
+
+		getNcGroupCount() {
+			const props = this.contact.jCal[1]
+				.map(prop => prop[0].split('.')[0])				// itemxxx.adr => itemxxx
+				.filter(name => name.startsWith('nextcloud'))	// filter nextcloudxxx.adr
+				.map(prop => parseInt(prop.split('nextcloud')[1]))	// nextcloudxxx => xxx
+			return props.length > 0
+				? Math.max.apply(null, props) // get max iteration of nextcloud grouped props
+				: 0
+		}
 	}
 }