BTTF-57

components/Layout/Header.vue

@@ -8,7 +8,7 @@
     class="ot_green ot_white--text"
   >
     <v-btn
-      v-if="properties.displayedMiniVariant"
+      v-if="displayedMiniVariant"
       class="menu-btn"
       icon
       @click.stop="displayedMenu()"
@@ -16,7 +16,7 @@
       <v-icon class="ot_white--text">mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}</v-icon>
     </v-btn>
 
-    <v-toolbar-title v-text="properties.title"/>
+    <v-toolbar-title v-text="title"/>
 
     <v-spacer/>
 
@@ -29,17 +29,17 @@
       <a class="no-decoration" :href="properties.homeUrl + '/'"><v-icon class="ot_white--text" small>fa-home</v-icon></a>
     </v-btn>
 
-    <LayoutHeaderMenu :menu="properties.webSiteMenu"></LayoutHeaderMenu>
+    <LayoutHeaderMenu :menu="webSiteMenu"></LayoutHeaderMenu>
 
-    <LayoutHeaderMenu :menu="properties.myAccessesMenu" v-if="properties.hasAccessesMenu"></LayoutHeaderMenu>
+    <LayoutHeaderMenu :menu="myAccessesMenu" v-if="hasAccessesMenu"></LayoutHeaderMenu>
 
-    <LayoutHeaderMenu :menu="properties.myFamilyMenu" v-if="properties.hasFamilyMenu"></LayoutHeaderMenu>
+    <LayoutHeaderMenu :menu="myFamilyMenu" v-if="hasFamilyMenu"></LayoutHeaderMenu>
 
     <LayoutNotification></LayoutNotification>
 
-    <LayoutHeaderMenu :menu="properties.configurationMenu" v-if="properties.hasConfigurationMenu"></LayoutHeaderMenu>
+    <LayoutHeaderMenu :menu="configurationMenu" v-if="hasConfigurationMenu"></LayoutHeaderMenu>
 
-    <LayoutHeaderMenu :menu="properties.accountMenu" :avatar="true"></LayoutHeaderMenu>
+<!--    <LayoutHeaderMenu :menu="accountMenu" :avatar="true"></LayoutHeaderMenu>-->
 
     <a class="help ot_dark_grey ot_menu_color--text" href="https://support.opentalent.fr/" target="_blank">{{$t('help_access')}}</a>
 
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-  import {defineComponent, reactive, useContext} from '@nuxtjs/composition-api'
+  import {defineComponent, reactive, useContext, computed} from '@nuxtjs/composition-api'
   import {$useMenu} from "~/use/layout/menu";
 
   export default defineComponent({
@@ -56,19 +56,21 @@
 
       const properties = reactive({
         miniVariant: false,
-        displayedMiniVariant: store.state.profile.access.hasLateralMenu,
-        hasConfigurationMenu: store.state.profile.access.hasConfigurationMenu,
-        hasAccessesMenu: store.state.profile.access.hasAccessesMenu,
-        hasFamilyMenu: store.state.profile.access.hasFamilyMenu,
-        title: store.state.profile.organization.name,
-        homeUrl : $config.baseURL_adminLegacy,
-        webSiteMenu: $useMenu.setUpContext().useWebSiteMenuConstruct(),
-        myAccessesMenu : $useMenu.setUpContext().useMyAccessesMenuConstruct(),
-        myFamilyMenu : $useMenu.setUpContext().useMyFamilyMenuConstruct(),
-        configurationMenu: $useMenu.setUpContext().useConfigurationMenuConstruct(),
-        accountMenu : $useMenu.setUpContext().useAccountMenuConstruct()
+        homeUrl : $config.baseURL_adminLegacy
       })
 
+      const displayedMiniVariant = computed(()=>store.state.profile.access.hasLateralMenu)
+      const hasConfigurationMenu = computed(()=>store.state.profile.access.hasConfigurationMenu)
+      const hasAccessesMenu = computed(()=>store.state.profile.access.hasAccessesMenu)
+      const hasFamilyMenu = computed(()=>store.state.profile.access.hasFamilyMenu)
+      const title = computed(()=>store.state.profile.organization.name)
+
+      const webSiteMenu = $useMenu.setUpContext().useWebSiteMenuConstruct()
+      const myAccessesMenu = $useMenu.setUpContext().useMyAccessesMenuConstruct()
+      const myFamilyMenu = $useMenu.setUpContext().useMyFamilyMenuConstruct()
+      const configurationMenu = $useMenu.setUpContext().useConfigurationMenuConstruct()
+      const accountMenu = $useMenu.setUpContext().useAccountMenuConstruct()
+
       const displayedMenu = () => {
         properties.miniVariant = !properties.miniVariant
         emit('handle-open-menu-click', properties.miniVariant)
@@ -76,7 +78,17 @@
 
       return {
         properties,
-        displayedMenu
+        displayedMiniVariant,
+        hasConfigurationMenu,
+        hasAccessesMenu,
+        hasFamilyMenu,
+        title,
+        displayedMenu,
+        webSiteMenu,
+        myAccessesMenu,
+        myFamilyMenu,
+        configurationMenu,
+        accountMenu
       }
     }
   })

components/Layout/Menu.vue

@@ -7,7 +7,7 @@
     app
   >
     <v-list>
-      <div v-for="(item, i) in properties.menu" :key="i">
+      <div v-for="(item, i) in menu" :key="i">
         <v-list-item
           v-if="!item.children"
           :href="item.isExternalLink ? item.to : undefined"
@@ -61,24 +61,19 @@
 </template>
 
 <script lang="ts">
-  import {$useMenu} from '@/use/layout/menu'
-  import {defineComponent, reactive} from '@nuxtjs/composition-api'
+  import {defineComponent} from '@nuxtjs/composition-api'
+  import {ItemsMenu} from "~/types/interfaces";
 
   export default defineComponent({
     props: {
+      menu: {
+        type: Array as () => ItemsMenu,
+        required: true
+      },
       miniVariant: {
         type: Boolean,
         required: true
       }
-    },
-    setup() {
-      const properties = reactive({
-        menu: $useMenu.setUpContext().useLateralMenuConstruct()
-      })
-
-      return {
-        properties
-      }
     }
   })
 </script>

lang/layout/fr-FR.js

@@ -88,5 +88,6 @@ export default (context, locale) => {
     course_duplication: 'Dupliquer les cours hebdomadaires',
     import: 'Importer',
     multiAccesses: 'Mes structures',
+    familyAccesses: 'Changement d\'utilisateur',
   })
 }

layouts/default.vue

@@ -5,7 +5,7 @@
 
     <v-app dark>
 
-      <LayoutMenu  v-if="properties.displayedMenu" :miniVariant="properties.miniVariant"></LayoutMenu>
+      <LayoutMenu  v-if="displayedMenu" :menu="menu" :miniVariant="properties.miniVariant"></LayoutMenu>
 
       <LayoutHeader v-on:handle-open-menu-click="handleOpenMenu"></LayoutHeader>
 
@@ -20,18 +20,20 @@
 </template>
 
 <script lang="ts">
-  import {defineComponent, reactive, useContext} from '@nuxtjs/composition-api'
+  import {computed, defineComponent, reactive, useContext} from '@nuxtjs/composition-api'
+  import {$useMenu} from '@/use/layout/menu'
 
   export default defineComponent({
     name: 'defaultLayout',
     setup() {
       const {store} = useContext()
+      const menu = $useMenu.setUpContext().useLateralMenuConstruct()
 
       const properties = reactive({
         clipped: false,
-        miniVariant: false,
-        displayedMenu:  store.state.profile.access.hasLateralMenu
+        miniVariant: false
       })
+      const displayedMenu = computed(()=>store.state.profile.access.hasLateralMenu)
 
       const handleOpenMenu = (miniVariant:boolean) => {
         properties.miniVariant = miniVariant
@@ -39,6 +41,8 @@
 
       return {
         properties,
+        menu,
+        displayedMenu,
         handleOpenMenu
       }
     },

plugins/Data/axios.js

@@ -1,6 +1,10 @@
 export default function ({ $axios, redirect, store }) {
   $axios.onRequest(config => {
-    $axios.setHeader('x-accessid', `${store.state.profile.access.accessId}`)
+    $axios.setHeader('x-accessid', `${store.state.profile.access.id}`)
+
+    if(store.state.profile.access.switchId)
+      $axios.setHeader('x-switch-user', `${store.state.profile.access.switchId}`)
+
     $axios.setToken(`${store.state.profile.access.bearer}`, 'Bearer')
   })
 

store/index.js

@@ -17,7 +17,7 @@ export const actions = {
    */
   async nuxtServerInit({dispatch}, {req}) {
     const initCookie = await dispatch('initCookies', {req: req})
-    const updateProfile = await dispatch('updateProfile')
+    const updateProfile = await dispatch('getUserProfile')
   },
 
   /**
@@ -29,6 +29,7 @@ export const actions = {
   async initCookies({commit}, {req}){
     let bearer = null
     let accessId = null
+    let SwitchAccessId = null
     if (req.headers.cookie) {
       const parsed = cookieparser.parse(req.headers.cookie)
       try {
@@ -42,9 +43,14 @@ export const actions = {
       } catch (err) {
         throw new Error(err.message)
       }
+
+      try {
+        SwitchAccessId = parsed.SwitchAccessId
+        commit('profile/access/setSwitchId', SwitchAccessId)
+      } catch (err) {}
     }
     commit('profile/access/setBearer', bearer)
-    commit('profile/access/setAccessId', accessId)
+    commit('profile/access/setId', accessId)
   },
 
   /**
@@ -53,11 +59,10 @@ export const actions = {
    * @param state
    * @return {Promise<void>}
    */
-  async updateProfile({dispatch, state}) {
+  async getUserProfile({dispatch, state}) {
     const my_profile = await this.app.context.$dataProvider.invoke({
       type: QUERY_TYPE.DEFAULT,
-      url: 'my_profile',
-      id: state.profile.access.accessId
+      url: 'my_profile'
     })
     dispatch('profile/access/setProfile', my_profile)
   },

store/profile/access.ts

@@ -1,12 +1,16 @@
 import {$roleUtils} from '~/services/rights/roleUtils'
-import {AbilitiesType, accessState, AccessStore, multiAccessState, organizationState} from "~/types/interfaces";
+import {AbilitiesType, accessState, baseAccessState, baseOrganizationState} from "~/types/interfaces";
 import * as _ from "lodash";
+import {GENDER} from "~/types/enums";
 
 export const state = () => ({
   bearer: null,
+  id: null,
+  switchId: null,
   name: null,
   givenName: null,
-  accessId: null,
+  gender: null,
+  avatarId: null,
   roles: [],
   abilities: [],
   isAdmin: false,
@@ -18,19 +22,24 @@ export const state = () => ({
   isTeacher: false,
   isMember: false,
   isOther: false,
-  hasLateralMenu: true,
-  hasConfigurationMenu: true,
-  hasAccessesMenu: true,
-  hasFamilyMenu: true,
-  multiAccesses: []
+  hasLateralMenu: false,
+  hasConfigurationMenu: false,
+  hasAccessesMenu: false,
+  hasFamilyMenu: false,
+  multiAccesses: [],
+  familyAccesses: [],
+  originalAccess: null,
 })
 
 export const mutations = {
   setBearer(state:accessState, bearer:string){
     state.bearer = bearer
   },
-  setAccessId(state:accessState, accessId:number){
-    state.accessId = accessId
+  setId(state:accessState, id:number){
+    state.id = id
+  },
+  setSwitchId(state:accessState, switchId:number){
+    state.switchId = switchId
   },
   setName(state:accessState, name:string){
     state.name = name
@@ -38,6 +47,12 @@ export const mutations = {
   setGivenName(state:accessState, givenName:string){
     state.givenName = givenName
   },
+  setGender(state:accessState, gender:GENDER){
+    state.gender = gender
+  },
+  setAvatarId(state:accessState, avatarId:number){
+    state.avatarId = avatarId
+  },
   setRoles(state:accessState, roles:Array<string>){
     state.roles = roles
   },
@@ -86,8 +101,14 @@ export const mutations = {
   setHasFamilyMenu(state:accessState, hasFamilyMenu:boolean){
     state.hasFamilyMenu = hasFamilyMenu
   },
-  addMultiAccess(state:accessState, accesses:multiAccessState) {
-    state.multiAccesses.push(accesses)
+  addMultiAccess(state:accessState, access:baseOrganizationState) {
+    state.multiAccesses.push(access)
+  },
+  addFamilyAccess(state:accessState, access:baseAccessState) {
+    state.familyAccesses.push(access)
+  },
+  setOriginalAccess(state:accessState, access:baseAccessState) {
+    state.originalAccess = access
   }
 }
 
@@ -97,6 +118,8 @@ export const actions = {
 
     context.commit('setName', profile.name)
     context.commit('setGivenName', profile.givenName)
+    context.commit('setGender', profile.gender)
+    context.commit('setAvatarId', profile.avatarId)
     context.commit('setIsAdminAccess', profile.isAdminAccess)
     context.commit('setIsAdmin', $roleUtils.isA('ADMIN', roles_to_array))
     context.commit('setIsAdministratifManager', $roleUtils.isA('ADMINISTRATIF_MANAGER', roles_to_array))
@@ -110,16 +133,49 @@ export const actions = {
     context.commit('setRoles', $roleUtils.filterFunctionRoles(roles_to_array))
     context.commit('setIsAdminAccess', profile.isAdminAccess)
 
-    _.each(profile.accesses, access => {
-      const a:multiAccessState = {
-        id: access.id,
-        organizationId: access.organization.id,
-        organizationName: access.organization.name,
-      }
-      context.commit('addMultiAccess', a)
-    });
+    //Time to set Multi Accesses
+    context.dispatch('setMultiAccesses', profile.multiAccesses)
+
+    //Time to set Family Accesses
+    context.dispatch('setFamilyAccesses', profile.familyAccesses)
+
+    //Time to add the original Access (switch User case)
+    context.dispatch('setOriginalAccess', profile.originalAccess)
 
     //Time to set Oganization Profile
     context.dispatch('profile/organization/setProfile', profile.organization, {root:true})
   },
+  setMultiAccesses(context:any, accesses:any){
+    _.each(accesses, organization => {
+      const o:baseOrganizationState = {
+        id: organization.id,
+        name: organization.name,
+      }
+      context.commit('addMultiAccess', o)
+    });
+  },
+  setFamilyAccesses(context:any, accesses:any){
+    _.each(accesses, access => {
+      const a:baseAccessState = {
+        id: access.id,
+        name: access.name,
+        givenName: access.givenName,
+        gender: access.gender,
+        avatarId: access.avatarId,
+      }
+      context.commit('addFamilyAccess', a)
+    });
+  },
+  setOriginalAccess(context:any, access: any) {
+    if(access){
+      const originalAccess:baseAccessState = {
+        id:access.id,
+        name:access.name,
+        givenName:access.givenName,
+        gender:access.gender,
+        avatarId:access.avatarId
+      }
+      context.commit('setOriginalAccess', originalAccess)
+    }
+  }
 }

store/profile/organization.ts

@@ -1,4 +1,4 @@
-import {organizationState} from "~/types/interfaces";
+import {baseOrganizationState, organizationState} from "~/types/interfaces";
 import * as _ from "lodash";
 
 export const state = () => ({
@@ -58,13 +58,11 @@ export const actions = {
     context.commit('setNetworks', profile.networks)
 
     _.each(profile.parents, parent => {
-      const p:organizationState = {
+      const p:baseOrganizationState = {
         id: parent.id,
         name: parent.name,
         website: parent.website,
-        subDomain: parent.subDomain,
-        parents: [],
-        networks: [],
+        subDomain: parent.subDomain
       }
       context.commit('addParent', p)
     });

types/enums.ts

@@ -27,3 +27,8 @@ export const enum TYPE_ALERT {
   ALERT = 'error',
   WARNING = 'warning'
 }
+
+export const enum GENDER {
+  MISTER = 'MISTER',
+  MISS = 'MISS'
+}

types/interfaces.d.ts

@@ -4,7 +4,7 @@ import DataPersister from "~/services/dataPersister/dataPersister";
 import DataProvider from "~/services/dataProvider/dataProvider";
 import DataDeleter from "~/services/dataDeleter/dataDeleter";
 import {Store} from "vuex";
-import {ABILITIES, QUERY_TYPE, TYPE_ALERT} from "~/types/enums";
+import {ABILITIES, GENDER, QUERY_TYPE, TYPE_ALERT} from "~/types/enums";
 import {Context} from "@nuxt/types/app";
 
 /**
@@ -62,11 +62,17 @@ interface pageState {
   alerts: Array<alert>,
 }
 
-interface accessState {
-  bearer: string,
-  accessId: number,
+interface baseAccessState {
+  id: number,
   name: string,
   givenName: string,
+  gender: GENDER,
+  avatarId: number
+}
+
+interface accessState extends baseAccessState{
+  bearer: string,
+  switchId: number,
   roles: Array<string>,
   abilities: Array<AbilitiesType>,
   isAdminAccess: boolean,
@@ -83,24 +89,27 @@ interface accessState {
   hasConfigurationMenu: boolean,
   hasAccessesMenu: boolean,
   hasFamilyMenu: boolean,
-  multiAccesses: Array<multiAccessState>,
+  multiAccesses: Array<baseOrganizationState>,
+  familyAccesses: Array<baseAccessState>,
+  originalAccess: baseAccessState
 }
-interface multiAccessState {
+
+interface AccessStore extends Store<{profile:{access:accessState}}> {}
+
+interface baseOrganizationState {
   id: number,
-  organizationId: number,
-  organizationName: string
+  name: string,
+  website?: string,
+  subDomain?: string
 }
-interface AccessStore extends Store<{profile:{access:accessState}}> {}
 
-interface organizationState {
+interface organizationState extends baseOrganizationState{
   id: number,
   name: string,
   product?: string,
   modules?: Array<string>,
   hasChildren?: boolean,
   networks: Array<string>,
-  website?: string,
-  subDomain?: string,
   parents: Array<organizationState>,
 }
 interface OrganizationStore extends Store<{profile:{organization:organizationState}}> {}

use/layout/Menus/myAccessesMenu.ts

@@ -24,7 +24,7 @@ class MyAccessesMenu extends BaseMenu implements Menu{
   }
 
   /**
-   * Construit le menu Header Configuration ou null si aucune page accessible
+   * Construit le menu Header Multi compte ou null si aucune page accessible
    * @return {ItemMenu | null}
    */
   getHeaderMenu():ItemMenu | null {

use/layout/Menus/myFamilyMenu.ts

@@ -2,6 +2,7 @@ import {AnyStore, ItemMenu, ItemsMenu, Menu} from "~/types/interfaces";
 import BaseMenu from "~/use/layout/Menus/baseMenu";
 import {Ability} from "@casl/ability";
 import {NuxtConfig} from "@nuxt/types/config";
+import * as _ from "lodash";
 
 /**
  * @category Use/layout/Menus
@@ -23,17 +24,26 @@ class MyFamilyMenu extends BaseMenu implements Menu{
   }
 
   /**
-   * Construit le menu Header Configuration ou null si aucune page accessible
+   * Construit le menu Header Changement d'utilisateur ou null si aucune page accessible
    * @return {ItemMenu | null}
    */
   getHeaderMenu():ItemMenu | null {
     const children:ItemsMenu = [];
 
-    if (this.$ability.can('display', 'organization_page')) {
-      children.push(this.constructMenu('organization_page', undefined,'/organization/edit'))
+    //Si Access des membres de la familles (enfants)
+    _.each(this.$store.state.profile.access.familyAccesses, access => {
+      let url = `/switch_user/${this.$store.state.profile.organization.id}/${this.$store.state.profile.access.id}/${access.id}`
+      children.push(this.constructMenu(`${access.givenName} ${access.name}`, undefined, url, true))
+    })
+
+    //Si on est en compte swtich, on doit pouvoir retourner au compte d'origine
+    if (this.$store.state.profile.access.originalAccess) {
+      const originalAccess = this.$store.state.profile.access.originalAccess
+      let url = `/switch_user/${this.$store.state.profile.organization.id}/${originalAccess.id}/exit`
+      children.push(this.constructMenu(`${originalAccess.givenName} ${originalAccess.name}`, undefined, url, true))
     }
 
-    return children.length > 0 ? this.constructMenu('configuration', 'fa-users', undefined, undefined, children) : null;
+    return children.length > 0 ? this.constructMenu('familyAccesses', 'fa-users', undefined, undefined, children) : null;
   }
 }
 

use/layout/menu.ts

@@ -43,6 +43,7 @@ class Menu{
    * Construit le menu et mets à jour le state du profile d'access
    */
   useLateralMenuConstruct(){
+
     let menu:ItemsMenu = []
 
     const accessMenu = getAccessMenu(this.$config,this.$ability,this.$store)