feat: add a dynamic breadcrumb on each pages, personal user page, use…

… of i18n plugin
Decathlon · Mar 7, 2023 · 5037445 · 5037445
1 parent 8c6848d
commit 5037445
Show file tree

Hide file tree

Showing 17 changed files with 4,397 additions and 3,789 deletions.
diff --git a/code/web-ui/package-lock.json b/code/web-ui/package-lock.json
diff --git a/code/web-ui/package.json b/code/web-ui/package.json
@@ -30,6 +30,7 @@
     "sharp": "^0.26.3",
     "vue": "2.5.17",
     "vue-cookies": "^1.7.4",
+    "vue-i18n": "^8.28.2",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1",
     "vue-virtual-scroller": "^0.12.2",

diff --git a/code/web-ui/src/app.vue b/code/web-ui/src/app.vue
@@ -18,19 +18,22 @@
   <div id="app" :class="isFramed ? 'isFramed' : ''">
     <top-menu data-nrt="topMenu" v-if='!isFramed && isLoggedInPage' style="position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;"></top-menu>
     <div class="layout-content">
+      <breadcrumb />
       <router-view></router-view>
     </div>
   </div>
 </template>
 
 <script>
   import topMenu from './components/top-menu.vue'
+  import breadcrumb from './components/breadcrumb.vue'
 
   export default {
     name: 'app',
 
     components: {
-      topMenu
+      topMenu,
+      breadcrumb
     },
 
     computed: {

diff --git a/code/web-ui/src/assets/auditor.png b/code/web-ui/src/assets/auditor.png
diff --git a/code/web-ui/src/assets/super_admin.png b/code/web-ui/src/assets/super_admin.png
diff --git a/code/web-ui/src/components/breadcrumb.vue b/code/web-ui/src/components/breadcrumb.vue
@@ -0,0 +1,37 @@
+<template>
+  <Breadcrumb class="breadcrumbLink">
+    <BreadcrumbItem to="/">Home</BreadcrumbItem>
+    <BreadcrumbItem v-if="getBack.path" :to="getBack.path">{{ getBack.meta.title }}</BreadcrumbItem>
+    <BreadcrumbItem v-if="actualPath.path">{{ actualPath.meta.title }}</BreadcrumbItem>
+  </Breadcrumb>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        previousPath: [],
+        actualPath: []
+      }
+    },
+
+    computed: {
+      getBack () {
+        if (!this.actualPath.path?.includes(this.previousPath.name)) {
+          this.previousPath = []
+        }
+
+        return this.previousPath
+      }
+    },
+
+    watch: {
+      '$route' (to, from) {
+        this.actualPath = to
+        if (from.name) {
+          this.previousPath = from
+        }
+      }
+    }
+  }
+</script>
diff --git a/code/web-ui/src/components/top-menu.vue b/code/web-ui/src/components/top-menu.vue
@@ -67,23 +67,23 @@
       </div>
 
       <div id="helps">
-        <Tooltip v-if="isLoggedIn" class="user-avatar top-right-nav" placement="bottom">
-          <div class="user-picture" :style="{ backgroundImage: `url(${user.pictureUrl})` }">
+        <div v-if="isLoggedIn" class="top-right-nav" placement="bottom" @click="$router.push({ name: 'management-profile', params: { myProfile: 'me'} })">
+          <div class="user-avatar" :style="{ backgroundImage: `url(${user.pictureUrl})` }">
             <span v-if="isAdmin">
-              <img src="../assets/super_admin.png" width="20" height="20" alt="User role">
+              <img src="../assets/super_admin.png" width="23" height="22" alt="User role">
             </span>
             <span v-if="isAuditor">
-              <img src="../assets/auditor.png" width="20" height="20" alt="User role">
+              <img src="../assets/auditor.png" width="23" height="22" alt="User role">
             </span>
           </div>
-          <div slot="content">
+          <!-- <div slot="content">
             <p v-if="providerName">Connected via <strong>{{providerName}}</strong></p>
             <p v-if="user && user.profile">> Profile: <strong>{{user.profile}}</strong></p>
             <p v-if="user && user.login">> Login: <strong>{{user.login}}</strong></p>
             <p v-if="user && user.firstName && user.lastName">> Name: <strong>{{user.firstName + " " + user.lastName}}</strong></p>
             <p v-if="user && user.email">> Email: <strong>{{user.email}}</strong></p>
-          </div>
-        </Tooltip>
+          </div> -->
+        </div>
         <!-- Keep the same width as logo+select: this is to center the menu when space is available -->
         <!-- No space between items -->
         <Dropdown trigger="click" class="top-right-nav" placement="bottom-end">
@@ -592,16 +592,12 @@
     margin-right: 4px;
   }
 
-  .user-avatar .user-picture {
+  .user-avatar {
     background-size: cover;
     width: 35px;
     height: 35px;
     border-radius: 100px;
-  }
-
-  .user-avatar img {
     margin-right: 15px;
-    border-radius: 100px;
     position: relative;
   }
 
@@ -610,9 +606,4 @@
     left: 21px;
     top: 18px;
   }
-
-  .user-avatar span img {
-    background-color: #ffffff;
-    padding: 2px;
-  }
 </style>
diff --git a/code/web-ui/src/locales/en.json b/code/web-ui/src/locales/en.json
@@ -0,0 +1,13 @@
+{
+    "profile": {
+        "SCOPED_USER": "Scoped user",
+        "SUPER_ADMIN": "Super admin",
+        "AUDITOR": "Auditor"
+    },
+
+    "role": {
+        "MEMBER": "Member",
+        "ADMIN": "Admin",
+        "MAINTAINER": "Maintainer"
+    }
+}
diff --git a/code/web-ui/src/main.js b/code/web-ui/src/main.js
@@ -35,6 +35,7 @@ import configurationPlugin from '@/config'
 import VueCookies from 'vue-cookies'
 
 import { sanitizeUrl } from '@braintree/sanitize-url'
+import VueI18n from 'vue-i18n'
 
 Vue.config.devtools = true
 Vue.use(Vue2Filters)
@@ -44,6 +45,7 @@ Vue.use(iView, { locale })
 Vue.use(VueVirtualScroller)
 Vue.use(configurationPlugin)
 Vue.use(VueCookies)
+Vue.use(VueI18n)
 iView.LoadingBar.config({
   color: '#FFEA28', // Yellowish
   height: 3
@@ -59,6 +61,14 @@ const router = new VueRouter({
   routes: routes
 })
 
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: {
+    en: require('./locales/en.json')
+  }
+})
+
 router.beforeEach(async (to, from, next) => {
   await AuthenticationService.manageLoginRedirection(to, from, next)
 
@@ -85,6 +95,7 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   beforeCreate () { this.$store.commit('initialiseStore') },
   render: h => h(app)
 })

diff --git a/code/web-ui/src/routes.js b/code/web-ui/src/routes.js
@@ -181,7 +181,7 @@ const routes = [
     path: '/admin/projects-list',
     name: 'projects-list',
     meta: {
-      title: 'Admin Management'
+      title: 'Project list'
     },
     component: (resolve) => require(['./views/admin-management.vue'], resolve)
   },
@@ -218,7 +218,7 @@ const routes = [
     path: '/admin/projects-list/:projectCode/:projectName/:userRole?',
     name: 'admin-project-details',
     meta: {
-      title: 'Admin project details'
+      title: 'Project details'
     },
     component: (resolve) => require(['./views/admin-project-details.vue'], resolve)
   },
@@ -314,6 +314,15 @@ const routes = [
     },
     component: (resolve) => require(['./views/management-settings.vue'], resolve)
   },
+  {
+    path: '/profile/:myProfile',
+    name: 'management-profile',
+    beforeEnter: requireAuth,
+    meta: {
+      title: 'Profile'
+    },
+    component: (resolve) => require(['./views/management-profile.vue'], resolve)
+  },
 
   // 403 redirect
   {

diff --git a/code/web-ui/src/styles/common.css b/code/web-ui/src/styles/common.css
@@ -75,9 +75,6 @@ h2 {
   position: absolute;
   top: 30px;
   left: 110px;
-  cursor: pointer;
-  font-weight: 800;
-  color: #747474;
 }
 
 /* DROPDOWNS */
@@ -568,7 +565,6 @@ pre code {
 }
 
 .adminTable .table-cta i {
-  float: right;
   margin-right: 1rem;
   cursor: pointer;
 }

diff --git a/code/web-ui/src/views/admin-management-groups.vue b/code/web-ui/src/views/admin-management-groups.vue
@@ -16,17 +16,12 @@
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
 <template>
   <div class="tableContent">
-    <span class="breadcrumbLink" @click="$router.go(-1)">
-      <Icon type="md-home" />
-      list
-    </span>
-
     <h1 v-if="this.groupInfo[0]" class="adminTitle">
       {{ this.groupInfo[0].name }}
       <p class="title-description"><strong>{{ this.groupInfo[0].description }}</strong></p>
     </h1>
 
-    <Tabs class="adminTable" type="card" v-model="tab">
+    <Tabs class="adminTable" type="card" v-model="activeTab" :animated="false">
       <TabPane label="Managers">
         <table class="tab-content" aria-label="Group's management">
           <thead>
@@ -58,7 +53,7 @@
 
           <tbody v-for="member in groupInfo" :key="member.id">
             <tr
-              v-for="(user, index) in member.users"
+              v-for="(user, index) in member.members"
               :key="index"
               :class="index % 2 !== 0 ? 'lightGrey' : 'darkGrey'"
             >
@@ -95,13 +90,9 @@
         </table>
       </TabPane>
 
-      <template #extra>
-        <Button @click="handleTabsAdd" size="small">增加</Button>
-      </template>
+      <Button @click="addToGroup" size="small" slot="extra">Add {{ groupTabs[activeTab] }}</Button>
     </Tabs>
 
-    <Button @click="handleTabsAdd" size="small">{{ groupTabs[this.tab] }}</Button>
-
     <Modal
       v-model="memberToAdd"
       title="Add Group"
@@ -189,7 +180,7 @@
         searchElement: '',
         showError: false,
         groupInfo: [],
-        tab: ''
+        activeTab: 0
       }
     },
 
@@ -200,6 +191,22 @@
           .then((groups) => {
             this.groupInfo = groups.body.filter(item => item.name === this.$route.params.groupName)
           })
+      },
+
+      addToGroup () {
+        const update = this.groupTabs[this.activeTab]
+
+        switch (update) {
+          case 'Managers':
+            Vue.http
+              .put(api.paths.groupsMembersManagement('user1', this.groupInfo[0].id), api.REQUEST_OPTIONS)
+              .then(response => console.log(response))
+            break
+          case 'Users':
+            break
+          case 'Projects':
+            break
+        }
       }
     },
 

diff --git a/code/web-ui/src/views/admin-management-members-projects.vue b/code/web-ui/src/views/admin-management-members-projects.vue
@@ -16,7 +16,6 @@
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
 <template>
   <div>
-    <span class="breadcrumbLink" @click="$router.go(-1)">Members list</span>
     <div>
       <h1 class="adminTitle">{{ getMemberInfo.login }}'s projects</h1>
     </div>

diff --git a/code/web-ui/src/views/admin-management-members.vue b/code/web-ui/src/views/admin-management-members.vue
@@ -17,11 +17,6 @@
 <template>
   <div>
     <div class="tableContent">
-      <span class="breadcrumbLink" @click="$router.go(-1)">
-        <Icon type="md-home" />
-        list
-      </span>
-
       <h1 class="adminTitle">{{ memberType }}</h1>
 
       <div v-if="manageProject || isNotAuditor">
@@ -61,7 +56,7 @@
                 <div>
                   <div v-if="memberType !== 'Groups'" class="user-avatar">
                     <span v-if="member.pictureUrl" :style="getAvatar(member)" class="user-picture"></span>
-                    <Avatar v-else class="user-picture">{{ getAvatar(member)  }}</Avatar>
+                    <Avatar v-else :style="generateRandomColor()">{{ getAvatar(member)  }}</Avatar>
                     <p>{{ member.login }}</p>
                   </div>
                   <div v-else>
@@ -71,7 +66,7 @@
               </td>
 
               <td>
-                <p v-if="memberType === 'Members'">{{ member.profile }}</p>
+                <p v-if="memberType === 'Members'">{{ $t('profile.' + member.profile) }}</p>
                 <p v-else>{{  member.managers[0].login }}</p>
               </td>
 
@@ -90,7 +85,7 @@
                 </span>
               </td>
 
-              <td class="table-cta">
+              <td class="table-cta" align="right">
                 <Icon v-if="!isMe(member.login) && isNotAuditor && isManagerOf(member.scopes)" type="md-eye" size="24" @click="navTo(member)" />
               </td>
             </tr>
@@ -325,8 +320,13 @@
         if (member.pictureUrl) {
           return `backgroundImage: url("` + member.pictureUrl + `")`
         } else if (member.login) {
-          return member.login.substring(0, 1)
+          return member.login.match(/(\b\S)?/g).join('').toUpperCase()
         }
+      },
+
+      generateRandomColor () {
+        const randomColor = Math.floor(Math.random() * 16777215).toString(16)
+        return 'background-color: #' + randomColor + ';'
       }
     },
 

diff --git a/code/web-ui/src/views/admin-management.vue b/code/web-ui/src/views/admin-management.vue
@@ -69,14 +69,14 @@
             <td>{{ project.creation_user }}</td>
             <td>{{ project.update_date }}</td>
             <td>{{ project.update_user }}</td>
-            <td v-if="isScopedUser">{{ project.currentUserRole }}</td>
+            <td v-if="isScopedUser">{{ $t('role.' + project.currentUserRole) }}</td>
             <td>
               <input type="radio" name="defaultProject" @change="changeDefaultProject(project)" :checked="(user.default_project && user.default_project === project.code)">
             </td>
-            <td class="table-cta">
-              <Icon type="md-close-circle" size="24" @click="deleteProject(project.code)" :class="isAdminOnProject(project) ? '' : 'hidden'"/>
-              <Icon type="md-create" size="24" @click="openProjectUpdateModal(project)" :class="isAdminOnProject(project) ? '' : 'hidden'"/>
+            <td class="table-cta" align="right">
               <Icon type="md-eye" size="24" @click="openProjectDetails(project)" :class="isDemoProject(project.code) ? 'hidden' : ''"/>
+              <Icon type="md-create" size="24" @click="openProjectUpdateModal(project)" :class="isAdminOnProject(project) ? '' : 'hidden'"/>
+              <Icon type="md-close-circle" size="24" @click="deleteProject(project.code)" :class="isAdminOnProject(project) ? '' : 'hidden'"/>
             </td>
           </tr>
         </tbody>