Fixes attendees avatars

Closes #3099

Signed-off-by: Thomas Citharel <[email protected]>

src/components/Editor/Invitees/InviteesList.vue

@@ -159,11 +159,7 @@ export default {
 				return true
 			}
 
-			if (doesDescriptionContainTalkLink(this.calendarObjectInstance.description)) {
-				return true
-			}
-
-			return false
+			return doesDescriptionContainTalkLink(this.calendarObjectInstance.description)
 		},
 	},
 	methods: {

src/components/Editor/Invitees/InviteesListItem.vue

@@ -26,7 +26,9 @@
 		<AvatarParticipationStatus :attendee-is-organizer="false"
 			:is-viewed-by-organizer="isViewedByOrganizer"
 			:is-resource="false"
+			:avatar-user="avatarUser"
 			:avatar-link="avatarLink"
+			:is-user="isUser"
 			:participation-status="attendee.participationStatus"
 			:organizer-display-name="organizerDisplayName"
 			:common-name="commonName" />
@@ -111,7 +113,12 @@ export default {
 		 * @return {string}
 		 */
 		avatarLink() {
-			// return this.$store.getters.getAvatarForContact(this.uri) || this.commonName
+			return this.$store.getters.getAvatarForContact(this.attendee.uri)
+		},
+		isUser() {
+			return this.$store.getters.isContactAnUser(this.attendee.uri) !== false
+		},
+		avatarUser() {
 			return this.commonName
 		},
 		/**

src/components/Editor/Invitees/InviteesListSearch.vue

@@ -132,10 +132,10 @@ export default {
 					}
 				}
 
-				// Generate a unique id for every result to make the avatar components reactive
-				for (const match of matches) {
-					match.uid = randomId()
-				}
+				matches.forEach(contact => {
+		  		contact.uid = randomId()
+					this.$store.commit('appendContact', { contact })
+				})
 
 				this.isLoading = false
 				this.inputGiven = true
@@ -231,7 +231,8 @@ export default {
 					email: principal.email,
 					language: principal.language,
 					isUser: principal.calendarUserType === 'INDIVIDUAL',
-					avatar: principal.userId,
+					// UserID may have special characters encoded since it comes from the URI
+					avatar: decodeURIComponent(principal.userId),
 					hasMultipleEMails: false,
 					dropdownName: principal.displayname || principal.email,
 				}

src/components/Editor/Invitees/OrganizerListItem.vue

@@ -24,7 +24,7 @@
 <template>
 	<div class="invitees-list-item">
 		<AvatarParticipationStatus :attendee-is-organizer="true"
-			:avatar-link="avatarLink"
+			:avatar-user="avatarLink"
 			:is-viewed-by-organizer="isViewedByOrganizer"
 			:is-resource="isResource"
 			:common-name="commonName"

src/store/contacts.js

@@ -40,14 +40,18 @@ const mutations = {
 			state.contacts.push(contact)
 		}
 
-		for (const email of contact.emails) {
-			// In the unlikely case that multiple contacts
-			// share the same email address, we will just follow
-			// first come, first served.
-			if (state.contactByEMail[email] === undefined) {
-				Vue.set(state.contactByEMail, email, contact)
+		let primaryEmail = contact.email
+		if (contact.emails) {
+			for (const email of contact.emails) {
+				// In the unlikely case that multiple contacts
+				// share the same email address, we will just follow
+				// first come, first served.
+				primaryEmail = email
 			}
 		}
+		if (state.contactByEMail[primaryEmail] === undefined) {
+			Vue.set(state.contactByEMail, primaryEmail, contact)
+		}
 	},
 
 	/**
@@ -71,8 +75,31 @@ const mutations = {
 	},
 }
 
-const getters = {}
+const getters = {
+	/**
+	 * Gets a contact's avatar
+	 *
+	 * @param {Object} state the store data
+	 * @returns {function({String}): {String}}
+	 */
+	getAvatarForContact: (state) => (uri) => {
+		const contact = state.contactByEMail[stripMailTo(uri)]
+		return contact?.isUser ? undefined : contact?.avatar
+	},
+
+	isContactAnUser: (state) => (uri) => {
+		return state.contactByEMail[stripMailTo(uri)]?.isUser
+	},
+}
 
 const actions = {}
 
+const stripMailTo = (uri) => {
+	let email = uri
+	if (uri.startsWith('mailto:')) {
+		email = uri.substr(7)
+	}
+	return email
+}
+
 export default { state, mutations, getters, actions }