Use localcontact as default changes on properties

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

3 files changed, 43 insertions, 46 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 623a7272..579c792a 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -104,9 +104,11 @@
 				<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
 				<!-- passing the debounceUpdateContact so that the contact-property component contains the function
 					and allow us to use it on the rfcProps since the scope is forwarded to the actions -->
-				<contact-property v-for="(property, index) in sortedProperties" :key="`${index}-${contact.key}-${property.name}`" :index="index"
-					:sorted-properties="sortedProperties" :property="property" :contact="contact"
-					:update-contact="debounceUpdateContact" @updatedcontact="debounceUpdateContact" />
+				<contact-property v-for="(property, index) in sortedProperties"
+					:key="`${index}-${contact.key}-${property.name}`" :index="index"
+					:sorted-properties="sortedProperties" :property="property"
+					:contact="contact" :local-contact="localContact"
+					:update-contact="debounceUpdateContact" />
 
 				<!-- addressbook change select - no last property because class is not applied here,
 					empty property because this is a required prop on regular property-select. But since
@@ -385,7 +387,6 @@ export default {
 
 	methods: {
 		/**
-		 * Executed on the 'updatedcontact' event
 		 * Send the local clone of contact to the store
 		 */
 		async updateContact() {
@@ -451,17 +452,8 @@ export default {
 				if (contact.dav) {
 					try {
 						await this.$store.dispatch('fetchFullContact', { contact })
-
-						// create empty contact and copy inner data
-						let localContact = Object.assign(
-							Object.create(Object.getPrototypeOf(contact)),
-							contact
-						)
-
-						this.fixed = validate(localContact)
-
-						this.localContact = localContact
-						this.loadingData = false
+						// clone to a local editable variable
+						this.updateLocalContact(contact)
 					} catch (error) {
 						if (error.name === 'ParserError') {
 							OC.Notification.showTemporary(t('contacts', 'Syntax error. Cannot open the contact.'))
@@ -475,17 +467,8 @@ export default {
 						this.$store.dispatch('deleteContact', { contact: this.contact, dav: false })
 					}
 				} else {
-					// create empty contact and copy inner data
-					// wait for an update to really push the contact on the server!
-					let localContact = Object.assign(
-						Object.create(Object.getPrototypeOf(contact)),
-						contact
-					)
-
-					this.fixed = validate(localContact)
-
-					this.localContact = localContact
-					this.loadingData = false
+					// clone to a local editable variable
+					this.updateLocalContact(contact)
 				}
 			}
 		},
@@ -542,6 +525,24 @@ export default {
 		// reset the current qrcode
 		closeQrModal() {
 			this.qrcode = ''
+		},
+
+		/**
+		 *  Update this.localContact and set this.fixed
+		 *
+		 * @param {Contact} contact the contact to clone
+		 */
+		updateLocalContact(contact) {
+			// create empty contact and copy inner data
+			let localContact = Object.assign(
+				Object.create(Object.getPrototypeOf(contact)),
+				contact
+			)
+
+			this.fixed = validate(localContact)
+
+			this.localContact = localContact
+			this.loadingData = false
 		}
 	}
 }
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index 8d65eec8..0a4aaf38 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -25,9 +25,9 @@
 	<component :is="componentInstance" v-if="propModel && propType !== 'unknown'" :select-type.sync="selectType"
 		:prop-model="propModel" :value.sync="value" :is-first-property="isFirstProperty"
 		:property="property" :is-last-property="isLastProperty" :class="{'property--last': isLastProperty}"
-		:contact="contact" :prop-name="propName" :prop-type="propType"
+		:local-contact="localContact" :prop-name="propName" :prop-type="propType"
 		:options="sortedModelOptions" :is-read-only="isReadOnly"
-		@delete="deleteProp" @update="updateProp" />
+		@delete="deleteProp" @update="updateContact" />
 </template>
 
 <script>
@@ -62,6 +62,10 @@ export default {
 			type: Contact,
 			default: null
 		},
+		localContact: {
+			type: Contact,
+			default: null
+		},
 		/**
 		 * This is needed so that we can update
 		 * the contact within the rfcProps actions
@@ -193,7 +197,7 @@ export default {
 		 * @returns {Property}
 		 */
 		propLabel() {
-			return this.contact.vCard.getFirstProperty(`${this.propGroup[0]}.x-ablabel`)
+			return this.localContact.vCard.getFirstProperty(`${this.propGroup[0]}.x-ablabel`)
 		},
 
 		/**
@@ -265,10 +269,10 @@ export default {
 					// ical.js take types as arrays
 					this.type = data.id.split(',')
 					// only one can coexist
-					this.contact.vCard.removeProperty(`${this.propGroup[0]}.x-ablabel`)
+					this.localContact.vCard.removeProperty(`${this.propGroup[0]}.x-ablabel`)
 
 					// checking if there is any other property in this group
-					const groups = this.contact.jCal[1]
+					const groups = this.localContact.jCal[1]
 						.map(prop => prop[0])
 						.filter(name => name.startsWith(`${this.propGroup[0]}.`))
 					if (groups.length === 1) {
@@ -277,7 +281,7 @@ export default {
 						this.property.jCal[0] = this.propGroup[1]
 					}
 				}
-				this.$emit('updatedcontact')
+				this.updateContact()
 			}
 
 		},
@@ -302,7 +306,7 @@ export default {
 				} else {
 					this.property.setValue(data)
 				}
-				this.$emit('updatedcontact')
+				this.updateContact()
 			}
 		},
 
@@ -337,16 +341,8 @@ 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')
+			this.localContact.vCard.removeProperty(this.property)
+			this.updateContact()
 		}
 	}
 }
diff --git a/src/mixins/PropertyMixin.js b/src/mixins/PropertyMixin.js
index 8a86e645..170d461a 100644
--- a/src/mixins/PropertyMixin.js
+++ b/src/mixins/PropertyMixin.js
@@ -69,7 +69,7 @@ export default {
 			type: Array,
 			default: () => []
 		},
-		contact: {
+		localContact: {
 			type: Contact,
 			default: null
 		}
@@ -141,7 +141,7 @@ export default {
 			const group = propGroup.split('.')[0]
 			const name = propGroup.split('.')[1]
 
-			this.contact.vCard.addPropertyWithValue(`${group}.x-ablabel`, label)
+			this.localContact.vCard.addPropertyWithValue(`${group}.x-ablabel`, label)
 
 			// force update the main design sets
 			if (ICAL.design.vcard.property[name]) {
@@ -157,7 +157,7 @@ export default {
 		},
 
 		getNcGroupCount() {
-			const props = this.contact.jCal[1]
+			const props = this.localContact.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