Update the user avatar in the navbar as well

[Issue: #301]

resources/js/components/NavigationBar.vue

@@ -109,7 +109,7 @@
 <script>
 import SearchBar from "@/components/SearchBar";
 import AuthService from '@/services/AuthService';
-import {mapMutations} from 'vuex';
+import {mapGetters, mapMutations} from 'vuex';
 
 export default {
     name: "NavigationBar",
@@ -133,16 +133,15 @@ export default {
     },
 
     computed: {
+        ...mapGetters(['apiUrls']),
         isGuest() {
             return this.user.id === null;
         },
         fullName() {
             return this.isGuest ? '' : (this.user.firstname + ' ' + this.user.surname);
         },
         avatarUrl() {
-            return this.user.avatar
-                ? "/storage/avatars/" + this.user.avatar
-                : "/images/default_avatar.jpg";
+            return this.apiUrls.avatar(this.user);
         },
     },
     methods: {

resources/js/components/users/UserProfile.vue

@@ -222,7 +222,7 @@
 <script>
 import Axios from "axios";
 import ImageUploader from "vue-image-crop-upload/upload-2.vue";
-import { mapGetters, mapMutations } from "vuex";
+import { mapActions, mapGetters, mapMutations } from "vuex";
 
 export default {
     name: "UserProfile",
@@ -248,7 +248,10 @@ export default {
         };
     },
     computed: {
-        ...mapGetters(["currentUser"]),
+        ...mapGetters([
+            "apiUrls",
+            "currentUser",
+        ]),
         isProfileOfLoggedInUser() {
             return this.currentUser.id === this.user.id;
         },
@@ -262,9 +265,7 @@ export default {
             return this.user.firstname + " " + this.user.surname;
         },
         avatarUrl() {
-            return this.user.avatar
-                ? "/storage/avatars/" + this.user.avatar
-                : "/images/default_avatar.jpg";
+            return this.apiUrls.avatar(this.user);
         },
         avatarUploadUrl() {
             return (
@@ -281,6 +282,7 @@ export default {
         this.fetchData();
     },
     methods: {
+        ...mapActions(["deleteUserAvatar"]),
         ...mapMutations(["setCurrentUser"]),
         fetchData() {
             this.error = this.user = null;
@@ -313,14 +315,15 @@ export default {
         deleteAvatar() {
             this.changingAvatar = true;
             this.toggleAvatarDeleteDialog();
-            return Axios.delete("/users/" + this.user_id + "/avatar")
+            return this.deleteUserAvatar()
                 .then(response => {
                     this.user.avatar = null;
                 })
                 .catch(error => {
                     this.error = error;
                 })
                 .then(() => {
+                    // always executed
                     this.changingAvatar = false;
                 });
         },

resources/js/stores/store.js

@@ -68,6 +68,12 @@ export default new Vuex.Store({
         tagSearch() {
           return getters.isLoggedIn ? '/tags' : '/public/tags';
         },
+        avatar(user) {
+          return user.avatar ? "/storage/avatars/" + user.avatar : "/images/default_avatar.jpg";
+        },
+        deleteAvatar(user) {
+          return "/users/" + user.id + "/avatar";
+        }
       }
     },
    },

resources/js/stores/users.js

@@ -26,7 +26,6 @@ const state = {
 
 
 const actions = {
-
     fetchCurrentUser({ commit }){
         return Axios.get('/users/me')
         .then((response)=>{
@@ -40,11 +39,14 @@ const actions = {
         return Axios.get(userSearchUrl, { params: { name: searchString } }).then(response =>{
             return response
         })
-
-
     },
-
-
+    deleteUserAvatar({commit, rootGetters, state}) {
+        let deleteAvatarUrl = rootGetters.apiUrls.deleteAvatar(state.user);
+        return Axios.delete(deleteAvatarUrl)
+            .then(response => {
+                commit('deleteAvatar');
+            });
+    },
 }
 
 const mutations = {
@@ -70,6 +72,9 @@ const mutations = {
     expireCurrentUser(state) {
         state.user = Object.assign({}, defaultUserState);
     },
+    deleteAvatar(state) {
+        state.user.avatar = null;
+    }
 }
 
 const getters = {

tests/e2e/pages/userProfile.js

@@ -1,3 +1,5 @@
+const navbar = require('../sections/navbar.js');
+
 var userProfileCommands = {
     deleteAvatar: function() {
         this.verify.visible('@deleteAvatarButton')
@@ -14,7 +16,7 @@ var userProfileCommands = {
             .setValue('@changeAvatarInput', newAvatar)
             .click('@changeAvatarConfirmButton');
         return this.waitForElementVisible('@customAvatar', 10000);
-    }
+    },
 };
 
 module.exports = {
@@ -23,6 +25,9 @@ module.exports = {
         // User #2 is user@example.org, see UsersTableSeeder.php. We're logging in as that user as well in login.js.
         return this.api.launchUrl + '/user/2';
     },
+    sections: {
+        navbar: navbar,
+    },
     elements: {
         customAvatar: '.avatar img[src^="/storage/avatars/"]', // src attribute starts with "/storage/avatars/"
         defaultAvatar: '.avatar img[src$="default_avatar.jpg"]',

tests/e2e/sections/navbar.js

@@ -30,6 +30,8 @@ module.exports = {
         searchBar: 'input[type="search"]',
         // the secondary navigation links on the right when logged in
         userMenuToggle: '#navbarUserProfileMenuLink',
+        customUserProfileImage: 'img.profile-picture[src^="/storage/avatars/"]',
+        defaultUserProfileImage: 'img.profile-picture[src$="default_avatar.jpg"]',
         linkToUserProfile: 'a[href^="/user/"]',
         linkToLogoutPage: 'a[href="/logout"]',
     }

tests/e2e/specs/userProfile.spec.js

@@ -14,20 +14,29 @@ describe('User profile', function() {
         .assert.visible('@defaultAvatar', 'before uploading an avatar, the default avatar is visible')
         .assert.visible('@changeAvatarButton', 'before uploading an avatar, the button to edit the user\'s avatar is visible')
         .assert.not.elementPresent('@deleteAvatarButton', 'before uploading an avatar, the button to delete the user\'s avatar is not present');
+      userProfile.section.navbar
+        .assert.not.elementPresent('@customUserProfileImage', 'before uploading an avatar, the user has no custom avatar in the navbar')
+        .assert.visible('@defaultUserProfileImage', 'before uploading an avatar, the default avatar is visible in the navbar');
 
       userProfile.changeAvatar();
       userProfile
         .assert.visible('@customAvatar', 'after uploading an avatar, the new avatar is visible')
         .assert.not.elementPresent('@defaultAvatar', 'after uploading an avatar, the default avatar is no longer present')
         .assert.visible('@changeAvatarButton', 'after uploading an avatar, the button to edit the user\'s avatar is still visible')
         .assert.visible('@deleteAvatarButton', 'after uploading an avatar, the button to delete the user\'s avatar is visible');
+        userProfile.section.navbar
+          .assert.visible('@customUserProfileImage', 'after uploading an avatar, the custom avatar is visible in the navbar')
+          .assert.not.elementPresent('@defaultUserProfileImage', 'after uploading an avatar, the default avatar is no longer present in the navbar');
 
       userProfile.deleteAvatar();
       userProfile
         .assert.not.elementPresent('@customAvatar', 'after deleting an avatar, the user has no custom avatar')
         .assert.visible('@defaultAvatar', 'after deleting an avatar, the default avatar is visible')
         .assert.visible('@changeAvatarButton', 'after deleting an avatar, the button to edit the user\'s avatar is visible')
         .assert.not.elementPresent('@deleteAvatarButton', 'after deleting an avatar, the button to delete the user\'s avatar is not present');
+        userProfile.section.navbar
+          .assert.not.elementPresent('@customUserProfileImage', 'after deleting an avatar, the user has no custom avatar in the navbar')
+          .assert.visible('@defaultUserProfileImage', 'after deleting an avatar, the default avatar is visible in the navbar')
 
       browser.end()
     })