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

package/src/components/AppCompMenuItem.vue

@@ -1,228 +1,228 @@
-<!--
- @ Description: This component is used to display and create the link's to all the activity creation in module.
- @ What it does: Goes trougth all the activity in the router and create a card that open the Table of content (appCompTableOfContent) that display the anchor.Display the title and subtitle enter in menu.json. Must be used with AppCompTableOfContent and AppCompMenu.
--->
-<template>
-  <v-row v-if="activities.length" class="box-msa">
-    <v-col
-      v-for="activity of activities"
-      :key="activity.id"
-      cols="6"
-      class="menu-section-activity"
-      :aria-describedby="activity.id + '-subMenu'"
-    >
-      <router-link
-        :id="activity.id + '-subMenu'"
-        :title="activity.title"
-        :data-test="`item-menu-${activity.id}`"
-        class="btn-menu"
-        :to="{
-          name: createRoutes(activity.id)
-        }"
-        @click="startActivity(activity)"
-      >
-        <div class="menu-card" tag="article">
-          <v-row>
-            <div v-if="activity.subtitle === undefined" class="title">
-              <h4 v-html="activity.title"></h4>
-            </div>
-            <div v-else class="title">
-              <h4 v-html="`${activity.title} : ${activity.subtitle}`"></h4>
-            </div>
-
-            <div class="cnt-time">
-              <svg :aria-label="$t('label.timer')">
-                <use href="#clock-icon" />
-              </svg>
-              <p class="time">
-                {{ activity.time || '00:00' }}
-              </p>
-            </div>
-            <div class="box-gauge">
-              <app-comp-jauge
-                :max-value="getActivitySize(activity.id)"
-                :value="getPageComplete(activity.id)"
-              />
-            </div>
-          </v-row>
-        </div>
-      </router-link>
-    </v-col>
-  </v-row>
-</template>
-<script>
-// ...
-import { mapState } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import AppCompJauge from './AppCompJauge.vue'
-export default {
-  components: {
-    AppCompJauge
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getAllActivities',
-      'getAllActivitiesState',
-      'getAllCompleted',
-      'getAppConfigs',
-      'getMenuSettings',
-      'getModuleInfo'
-    ]),
-    activities() {
-      // get the data for list of the page for this module from the store and
-      // get the route of the page from the router to build the menu with its routes
-      let count = 0
-      const collection = []
-
-      this.getAllActivities().list.forEach((value, key) => {
-        let theActivity,
-          activityTitle,
-          activitySubTitle,
-          activityTime = null,
-          activityPath = ''
-
-        if (this.menuInfo[key]) {
-          const { title, subTitle, time } = this.menuInfo[key] //get time subTitle time from menu info
-          //set the title
-          if (title && title != ' ') activityTitle = title
-          //set the subtitle
-          if (subTitle && subTitle != ' ') activitySubTitle = subTitle
-          //set the time
-          if (time && time != ' ') activityTime = time
-        }
-        // This is the Introduction
-        if (key === 'A00') {
-          activityTitle = activityTitle || this.$t('text.introduction')
-          activityPath = 'introduction'
-        } else if (key === 'A99') {
-          activityTitle = activityTitle || this.$t('text.conclusion')
-          activityPath = 'conclusion'
-        } else {
-          count++
-          activityTitle =
-            activityTitle || `${this.$t('text.activity')} ${count}`
-          activityPath = `activite_${count}`
-        }
-
-        theActivity = {
-          id: key,
-          title: activityTitle,
-          subtitle: activitySubTitle,
-          time: activityTime,
-          path: activityPath,
-          data: value
-        }
-
-        collection.push(theActivity) // push the activity in the collection
-      })
-
-      return collection
-    },
-    menuInfo() {
-      let menuInfo = this.getMenuSettings
-      return menuInfo
-    }
-  },
-  mounted() {},
-  methods: {
-    /**
-     * @description Gives gives length of completed page for an activity
-     * @param {String} idActivity
-     * @returns {Number}
-     */
-    getPageComplete(idActivity) {
-      /// give all the page that are complete to the gauge
-      if (idActivity) {
-        let completed = []
-        if (this.getAllCompleted[idActivity]) {
-          completed = this.getAllCompleted[idActivity] //get all completed page for the activity
-        }
-
-        return completed.length
-      }
-    },
-    /**
-     * @description give the size of the state of the activity
-     * @param {String} activityID
-     * @returns {Number} size
-     */
-    getActivitySize(activityID) {
-      /*
-       * Note:
-       * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
-       * cf: https://reactgo.com/javascript-clone-object/
-       */
-
-      const allActivitiesState = JSON.parse(
-        JSON.stringify(this.getAllActivitiesState)
-      )
-      let size = allActivitiesState[activityID]
-        ? allActivitiesState[activityID].size
-        : 0
-
-      return size
-    },
-    createRoutes(data) {
-      let activity
-
-      if (data.charAt(1) == '0' || data.charAt(1) == 0) {
-        activity = data.substr(2)
-      } else {
-        activity = data.substr(1)
-      }
-
-      if (activity == 0 && activity == '0') return `introduction`
-      if (activity == '99') return `conclusion`
-      else return `activite_${activity}`
-    },
-    startActivity(a) {
-      //this.$bus.$emit('send-starting-event', a)
-    }
-  }
-}
-</script>
-<style lang="scss">
-.menu-card {
-  width: 100%;
-  padding: 24px;
-
-  .v-row {
-    margin: 0;
-    flex-direction: column;
-
-    .title {
-      flex-grow: 4;
-      width: 80%;
-      margin-bottom: 30px;
-
-      h3 {
-        text-align: left;
-      }
-    }
-
-    .cnt-time {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-bottom: 20px;
-
-      svg {
-        width: 18px;
-        height: 18px;
-        margin-right: 10px;
-      }
-    }
-
-    .box-gauge {
-      display: block;
-      width: 100%;
-
-      .box-g {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-  }
-}
-</style>
+<!--
+ @ Description: This component is used to display and create the link's to all the activity creation in module.
+ @ What it does: Goes trougth all the activity in the router and create a card that open the Table of content (appCompTableOfContent) that display the anchor.Display the title and subtitle enter in menu.json. Must be used with AppCompTableOfContent and AppCompMenu.
+-->
+<template>
+  <v-row v-if="activities.length" class="box-msa">
+    <v-col
+      v-for="activity of activities"
+      :key="activity.id"
+      cols="6"
+      class="menu-section-activity"
+      :aria-describedby="activity.id + '-subMenu'"
+    >
+      <router-link
+        :id="activity.id + '-subMenu'"
+        :title="activity.title"
+        :data-test="`item-menu-${activity.id}`"
+        class="btn-menu"
+        :to="{
+          name: createRoutes(activity.id)
+        }"
+        @click="startActivity(activity)"
+      >
+        <div class="menu-card" tag="article">
+          <v-row>
+            <div v-if="activity.subtitle === undefined" class="title">
+              <h4 v-html="activity.title"></h4>
+            </div>
+            <div v-else class="title">
+              <h4 v-html="`${activity.title} : ${activity.subtitle}`"></h4>
+            </div>
+
+            <div class="cnt-time">
+              <svg :aria-label="$t('label.timer')">
+                <use href="#clock-icon" />
+              </svg>
+              <p class="time">
+                {{ activity.time || '00:00' }}
+              </p>
+            </div>
+            <div class="box-gauge">
+              <app-comp-jauge
+                :max-value="getActivitySize(activity.id)"
+                :value="getPageComplete(activity.id)"
+              />
+            </div>
+          </v-row>
+        </div>
+      </router-link>
+    </v-col>
+  </v-row>
+</template>
+<script>
+// ...
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import AppCompJauge from './AppCompJauge.vue'
+export default {
+  components: {
+    AppCompJauge
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getAllActivities',
+      'getAllActivitiesState',
+      'getAllCompleted',
+      'getAppConfigs',
+      'getMenuSettings',
+      'getModuleInfo'
+    ]),
+    activities() {
+      // get the data for list of the page for this module from the store and
+      // get the route of the page from the router to build the menu with its routes
+      let count = 0
+      const collection = []
+
+      this.getAllActivities().list.forEach((value, key) => {
+        let theActivity,
+          activityTitle,
+          activitySubTitle,
+          activityTime = null,
+          activityPath = ''
+
+        if (this.menuInfo[key]) {
+          const { title, subTitle, time } = this.menuInfo[key] //get time subTitle time from menu info
+          //set the title
+          if (title && title != ' ') activityTitle = title
+          //set the subtitle
+          if (subTitle && subTitle != ' ') activitySubTitle = subTitle
+          //set the time
+          if (time && time != ' ') activityTime = time
+        }
+        // This is the Introduction
+        if (key === 'A00') {
+          activityTitle = activityTitle || this.$t('text.introduction')
+          activityPath = 'introduction'
+        } else if (key === 'A99') {
+          activityTitle = activityTitle || this.$t('text.conclusion')
+          activityPath = 'conclusion'
+        } else {
+          count++
+          activityTitle =
+            activityTitle || `${this.$t('text.activity')} ${count}`
+          activityPath = `activite_${count}`
+        }
+
+        theActivity = {
+          id: key,
+          title: activityTitle,
+          subtitle: activitySubTitle,
+          time: activityTime,
+          path: activityPath,
+          data: value
+        }
+
+        collection.push(theActivity) // push the activity in the collection
+      })
+
+      return collection
+    },
+    menuInfo() {
+      let menuInfo = this.getMenuSettings
+      return menuInfo
+    }
+  },
+  mounted() {},
+  methods: {
+    /**
+     * @description Gives gives length of completed page for an activity
+     * @param {String} idActivity
+     * @returns {Number}
+     */
+    getPageComplete(idActivity) {
+      /// give all the page that are complete to the gauge
+      if (idActivity) {
+        let completed = []
+        if (this.getAllCompleted[idActivity]) {
+          completed = this.getAllCompleted[idActivity] //get all completed page for the activity
+        }
+
+        return completed.length
+      }
+    },
+    /**
+     * @description give the size of the state of the activity
+     * @param {String} activityID
+     * @returns {Number} size
+     */
+    getActivitySize(activityID) {
+      /*
+       * Note:
+       * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
+       * cf: https://reactgo.com/javascript-clone-object/
+       */
+
+      const allActivitiesState = JSON.parse(
+        JSON.stringify(this.getAllActivitiesState)
+      )
+      let size = allActivitiesState[activityID]
+        ? allActivitiesState[activityID].size
+        : 0
+
+      return size
+    },
+    createRoutes(data) {
+      let activity
+
+      if (data.charAt(1) == '0' || data.charAt(1) == 0) {
+        activity = data.substr(2)
+      } else {
+        activity = data.substr(1)
+      }
+
+      if (activity == 0 && activity == '0') return `introduction`
+      if (activity == '99') return `conclusion`
+      else return `activite_${activity}`
+    },
+    startActivity(a) {
+      //this.$bus.$emit('send-starting-event', a)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.menu-card {
+  width: 100%;
+  padding: 24px;
+
+  .v-row {
+    margin: 0;
+    flex-direction: column;
+
+    .title {
+      flex-grow: 4;
+      width: 80%;
+      margin-bottom: 30px;
+
+      h3 {
+        text-align: left;
+      }
+    }
+
+    .cnt-time {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 20px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+      }
+    }
+
+    .box-gauge {
+      display: block;
+      width: 100%;
+
+      .box-g {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

package/src/components/AppCompNavigation.vue

@@ -16,14 +16,14 @@
             <use href="#home-icon" />
           </svg>
 
-          <span class="toolbar_label">{{ homeLanding.title }}</span>
+          <span class="toolbar_label">{{ $t('button.menu') }}</span>
         </template>
       </router-link>
       <div class="ctn-w">
         <app-base-button
           id="toc"
-          :title="$t('button.toc')"
-          :aria-label="$t('button.toc')"
+          :title="$t('button.toc_title')"
+          :aria-label="$t('button.toc_title')"
           @click="openToc()"
         >
           <svg class="toc-icon">
@@ -38,9 +38,9 @@
           id="btn_infos"
           :title="$t('button.info')"
           :aria-label="$t('button.info')"
-          :disabled="noInfo"
-          :class="{ md_disabled: noInfo }"
-          @click="openCreditNote()"
+          :aria-disabled="!noInfo"
+          :class="{ md_disabled: !noInfo }"
+          @click="openCreditsNotes()"
         >
           <svg class="info-icon">
             <use href="#info-icon" />
@@ -61,7 +61,7 @@
           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"
+          :is-disabled="!backAllowed"
           @click="goPrevious"
         >
           <svg>
@@ -83,7 +83,7 @@
           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"
+          :is-disabled="!nextAllowed"
           @click="goNext"
         >
           <svg>
@@ -145,7 +145,9 @@ export default {
       anchors: [],
       pageInfo: null,
       nextActivity: null,
-      nextActivityRoute: null
+      nextActivityRoute: null,
+      notes: null,
+      credits: null
     }
   },
   computed: {
@@ -159,16 +161,26 @@ export default {
       'getBifChoice',
       'getMenuSettings',
       'getWidgetOpen',
-      'getDataNoteCredit',
       'getPopStatus',
-      'getEndPopUp'
+      'getEndPopUp',
+      'getNotes',
+      'getCredits'
     ]),
     noInfo() {
-      if (this.getDataNoteCredit.note || this.getDataNoteCredit.credit) {
-        return false
-      } else return true
+      return this.infoNotes.length > 0 || this.infoCredits.length > 0
+    },
+    infoNotes() {
+      let active = this.$route.meta.activity_ref
+      let page = this.$route.meta.id
+      let notes = this.getNotes(active, page)
+      return notes
+    },
+    infoCredits() {
+      let active = this.$route.meta.activity_ref
+      let page = this.$route.meta.id
+      let credits = this.getCredits(active, page)
+      return credits
     },
-
     /// MUST BE MODIFY BECAUSE MENU IS VIEW NOW
     pagination() {
       let p = { counter: null, total: null }
@@ -248,12 +260,13 @@ export default {
       const activityRoutes = this.$helper.getRoutesFromVueRouter()
       //Get the 1st route from the list of routes
       const bckRoute = activityRoutes.meta.children[0]
-      return noMenu
-        ? {
-            title: this.$t('button.go_to_first_page'),
-            route: bckRoute._namedRoute
-          }
-        : { title: this.$t('button.menu'), route: 'menu' }
+      const btnObj = {
+        title: noMenu
+          ? this.$t('button.go_to_first_page')
+          : this.$t('button.go_to_menu'),
+        route: noMenu ? bckRoute._namedRoute : 'menu'
+      }
+      return btnObj
     },
 
     endActivityPopup() {
@@ -339,10 +352,12 @@ export default {
   beforeUnmount() {
     this.$bus.$off('mediaPlaybackEnded', this.onMediaEnded)
     this.$bus.$off('quizNoAnswer', this.showPopupNoAnswer)
+    this.$bus.$off('open-notes', this.openCreditsNotes)
   },
   mounted() {
     this.$bus.$on('mediaPlaybackEnded', this.onMediaEnded)
     this.$bus.$on('quizNoAnswer', this.showPopupNoAnswer)
+    this.$bus.$on('open-notes', this.openCreditsNotes)
 
     this.setNavigation()
     setTimeout(() => {
@@ -374,8 +389,6 @@ export default {
           this.$helper.getNextLessonEnv(this.nextLesson)
         )
 
-      if (!path) return this.$bus.$emit('close-popup')
-
       this.$router.push({
         name: path
       })
@@ -582,10 +595,6 @@ export default {
       }
     },
     setNavigation() {
-      // Close the info widget before navigation
-      if (this.getWidgetOpen) {
-        this.$bus.$emit('close-widget')
-      }
       // current Route is module
       this.currentActivity = this.$router.currentRoute.value.meta.activity_ref
       this.currentPageId = this.$router.currentRoute.value.meta.id
@@ -815,14 +824,18 @@ export default {
     /**
      * @description - send information to open toc
      */ openToc() {
-      this.$bus.$emit('toggle-widget', 'toc')
+      this.$bus.$emit('toggle-widget', { type: 'toc', content: null })
       this.$bus.$emit('info-activity', this.getCurrentPage.activityRef)
     },
     /**
      * @description - send information to open credit and note
      */
-    openCreditNote() {
-      this.$bus.$emit('toggle-widget', 'noteCredit')
+    openCreditsNotes() {
+      if (!this.noInfo) return
+      this.$bus.$emit('toggle-widget', {
+        type: 'noteCredit',
+        content: { notes: this.infoNotes, credits: this.infoCredits }
+      })
     }
   }
 }