fcad-core-dragon 2.0.0-beta.2 → 2.0.0-beta.4

package/src/components/AppCompNavigation.vue

@@ -1,24 +1,24 @@
-<!--
+<!-- About this Component--
  @ 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.
+ @ 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. Teleport are use to place the element in the rigth place in the main frame.
 -->
 <template>
   <div v-if="navigationRoutes" class="app-ctrl">
     <div id="tool-bar">
-      <b-link
+      <router-link
         id="btn_back_summary"
         :to="{ name: homeLanding.route }"
         class="btn"
         :title="homeLanding.title"
       >
         <template #default>
-          <svg width="20" height="17">
+          <svg class="home-icon">
             <use href="#home-icon" />
           </svg>
 
           <span class="toolbar_label">{{ homeLanding.title }}</span>
         </template>
-      </b-link>
+      </router-link>
       <div class="ctn-w">
         <app-base-button
           id="toc"
@@ -26,8 +26,8 @@
           :aria-label="$t('button.toc')"
           @click="openToc()"
         >
-          <svg width="20" height="17">
-            <use href="#timeline-icon" />
+          <svg class="toc-icon">
+            <use href="#toc-icon" />
           </svg>
           <span class="toolbar_label">{{ $t('button.toc') }}</span>
         </app-base-button>
@@ -35,13 +35,14 @@
       </div>
       <div class="ctn-w">
         <app-base-button
+          id="btn_infos"
           :title="$t('button.info')"
           :aria-label="$t('button.info')"
           :disabled="noInfo"
           :class="{ md_disabled: noInfo }"
           @click="openCreditNote()"
         >
-          <svg width="20" height="17">
+          <svg class="info-icon">
             <use href="#info-icon" />
           </svg>
           <span class="toolbar_label">{{ $t('button.info') }}</span>
@@ -52,80 +53,81 @@
 
     <!-- Navigation principale -->
 
-    <portal v-if="!isMenu" to="primary_nav">
-      <app-base-button
-        id="btn_previous_page"
-        ref="btn_previous_page"
-        class="nav_main_btn primary_nav_btn"
-        :title="$t('button.go_to_previous_page')"
-        :aria-label="$t('button.go_to_previous_page')"
-        :is-active="!backAllowed"
-        @click="goPrevious"
-      >
-        <svg width="24" height="24">
-          <use href="#fleche-gauche-icon" fill="#fff" />
-        </svg>
-      </app-base-button>
-      <div class="pagination">
-        <span aria-hidden="true">
-          Page {{ pagination.counter }} / {{ pagination.total }}
-        </span>
-        <span class="sr-only">
-          Page {{ pagination.counter }} {{ pagination.$W }}
-          {{ pagination.total }}
-        </span>
-      </div>
-      <app-base-button
-        id="btn_next_page"
-        ref="btn_next_page"
-        class="nav_main_btn primary_nav_btn"
-        :aria-label="$t('button.go_to_next_page')"
-        :title="$t('button.go_to_next_page')"
-        :is-active="!nextAllowed"
-        @click="goNext"
-      >
-        <svg width="24" height="24">
-          <!-- <use v-if="nextLesson" href="#fleche-retour-icon" fill="#fff" /> -->
-
-          <use href="#fleche-droite-icon" fill="#fff"></use>
-        </svg>
-      </app-base-button>
-    </portal>
+    <SafeTeleport to="#primary_nav_wrapper">
+      <template v-if="!isMenu">
+        <app-base-button
+          id="btn_previous_page"
+          ref="btn_previous_page"
+          class="nav_main_btn primary_nav_btn"
+          :title="$t('button.go_to_previous_page')"
+          :aria-label="$t('button.go_to_previous_page')"
+          :is-active="!backAllowed"
+          @click="goPrevious"
+        >
+          <svg>
+            <use href="#fleche-gauche-icon" />
+          </svg>
+        </app-base-button>
+        <div class="pagination">
+          <span aria-hidden="true">
+            Page {{ pagination.counter }} / {{ pagination.total }}
+          </span>
+          <span class="sr-only">
+            Page {{ pagination.counter }} {{ pagination.$W }}
+            {{ pagination.total }}
+          </span>
+        </div>
+        <app-base-button
+          id="btn_next_page"
+          ref="btn_next_page"
+          class="nav_main_btn primary_nav_btn"
+          :aria-label="$t('button.go_to_next_page')"
+          :title="$t('button.go_to_next_page')"
+          :is-active="!nextAllowed"
+          @click="goNext"
+        >
+          <svg>
+            <use href="#fleche-droite-icon"></use>
+          </svg>
+        </app-base-button>
+      </template>
+    </SafeTeleport>
     <!---------------------------- TEST ------------------------->
     <!---------------------------- END_ACTIVITY_POPUP SECTION ------------------------->
 
-    <portal v-if="endActivityPopup" to="wrap-end-activity">
-      <app-base-button
-        v-if="endActivityPopup.backEnabled"
-        :aria-label="endActivityPopup.backLabel"
-        :title="endActivityPopup.backLabel"
-        class="popup_primary_nav_btn"
-        @click="navigateTo(endActivityPopup.backRoute)"
-      >
-        {{ endActivityPopup.backLabel }}
-      </app-base-button>
-
-      <app-base-button
-        v-if="endActivityPopup.nextEnabled"
-        :aria-label="endActivityPopup.nextLabel"
-        :title="endActivityPopup.nextLabel"
-        class="popup_primary_nav_btn"
-        @click="navigateTo(endActivityPopup.nextRoute)"
-      >
-        {{ endActivityPopup.nextLabel }}
-      </app-base-button>
-    </portal>
+    <SafeTeleport
+      v-if="endActivityPopup && getEndPopUp"
+      defer
+      to="#end-activity"
+    >
+      <div class="popup-bottom-buttons">
+        <app-base-button
+          :aria-label="endActivityPopup.backLabel"
+          :title="endActivityPopup.backLabel"
+          class="popup_primary_nav_btn btn btn-reserve"
+          @click="navigateTo(endActivityPopup.backRoute)"
+        >
+          {{ endActivityPopup.backLabel }}
+        </app-base-button>
 
+        <app-base-button
+          :aria-label="endActivityPopup.nextLabel"
+          :title="endActivityPopup.nextLabel"
+          class="popup_primary_nav_btn btn btn-main"
+          @click="navigateTo(endActivityPopup.nextRoute)"
+        >
+          {{ endActivityPopup.nextLabel }}
+        </app-base-button>
+      </div>
+    </SafeTeleport>
     <!---------------------------- END END_ACTIVITY_POPUP SECTION ------------------------->
-    <app-comp-settings-menu />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import AppCompSettingsMenu from './AppCompSettingsMenu.vue'
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 export default {
-  components: { AppCompSettingsMenu },
   props: {
     autoNavigate: { type: Boolean, default: false }
   },
@@ -147,7 +149,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getCurrentPage',
       'getModuleInfo',
       'getIntroStatus',
@@ -157,7 +159,9 @@ export default {
       'getBifChoice',
       'getMenuSettings',
       'getWidgetOpen',
-      'getDataNoteCredit'
+      'getDataNoteCredit',
+      'getPopStatus',
+      'getEndPopUp'
     ]),
     noInfo() {
       if (this.getDataNoteCredit.note || this.getDataNoteCredit.credit) {
@@ -321,12 +325,15 @@ export default {
     }
   },
   watch: {
-    $route() {
-      this.setNavigation() // reset the navigation context when route change
-
-      setTimeout(() => {
-        this.initPage()
-      }, 200)
+    $route: {
+      handler() {
+        this.setNavigation() // reset the navigation context when route change
+
+        setTimeout(() => {
+          this.initPage()
+        }, 200)
+      },
+      deep: true
     }
   },
   beforeUnmount() {
@@ -343,6 +350,7 @@ export default {
     }, 200)
   },
   methods: {
+    ...mapActions(useAppStore, ['updateNextActivity']),
     initPage() {
       this.setNextActivity()
       this.setPreviousActivity()
@@ -351,7 +359,8 @@ export default {
     getActivity() {
       const { all_routes } = this.$helper.getRoutesFromVueRouter()
       const activity = all_routes.find(
-        (route) => route.meta.id === this.$router.currentRoute.meta.activity_ref
+        (route) =>
+          route.meta.id === this.$router.currentRoute.value.meta.activity_ref
       )
       return activity
     },
@@ -487,55 +496,42 @@ export default {
           })
           break
         //Next  navigation will lead next activity
-        case this.nextActivity.type_of_next === 'ACTIVITY':
-          this.openPopup(
-            {
-              type: 'popup-endActivity',
-              value: {
-                //title: this.$t('popup.text_congratulation'),
-                title: '',
-
-                hypertext_1: `<p>${this.$t('popup.text_what_to_do')}</p>`,
-                $bvArgs: [
-                  {
-                    'no-close-on-backdrop': false
-                  }
-                ]
-              }
-            },
-            'no_attempts'
-          )
+        case this.nextActivity.type_of_next === 'ACTIVITY': {
+          const endPopup = {
+            type: 'popup-endActivity',
+            value: {
+              title: `${this.$t('popup.text_what_to_do')}`
+            }
+          }
+
+          this.openPopup(endPopup)
+
           this.nextActivityRoute = this.nextActivity._namedRoute
 
           if (this.getModuleInfo.packageType !== 'xapi') return
 
           this.$bus.$emit('send-completion-event', 'ACTIVITY')
           break
+        }
         //Next  navigation will lead next activity
-        case this.nextActivity.type_of_next === 'LESSON':
-          this.openPopup(
-            {
-              type: 'popup-endActivity',
-              value: {
-                //title: this.$t('popup.text_congratulation'),
-                title: '',
-
-                hypertext_1: `<p>${this.$t('popup.text_what_to_do')}</p>`,
-                $bvArgs: [
-                  {
-                    'no-close-on-backdrop': false
-                  }
-                ]
-              }
-            },
-            'no_attempts'
-          )
+        case this.nextActivity.type_of_next === 'LESSON': {
+          const endPopup = {
+            type: 'popup-endActivity',
+            value: {
+              template: `<p>${this.$t('popup.text_what_to_do')}</p>`,
+              title: ''
+            }
+          }
+
+          this.openPopup(endPopup)
+
           this.nextActivityRoute = this.nextLesson
 
           if (this.getModuleInfo.packageType !== 'xapi') return
           this.$bus.$emit('send-completion-event', 'ACTIVITY')
 
           break
+        }
       }
     },
 
@@ -565,9 +561,7 @@ export default {
           })
         } else {
           this.$router.push({
-            name: `${
-              this.navigationRoutes.cat[0]._namedRoute
-            }.${this.getPageNavBifStart(
+            name: `${this.navigationRoutes.cat[0]._namedRoute}.${this.getPageNavBifStart(
               this.$route.meta.activity_ref,
               this.$route.meta.id
             )}`
@@ -593,12 +587,12 @@ export default {
         this.$bus.$emit('close-widget')
       }
       // current Route is module
-      this.currentActivity = this.$router.currentRoute.meta.activity_ref
-      this.currentPageId = this.$router.currentRoute.meta.id
+      this.currentActivity = this.$router.currentRoute.value.meta.activity_ref
+      this.currentPageId = this.$router.currentRoute.value.meta.id
 
       const { all_routes, meta } = this.$helper.getRoutesFromVueRouter()
 
-      if (this.$router.currentRoute.name === 'module') {
+      if (this.$router.currentRoute.value.name === 'module') {
         this.navigationRoutes = {
           context: 'module',
           cat: meta.children
@@ -606,18 +600,18 @@ export default {
       }
       // Navigation catalog is the introduction
       else if (
-        this.$router.currentRoute.meta.type === 'introduction' ||
-        this.$router.currentRoute.meta.type === 'menu'
+        this.$router.currentRoute.value.meta.type === 'introduction' ||
+        this.$router.currentRoute.value.meta.type === 'menu'
       ) {
         const a = all_routes.find(
           (route) =>
             route.meta.id ===
-            this.$router.currentRoute.meta.activity_ref.$folderName
+            this.$router.currentRoute.value.meta.activity_ref.$folderName
         )
 
         const b = all_routes.find(
           (route) =>
-            route.meta.id === this.$router.currentRoute.meta.activity_ref
+            route.meta.id === this.$router.currentRoute.value.meta.activity_ref
         )
         if (a) {
           let r = []
@@ -654,13 +648,13 @@ export default {
         const a = all_routes.find(
           (route) =>
             route.meta.id ===
-            this.$router.currentRoute.meta.activity_ref.$folderName
+            this.$router.currentRoute.value.meta.activity_ref.$folderName
         )
 
         // on refresh $forderName doesn't existe
         const b = all_routes.find(
           (route) =>
-            route.meta.id === this.$router.currentRoute.meta.activity_ref
+            route.meta.id === this.$router.currentRoute.value.meta.activity_ref
         )
 
         if (a) {
@@ -753,7 +747,7 @@ export default {
         }
       } else this.nextActivity = null
 
-      this.$store.dispatch('updateNextActivity', this.nextActivity)
+      this.updateNextActivity(this.nextActivity)
     },
     /**
      * @description: set previous activity for the navigation
@@ -817,41 +811,7 @@ export default {
     openPopup(popUpData) {
       this.$bus.$emit('open-popup', popUpData)
     },
-    /**
-     * @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 - send information to open toc
      */ openToc() {
@@ -869,62 +829,87 @@ export default {
 </script>
 
 <style lang="scss">
-.app-ctrl {
+.app-nav {
+  transition: width 0.5s;
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  z-index: 10;
   display: flex;
   flex-direction: column;
-  align-items: start;
-  height: 100%;
-  width: 100%;
-  position: relative;
+  flex-wrap: wrap;
+  align-content: start !important;
+  width: 67px;
+  height: 100vh;
 
-  #tool-bar {
-    width: 100%;
-    padding: 32px 0;
+  .app-ctrl {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    // flex-wrap: wrap;
+    align-items: start;
+    width: 100%;
 
-    & .ctn-w > button,
-    & > a {
-      display: block;
-      margin-bottom: 30px;
+    #tool-bar {
+      width: 100%;
+      padding: 32px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      & .ctn-w > button,
+      & > a {
+        //display: block;
+        width: 80px;
+        height: 80px;
+        padding: 0 !important;
+        margin-bottom: 24px;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        position: relative;
+
+        .home-icon {
+          width: 22px;
+          height: 24px;
+        }
 
-      span.toolbar_label {
-        transition: opacity 0.5s;
-        display: none;
-        opacity: 0;
-      }
-    }
+        .toc-icon {
+          width: 41px;
+          height: 22px;
+        }
 
-    .ctn-w {
-      position: relative;
-    }
-  }
-}
+        .info-icon {
+          width: 24px;
+          height: 24px;
+        }
 
-#primary_nav_wrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: center;
-  justify-content: center;
-  margin: 25px 0;
-}
+        span {
+          &.toolbar_label {
+            display: block;
+            transition: opacity 0.5s;
+            visibility: hidden;
+            opacity: 0;
+          }
+        }
 
-.navbar {
-  transition: width 0.5s;
+        &.active_toc,
+        &.active_infos {
+          &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            height: 100%;
+            width: 4px;
+            left: -16px;
+          }
+        }
+      }
 
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-content: start;
-  width: 67px;
-  height: 100%;
+      .ctn-w {
+        position: relative;
+      }
+    }
+  }
 
   &:focus,
   &:hover,
@@ -932,14 +917,43 @@ export default {
     width: 115px !important;
 
     #tool-bar {
-      button,
+      & .ctn-w > button,
       a {
         span.toolbar_label {
-          display: block;
+          visibility: visible;
           opacity: 1;
         }
       }
     }
   }
 }
+
+#primary_nav_wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  margin: 25px 0;
+
+  #btn_previous_page,
+  #btn_next_page {
+    border-radius: 50px;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+
+    /*svg {
+      width: 100%;
+      height: auto;
+    }*/
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
 </style>