fix(contacts): display the new avatar on change

Signed-off-by: Johannes Merkel <mail@johannesgge.de>

7 files changed, 79 insertions, 15 deletions

diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index cd0b538b..6162f561 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -63,11 +63,12 @@
 		<template #list>
 			<ContactsList :list="contactsList"
 				:contacts="contacts"
-				:search-query="searchQuery" />
+				:search-query="searchQuery"
+				:reload-bus="reloadBus" />
 		</template>
 
 		<!-- main contacts details -->
-		<ContactDetails :contact-key="selectedContact" :contacts="sortedContacts" />
+		<ContactDetails :contact-key="selectedContact" :contacts="sortedContacts" :reload-bus="reloadBus" />
 	</AppContent>
 </template>
 <script>
@@ -83,6 +84,7 @@ import ContactDetails from '../ContactDetails.vue'
 import ContactsList from '../ContactsList.vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import RouterMixin from '../../mixins/RouterMixin.js'
+import Vue from 'vue'
 
 export default {
 	name: 'ContactsContent',
@@ -114,6 +116,8 @@ export default {
 	data() {
 		return {
 			searchQuery: '',
+			// communication for ContactListItem and ContactDetails (reload avatar)
+			reloadBus: new Vue(),
 		}
 	},
 
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index edd84c71..b4525fa3 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -41,6 +41,7 @@
 				<ContactAvatar slot="avatar"
 					:contact="contact"
 					:is-read-only="isReadOnly"
+					:reload-bus="reloadBus"
 					@update-local-contact="updateLocalContact" />
 
 				<!-- fullname -->
@@ -89,12 +90,12 @@
 				<!-- actions -->
 				<template #actions>
 					<!-- warning message -->
-					<component v-if="warning"
+					<component :is="warning.icon"
+						v-if="warning"
 						v-tooltip.bottom="{
 							content: warning ? warning.msg : '',
 							trigger: 'hover focus'
 						}"
-						:is="warning.icon"
 						class="header-icon"
 						:classes="warning.classes" />
 
@@ -347,6 +348,10 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		reloadBus: {
+			type: Object,
+			required: true,
+		},
 	},
 
 	data() {
@@ -855,7 +860,7 @@ export default {
 		async onSave() {
 			await this.updateContact()
 			this.editMode = false
-		}
+		},
 	},
 }
 </script>
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index 3902ac76..20816310 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -40,7 +40,7 @@
 			:url="photoUrl"
 			class="contact-header-avatar__photo" />
 
-		<NcModal :show.sync="showCropper" @close="cancel" size="small">
+		<NcModal :show.sync="showCropper" size="small" @close="cancel">
 			<div class="avatar__container">
 				<h2>{{ t('contacts', 'Crop contact photo') }}</h2>
 				<VueCropper ref="cropper"
@@ -166,6 +166,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		reloadBus: {
+			type: Object,
+			required: true,
+		},
 	},
 
 	data() {
@@ -355,7 +359,7 @@ export default {
 		 * @param {string} data the photo as base64 binary string
 		 * @param {string} type mimetype
 		 */
-		setPhoto(data, type) {
+		async setPhoto(data, type) {
 			// Init with empty data
 			if (this.contact.photo) {
 				this.contact.vCard.addPropertyWithValue('photo', '')
@@ -378,7 +382,12 @@ export default {
 				this.contact.photo = `data:${type};base64,${data}`
 			}
 
-			this.$store.dispatch('updateContact', this.contact)
+			await this.$store.dispatch('updateContact', this.contact)
+
+			await this.loadPhotoUrl()
+
+			await this.reloadBus.$emit('reload-avatar', this.contact.key)
+
 			this.loading = false
 		},
 
@@ -430,6 +439,9 @@ export default {
 		removePhoto() {
 			this.contact.vCard.removeAllProperties('photo')
 			this.$store.dispatch('updateContact', this.contact)
+			// somehow the avatarUrl is not unavailable immediately, so we just set undefined
+			this.photoUrl = undefined
+			this.reloadBus.$emit('delete-avatar', this.contact.key)
 		},
 
 		/**
@@ -519,6 +531,10 @@ export default {
 					const contact = this.$store.getters.getContact(this.contact.key)
 					await this.$emit('update-local-contact', contact)
 
+					await this.loadPhotoUrl()
+
+					await this.reloadBus.$emit('reload-avatar', this.contact.key)
+
 					// Notify user
 					showSuccess(t('contacts', 'Avatar downloaded from social network'))
 				} catch (error) {
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index eed4c291..353319bd 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -103,7 +103,7 @@ export default {
 		isReadOnly: {
 			type: Boolean,
 			required: true,
-		}
+		},
 	},
 
 	computed: {
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index 18979dee..faec1765 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -32,7 +32,8 @@
 			data-key="key"
 			:data-sources="filteredList"
 			:data-component="ContactsListItem"
-			:estimate-size="68" />
+			:estimate-size="68"
+			:extra-props="{reloadBus}" />
 	</AppContentList>
 </template>
 
@@ -62,6 +63,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		reloadBus: {
+			type: Object,
+			required: true,
+		},
 	},
 
 	data() {
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index b8cd24ff..e9d2284d 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -44,12 +44,17 @@ export default {
 			type: Object,
 			required: true,
 		},
+		reloadBus: {
+			type: Object,
+			required: true,
+		},
 	},
 	data() {
 		return {
 			avatarUrl: undefined,
 		}
 	},
+
 	computed: {
 		selectedGroup() {
 			return this.$route.params.selectedGroup
@@ -63,15 +68,44 @@ export default {
 			return window.btoa(this.source.key).slice(0, -2)
 		},
 	},
-	watch: {
-		async source() {
-			await this.loadAvatarUrl()
-		},
+
+	created() {
+		this.reloadBus.$on('reload-avatar', this.reloadAvatarUrl)
+		this.reloadBus.$on('delete-avatar', this.deleteAvatar)
+	},
+	destroyed() {
+		this.reloadBus.$off('reload-avatar', this.reloadAvatarUrl)
+		this.reloadBus.$off('delete-avatar', this.deleteAvatar)
 	},
 	async mounted() {
 		await this.loadAvatarUrl()
 	},
 	methods: {
+
+		/**
+		 * Is called on save in ContactDetails to reload Avatar,
+		 * url does not change, so trigger on source change don't work
+		 *
+		 * @param {string} key from contact
+		 */
+		reloadAvatarUrl(key) {
+			if (key === this.source.key) {
+				this.loadAvatarUrl()
+			}
+		},
+
+		/**
+		 * Is called on save in ContactDetails to delete Avatar,
+		 * somehow the avatarUrl is not unavailable immediately, so we just set undefined
+		 *
+		 * @param {string} key from contact
+		 */
+		deleteAvatar(key) {
+			if (key === this.source.key) {
+				this.avatarUrl = undefined
+			}
+		},
+
 		async loadAvatarUrl() {
 			this.avatarUrl = undefined
 			if (this.source.photo) {
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index 459563c9..145a34f8 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -132,7 +132,7 @@ export default {
 			}
 
 			return t('contacts', 'Add contact in group')
-		}
+		},
 	},
 
 	watch: {