fix(web-ui): Buttons not showing correctly

code/web-ui/src/components/top-menu.vue

@@ -422,14 +422,11 @@
       }
     },
 
-    beforeUpdate () {
+    mounted () {
+      this.loadLocalParameters()
       if (localStorage.adminRight === 'true' || this.adminActivated) {
         this.$store.dispatch('admin/enableAdmin', 'projects-list')
       }
-    },
-
-    mounted () {
-      this.loadLocalParameters()
       Vue.http
         .get(api.paths.info, api.REQUEST_OPTIONS)
         .then((response) => {

code/web-ui/src/styles/common.css

@@ -462,6 +462,7 @@ pre code {
   display: flex;
   margin: 0 auto;
   justify-content: center;
+  text-align: center;
 }
 
 .projectCTA .ivu-alert {

code/web-ui/src/views/admin-management-members-projects.vue

@@ -22,59 +22,70 @@
     </div>
 
     <div>
-      <div v-if="isSuperAdmin || isAdmin" class="projectCTA">
-        <h2>Project's roles</h2>
+      <div v-if="this.getMemberInfo.scopes.length > 0">
+        <div v-if="isSuperAdmin || isAdmin" class="projectCTA">
+          <h2>Project's roles</h2>
 
-        <Button type="primary" class="btn-group-right" @click="userToProject = true">
-          Affect to a new project
-        </Button>
-      </div>
-      <table class="adminTable" aria-label="User's project and his role for each of them">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Role</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody v-if="members">
-          <tr v-for="(scope, index) in (isAdmin ? sortedProjects : this.getMemberInfo.scopes)" :key="index" :class="index %2 !== 0 ? 'lightGrey' : 'darkGrey'">
-            <td class="userType">
-              {{ scope.project }}
-            </td>
+          <Button type="primary" class="btn-group-right" @click="userToProject = true">
+            Affect to a new project
+          </Button>
+        </div>
+        <table class="adminTable" aria-label="User's project and his role for each of them">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Role</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody v-if="members">
+            <tr v-for="(scope, index) in (isAdmin ? sortedProjects : this.getMemberInfo.scopes)" :key="index" :class="index %2 !== 0 ? 'lightGrey' : 'darkGrey'">
+              <td class="userType">
+                {{ scope.project }}
+              </td>
+
+              <td class="userType">
+                <ul class="user-project-roles">
+                  <li class="user-role-chip" 
+                      @click="changeProfile({ member: getMemberInfo, project: scope.project, role: 'MEMBER'})" 
+                      :class="scope.role === 'MEMBER' ? ' active' : ''">
+                      <span v-if="scope.role === 'MEMBER'"><Icon type="md-checkmark" /></span>
+                      Member
+                  </li>
+                  <li class="user-role-chip"
+                      @click="changeProfile({ member: getMemberInfo, project: scope.project, role: 'MAINTAINER'})"
+                      :class="scope.role === 'MAINTAINER' ? ' active' : ''">
+                      <span v-if="scope.role === 'MAINTAINER'"><Icon type="md-checkmark" /></span>
+                      Maintainer
+                  </li>
+                  <li class="user-role-chip"
+                      @click="changeProfile({ member: getMemberInfo, project: scope.project, role: 'ADMIN'})" 
+                      :class="scope.role === 'ADMIN' ? ' active' : ''">
+                      <span v-if="scope.role === 'ADMIN'"><Icon type="md-checkmark" /></span>
+                      Admin
+                  </li>
+                </ul>
+              </td>
 
-            <td class="userType">
-              <ul class="user-project-roles">
-                <li class="user-role-chip" 
-                    @click="changeProfile({ member: getMemberInfo, project: scope.project, role: 'MEMBER'})" 
-                    :class="scope.role === 'MEMBER' ? ' active' : ''">
-                    <span v-if="scope.role === 'MEMBER'"><Icon type="md-checkmark" /></span>
-                    Member
-                </li>
-                <li class="user-role-chip"
-                    @click="changeProfile({ member: getMemberInfo, project: scope.project, role: 'MAINTAINER'})"
-                    :class="scope.role === 'MAINTAINER' ? ' active' : ''">
-                    <span v-if="scope.role === 'MAINTAINER'"><Icon type="md-checkmark" /></span>
-                    Maintainer
-                </li>
-                <li class="user-role-chip"
-                    @click="changeProfile({ member: getMemberInfo, project: scope.project, role: 'ADMIN'})" 
-                    :class="scope.role === 'ADMIN' ? ' active' : ''">
-                    <span v-if="scope.role === 'ADMIN'"><Icon type="md-checkmark" /></span>
-                    Admin
-                </li>
-              </ul>
-            </td>
+              <td class="remove-member-project-btn">
+                  <Icon type="md-close-circle" size="32" @click="changeProfile({
+                    remove: true,
+                    project: scope.project
+                  })" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
-            <td class="remove-member-project-btn">
-                <Icon type="md-close-circle" size="32" @click="changeProfile({
-                  remove: true,
-                  project: scope.project
-                })" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div v-else class="projectCTA">
+        <span>
+          <Alert type="warning">This member is not affected to any project yet. Click the button below:</Alert>
+          <Button type="primary" @click="userToProject = true" >
+            Affect to a new project
+          </Button>
+        </span>
+      </div>
     </div>
 
     <Modal v-model="userToProject" title="Affect to a new project" okText="Add" footer-hide @on-ok="changeProfile" @close="userToProject = false" :width="900"

code/web-ui/src/views/admin-management-members.vue

@@ -41,7 +41,6 @@
           </div>
         </div>
 
-
         <table class="adminTable" aria-label="Users with their roles and projects">
           <thead>
             <tr v-if="memberType === 'Members'">
@@ -203,7 +202,8 @@
                 this.members.push(user)
               }
             }
-            return this.members
+
+            return this.members.sort((a, b) => a.login.localeCompare(b.login))
           })
       },
 
@@ -256,12 +256,18 @@
       isManagerOf (scopes) {
         const adminProject = this.currentUser.scopes.filter(project => project.role === 'ADMIN')
 
-        return scopes.some(admin => adminProject.find(project => project.project === admin.project))
+        if (this.isAdmin) {
+          return true
+        } else {
+          return scopes.some(admin => adminProject.find(project => project.project === admin.project))
+        }
       },
 
       isMe (user) {
         if (user === this.currentUser.login) {
           return true
+        } else {
+          return false
         }
       }
     },
@@ -271,11 +277,6 @@
     },
 
     computed: {
-      sortedMembers () {
-        this.$store.dispatch('admin/showSubMenuMembers', false)
-        return this.members.map(item => item).sort((a, b) => a.id - b.id)
-      },
-
       currentUser () {
         return AuthenticationService.getDetails().user
       },
@@ -284,6 +285,10 @@
         return this.currentUser.scopes.some(({ role }) => role === 'ADMIN')
       },
 
+      isAdmin () {
+        return this.currentUser.profile === 'SUPER_ADMIN'
+      },
+
       isNotAuditor () {
         return this.currentUser.profile !== 'AUDITOR'
       },

code/web-ui/src/views/admin-management.vue

@@ -251,7 +251,7 @@
       },
 
       openProjectDetails (projectInfo) {
-        this.$router.push({ name: 'admin-project-details', params: { projectCode: projectInfo.code, projectName: projectInfo.name, userRole: projectInfo.currentUserRole } })
+        this.$router.push({ name: 'admin-project-details', params: { projectCode: projectInfo.code, projectName: projectInfo.name, userRole: this.user.profile } })
       },
 
       async initProjects () {

code/web-ui/src/views/admin-project-details.vue

@@ -34,7 +34,7 @@
       <div class="projectCTA">
         <h2 v-if="!emptyProject">Project's members</h2>
 
-        <span :class="isMember ? 'hidden' : ''">
+        <span :class="isMember ? 'hidden' : isAuditor ? 'hidden' : ''">
           <Alert v-if="emptyProject" type="warning" class="btn-group-right">There are no members to show in this projects</Alert>
           <Button title="Add" type="primary" ghost class="btn-group-right" @click="memberToAdd = true">Add member</Button>
           <Button title="Edit" type="primary" class="btn-group-right" ghost>Edit project</Button>
@@ -56,8 +56,8 @@
             <td >{{ isMe(member.login) }}</td>
             <td>{{ getUserRole(member.scopes) }}</td>
             <td class="table-cta">
-              <Icon v-if="!isMember" type="md-close-circle" class="crossIcon" size="24" @click="removeUserFromProject(member)" />
-              <Icon v-if="!isMember" type="md-create" size="24" @click="openProjectDetails(project)" />
+              <Icon v-if="!isMember && !isAuditor" type="md-close-circle" class="crossIcon" size="24" @click="removeUserFromProject(member)" />
+              <Icon v-if="!isMember && !isAuditor" type="md-create" size="24" @click="openProjectDetails(project)" />
             </td>
           </tr>
         </tbody>
@@ -230,6 +230,10 @@
 
       isMember () {
         return this.$route.params.userRole === USER.ROLE_ON_PROJECT.MEMBER
+      },
+
+      isAuditor () {
+        return this.$route.params.userRole === USER.PROFILE.AUDITOR
       }
     },