From acf3fd5d91b41cfed08d70c63eab7feb79769a10 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 2 Aug 2017 22:09:40 +0300 Subject: Add new user-settings component/route, add options to change name, bio, avatar, banner and bg. Add those options to api service and backend interactor service. --- src/components/user_settings/user_settings.js | 145 ++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 src/components/user_settings/user_settings.js (limited to 'src/components/user_settings/user_settings.js') diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js new file mode 100644 index 00000000..c22411dd --- /dev/null +++ b/src/components/user_settings/user_settings.js @@ -0,0 +1,145 @@ +import StyleSwitcher from '../style_switcher/style_switcher.vue' +import { filter, trim } from 'lodash' + +const UserSettings = { + data () { + return { + newname: this.$store.state.users.currentUser.name, + newbio: this.$store.state.users.currentUser.description, + previewavatar: null, + previewbanner: null, + previewbg: null, + uploadingavatar: false, + uploadingbanner: false, + uploadingbg: false + } + }, + components: { + StyleSwitcher + }, + computed: { + user () { + return this.$store.state.users.currentUser + } + }, + methods: { + updateProfile () { + const name = this.newname + const description = this.newbio + this.$store.state.api.backendInteractor.updateProfile({params: {name, description}}).then((user) => { + if(!user.error) { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + } + }) + }, + uploadAvatar ({target}) { + const file = target.files[0] + // eslint-disable-next-line no-undef + const reader = new FileReader() + reader.onload = ({target}) => { + const img = target.result + this.previewavatar = img + } + reader.readAsDataURL(file) + }, + uploadBanner ({target}) { + const file = target.files[0] + // eslint-disable-next-line no-undef + const reader = new FileReader() + reader.onload = ({target}) => { + const img = target.result + this.previewbanner = img + } + reader.readAsDataURL(file) + }, + uploadBg ({target}) { + const file = target.files[0] + // eslint-disable-next-line no-undef + const reader = new FileReader() + reader.onload = ({target}) => { + const img = target.result + this.previewbg = img + } + reader.readAsDataURL(file) + }, + submitAvatar () { + if (!this.previewavatar) { return } + + let img = this.previewavatar + // eslint-disable-next-line no-undef + let imginfo = new Image() + let cropX, cropY, cropW, cropH + imginfo.src = img + if (imginfo.height > imginfo.width) { + cropX = 0 + cropW = imginfo.width + cropY = Math.floor((imginfo.height - imginfo.width) / 2) + cropH = imginfo.width + } else { + cropY = 0 + cropH = imginfo.height + cropX = Math.floor((imginfo.width - imginfo.height) / 2) + cropW = imginfo.height + } + this.uploadingavatar = true + this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => { + if (!user.error) { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + this.previewavatar = null + } + this.uploadingavatar = false + }) + }, + submitBanner () { + if (!this.previewbanner) { return } + + let banner = this.previewbanner + let imginfo = new Image() + let offset_top, offset_left, width, height + imginfo.src = banner + width = imginfo.width + height = imginfo.height + offset_top = 0 + offset_left = 0 + this.uploadingbanner = true + this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => { + if (!data.error) { + let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) + clone.cover_photo = data.url + this.$store.commit('addNewUsers', [clone]) + this.$store.commit('setCurrentUser', clone) + this.previewbanner = null + } + this.uploadingbanner = false + }) + }, + submitBg () { + if (!this.previewbg) { return } + let img = this.previewbg + let imginfo = new Image() + let cropX, cropY, cropW, cropH + imginfo.src = img + cropX = 0 + cropY = 0 + cropW = imginfo.width + cropH = imginfo.width + this.uploadingbg = true + this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => { + if (!data.error) { + let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) + clone.background_image = data.url + this.$store.commit('addNewUsers', [clone]) + this.$store.commit('setCurrentUser', clone) + this.previewbg = null + } + this.uploadingbg = false + }) + } + }, + watch: { + } +} + +export default UserSettings -- cgit v1.2.3-70-g09d2 From 6d7d173e4da4b7d8ffee33e21d8c072efe2f7be9 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 16 Aug 2017 00:46:55 +0300 Subject: Make linter happy. --- src/components/user_settings/user_settings.js | 9 ++++++--- src/components/user_settings/user_settings.vue | 4 ---- 2 files changed, 6 insertions(+), 7 deletions(-) (limited to 'src/components/user_settings/user_settings.js') diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index c22411dd..2f384711 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -1,5 +1,4 @@ import StyleSwitcher from '../style_switcher/style_switcher.vue' -import { filter, trim } from 'lodash' const UserSettings = { data () { @@ -27,7 +26,7 @@ const UserSettings = { const name = this.newname const description = this.newbio this.$store.state.api.backendInteractor.updateProfile({params: {name, description}}).then((user) => { - if(!user.error) { + if (!user.error) { this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) } @@ -95,8 +94,10 @@ const UserSettings = { submitBanner () { if (!this.previewbanner) { return } - let banner = this.previewbanner + let banner = this.previewbanner + // eslint-disable-next-line no-undef let imginfo = new Image() + /* eslint-disable camelcase */ let offset_top, offset_left, width, height imginfo.src = banner width = imginfo.width @@ -114,10 +115,12 @@ const UserSettings = { } this.uploadingbanner = false }) + /* eslint-enable camelcase */ }, submitBg () { if (!this.previewbg) { return } let img = this.previewbg + // eslint-disable-next-line no-undef let imginfo = new Image() let cropX, cropY, cropW, cropH imginfo.src = img diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index b7521a32..49d2c8c9 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -78,10 +78,6 @@ border-radius: 5px; } - .bg { - max-width: 400px; - border-radius: 5px; - } .uploading { font-size: 1.5em; margin: 0.25em; -- cgit v1.2.3-70-g09d2 From 1526b4560c9dd6f2fff5fcb24890a398c8701343 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 18 Aug 2017 11:51:17 +0300 Subject: Clean up to have much less redundant code. --- src/components/user_settings/user_settings.js | 68 +++++++++----------------- src/components/user_settings/user_settings.vue | 24 ++++----- 2 files changed, 34 insertions(+), 58 deletions(-) (limited to 'src/components/user_settings/user_settings.js') diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 2f384711..fd20a6ad 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -5,12 +5,8 @@ const UserSettings = { return { newname: this.$store.state.users.currentUser.name, newbio: this.$store.state.users.currentUser.description, - previewavatar: null, - previewbanner: null, - previewbg: null, - uploadingavatar: false, - uploadingbanner: false, - uploadingbg: false + uploading: [ false, false, false ], + previews: [ null, null, null ] } }, components: { @@ -32,40 +28,22 @@ const UserSettings = { } }) }, - uploadAvatar ({target}) { - const file = target.files[0] + uploadFile (slot, e) { + const file = e.target.files[0] + if (!file) { return } // eslint-disable-next-line no-undef const reader = new FileReader() reader.onload = ({target}) => { const img = target.result - this.previewavatar = img - } - reader.readAsDataURL(file) - }, - uploadBanner ({target}) { - const file = target.files[0] - // eslint-disable-next-line no-undef - const reader = new FileReader() - reader.onload = ({target}) => { - const img = target.result - this.previewbanner = img - } - reader.readAsDataURL(file) - }, - uploadBg ({target}) { - const file = target.files[0] - // eslint-disable-next-line no-undef - const reader = new FileReader() - reader.onload = ({target}) => { - const img = target.result - this.previewbg = img + this.previews[slot] = img + this.$forceUpdate() // just changing the array with the index doesn't update the view } reader.readAsDataURL(file) }, submitAvatar () { - if (!this.previewavatar) { return } + if (!this.previews[0]) { return } - let img = this.previewavatar + let img = this.previews[0] // eslint-disable-next-line no-undef let imginfo = new Image() let cropX, cropY, cropW, cropH @@ -81,20 +59,20 @@ const UserSettings = { cropX = Math.floor((imginfo.width - imginfo.height) / 2) cropW = imginfo.height } - this.uploadingavatar = true + this.uploading[0] = true this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => { if (!user.error) { this.$store.commit('addNewUsers', [user]) this.$store.commit('setCurrentUser', user) - this.previewavatar = null + this.previews[0] = null } - this.uploadingavatar = false + this.uploading[0] = false }) }, submitBanner () { - if (!this.previewbanner) { return } + if (!this.previews[1]) { return } - let banner = this.previewbanner + let banner = this.previews[1] // eslint-disable-next-line no-undef let imginfo = new Image() /* eslint-disable camelcase */ @@ -104,22 +82,22 @@ const UserSettings = { height = imginfo.height offset_top = 0 offset_left = 0 - this.uploadingbanner = true + this.uploading[1] = true this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => { if (!data.error) { let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) clone.cover_photo = data.url this.$store.commit('addNewUsers', [clone]) this.$store.commit('setCurrentUser', clone) - this.previewbanner = null + this.previews[1] = null } - this.uploadingbanner = false + this.uploading[1] = false }) /* eslint-enable camelcase */ }, submitBg () { - if (!this.previewbg) { return } - let img = this.previewbg + if (!this.previews[2]) { return } + let img = this.previews[2] // eslint-disable-next-line no-undef let imginfo = new Image() let cropX, cropY, cropW, cropH @@ -128,20 +106,18 @@ const UserSettings = { cropY = 0 cropW = imginfo.width cropH = imginfo.width - this.uploadingbg = true + this.uploading[2] = true this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => { if (!data.error) { let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) clone.background_image = data.url this.$store.commit('addNewUsers', [clone]) this.$store.commit('setCurrentUser', clone) - this.previewbg = null + this.previews[2] = null } - this.uploadingbg = false + this.uploading[2] = false }) } - }, - watch: { } } diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 49d2c8c9..11da79e4 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -17,37 +17,37 @@

Your current avatar:

Set new avatar:

- +
- +
- - + +

Profile Banner

Your current profile banner:

Set new profile banner:

- +
- +
- - + +

Profile Background

Set new profile background:

- +
- +
- - + +
-- cgit v1.2.3-70-g09d2