Change in gravatar image

components/user/profile/list/item.vue

@@ -1,12 +1,7 @@
 <template>
   <v-list-item class="px-2" @click="editProfile">
     <v-list-item-avatar>
-      <v-img
-        :src="
-          getUser.avatar ||
-          `https://randomuser.me/api/portraits/men/${getUser.id}.jpg`
-        "
-      ></v-img>
+      <v-img :src="getUser.avatar"></v-img>
     </v-list-item-avatar>
     <v-list-item-content>
       <v-list-item-title class="text-h6">

pages/profile/edit.vue

@@ -59,9 +59,17 @@
             :label="$t('form.label.profileAvatar')"
           ></v-text-field>
 
+          <v-avatar v-if="hasImage" size="100">
+            <img
+              class="img-preview"
+              :alt="formData.display_name"
+              :src="formData.avatar"
+            />
+          </v-avatar>
+
           <client-only>
             <image-uploader
-              :preview="true"
+              :preview="false"
               :className="['fileinput', { 'fileinput--loaded': hasImage }]"
               capture="false"
               :debug="0"
@@ -117,11 +125,13 @@ export default {
     return {
       hasImage: profile.avatar !== '',
       formData: {
+        display_name: profile.display_name,
         first_name: profile.first_name,
         last_name: profile.last_name,
         mobilephone: profile.mobilephone,
         idnumber: profile.idnumber,
         faculty: profile.faculty.id,
+        /* TODO: The API should provide the full url, or we should have a setting for specifying the full media url (CDN caching) */
         avatar: profile.avatar,
       },
       form: new Form({
@@ -162,12 +172,8 @@ export default {
           ],
         },
         onResponse(response) {
-          console.log(response)
-          /*
-          this.vm.$router.push(
-            this.vm.localePath(`/researchStudies/${response.data.id}/`)
-          )
-          */
+          /* TODO: Should reload the current page.... but then the form does not work anymore. Something with the state.... */
+          this.vm.$router.push(this.vm.localePath(`/researchStudies/`))
         },
       }),
     }

store/researchers.js

@@ -25,6 +25,10 @@ export const actions = {
 export const mutations = {
     getMeSuccess(state, { result }) {
         state.profile = result;
+        /* TODO: How to add the API url for full image url ?? */
+        if (this.$axios.defaults.baseURL) {
+            state.profile.avatar = this.$axios.defaults.baseURL.replace(/\/$/g, '') + state.profile.avatar;
+        }
     },
     updateMeSuccess(state, { result }) {