Merge pull request #611 from nextcloud/vue-details-fixes

Vue details fixes: grid fixes, delete contact, comments and key fix

10 files changed, 48 insertions, 6 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index cae7cd9c..a15a6970 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -82,13 +82,14 @@
 			<section class="contact-details">
 
 				<!-- properties iteration -->
-				<contact-details-property v-for="(property, index) in sortedProperties" :key="index" :index="index"
+				<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
+				<contact-details-property v-for="(property, index) in sortedProperties" :key="index+contact.key" :index="index"
 					:sorted-properties="sortedProperties" :property="property" :contact="contact"
 					@updatedcontact="updateContact" />
 
-				<!-- addressbook change select -->
-				<property-select :prop-model="addressbookModel" :value.sync="addressbook"
-					:options="addressbooksOptions" class="property--addressbooks" />
+				<!-- addressbook change select - no last property because class is not applied here-->
+				<property-select :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true"
+					:is-last-property="false" :options="addressbooksOptions" class="property--addressbooks" />
 			</section>
 		</template>
 	</div>
@@ -245,6 +246,7 @@ export default {
 		updateContact() {
 			this.$store.dispatch('updateContact', this.contact)
 		},
+
 		/**
 		 * Debounce the contact update for the header props
 		 * photo, fn, org, title
@@ -262,6 +264,13 @@ export default {
 		},
 
 		/**
+		 * Dispatch contact deletion request
+		 */
+		deleteContact() {
+			this.$store.dispatch('deleteContact', this.contact)
+		},
+
+		/**
 		 * Move contact to the specified addressbook
 		 *
 		 * @param {Object} addressbook the desired addressbook
diff --git a/src/components/ContentList/ContentListItem.vue b/src/components/ContentList/ContentListItem.vue
index 227ff912..6c2ccdbf 100644
--- a/src/components/ContentList/ContentListItem.vue
+++ b/src/components/ContentList/ContentListItem.vue
@@ -36,6 +36,11 @@ export default {
 		selectedContact() {
 			return this.$route.params.selectedContact
 		},
+
+		/**
+		 * avatar color based on server toRgb method and the displayName
+		 * @returns {String} the color in css format
+		 */
 		colorAvatar() {
 			try {
 				let color = this.contact.uid.toRgb()
@@ -46,13 +51,25 @@ export default {
 		}
 	},
 	methods: {
+		/**
+		 * Checkbox management method
+		 */
 		toggleSelect() {
 			// toggle checkbox here because we stop the propagation to not trigger selectContact
+			// therefore the selectContact prevent the checkbox label+input propagation
 			this.$refs.selected.checked = !this.$refs.selected.checked
 		},
+
+		/**
+		 * Dispatch contact deletion request
+		 */
 		deleteContact() {
 			this.$store.dispatch('deleteContact', this.contact)
 		},
+
+		/**
+		 * Select this contact within the list
+		 */
 		selectContact() {
 			// change url with router
 			this.$router.push({ name: 'contact', params: { selectedGroup: this.selectedGroup, selectedContact: this.contact.key } })
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index f4f843bc..74f6ed72 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -106,6 +106,7 @@ export default {
 		/**
 		 * 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
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index 56a6ce8e..9979733e 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="propModel" class="grid-span-1 property">
+	<div v-if="propModel" class="grid-span-2 property">
 
 		<div class="property__row">
 			<div class="property__label">{{ propModel.readableName }}</div>
@@ -92,6 +92,7 @@ export default {
 		/**
 		 * 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
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 45fc70ef..90d2afde 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -109,6 +109,7 @@ export default {
 		/**
 		 * 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
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 4981eb47..fb1aa827 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -111,6 +111,7 @@ export default {
 		/**
 		 * 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
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 32937db0..9cf499c4 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -105,6 +105,7 @@ export default {
 		/**
 		 * 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
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index cde06dd3..360e813a 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -43,6 +43,5 @@ export default {
 			required: true
 		}
 	}
-
 }
 </script>
diff --git a/src/store/FakeName.vcf b/src/store/FakeName.vcf
index cae71a7b..ebfc383a 100644
--- a/src/store/FakeName.vcf
+++ b/src/store/FakeName.vcf
@@ -9,6 +9,12 @@ REV:2017-07-27T05:56:33Z
 UID:5acf667e-1cbf-48a8-87fe-546ee31a0b23
 END:VCARD
 BEGIN:VCARD
+VERSION:4.0
+KIND:org
+FN:ABC Marketing ORG
+ORG:ABC\, Inc.;North American Division;Marketing
+END:VCARD
+BEGIN:VCARD
 VERSION:3.0
 N:Cunningham;Liam;;Mr.;
 FN:Liam Cunningham
diff --git a/src/store/addressbooks.js b/src/store/addressbooks.js
index 1b6e9ab1..d380c1ca 100644
--- a/src/store/addressbooks.js
+++ b/src/store/addressbooks.js
@@ -210,6 +210,12 @@ const actions = {
 			enabled: true,
 			owner: 'admin'
 			// dav: addressbook
+		}, {
+			id: 'ab2',
+			displayName: 'Addressbook 2',
+			enabled: true,
+			owner: 'admin'
+			// dav: addressbook
 		}]
 		// })