fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/AppCompNavigationFull.vue

@@ -1,1791 +0,0 @@
-<!--
- @ Description: This component is used to display and create the navigation in el+ mode.
- @ What it does: Create the link to back back to the menu. Create link to the all the anchor to the current activity and display the curent anchor and the button next page and previous page. Portal are use to place the element in the rigth place in the main frame. Only work in EL+ mode
--->
-<template>
-  <div
-    v-if="navigationRoutes"
-    class="app-ctrl full"
-    :class="{ branching: isBranching }"
-  >
-    <div id="nav_left_btns">
-      <b-link
-        v-if="!isBranching && !isMenu"
-        id="btn_back_summary"
-        :to="{ name: 'menu' }"
-        class="btn btn-ghost"
-        :title="$t('button.menu')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="17"
-          viewBox="0 0 20 17"
-        >
-          <path
-            id="Path_3912"
-            data-name="Path 3912"
-            d="M10,20V14h4v6h5V12h3L12,3,2,12H5v8Z"
-            transform="translate(-2 -3)"
-          />
-        </svg>
-        <span v-if="!isBranching && !isMenu">{{ $t('button.menu') }}</span>
-      </b-link>
-      <b-link
-        v-if="isBranching"
-        id="btn_back_root"
-        :to="{ name: $route.meta.branching_root }"
-        class="btn btn-ghost"
-        :title="$t('button.back_to_branching')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          x="0px"
-          y="0px"
-          viewBox="0 0 21.3 18"
-          xml:space="preserve"
-        >
-          <g transform="translate(-1.5 -5)">
-            <path
-              class="st0"
-              d="M21,23H10.8C9.8,23,9,22.1,9,21v-3h1.8v3H21V7H10.8v3H9V7c0-1.1,0.8-2,1.8-2H21
-		c1.1,0,1.9,0.9,1.8,2v14C22.9,22.1,22,23,21,23z"
-            />
-            <path
-              class="st0"
-              d="M5.3,15l2.6,2.6L6.5,19l-5-5l5-5l1.4,1.4L5.3,13H15v2H5.3z"
-            />
-          </g>
-        </svg>
-        <span>{{ $t('button.back_to_branching') }}</span>
-      </b-link>
-      <span v-if="isMenu">{{ $t('button.menu') }}</span>
-    </div>
-    <!----------- Navigation section --------------->
-    <div v-if="!isMenu" id="page_nav">
-      <button
-        id="btn_previous_page"
-        ref="btn_previous_page"
-        :title="$t('button.previous')"
-        class="btn btn-ghost"
-        :disabled="!backAllowed || !enableNavLeftBtn"
-        :class="{ md_disabled: !backAllowed || !enableNavLeftBtn }"
-        @click="goPrevious"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <g id="wrapper" transform="translate(48 -4) rotate(180)">
-            <g id="navigate_next_black_24dp" transform="translate(24 -28)">
-              <path
-                id="Path_3899"
-                data-name="Path 3899"
-                d="M0,0H24V24H0Z"
-                fill="none"
-              />
-              <path
-                id="Path_3900"
-                data-name="Path 3900"
-                d="M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z"
-                transform="translate(0 0)"
-              />
-            </g>
-          </g>
-        </svg>
-      </button>
-      <div id="activity_progress" :class="{ branching_progress: isBranching }">
-        <div v-if="!isBranching">
-          <b-link
-            v-for="(anchor, i) of anchors"
-            :id="`${anchor.pageRef}-${i}`"
-            :key="`${anchor.pageRef}-${i}`"
-            class="activity_progress_link "
-            :class="[
-              {
-                current_page: iscurrentAnchor(anchor),
-                md_disable: blockBranching(anchor)
-              }
-            ]"
-            :to="{
-              name: anchor.path
-            }"
-            :disabled="blockBranching(anchor)"
-            :aria-label="`${$t('label.section')} ${anchor.anchorName} `"
-            :title="`${$t('label.section')} ${anchor.anchorName}`"
-          >
-            <div v-if="!isBranching" class="page_tooltip">
-              <span>{{ anchor.anchorName }}</span>
-            </div>
-          </b-link>
-        </div>
-        <div v-if="isBranching">
-          <b-link
-            v-for="page of navigationRoutes.cat"
-            :key="page._ref"
-            class="activity_progress_link"
-            :class="{
-              current_page: $route.meta.id === page._ref,
-              page_viewed: isBranchPageViewed(page._ref)
-            }"
-            :to="{
-              name: page._namedRoute
-            }"
-            :title="titlePageBranching(page._path)"
-          >
-            <div v-if="!isBranching" class="page_tooltip">
-              <span>
-                <!-- {{ page._path }} -->
-                {{ page._namedRoute }}
-              </span>
-            </div>
-          </b-link>
-        </div>
-      </div>
-      <button
-        id="btn_next_page"
-        ref="btn_next_page"
-        :title="nextPageLabel"
-        class="btn btn-ghost"
-        :disabled="!nextAllowed || !enableNavRightBtn"
-        :class="{ md_disabled: !nextAllowed || !enableNavRightBtn }"
-        @click="goNext"
-      >
-        <svg
-          id="navigate_next_black_24dp"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <path
-            id="Path_3899"
-            data-name="Path 3899"
-            d="M0,0H24V24H0Z"
-            fill="none"
-          />
-          <path
-            id="Path_3900"
-            data-name="Path 3900"
-            d="M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z"
-            transform="translate(0 0)"
-          />
-        </svg>
-      </button>
-      <portal to="page-count">
-        <p v-show="navigationRoutes && !isMenu" class="pageCount">
-          {{ $t('label.for_pagination') }} {{ pagination.counter }}/{{
-            pagination.total
-          }}
-        </p>
-      </portal>
-    </div>
-    <div id="nav_right_btns">
-      <!-- BOUTON PRISE DE NOTES -->
-      <!-- <button id="btn_notes" class="nav_main_btn" v-if="!isMenu" title="Prise de notes">
-        <svg xmlns="http://www.w3.org/2000/svg" width="12.95" height="18.5" viewBox="0 0 12.95 18.5">
-        <path id="Path_4223" data-name="Path 4223" d="M346.834,367.065h-8.241a2.354,2.354,0,0,0-2.355,2.354V383.21a2.355,2.355,0,0,0,2.355,2.355h8.241a2.355,2.355,0,0,0,2.355-2.355V369.419A2.354,2.354,0,0,0,346.834,367.065Zm-9.044,3.048H344v.789H337.79Zm9.444,9.807H337.79v-.788h9.444Zm0-2.255H337.79v-.789h9.444Zm0-2.255H337.79v-.788h9.444Zm0-2.255H337.79v-.788h9.444Z" transform="translate(-336.239 -367.065)" fill="#030504"/>
-      </svg>
-      <span>Prise de notes</span>
-      </button> -->
-      <!-- BOUTON MARQUE-PAGES -->
-      <!-- <button id="btn_bookmarks" class="nav_main_btn" v-if="!isMenu" title="Signets">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
-        <path id="Path_3863" data-name="Path 3863" d="M21,7H19V9H17V7H15V5h2V3h2V5h2ZM19,21l-7-3L5,21V5A2.006,2.006,0,0,1,7,3h7a5,5,0,0,0,4,8,4.712,4.712,0,0,0,1-.1Z" transform="translate(-5 -3)" fill="#001729"/>
-      </svg>
-      </button> -->
-      <button
-        id="btn_settings"
-        v-b-toggle.sidebar-settings
-        class="btn nav_main_btn"
-        :title="$t('button.setting')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="18.676"
-          height="19.2"
-          viewBox="0 0 18.676 19.2"
-        >
-          <path
-            id="Path_4228"
-            data-name="Path 4228"
-            d="M19.14,12.94A7.074,7.074,0,0,0,19.2,12a5.777,5.777,0,0,0-.07-.94l2.03-1.58a.491.491,0,0,0,.12-.61L19.36,5.55a.488.488,0,0,0-.59-.22l-2.39.96a7.064,7.064,0,0,0-1.62-.94L14.4,2.81a.484.484,0,0,0-.48-.41H10.08a.474.474,0,0,0-.47.41L9.25,5.35a7.22,7.22,0,0,0-1.62.94L5.24,5.33a.477.477,0,0,0-.59.22L2.74,8.87a.455.455,0,0,0,.12.61l2.03,1.58a5.563,5.563,0,0,0-.02,1.88L2.84,14.52a.491.491,0,0,0-.12.61l1.92,3.32a.488.488,0,0,0,.59.22l2.39-.96a7.064,7.064,0,0,0,1.62.94l.36,2.54a.492.492,0,0,0,.48.41h3.84a.466.466,0,0,0,.47-.41l.36-2.54a6.859,6.859,0,0,0,1.62-.94l2.39.96a.477.477,0,0,0,.59-.22l1.92-3.32a.463.463,0,0,0-.12-.61ZM12,15.6A3.6,3.6,0,1,1,15.6,12,3.611,3.611,0,0,1,12,15.6Z"
-            transform="translate(-2.662 -2.4)"
-          />
-        </svg>
-      </button>
-    </div>
-    <!-- Navigation dans le popup de retroaction -->
-    <portal v-if="hasQuiz" to="popup_retro_nav">
-      <button
-        v-if="currentNavType === navTypes.QUIZ && nextActivity === null"
-        id="popup_primary_nav_btn"
-        ref="primary_popup_nav_btn"
-        class="btn popup_primary_nav_btn"
-        :disabled="!nextAllowed"
-        :class="{ md_disabled: !nextAllowed }"
-        :title="
-          nextLesson ? $t('button.next_lesson') : $t('button.back_to_menu')
-        "
-        @click="backToMenu"
-      >
-        {{ nextLesson ? $t('button.next_lesson') : $t('button.back_to_menu') }}
-      </button>
-      <button
-        v-if="
-          currentNavType === navTypes.LASTBRANCHPAGE ||
-            (currentNavType === navTypes.LASTBRANCHQUIZ &&
-              getNextBranch !== false)
-        "
-        id="popup_primary_nav_btn"
-        ref="primary_popup_nav_btn"
-        class="btn popup_primary_nav_btn"
-        :title="$t('button.next_branch')"
-        @click="goNextBranch"
-      >
-        {{ $t('button.next_branch') }}
-      </button>
-      <button
-        v-else-if="
-          currentNavType === navTypes.LASTBRANCHPAGE ||
-            currentNavType === navTypes.LASTBRANCHQUIZ
-        "
-        id="popup_primary_nav_btn"
-        ref="primary_popup_nav_btn"
-        class="btn popup_primary_nav_btn"
-        :title="$t('button.return_to_branch')"
-        @click="backToRoot"
-      >
-        {{ $t('button.back_to_branching') }}
-      </button>
-      <button
-        v-else-if="nextActivity !== null"
-        id="popup_primary_nav_btn"
-        ref="primary_popup_nav_btn"
-        class="btn popup_primary_nav_btn"
-        :disabled="!nextAllowed"
-        :class="{ md_disabled: !nextAllowed }"
-        :title="nextPageLabel"
-        @click="goNext"
-      >
-        {{ nextPageLabel }}
-      </button>
-    </portal>
-    <!-- Navigation principale -->
-    <portal to="primary_nav">
-      <button
-        v-if="
-          currentNavType === navTypes.QUIZ ||
-            currentNavType === navTypes.LASTBRANCHQUIZ
-        "
-        :id="'primary_' + currentNavType"
-        ref="primary_nav_btn"
-        class="btn primary_nav_btn right quiz"
-        :title="quizNavLabel"
-        @click="submitQuiz"
-      >
-        <span>{{ quizNavLabel }}</span>
-      </button>
-      <button
-        v-else-if="
-          currentNavType === navTypes.ACTIVITY ||
-            currentNavType === navTypes.BRANCH
-        "
-        :id="'primary_' + currentNavType"
-        ref="primary_nav_btn"
-        class="btn primary_nav_btn right"
-        :title="nextPageLabel"
-        :disabled="!nextAllowed || !enablePrimaryBtn"
-        :class="{ md_disabled: !nextAllowed || !enablePrimaryBtn }"
-        :style="displayStyle(enablePrimaryBtn)"
-        @click="goNext"
-      >
-        <span>{{ nextPageLabel }}</span>
-
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="7.41"
-          height="12"
-          viewBox="0 0 7.41 12"
-        >
-          <path
-            id="Path_3900"
-            data-name="Path 3900"
-            d="M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z"
-            transform="translate(-8.61 -6)"
-            fill="#fff"
-          />
-        </svg>
-      </button>
-      <button
-        v-else-if="currentNavType === navTypes.FINALPAGE"
-        :id="'primary_' + currentNavType"
-        ref="primary_nav_btn"
-        class="btn primary_nav_btn"
-        :title="finalPageBtnLabel"
-        :disabled="!enablePrimaryBtn"
-        :class="{ md_disabled: !enablePrimaryBtn }"
-        :style="displayStyle(enablePrimaryBtn)"
-        @click="backToMenu"
-      >
-        <span>
-          {{ finalPageBtnLabel }}
-        </span>
-
-        <svg
-          v-show="!nextLesson"
-          xmlns="http://www.w3.org/2000/svg"
-          width="11.667"
-          height="11.46"
-          viewBox="0 0 11.667 11.46"
-        >
-          <path
-            id="Path_4230"
-            data-name="Path 4230"
-            d="M433.865,369.022H433.6v-.005h-7.548l2.014-2.171-1.1-1.182-3.9,4.19,3.9,4.191,1.1-1.182-2.014-2.171H433v4.57h-2.5v1.861h3.366a.9.9,0,0,0,.866-.93v-6.346A.811.811,0,0,0,433.865,369.022Z"
-            transform="translate(-423.065 -365.664)"
-            fill="#fff"
-          />
-        </svg>
-        <svg
-          v-show="nextLesson"
-          xmlns="http://www.w3.org/2000/svg"
-          width="7.41"
-          height="12"
-          viewBox="0 0 7.41 12"
-        >
-          <path
-            id="Path_3900"
-            data-name="Path 3900"
-            d="M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z"
-            transform="translate(-8.61 -6)"
-            fill="#fff"
-          />
-        </svg>
-      </button>
-      <button
-        v-if="currentNavType === navTypes.LASTBRANCHPAGE"
-        :id="'primary_' + currentNavType"
-        ref="primary_nav_btn"
-        class="btn primary_nav_btn"
-        :class="{
-          right: getNextBranch == false
-        }"
-        :title="$t('button.back_to_branching')"
-        @click="backToRoot"
-      >
-        <span>{{ $t('button.back_to_branching') }}</span>
-        <svg
-          class="ico-back-branch"
-          xmlns="http://www.w3.org/2000/svg"
-          x="0px"
-          y="0px"
-          viewBox="0 0 21.3 18"
-          xml:space="preserve"
-        >
-          <g transform="translate(-1.5 -5)">
-            <path
-              class="st0"
-              d="M21,23H10.8C9.8,23,9,22.1,9,21v-3h1.8v3H21V7H10.8v3H9V7c0-1.1,0.8-2,1.8-2H21
-		c1.1,0,1.9,0.9,1.8,2v14C22.9,22.1,22,23,21,23z"
-            />
-            <path
-              class="st0"
-              d="M5.3,15l2.6,2.6L6.5,19l-5-5l5-5l1.4,1.4L5.3,13H15v2H5.3z"
-            />
-          </g>
-        </svg>
-      </button>
-      <button
-        v-if="
-          currentNavType === navTypes.LASTBRANCHPAGE && getNextBranch !== false
-        "
-        :id="'primary_next_branch'"
-        ref="primary_nav_btn"
-        class="btn primary_nav_btn right"
-        :title="$t('button.next_branch')"
-        :style="displayStyle(enablePrimaryBtn)"
-        @click="goNextBranch"
-      >
-        <span>{{ $t('button.next_branch') }}</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="7.41"
-          height="12"
-          viewBox="0 0 7.41 12"
-        >
-          <path
-            id="Path_3900"
-            data-name="Path 3900"
-            d="M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z"
-            transform="translate(-8.61 -6)"
-            fill="#fff"
-          />
-        </svg>
-      </button>
-    </portal>
-    <!-- AppCompSettingsMenu -->
-    <app-comp-settings-menu />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import AppCompSettingsMenu from './AppCompSettingsMenu.vue'
-export default {
-  components: { AppCompSettingsMenu },
-  props: {
-    autoNavigate: { type: Boolean, default: false }
-  },
-
-  data() {
-    return {
-      nextPageLabel: null,
-      hasMedia: false,
-      mediaType: null,
-      mediaPlaybackEnd: false,
-      navTypes: {
-        QUIZ: 'quiz',
-        ACTIVITY: 'activity',
-        BRANCH: 'branch',
-        LASTBRANCHPAGE: 'lastbranch',
-        LASTBRANCHQUIZ: 'lastbranchquiz',
-        FINALPAGE: 'finalpage'
-      },
-      quizActions: {
-        SAVE: 'save',
-        VERIFY: 'verify',
-        CONFIRM: 'confirm'
-      },
-      currentNavType: '',
-      isTocOpen: false,
-      previousBtn: null,
-      menuBtn: null,
-      nextBtn: null,
-      navigation: {},
-      currentPath: null,
-      navigationRoutes: null,
-      currentActivity: null,
-      currentPageId: null,
-      anchors: [],
-      quizData: null,
-      pageInfo: null,
-      nextActivity: null,
-      previousActivity: null
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getCurrentPage',
-      'getModuleChildren',
-      'getIntroStatus',
-      'getUserInteraction',
-      'getAnchorsForActivity',
-      'getAppConfigs',
-      'getPageData',
-      'getAllActivitiesState',
-      'getShowPrimaryCtrl',
-      'getShowNavRightCtrl',
-      'getShowNavLeftCtrl',
-      'getBifChoice',
-      'getMenuSettings'
-    ]),
-
-    finalPageBtnLabel() {
-      let label
-      if (!this.nextLesson) {
-        label = this.$t('button.back_to_menu')
-      } else if (this.nextLesson && this.getAppConfigs.nextConcluModule) {
-        label = this.$t('button.next_before_conclu_module')
-      } else if (this.nextLesson && !this.getAppConfigs.nextConcluModule) {
-        label = this.$t('button.next_lesson')
-      }
-      return label
-    },
-    /*
-     * Primary nav button label for all quiz, ma/mes
-     */
-    quizNavLabel() {
-      let label = ''
-      let action, plural
-      const quizType = this.quizData.type_question
-      //check if quiz has more then one choice
-      if (this.quizData.choix_reponse === null) {
-        plural = false
-      } else {
-        if (typeof this.quizData.choix_reponse !== 'undefined') {
-          plural = this.quizData.choix_reponse.length > 1
-        } else {
-          plural = this.quizData.solution.length > 1
-        }
-      }
-
-      switch (quizType) {
-        case 'choix_mult':
-        case 'choix_unique':
-          action = this.isNeutralQuiz
-            ? this.quizActions.CONFIRM
-            : this.quizActions.VERIFY
-          plural = false
-          break
-        case 'dropdown':
-          action = this.isNeutralQuiz
-            ? this.quizActions.CONFIRM
-            : this.quizActions.VERIFY
-          break
-        case 'reponse_ouverte':
-          action = this.quizActions.SAVE
-          break
-        case 'texte_tableau':
-          action = this.quizActions.VERIFY
-          break
-        case 'texte_troue_select':
-        case 'texte_troue':
-          action = this.quizActions.VERIFY
-          break
-        case 'association':
-          break
-        case 'dragdrop':
-        default:
-          action = this.quizActions.VERIFY
-          break
-      }
-
-      switch (action) {
-        case this.quizActions.CONFIRM:
-          label += this.$t('button.quiz_confirm')
-          break
-        case this.quizActions.SAVE:
-          label += this.$t('button.quiz_save')
-          break
-        case this.quizActions.VERIFY:
-          label += this.$t('button.quiz_verify')
-          break
-      }
-      label += ' '
-
-      label += plural
-        ? this.$t('button.quiz_multiple')
-        : this.$t('button.quiz_single')
-
-      return label
-    },
-
-    getNextBranch() {
-      if (!this.isBranching) {
-        return false
-      }
-      //to get activity route from.
-
-      const { all_routes } = this.$helper.getRoutesFromVueRouter()
-
-      //Get the current activity
-      const activity = all_routes.find(
-        //const activity = this.$helper.getRoutesFromVueRouter.find(
-        (route) => route.meta.id === this.$router.currentRoute.meta.activity_ref
-      )
-      //find root page of all branches
-      const page = activity.children.find(
-        (route) =>
-          route.meta.id === this.$router.currentRoute.meta.branching_ref
-      )
-      //find the index of the current branch
-      const branchIndex = page.children.findIndex(
-        (route) => route.path === this.$router.currentRoute.meta.branch_ref
-      )
-      const pageCountInBranch = page.children.length - 1
-      //if current branch is the last one, return false. else return next branch
-      return branchIndex === pageCountInBranch
-        ? false
-        : page.children[branchIndex + 1]
-    },
-
-    collection() {
-      return this.$store.getters.getModuleChildren
-    },
-
-    pagination() {
-      let p = { counter: null, total: null }
-
-      const { context } = this.navigationRoutes
-
-      switch (context) {
-        /* In  the context of introduction, menu should not be counted in the pagination*/
-        case 'introduction':
-          {
-            if (this.$route.name === 'menu') p.counter = 0
-
-            p.total = this.navigationRoutes.cat.filter(
-              (route) => route._path !== 'menu'
-            ).length
-
-            p.counter = this.navigationRoutes.cat.findIndex(
-              (route) => route._ref === this.$route.meta.id
-            )
-          }
-          break
-
-        default:
-          p.counter =
-            this.navigationRoutes.cat.findIndex(
-              (route) => route._ref === this.$route.meta.id
-            ) + 1
-
-          p.total = this.navigationRoutes.cat.length
-      }
-      return p
-    },
-
-    /**
-     * Control clickable state of back btn (disable/ enable Back btn click)
-     */
-    backAllowed() {
-      let isAllowed = true // by default
-      // Navigation to next/previous activity is permitted. prevent negate navigation in conditions bellow.
-      if (this.autoNavigate) {
-        switch (this.navigationRoutes.context) {
-          case 'introduction':
-            if (this.$route.meta.id === this.navigationRoutes.cat[0]._ref)
-              isAllowed = false
-            break
-
-          case 'normal':
-            if (
-              this.previousActivity &&
-              this.previousActivity._namedRoute === 'menu'
-            )
-              isAllowed = false
-            break
-
-          case 'branching':
-            //Check if this is the 1st page of branching
-            if (this.$route.meta.id === this.navigationRoutes.cat[0]._ref)
-              isAllowed = false
-            break
-        }
-      }
-      //  Navigation to next/previous activity has not been permitted.
-      else if (this.$route.meta.id === this.navigationRoutes.cat[0]._ref)
-        isAllowed = false
-      return isAllowed
-    },
-
-    /**
-     * Controle clicable state of next btn (disable/ enable Next btn click)
-     */
-    nextAllowed() {
-      let isAllowed = true
-      const { length } = this.navigationRoutes.cat
-
-      if (this.autoNavigate) {
-        switch (this.navigationRoutes.context) {
-          case 'normal':
-            // Check if there is a next activity (could be page a page of current activity or page of next activity)
-            if (!this.nextActivity) isAllowed = false
-            break
-          case 'branching':
-            if (
-              this.$route.meta.id === this.navigationRoutes.cat[length - 1]._ref
-            )
-              isAllowed = false
-            break
-        }
-      } else {
-        if (this.$route.meta.id === this.navigationRoutes.cat[length - 1]._ref)
-          isAllowed = false
-      }
-      return isAllowed
-    },
-
-    isBranching() {
-      return this.navigationRoutes.context === 'branching'
-    },
-
-    /**
-     * @description
-     * Check if the current page contains a quiz
-     * @returns
-     * Boolean: true if a quiz is present, false if not
-     */
-    hasQuiz() {
-      let quiz = false
-      const objKeys = Object.keys(this.getCurrentPage)
-      for (let i = 0; i < objKeys.length; i++) {
-        const key = objKeys[i]
-        //check if a variable name starts with "quizData", you may find quizData1, quizData2... in some cases
-        if (key.startsWith('quizData')) {
-          quiz =
-            typeof this.getCurrentPage[key] !== 'undefined' &&
-            this.getCurrentPage[key] !== null
-          break
-        }
-      }
-      return quiz
-    },
-
-    /**
-     * @description
-     * Check if quiz is neutral, a neutral quiz has no solution
-     */
-    isNeutralQuiz() {
-      return this.quizData.solution === null
-    },
-
-    isMenu() {
-      return this.$route.name === 'menu'
-    },
-
-    nextLesson() {
-      const { linkedResource } = this.getAppConfigs
-      if (linkedResource) return linkedResource
-      else return null
-    },
-
-    previousLabel() {
-      let lable = this.$route.meta
-      if (
-        this.$route.meta.activity_ref == 'A00' &&
-        this.$route.meta.id == 'P01'
-      ) {
-        lable = this.$t('button.back_to_menu')
-      } else if (
-        this.$route.meta.activity_ref == 'A01' &&
-        this.$route.meta.id == 'P01'
-      ) {
-        lable = this.$t('button.next_introduction')
-      } else {
-        lable = this.$t('button.previous')
-      }
-
-      return lable
-    },
-
-    enablePrimaryBtn() {
-      return this.getShowPrimaryCtrl
-    },
-
-    enableNavLeftBtn() {
-      return this.getShowNavLeftCtrl
-    },
-
-    enableNavRightBtn() {
-      return this.getShowNavRightCtrl
-    }
-  },
-
-  watch: {
-    $route() {
-      this.setNavigation() // reset the navigation context when route change
-
-      setTimeout(() => {
-        this.initPage()
-      }, 200)
-    }
-  },
-  mounted() {
-    this.$bus.$on('mediaPlaybackEnded', this.onMediaEnded)
-    this.$bus.$on('quizNoAnswer', this.showPopupNoAnswer)
-
-    this.$bus.$on('hide-nav-controls', (value) => {
-      setTimeout(() => this.hideNavigationCtrls(value), 10)
-    })
-
-    this.$bus.$on('show-nav-controls', (value) => {
-      setTimeout(() => this.showNavigationCtrls(value), 10)
-    })
-
-    this.setNavigation()
-
-    setTimeout(() => {
-      this.initPage()
-    }, 200)
-  },
-  methods: {
-    initPage() {
-      this.$bus.$emit('set-comp-status', 'AppCompNavigationFull', 'loading')
-      this.quizData = this.getQuizData()
-      this.setNextActivity()
-      this.setPreviousActivity()
-      this.setNavType()
-      this.setAnchors()
-      this.mediaPlaybackEnd = false
-      this.pageInfo = this.getPageData(
-        this.currentActivity,
-        this.currentPageId
-      ).content
-      this.getMediaInfo()
-
-      this.$bus.$emit('set-comp-status', 'AppCompNavigationFull', 'ready')
-    },
-
-    getMediaInfo() {
-      this.hasMedia = this.pageInfo.type === 'pg_media'
-      if (this.hasMedia) {
-        this.mediaType = this.pageInfo.mediaData.mType
-      }
-    },
-    /**
-     * @description
-     * Get quiz data from page data, set to null if none
-     * @returns
-     * Object: quiz data as set in the page or null if no quiz
-     */
-    getQuizData() {
-      let qData = null
-      const objKeys = Object.keys(this.getCurrentPage)
-      for (let i = 0; i < objKeys.length; i++) {
-        const key = objKeys[i]
-        //check if a variable name starts with "quizData", you may find quizData1, quizData2... in some cases
-        if (key.startsWith('quizData')) {
-          qData = this.getCurrentPage[key]
-          break
-        }
-      }
-      return typeof qData !== 'undefined' && qData !== null ? qData : null
-    },
-    getActivity() {
-      const { all_routes } = this.$helper.getRoutesFromVueRouter()
-      const activity = all_routes.find(
-        (route) => route.meta.id === this.$router.currentRoute.meta.activity_ref
-      )
-      return activity
-    },
-
-    goNextBranch() {
-      //get the next branch where we want to go
-      const branch = this.getNextBranch
-      //get the name of the route for the first page of the next branch
-      const firstPageRoute = branch.children[0].meta.children[0]._namedRoute
-      //go there
-      this.$router.push({
-        name: firstPageRoute
-      })
-    },
-    onMediaEnded() {
-      this.mediaPlaybackEnd = true
-    },
-    /**
-     * Popup warning the user that he has not answered the quiz.
-     */
-    showPopupNoAnswer() {
-      let popupData, popupTitle, popupText
-      let concluNext = this.conclusionComming()
-      let lastPageInActivity = null
-      if (!concluNext) {
-        lastPageInActivity =
-          this.nextPageLabel === this.$t('button.next_activity')
-      } else {
-        lastPageInActivity =
-          this.nextPageLabel === this.$t('button.next_conclu')
-      }
-
-      popupTitle = this.$t('popup.title_warning')
-
-      if (this.isBranching) {
-        //branching
-        if (this.currentNavType === this.navTypes.LASTBRANCHQUIZ) {
-          //last page of branch
-          if (this.getNextBranch !== false) {
-            //last page of current branch, go to next branch
-            popupText = this.$t('popup.text_noanswer_next_branch')
-          } else {
-            //last page of last branch, back to root
-            popupText = this.$t('popup.text_noanswer_back_root')
-          }
-        } else {
-          //normal branch page
-          popupText = this.$t('popup.text_noanswer_next_page')
-        }
-      } else {
-        //page is not a branch
-        if (lastPageInActivity) {
-          //last page of the activity
-          popupText = this.$t('popup.text_noanswer_next_activity')
-        } else {
-          //normal activity page
-          popupText = this.$t('popup.text_noanswer_next_page')
-        }
-      }
-
-      popupData = {
-        type: 'popup-noanswer',
-        value: {
-          title: popupTitle,
-          text_1: popupText
-        }
-      }
-      this.$bus.$emit('open-popup', popupData)
-      this.$bus.$emit('retro-type', 'no_answer')
-    },
-    isBranchPageViewed(pageId) {
-      if (this.isBranching) {
-        const userInter = this.getUserInteraction
-
-        if (userInter[this.currentActivity]&& userInter[this.currentActivity][pageId]) {
-          return (
-            userInter[this.currentActivity][pageId].userInteraction.state ===
-            'completed'
-          )
-        }
-      }
-    },
-    backToRoot() {
-      this.$router.push({
-        name: this.$route.meta.branching_root
-      })
-    },
-    backToMenu() {
-      if (this.nextLesson) {
-        this.$bus.$emit(
-          'launch-xapi-resource',
-          this.$helper.getNextLessonEnv(this.nextLesson)
-        )
-      } else {
-        this.$router.push({
-          name: 'menu'
-        })
-      }
-    },
-    submitQuiz() {
-      this.$bus.$emit('validateQuiz')
-    },
-    /** *****************Nav Methods*********************** */
-    getNextPageBifurcationNochoise(activity, page) {
-      let menu = this.getMenuSettings
-      let bif
-      //return if the page you are on is a declare as branching in menuSetting
-      menu[activity].anchors.forEach((value) => {
-        if (value.pageRef == page && value.branching) {
-          bif = true
-        }
-      })
-
-      return bif
-    },
-    getFirtsPageBif(activity, page) {
-      let data
-
-      // play string to make path sentence
-      if (page.indexOf('0') == 1) {
-        data = `page_${page.substring(page.indexOf('P') + 2)}`
-      } else {
-        data = `page_${page.substring(page.indexOf('P') + 1)}`
-      }
-      let menu = this.getMenuSettings
-      let back = false
-
-      //return if the page you are on is a declare as branching in menuSetting
-      menu[activity].anchors.forEach((value) => {
-        if (value.branching && value.branching.end == data) {
-          back = true
-        }
-      })
-
-      return back
-    },
-    getPageNavBif(activity, page) {
-      let menu = this.getMenuSettings
-      let data
-
-      // return data star and end page
-      menu[activity].anchors.forEach((value) => {
-        if (value.pageRef == page && value.branching) {
-          data = value.branching
-        }
-      })
-      console.log('PAGE BIF DATA: ', data)
-      return data
-    },
-    getPageNavBifStart(activity, page) {
-      let data
-
-      // play string to make path sentence
-      if (page.indexOf('0') == 1) {
-        data = `page_${page.substring(page.indexOf('P') + 2)}`
-      } else {
-        data = `page_${page.substring(page.indexOf('P') + 1)}`
-      }
-      let menu = this.getMenuSettings
-      let back
-
-      //return the start page of bif
-      menu[activity].anchors.forEach((value) => {
-        if (value.branching && value.branching.end == data) {
-          back = value.branching.start
-        }
-      })
-
-      return back
-    },
-    goNext() {
-      //= =============Normal Navigation============
-      if (
-        this.navigationRoutes.context === 'normal' ||
-        this.navigationRoutes.context === 'introduction'
-      ) {
-        const pageIndex = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-        const next = pageIndex + 1
-        // check if you did made a choice
-        if (
-          !this.getBifChoice &&
-          this.getNextPageBifurcationNochoise(
-            this.$route.meta.activity_ref,
-            this.$route.meta.id
-          )
-        ) {
-          // create path to make the jump
-          this.$router.push({
-            name: `${this.navigationRoutes.cat[0]._namedRoute}.${
-              this.getPageNavBif(
-                this.$route.meta.activity_ref,
-                this.$route.meta.id
-              ).end
-            }`
-          })
-        }
-        // Last page not reached. Navigate to the next page of the current liste
-        else if (pageIndex > -1 && this.navigationRoutes.cat[next]) {
-          this.$router.push({
-            name: `${this.navigationRoutes.cat[next]._namedRoute}`
-          })
-        }
-
-        // last page of the current list reached. Navigate to next lesson
-        else if (this.autoNavigate && this.nextActivity) {
-          this.$router.push({
-            name: this.nextActivity._namedRoute
-          })
-          // if choice not made jump to end of bifurcation
-        }
-      }
-      // ==============branching navigation ==============
-      else if (this.navigationRoutes.context === 'branching') {
-        const pageIndex = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-        const next = pageIndex + 1
-        // go to next to page in branch (branch_xx.page_xx)
-        if (pageIndex > -1 && this.navigationRoutes.cat[next]) {
-          this.$router.push({
-            name: `${this.navigationRoutes.cat[next]._namedRoute}`
-          })
-        }
-      }
-    },
-
-    goPrevious() {
-      // ==================nornamal navigation ====================
-      if (
-        this.navigationRoutes.context === 'normal' ||
-        this.navigationRoutes.context === 'introduction'
-      ) {
-        const pageIndex = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-        const previous = pageIndex - 1
-
-        // validate if ther a branching and did you make a choice
-        if (
-          !this.getBifChoice &&
-          this.getFirtsPageBif(
-            this.$route.meta.activity_ref,
-            this.$route.meta.id
-          )
-        ) {
-          // create path to make the jump
-          if (
-            this.getPageNavBifStart(
-              this.$route.meta.activity_ref,
-              this.$route.meta.id
-            ) == 'page_1'
-          ) {
-            this.$router.push({
-              name: `${this.navigationRoutes.cat[0]._namedRoute}`
-            })
-          } else {
-            this.$router.push({
-              name: `${
-                this.navigationRoutes.cat[0]._namedRoute
-              }.${this.getPageNavBifStart(
-                this.$route.meta.activity_ref,
-                this.$route.meta.id
-              )}`
-            })
-          }
-
-          // back to previous page of module (module.page_xx)
-        } else if (pageIndex > 0 && this.navigationRoutes.cat[previous]._path) {
-          this.$router.push({
-            name: `${this.navigationRoutes.cat[previous]._namedRoute}`
-          })
-          // this is the last page
-        } else {
-          // if allow navigation to activity active, navigate to previous activity
-          if (this.autoNavigate && this.previousActivity) {
-            this.$router.push({ name: this.previousActivity._namedRoute })
-          } else this.$router.push('/')
-        }
-      }
-      // ===================branching navigation ===================
-      else if (this.navigationRoutes.context === 'branching') {
-        let pageIndex = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-        if (pageIndex === 0) {
-          return
-        } else if (pageIndex > 0) {
-          // back to the banch root (branch_xx)
-          if (pageIndex === 1) {
-            this.$router.push({
-              name: `${this.navigationRoutes.cat[(pageIndex -= 1)]._namedRoute}`
-            })
-          }
-          // back to previous page in the branch (branch_xx.page_xx)
-          else {
-            this.$router.push({
-              name: `${this.navigationRoutes.cat[(pageIndex -= 1)]._namedRoute}`
-            })
-          }
-        }
-      }
-    },
-    setNavType() {
-      //no primary nav in menu
-      if (this.isMenu) {
-        this.currentNavType = ''
-
-        return
-      }
-
-      let typeToSet = ''
-      if (this.isBranching) {
-        if (!this.nextAllowed) {
-          typeToSet = this.hasQuiz
-            ? this.navTypes.LASTBRANCHQUIZ
-            : this.navTypes.LASTBRANCHPAGE
-        } else {
-          typeToSet = this.hasQuiz ? this.navTypes.QUIZ : this.navTypes.BRANCH
-        }
-      } else {
-        if (this.nextActivity === null) {
-          typeToSet = this.hasQuiz
-            ? this.navTypes.QUIZ
-            : this.navTypes.FINALPAGE
-        } else {
-          typeToSet = this.hasQuiz ? this.navTypes.QUIZ : this.navTypes.ACTIVITY
-        }
-      }
-      if (typeToSet != '') {
-        this.currentNavType = typeToSet
-      } else {
-        console.warn('Navigation principale: Type de page invalide')
-      }
-    },
-    /*
-     * watch currentRoute to define the navigation catalog
-     *  check if currentRoute type is a branching
-     */
-    setNavigation() {
-      // current Route is module
-      this.$bus.$emit(
-        'set-comp-status',
-        'AppCompNavigationFull_setNavigation',
-        'loading'
-      )
-      this.currentActivity = this.$router.currentRoute.meta.activity_ref
-      this.currentPageId = this.$router.currentRoute.meta.id
-
-      const { all_routes, meta } = this.$helper.getRoutesFromVueRouter()
-
-      if (this.$router.currentRoute.name === 'module') {
-        this.navigationRoutes = {
-          context: 'module',
-          cat: meta.children
-        }
-      }
-      // current Route is a branch of a branching
-      else if (this.$router.currentRoute.meta.type === 'branch') {
-        this.navigationRoutes = {
-          context: 'branching',
-          cat: this.$router.currentRoute.meta.activity_ref
-        }
-      }
-      // currentRoute is branch_page of a branch
-      // find the current branch to get its children
-      else if (this.$router.currentRoute.meta.type === 'branch_page') {
-        // find the activity
-        const a = all_routes.find(
-          (route) =>
-            route.meta.id === this.$router.currentRoute.meta.activity_ref
-        )
-        // find the Branching
-        if (a && a.children) {
-          const b = a.children.find(
-            (route) =>
-              route.meta.id === this.$router.currentRoute.meta.branching_ref
-          )
-          // find the branch to get its nested route
-          for (const route of b.children) {
-            if (route.path === this.$router.currentRoute.meta.parent._path) {
-              // define navigation routes
-              this.navigationRoutes = {
-                context: 'branching',
-                cat: route.meta.children
-              }
-            }
-          }
-        }
-      }
-      // Navigation catalog is the introduction
-      else if (
-        this.$router.currentRoute.meta.type === 'introduction' ||
-        this.$router.currentRoute.meta.type === 'menu'
-      ) {
-        const a = all_routes.find(
-          (route) =>
-            route.meta.id === this.$router.currentRoute.meta.activity_ref
-        )
-        if (a) {
-          let r = []
-          //if Intro acitive get all the routes for indroduction or just the menu
-          this.getIntroStatus
-            ? r.push(...a.meta.children)
-            : r.push(
-                a.meta.children.find(
-                  (el) => !el._namedRoute.includes('introduction')
-                )
-              )
-          this.navigationRoutes = {
-            context: 'introduction',
-            cat: r
-          }
-        }
-      }
-      // Navigation catalog is pages of Activity ||menu
-      else {
-        const a = all_routes.find(
-          (route) =>
-            route.meta.id === this.$router.currentRoute.meta.activity_ref
-        )
-        if (a) {
-          this.navigationRoutes = {
-            context: 'normal',
-            cat: a.meta.children
-          }
-        }
-      }
-      this.$bus.$emit(
-        'set-comp-status',
-        'AppCompNavigationFull_setNavigation',
-        'ready'
-      )
-    }, // END setNaviagation
-    /**
-     *@description: set the next activity to for the Navigation
-     */
-    setNextActivity() {
-      this.nextPageLabel = this.$t('button.next')
-      if (this.autoNavigate && this.navigationRoutes) {
-        // get all the activities routes from router
-        const { meta } = this.$helper.getRoutesFromVueRouter()
-        const allRoutes = meta.children
-
-        // get the index of the current route
-        const current = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-
-        switch (this.navigationRoutes.context) {
-          case 'introduction': {
-            // This is the last page in the of introduction (this the menu)
-            if (
-              current === this.navigationRoutes.cat.length - 1 &&
-              allRoutes.length > 1
-            ) {
-              this.nextActivity = allRoutes[1] // go to the 1st activity
-              let conclu = this.conclusionComming()
-              if (!conclu) {
-                this.nextPageLabel = this.$t('button.next_activity')
-              } else {
-                this.nextPageLabel = this.$t('button.next_conclu')
-              }
-            }
-            //setting next activity or null if undefined, will show "next lesson" button
-            else
-              this.nextActivity = this.navigationRoutes.cat[current + 1] || null
-            break
-          }
-          case 'normal': {
-            // find the current activity ref in the router catalog
-            const currentRouteIndex = allRoutes.findIndex(
-              (route) => route._ref === this.$route.meta.activity_ref
-            )
-            // this is the Last page in current activity
-            if (
-              current === this.navigationRoutes.cat.length - 1 &&
-              allRoutes[currentRouteIndex + 1]
-            ) {
-              this.nextActivity = allRoutes[currentRouteIndex + 1] // get the next activity in the router catalog
-              let conclu = this.conclusionComming()
-              if (!conclu) {
-                this.nextPageLabel = this.$t('button.next_activity')
-              } else {
-                this.nextPageLabel = this.$t('button.next_conclu')
-              }
-            }
-            // this is in the same activity return the next page of the activity
-            else if (this.navigationRoutes.cat[current + 1]) {
-              this.nextActivity = this.navigationRoutes.cat[current + 1]
-            }
-            // There is no other activity after the current one
-            else this.nextActivity = null
-
-            break
-          }
-          case 'branching': {
-            // find the current activity ref in the router catalog
-            const currentRouteIndex = allRoutes.findIndex(
-              (route) => route._ref === this.$route.meta.activity_ref
-            )
-            //this is the Last page the current branching
-            if (allRoutes[currentRouteIndex + 1]) {
-              this.nextActivity = allRoutes[currentRouteIndex + 1] // get the next activity in the router catalog
-            }
-            // There is no other activity after the current one
-            else {
-              this.nextActivity = null
-            }
-            break
-          }
-        }
-      } else this.nextActivity = null
-
-      //Update next activity information to the store
-      this.$store.dispatch('updateNextActivity', this.nextActivity)
-    },
-    /**
-     * @description: set previous activity for the navigation
-     */
-    setPreviousActivity() {
-      if (this.autoNavigate && this.navigationRoutes) {
-        // get all the activities routes from router
-        const { all_routes: allRoutes } = this.$helper.getRoutesFromVueRouter()
-
-        // get the index of the current route
-        const current = this.navigationRoutes.cat.findIndex(
-          (route) => route._ref === this.$route.meta.id
-        )
-
-        switch (this.navigationRoutes.context) {
-          case 'introduction': {
-            // This is the first page in the introduction
-            if (current === 0) {
-              this.previousActivity = null
-            } else {
-              this.previousActivity = this.navigationRoutes.cat[current - 1]
-            }
-            break
-          }
-          case 'normal': {
-            // get the index of the current route
-            const currentRouteIndex = allRoutes.findIndex(
-              (route) => route.meta.id === this.$route.meta.activity_ref
-            )
-            // this is the 1st page of the 1st activity in the router catologue
-            // return point is introduction
-            if (current === 0 && currentRouteIndex === 1) {
-              const _length = allRoutes[0].children.length
-              this.previousActivity = allRoutes[0].meta.children[_length - 1] // get last page of the introduction navigation context
-            }
-            // This is the 1st page in another activity in the router catalogue
-            else if (allRoutes[currentRouteIndex - 1] && current === 0) {
-              const _length = allRoutes[currentRouteIndex - 1].children.length
-              this.previousActivity =
-                allRoutes[currentRouteIndex - 1].meta.children[_length - 1] // previous is last page of previous activity
-            }
-            // This is a simply another page in an activity
-            else this.previousActivity = this.navigationRoutes.cat[current - 1]
-            break
-          }
-          case 'branching': {
-            // get the index of the current route
-            const currentRouteIndex = allRoutes.findIndex(
-              (route) => route.meta.id === this.$route.meta.activity_ref
-            )
-            //this is the Last page the current branching
-            if (allRoutes[currentRouteIndex - 1]) {
-              this.previousActivity = allRoutes[currentRouteIndex - 1] // get the next activity in the router catalog
-            } else this.previousActivity = null
-            break
-          }
-        }
-      } else this.previousActivity = null
-
-      //Update next activity information to the store
-      this.$store.dispatch('updatePreviousActivity', this.previousActivity)
-    },
-
-    /**
-     * @description: set navigable section of the nav bar according to activity
-     */
-    setAnchors() {
-      let achrs = []
-      let activity = this.$route.meta.activity_ref
-      if (activity && this.getAnchorsForActivity(activity))
-        achrs = this.getAnchorsForActivity(activity)
-      // build routes for anchors
-      for (let a of achrs) {
-        //search the route for the anchor reference page in the navigation routes
-        const route = this.navigationRoutes.cat.find(
-          (r) => r._ref === a.pageRef
-        )
-        //set the anchors' path
-        if (route) {
-          a.path = route._namedRoute
-        }
-      }
-      this.anchors = achrs
-    },
-
-    iscurrentAnchor(anchor) {
-      let num
-      let str
-      let col = []
-      let curent = parseInt(anchor.pageRef.substring(1))
-
-      this.anchors.forEach((value) => {
-        num = parseInt(value.pageRef.substring(1))
-        col.push(num)
-      })
-
-      if (this.$route.meta.id === anchor.pageRef) {
-        this.$store.dispatch('updateCurrentSection', anchor)
-        return true
-      } else {
-        let goal = parseInt(this.$route.meta.id.substring(1))
-
-        // return closet number in the array
-        // https://stackoverflow.com/questions/8584902/get-the-closest-number-out-of-an-array
-        let closenum = col.reduce(function(prev, curr) {
-          if (Math.abs(curr - goal) < Math.abs(prev - goal)) {
-            // must add a nother condition to ensure that the goal is smaller than the current to ensure that the section is still the previous one
-            if (goal < curr) return prev
-            else return curr
-          } else {
-            return prev
-          }
-        })
-        if (closenum == curent) {
-          if (curent < 10) {
-            str = `P0${curent}`
-          } else {
-            str = `P${curent}`
-          }
-
-          if (anchor.pageRef == str) {
-            this.$store.dispatch('updateCurrentSection', anchor)
-            return true
-          }
-        }
-      }
-    },
-    conclusionComming() {
-      //Get before to last activty
-      let act = Object.keys(this.getAllActivitiesState)
-      let beforeLastActivity = act[act.length - 2]
-
-      //Get last page of before to last activty
-      let pageinfo = this.getActivity()
-      let lastPage = pageinfo.children[pageinfo.children.length - 1].meta.id
-
-      //Get current page info
-      let currantActivity = this.getCurrentPage
-
-      //compare and find
-      if (
-        currantActivity.activityRef == beforeLastActivity &&
-        currantActivity.id == lastPage
-      ) {
-        return true
-      } else {
-        return false
-      }
-    },
-    blockBranching(data) {
-      let page = data.pageRef
-      let act = this.getAct(data.path)
-      let choosen = this.getBifChoice
-      if (data.branching) {
-        if (choosen && choosen.act == act && choosen.page == page) {
-          return false
-        } else {
-          return true
-        }
-      }
-    },
-    getAct(data) {
-      if (data) {
-        if (data.substring(data.indexOf('_') + 1).length == 1) {
-          return `A0${data.substring(data.indexOf('_') + 1)}`
-        } else {
-          return `A${data.substring(data.indexOf('_') + 1)}`
-        }
-      }
-    },
-    titlePageBranching(data) {
-      return data.replace('-', ' ')
-    },
-
-    /**
-     * @description hide the navigation of the application
-     * @param {String} s - s name of the navigation element to hide ('back' | 'next')
-     */
-    hideNavigationCtrls(s) {
-      s = s || 'all'
-
-      if (s && !['back', 'next', 'all'].includes(s.toLowerCase(s))) return
-
-      switch (s) {
-        case 'back':
-          {
-            this.$store.dispatch('setShowNavLeftCtrl', false)
-          }
-          break
-        case 'next':
-          {
-            this.$store.dispatch('setShowNavRightCtrl', false)
-            this.$store.dispatch('setShowPrimaryCtrl', false)
-          }
-
-          break
-
-        case 'all':
-          {
-            //hide the Upper Nav bar controls
-            this.$store.dispatch('setShowNavLeftCtrl', false)
-            this.$store.dispatch('setShowNavRightCtrl', false)
-
-            //hide the main navigation to next page
-            this.$store.dispatch('setShowPrimaryCtrl', false)
-          }
-          break
-      }
-    },
-
-    /**
-     * @description show the navigation of the application
-     * @param {String} s - s name of the navigation element to hide ('back' | 'next')
-     */
-    showNavigationCtrls(s) {
-      s = s || 'all'
-
-      if (s && !['back', 'next', 'all'].includes(s.toLowerCase(s))) return
-
-      switch (s) {
-        case 'back':
-          {
-            this.$store.dispatch('setShowNavLeftCtrl', true)
-          }
-          break
-        case 'next':
-          {
-            this.$store.dispatch('setShowNavRightCtrl', true)
-            this.$store.dispatch('setShowPrimaryCtrl', true)
-          }
-
-          break
-
-        case 'all':
-          {
-            //hide the Upper Nav bar controls
-            this.$store.dispatch('setShowNavLeftCtrl', true)
-            this.$store.dispatch('setShowNavRightCtrl', true)
-
-            //hide the main navigation to next page
-            this.$store.dispatch('setShowPrimaryCtrl', true)
-          }
-          break
-      }
-    },
-
-    /**
-     * @description - Method to dynamically set the css display poperty of the controls button
-     * @Param {Bool} - true|false
-     */
-    displayStyle(bool) {
-      let style = bool ? { display: 'flex' } : { display: 'none' }
-      return style
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.full {
-  &.app-ctrl {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    * {
-      user-select: none;
-    }
-    padding-left: 15px;
-    padding-right: 15px;
-  }
-
-  #btn_back_summary {
-    margin-right: 10px;
-    svg {
-      margin-right: 12px;
-    }
-
-    //** label disapear in mobile**//
-    @media screen and (max-width: 1100px) {
-      span {
-        display: none;
-      }
-
-      svg {
-        margin-right: 0;
-      }
-    }
-  }
-
-  #btn_back_root {
-    svg {
-      width: 21px;
-      height: 18px;
-      margin-right: 12px;
-    }
-  }
-
-  #btn_notes {
-    svg {
-      margin-right: 12px;
-    }
-  }
-
-  .nav_main_btn {
-    padding-left: 12px;
-    padding-right: 12px;
-    display: flex;
-    align-items: center;
-    border: none;
-    justify-content: center;
-    box-sizing: border-box;
-  }
-
-  #page_nav {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    margin-right: 16px;
-    justify-content: center;
-  }
-
-  #nav_left_btns {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  #nav_right_btns {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: flex-end;
-    margin-left: auto;
-  }
-
-  $transProps: 0.15s ease-out;
-  #activity_progress {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    div {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .activity_progress_link {
-        display: flex;
-        justify-content: center;
-        position: relative;
-        margin: 0 5px;
-
-        .page_tooltip {
-          opacity: 0;
-          visibility: hidden;
-          pointer-events: none;
-          padding: 15px;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          margin-top: 35px;
-
-          &::before {
-            position: relative;
-            content: '';
-            width: 0;
-            height: 0;
-            padding: 0;
-          }
-
-          span {
-            white-space: nowrap;
-            display: block;
-          }
-        }
-
-        &:hover {
-          .page_tooltip {
-            visibility: visible;
-            opacity: 1;
-          }
-        }
-      }
-
-      &.branching_progress {
-        .activity_progress_link {
-          margin: 0 8px;
-        }
-      }
-    }
-  }
-
-  .branching {
-    & > #page_nav {
-      margin-right: 0px;
-    }
-  }
-
-  // primary navigation styling
-
-  #popup_primary_nav_btn {
-    padding: 0 15px;
-    margin-left: 50px;
-  }
-  .primary_nav_btn {
-    padding: 0 30px;
-    display: inline-block;
-
-    &.right {
-      margin-left: 35px;
-    }
-    svg {
-      margin-left: 19px;
-    }
-  }
-}
-.ico-back-branch {
-  width: 21px;
-  height: 18px;
-}
-</style>