Implemented Avatar

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;

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>
 

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 (

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,

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