From 939dde36511f0d77b4d2b07b9ddb73a7e2a699d2 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
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<string>;
   }
@@ -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
       </div>
       <div class="col-xs-12 col-sm-6 q-pa-sm">
-        <UserSelector :user="user" @update:user="userUpdated" />
+        <UserSelector
+          :user="user"
+          @update:user="userUpdated"
+        />
       </div>
     </q-card-section>
-    <MainUserSettings :user="user" @update:user="updateUser" />
+    <MainUserSettings
+      :user="user"
+      @update:user="updateUser"
+    />
   </q-card>
 </template>
 
@@ -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,
     };
-  }
+  },
 });
 </script>
 
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 = <Store<StateInterface>>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"
       />
       <IsoDateInput
+        class="col-xs-12 col-sm-6 q-pa-sm"
         v-model="props.user.birthday"
         label="Geburtstag"
       />
+      <q-file
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        v-model="avatar"
+        filled
+        label="Avatar"
+        accept=".jpg, image/*"
+        @rejected="onAvatarRejected"
+      >
+        <template v-slot:append>
+          <q-icon
+            name="mdi-file-image"
+            @click.stop
+          />
+        </template>
+      </q-file>
     </q-card-section>
     <q-separator v-if="!props.newUser" />
     <q-card-section
@@ -115,6 +131,7 @@ import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 import { hasPermission } from 'src/components/permission';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
+import { Notify } from 'quasar';
 
 interface Props {
   user?: FG.User;
@@ -155,6 +172,14 @@ export default defineComponent({
         })[0];
     });
 
+    const avatar = ref<string>('');
+    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<UserStateInterface, StateInterface> = {
       });
   },
 
+  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