diff options
author | suntala <33031346+suntala@users.noreply.github.com> | 2018-09-13 17:47:47 +0200 |
---|---|---|
committer | suntala <33031346+suntala@users.noreply.github.com> | 2018-09-13 17:47:47 +0200 |
commit | be004702d36fd86dfc93b6da6e516e72c809a437 (patch) | |
tree | 9e9a005066d9f9aa0838b9533d529c676fe92c62 | |
parent | 1eecb4f9f113bfedee4914a5c0c6ce8b1829ad7a (diff) |
Set avatar property in processFile method. #603
-rw-r--r-- | src/components/ContactDetails.vue | 3 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAvatar.vue | 61 |
2 files changed, 35 insertions, 29 deletions
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index 1dada4f3..164445c3 100644 --- a/src/components/ContactDetails.vue +++ b/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 { diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue index 06ce633c..ab98cb33 100644 --- a/src/components/ContactDetails/ContactDetailsAvatar.vue +++ b/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> |