Set avatar property in processFile method. #603

src/components/ContactDetails.vue

@@ -41,7 +41,7 @@
 			<header :style="{ 'backgroundColor': colorAvatar }">
 
 				<!-- avatar and upload photo -->
-				<contact-avatar :avatar="contact.photo" />
+				<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"-->
 
@@ -110,7 +110,6 @@ import PropertySelect from './Properties/PropertySelect'
 import PropertyGroups from './Properties/PropertyGroups'
 import ContactAvatar from './ContactDetails/ContactDetailsAvatar'
 
-
 Vue.use(VTooltip)
 
 export default {

src/components/ContactDetails/ContactDetailsAvatar.vue

@@ -21,46 +21,53 @@
   -->
 
 <template>
-    <div id="contact-header-avatar">
-        <div class="contact-avatar-background" />
-        <img v-if="avatar">
-        <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>
+	<div id="contact-header-avatar">
+		<div class="contact-avatar-background" />
+		<img v-if="contact.avatar">
+		<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>
 </template>
 
 <script>
 export default {
-    name: 'ContactAvatar',
+	name: 'ContactAvatar',
 
-    props: {
-        avatar: {
-            type: String,
-            default: undefined
-        }
-    },
-    methods: {
-        processFile(event) {
-            let file = event.target.files[0]
-            /* console.log(event.target.files)
-            alert(JSON.stringify(file, undefined, 2)) 
-            WIP */
+	props: {
+		contact: {
+			type: Object,
+			required: true
+		}
+	},
+	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 */
+			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)
-            }
+				/* 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
+				}
+			}
 			reader.readAsDataURL(file)
 		}
 	}
 
-
 }
 </script>