Merge pull request #647 from nextcloud/vue-avatar-management

Vue avatar management

3 files changed, 113 insertions, 8 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index e59fb130..83fdc676 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -41,13 +41,9 @@
 			<header :style="{ 'backgroundColor': colorAvatar }">
 
 				<!-- avatar and upload photo -->
-				<div id="contact-header-avatar">
-					<div class="contact-avatar-background" />
-					<img v-if="contact.photo">
-					<input id="contact-avatar-upload" type="file" class="hidden"
-						accept="image/*">
-					<label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload" class="icon-upload-white" />
-				</div>
+				<contact-avatar :contact="contact" />
+				<!-- QUESTION: is it better to pass contact as a prop or get it from the store inside
+				contact-avatar ?  :avatar="contact.photo"-->
 
 				<!-- fullname, org, title -->
 				<div id="contact-header-infos">
@@ -124,6 +120,7 @@ import ContactProperty from './ContactDetails/ContactDetailsProperty'
 import AddNewProp from './ContactDetails/ContactDetailsAddNewProp'
 import PropertySelect from './Properties/PropertySelect'
 import PropertyGroups from './Properties/PropertyGroups'
+import ContactAvatar from './ContactDetails/ContactDetailsAvatar'
 
 Vue.use(VTooltip)
 
@@ -135,7 +132,8 @@ export default {
 		ContactProperty,
 		PropertySelect,
 		PropertyGroups,
-		AddNewProp
+		AddNewProp,
+		ContactAvatar
 	},
 
 	directives: {
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
new file mode 100644
index 00000000..0a249d4a
--- /dev/null
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -0,0 +1,86 @@
+<!--
+import rfcProps from '../../models/rfcProps';
+ * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div :class="{'maximised':maximizeAvatar }" class="contact-header-avatar">
+		<div class="contact-header-avatar__background" @click="toggleSize" />
+		<div v-if="contact.photo" :style="{ 'backgroundImage': `url(${contact.photo})` }"
+			class="contact-header-avatar__photo"
+			@click="toggleSize" />
+		<div class="contact-header-avatar__options">
+			<input id="contact-avatar-upload" type="file" class="hidden"
+				accept="image/*" @change="processFile">
+			<label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="contact-avatar-upload"
+				class="icon-upload-white" @click="processFile" />
+			<div v-if="maximizeAvatar" class="icon-delete-white" @click="removePhoto" />
+			<a v-if="maximizeAvatar" :href="contact.url + '?photo'" class="icon-download-white" />
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'ContactAvatar',
+
+	props: {
+		contact: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			maximizeAvatar: false
+		}
+	},
+	methods: {
+		processFile(event) {
+			if (event.target.files) {
+				let file = event.target.files[0]
+				let reader = new FileReader()
+				let self = this
+				// check if photo property exists to decide whether to add/update it
+				reader.onload = function(e) {
+					self.contact.photo
+						? self.contact.photo = reader.result
+						: self.contact.vCard.addPropertyWithValue('photo', reader.result)
+
+					self.$store.dispatch('updateContact', self.contact)
+				}
+				reader.readAsDataURL(file)
+			}
+		},
+		toggleSize() {
+			// maximise or minimise avatar photo
+			this.maximizeAvatar = !this.maximizeAvatar
+		},
+		removePhoto() {
+			this.contact.vCard.removeProperty('photo')
+			this.maximizeAvatar = !this.maximizeAvatar
+			this.$store.dispatch('updateContact', this.contact)
+		}
+	}
+
+}
+</script>
diff --git a/src/models/contact.js b/src/models/contact.js
index 52d713fc..b0eec0a5 100644
--- a/src/models/contact.js
+++ b/src/models/contact.js
@@ -123,6 +123,27 @@ export default class Contact {
 	}
 
 	/**
+	 * Return the photo
+	 *
+	 * @readonly
+	 * @memberof Contact
+	 */
+	get photo() {
+		return this.vCard.getFirstPropertyValue('photo')
+	}
+
+	/**
+	 * Set the photo
+	 *
+	 * @param {string} photo the photo to set
+	 * @memberof Contact
+	 */
+	set photo(photo) {
+		this.vCard.updatePropertyWithValue('photo', photo)
+		return true
+	}
+
+	/**
 	 * Return the groups
 	 *
 	 * @readonly