added code for preview and merged in work on uploading photo from other branch, still needs full styling

1 files changed, 19 insertions, 34 deletions

diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index b0ad9057..0a09fad6 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -1,4 +1,5 @@
 <!--
+import rfcProps from '../../models/rfcProps';
  * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com>
  *
  * @author Team Popcorn <teampopcornberlin@gmail.com>
@@ -21,24 +22,24 @@
   -->
 
 <template>
-	<div id="contact-header-avatar">
-		<div :class="{'maximized': maximizeAvatar}" class="contact-avatar-background" />
-		<img v-click="maximise" v-if="contact.photo !==undefined" :id="contact.key"
-			class="avatar__picture"
-			src="">
-		<div class="contact-header-avatar__options">
-			<input id="contact-header-avatar__upload" type="file" class="hidden"
-				accept="image/*"
-				@change="uploadPhoto">
-			<label v-tooltip.auto="t('contacts', 'Upload a new picture')" for="avatar-upload" class="icon-upload-white" />
-			<div v-click="removePhoto" v-if="contact.photo !==undefined" class="icon-delete-white" />
-			<div v-click="openPhoto" v-if="contact.photo !==undefined" class="icon-fullscreen-white" />
-			<div v-click="downloadPhoto" v-if="contact.photo !==undefined" class="icon-download-white" />
+	<div id="contact-header-avatar" :class="{'maximised':maximizeAvatar }">
+		<div class="contact-avatar-background" />
+		<img v-if="contact.photo" :src="contact.photo"
+			class="contact-header-avatar__picture"
+			@click="maximise">
+		<div class="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" />
+			<div v-if="maximizeAvatar" class="icon-delete-white" @click="removePhoto" />
+			<div v-if="maximizeAvatar" class="icon-fullscreen-white" @click="minimizePhoto" />
+			<div v-if="maximizeAvatar" class="icon-download-white" @click="downloadPhoto" />
 		</div>
 	</div>
 </template>
 
 <script>
+
 export default {
 	name: 'ContactAvatar',
 
@@ -53,33 +54,14 @@ export default {
 			maximizeAvatar: false
 		}
 	},
-	mounted: {
-
-	},
 	methods: {
 		processFile(event) {
 			let file = event.target.files[0]
-			/* console.log(event.target.files)
-			alert(JSON.stringify(file, undefined, 2))
-			WIP */
 			let reader = new FileReader()
-			/* let selectedAddressbook = this.selectedAddressbook
-			this.$store.dispatch('changeStage', 'parsing')
-			this.$store.dispatch('setAddressbook', selectedAddressbook.displayName)
-			WIP */
 			let self = this
 			reader.onload = function(e) {
-				/* self.$store.dispatch('importContactsIntoAddressbook', { vcf: reader.result, addressbook: selectedAddressbook })
-				WIP */
-				console.log(reader.result) // eslint-disable-line
-				if (!self.contact.vCard.hasProperty('avatar')) {
-					let property = self.contact.vCard.addPropertyWithValue('avatar', reader.result)
-					// ^WIP: need to research how to set type as 'text' same as in following example:
-					// ["version", {…}, "text", "4.0", __ob__: Observer]
-					property.setParameter('type', 'text')
-					// ^WIP: need to research what above function is doing
-					console.log(self.contact.vCard) // eslint-disable-line
-				}
+				self.contact.vCard.addPropertyWithValue('photo', reader.result)
+				self.$store.dispatch('updateContact', self.contact)
 			}
 			reader.readAsDataURL(file)
 		},
@@ -89,9 +71,11 @@ export default {
 		},
 		uploadPhoto() {
 			// upload avatar photo
+			console.log("upload") // eslint-disable-line
 		},
 		removePhoto() {
 			// remove avatar photo
+			console.log("remove") // eslint-disable-line
 		},
 		minimizePhoto() {
 			// minimize avatar photo
@@ -99,6 +83,7 @@ export default {
 		},
 		downloadPhoto() {
 			// download avatar photo
+			console.log("download") // eslint-disable-line
 		}
 	}