From 939dde36511f0d77b4d2b07b9ddb73a7e2a699d2 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Mon, 16 Nov 2020 02:28:03 +0100 Subject: [PATCH] Implemented Avatar --- src/flaschengeist.d.ts | 8 +++-- src/plugins/user/components/UpdateUser.vue | 16 +++++++--- src/plugins/user/components/Widget.vue | 7 ++-- .../components/settings/MainUserSettings.vue | 32 +++++++++++++++++++ src/plugins/user/store/user.ts | 15 +++++++++ 5 files changed, 65 insertions(+), 13 deletions(-) diff --git a/src/flaschengeist.d.ts b/src/flaschengeist.d.ts index 1308f48..88954ab 100644 --- a/src/flaschengeist.d.ts +++ b/src/flaschengeist.d.ts @@ -13,6 +13,7 @@ declare namespace FG { firstname: string; lastname: string; mail: string; + avatar_url?: string; birthday?: Date; roles: Array; } @@ -26,9 +27,10 @@ declare namespace FG { id: number; time: Date; amount: number; - sender_id: string; - receiver_id: string; - author_id: string; + reversal?: this; + sender_id?: string; + receiver_id?: string; + author_id?: string; } interface Event { id: number; diff --git a/src/plugins/user/components/UpdateUser.vue b/src/plugins/user/components/UpdateUser.vue index 634bc56..62b1eba 100644 --- a/src/plugins/user/components/UpdateUser.vue +++ b/src/plugins/user/components/UpdateUser.vue @@ -5,10 +5,16 @@ Benutzereinstellungen
- +
- + @@ -33,7 +39,7 @@ export default defineComponent({ }; function updateUser(value: FG.User) { - store.dispatch('user/updateUser', value).catch(error => { + store.dispatch('user/updateUser', value).catch((error) => { console.warn(error); }); } @@ -41,9 +47,9 @@ export default defineComponent({ return { user, userUpdated, - updateUser + updateUser, }; - } + }, }); diff --git a/src/plugins/user/components/Widget.vue b/src/plugins/user/components/Widget.vue index 36d049d..6d32f87 100644 --- a/src/plugins/user/components/Widget.vue +++ b/src/plugins/user/components/Widget.vue @@ -36,13 +36,10 @@ export default defineComponent({ const store = >root.$store; onMounted(() => store.dispatch('user/getUsers', false)); - const avatarLink = computed(() => { - const hash = MD5(store.state.user.currentUser?.mail || '').toString(); - return `https://www.gravatar.com/avatar/${hash}?s=500&d=robohash`; - }); - const name = ref(store.state.user.currentUser?.display_name); + const avatarLink = ref(store.state.user.currentUser?.avatar_url); + function userHasBirthday(user: FG.User) { const today = new Date(); return ( diff --git a/src/plugins/user/components/settings/MainUserSettings.vue b/src/plugins/user/components/settings/MainUserSettings.vue index 37b6205..a6fe1fe 100644 --- a/src/plugins/user/components/settings/MainUserSettings.vue +++ b/src/plugins/user/components/settings/MainUserSettings.vue @@ -54,9 +54,25 @@ option-value="name" /> + + + (''); + function onAvatarRejected() { + Notify.create({ + color: 'negative', + message: 'Ungültige Bilddatei', + }); + } + const allRoles = computed(() => store.state.user.roles.map((role) => role.name) ); @@ -174,6 +199,11 @@ export default defineComponent({ } emit('update:user', changed); + if (avatar.value != '') + void store.dispatch('user/uploadAvatar', { + user: changed, + file: avatar.value, + }); } function reset() { @@ -210,6 +240,8 @@ export default defineComponent({ } return { + avatar, + onAvatarRejected, props, allRoles, canSetRoles, diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts index b8f91be..d4bb791 100644 --- a/src/plugins/user/store/user.ts +++ b/src/plugins/user/store/user.ts @@ -119,6 +119,21 @@ const actions: ActionTree = { }); }, + uploadAvatar({ commit }, payload: { user: FG.User; file: string }) { + commit('setLoading'); + const formData = new FormData(); + formData.append('file', payload.file); + return axios + .post(`/users/${payload.user.userid}/avatar`, formData, { + headers: { + 'Content-Type': 'multipart/form-data' + } + }) + .finally(() => { + commit('setLoading', false); + }); + }, + setUser({ commit, state, dispatch }, data: FG.User) { commit('setLoading'); axios