[FEATURE] Avoir une navigation principale pour Pix Pro (PIX-1368).

Merge pull request #190 from 1024pix/pix-1368-navigation-for-pix-pro

components/BurgerMenuNav.vue

@@ -9,7 +9,7 @@
         </li>
       </ul>
     </div>
-    <div v-if="isPixPro" class="nav-middle">
+    <div v-if="isPixPro && showProItems" class="nav-middle">
       <hr class="nav-middle__bar" />
       <p>Pix Pro</p>
       <ul>
@@ -35,6 +35,10 @@ export default {
       type: Array,
       default: null,
     },
+    showProItems: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     isPixPro() {

components/NavigationSliceZone.vue

@@ -5,6 +5,7 @@
         <burger-menu-nav
           :items="burgerMenuLinks"
           :pro-items="organizationNavItems"
+          :show-pro-items="showSubNav"
         />
       </push-menu>
     </client-only>
@@ -14,7 +15,7 @@
         <div class="navigation-slice-zone__content">
           <div class="navigation-slice-zone-content__left-side">
             <section
-              v-for="(slice, index) in mainNavigation.data.body"
+              v-for="(slice, index) in usedMainNavigation.data.body"
               :key="`navigation-slice-left-${index}`"
             >
               <template v-if="slice.slice_type === 'logos_zone'">
@@ -26,7 +27,7 @@
             </section>
           </div>
           <section
-            v-for="(slice, index) in mainNavigation.data.body"
+            v-for="(slice, index) in usedMainNavigation.data.body"
             :key="`navigation-slice-right-${index}`"
             class="navigation-slice-zone-wrapper__right-side"
           >
@@ -36,13 +37,14 @@
           </section>
         </div>
       </div>
-      <pix-pro-sub-nav v-if="isPixPro" :nav-items="organizationNavItems" />
+      <pix-pro-sub-nav v-if="showSubNav" :nav-items="organizationNavItems" />
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import { groupBy } from 'lodash'
 import LogosZone from '@/components/slices/LogosZone'
 import NavigationZone from '@/components/slices/NavigationZone'
 import ActionsZone from '@/components/slices/ActionsZone'
@@ -64,12 +66,29 @@ export default {
     isPixPro() {
       return process.env.isPixPro
     },
-    ...mapState(['mainNavigation', 'organizationNavItems']),
+
+    showSubNav() {
+      return (
+        this.isPixPro &&
+        this.usedMainNavigation.data.navigation_for === 'pix-site'
+      )
+    },
+
+    ...mapState(['mainNavigations', 'organizationNavItems']),
+
+    usedMainNavigation() {
+      const groupBySite = groupBy(this.mainNavigations, 'data.navigation_for')
+      if (this.isPixPro && groupBySite['pix-pro']) {
+        return groupBySite['pix-pro'][0]
+      }
+      return groupBySite['pix-site'][0]
+    },
+
     burgerMenuLinks() {
-      const navigationZone = this.mainNavigation.data.body.find(
+      const navigationZone = this.usedMainNavigation.data.body.find(
         (slice) => slice.slice_type === 'navigation_zone'
       )
-      const actionsZone = this.mainNavigation.data.body.find(
+      const actionsZone = this.usedMainNavigation.data.body.find(
         (slice) => slice.slice_type === 'actions_zone'
       )
       return [...navigationZone.items, ...actionsZone.items]

package.json

@@ -39,6 +39,7 @@
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/prismic": "^1.2.3",
     "chart.js": "2.9.3",
+    "lodash": "^4.17.20",
     "nuxt": "^2.13.3",
     "nuxt-fontawesome": "0.4.0",
     "nuxt-i18n": "6.13.1",

plugins/i18n.js

@@ -1,6 +1,6 @@
 export default function ({ app: { $prismic, i18n, store } }) {
   i18n.onLanguageSwitched = () => {
     store.dispatch('updateNavigation', { prismic: $prismic, i18n })
-    store.dispatch('updateMainNavigation', { prismic: $prismic, i18n })
+    store.dispatch('updateMainNavigations', { prismic: $prismic, i18n })
   }
 }

services/document-fetcher.js

@@ -25,6 +25,13 @@ export function documentFetcher(
   const lang = i18n.locale || i18n.defaultLocale
   return {
     get: getSingle,
+    findByType: async (type) => {
+      const documents = await prismic.api.query(
+        prismic.predicates.at('document.type', type),
+        { lang }
+      )
+      return documents.results
+    },
     getEmployers: async () => {
       const document = await prismic.api.getSingle('employers', {
         lang,

store/index.js

@@ -6,23 +6,23 @@ export const state = () => ({
   aboutNavItems: [],
   hotNews: null,
   host: null,
-  mainNavigation: [],
+  mainNavigations: [],
 })
 export const actions = {
   async nuxtServerInit({ commit }, { app, req }) {
     commit('updateNavigation', await getNavigation(app.$prismic, app.i18n))
     commit(
-      'updateMainNavigation',
-      await getMainNavigation(app.$prismic, app.i18n)
+      'updateMainNavigations',
+      await getMainNavigations(app.$prismic, app.i18n)
     )
     commit('updateHotNews', await getHotNews(app.$prismic, app.i18n))
     commit('updateHost', req)
   },
   async updateNavigation({ commit }, { i18n, prismic }) {
     commit('updateNavigation', await getNavigation(prismic, i18n))
   },
-  async updateMainNavigation({ commit }, { i18n, prismic }) {
-    commit('updateMainNavigation', await getMainNavigation(prismic, i18n))
+  async updateMainNavigations({ commit }, { i18n, prismic }) {
+    commit('updateMainNavigations', await getMainNavigations(prismic, i18n))
   },
 }
 export const mutations = {
@@ -50,8 +50,8 @@ export const mutations = {
     state.resourcesNavItems = navItems(navigations, 'ressources-nav')
     state.aboutNavItems = navItems(navigations, 'about-nav')
   },
-  updateMainNavigation(state, navigations) {
-    state.mainNavigation = { ...navigations }
+  updateMainNavigations(state, navigations) {
+    state.mainNavigations = [...navigations]
   },
   updateHotNews(state, hotNews) {
     state.hotNews = hotNews && hotNews.data ? hotNews.data.description : null
@@ -62,8 +62,8 @@ function getNavigation(prismic, i18n) {
   return documentFetcher(prismic, i18n).get(documents.navigation)
 }
 
-function getMainNavigation(prismic, i18n) {
-  return documentFetcher(prismic, i18n).get(documents.mainNavigation)
+function getMainNavigations(prismic, i18n) {
+  return documentFetcher(prismic, i18n).findByType(documents.mainNavigation)
 }
 
 function getHotNews(prismic, i18n) {