fcad-core-dragon 2.0.0-beta.8 → 2.0.0-beta.9

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/AppCompNoteCall.vue

@@ -121,6 +121,7 @@ export default {
           }
         }, 200)
       } else {
+        this.$bus.$emit('close-widget')
         this.$bus.$emit('note-to-show', this.$el)
         let e = document.getElementsByClassName('callEndNote')
         let t = this.$el.getAttribute('id')

package/src/components/AppCompPlayBarProgress.vue

@@ -1,82 +1,82 @@
-<!--@ Description: This component is used to display the playbar associate with the videoPlayer
- @ What it does: The component is used to interacted with the videoPlayer via buttons.
- v-media class is used to identified which html elements trigger the playBar to be appear (with focus/click)-->
-<template>
-  <!--------------------------------- PLAY-BAR Progress  -------------------------------------->
-  <div ref="$playbar-timeline" class="pb-timeline">
-    <div ref="$progress-area" class="progress-area">
-      <div
-        id="progress-bar"
-        ref="$progress-bar"
-        draggable="false"
-        tabindex="0"
-        class="v-media pb-progress-bar"
-        role="slider"
-        aria-valuemin="0"
-        :aria-label="mediaA11Y.label"
-        :aria-valuenow="mediaA11Y.valNow"
-        :aria-valuemax="mediaA11Y.valMax"
-        :aria-valuetext="mediaA11Y.valueText"
-        @focus="changeFocusState('progressBar', true)"
-        @blur="changeFocusState('progressBar', false)"
-      >
-        <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
-        <div
-          id="progress-indicator"
-          ref="$progress-indicator"
-          draggable="false"
-          class="progress-indicator"
-          :class="{ 'progress-animation': !progressThumbDown }"
-          :style="{ width: progressBarPercentage + '%' }"
-        >
-          <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
-             MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
-          <!-- <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mousedown="
-              savedIsPlaying = isPlaying
-              progressThumbDown = true
-            "
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div> -->
-
-          <div
-            ref="$progress-thumb"
-            draggable="false"
-            class="progress-thumb"
-            style="z-index: 9"
-            @mouseover="progressThumbHover = true"
-            @mouseleave="progressThumbHover = false"
-          ></div>
-        </div>
-      </div>
-      <div
-        v-if="tooTipTimeCode"
-        id="seek-tooltip"
-        ref="$seek-tooltip"
-        aria-hidden="true"
-        class="seek-tooltip"
-      >
-        {{ tooTipTimeCode }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import $extendsMedia from '../mixins/$mediaMixins'
-
-export default {
-  mixins: [$extendsMedia],
-  data() {
-    return {
-      tooTipTimeCode: null
-    }
-  },
-  mounted() {}
-}
-</script>
+<!--@ Description: This component is used to display the playbar associate with the videoPlayer
+ @ What it does: The component is used to interacted with the videoPlayer via buttons.
+ v-media class is used to identified which html elements trigger the playBar to be appear (with focus/click)-->
+<template>
+  <!--------------------------------- PLAY-BAR Progress  -------------------------------------->
+  <div ref="$playbar-timeline" class="pb-timeline">
+    <div ref="$progress-area" class="progress-area">
+      <div
+        id="progress-bar"
+        ref="$progress-bar"
+        draggable="false"
+        tabindex="0"
+        class="v-media pb-progress-bar"
+        role="slider"
+        aria-valuemin="0"
+        :aria-label="mediaA11Y.label"
+        :aria-valuenow="mediaA11Y.valNow"
+        :aria-valuemax="mediaA11Y.valMax"
+        :aria-valuetext="mediaA11Y.valueText"
+        @focus="changeFocusState('progressBar', true)"
+        @blur="changeFocusState('progressBar', false)"
+      >
+        <!--Class progress-animation is apply when we are not using the thumb to change the progression-->
+        <div
+          id="progress-indicator"
+          ref="$progress-indicator"
+          draggable="false"
+          class="progress-indicator"
+          :class="{ 'progress-animation': !progressThumbDown }"
+          :style="{ width: progressBarPercentage + '%' }"
+        >
+          <!--Mousedown validate if the thumb is cliqued (if yes, the mouse is follow to modify the progress)
+             MouseOver/MouseOut deactivate click event on progressBar if the mouse hovered the thumb-->
+          <!-- <div
+            ref="$progress-thumb"
+            draggable="false"
+            class="progress-thumb"
+            style="z-index: 9"
+            @mousedown="
+              savedIsPlaying = isPlaying
+              progressThumbDown = true
+            "
+            @mouseover="progressThumbHover = true"
+            @mouseleave="progressThumbHover = false"
+          ></div> -->
+
+          <div
+            ref="$progress-thumb"
+            draggable="false"
+            class="progress-thumb"
+            style="z-index: 9"
+            @mouseover="progressThumbHover = true"
+            @mouseleave="progressThumbHover = false"
+          ></div>
+        </div>
+      </div>
+      <div
+        v-if="tooTipTimeCode"
+        id="seek-tooltip"
+        ref="$seek-tooltip"
+        aria-hidden="true"
+        class="seek-tooltip"
+      >
+        {{ tooTipTimeCode }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import $extendsMedia from '../mixins/$mediaMixins'
+
+export default {
+  mixins: [$extendsMedia],
+  data() {
+    return {
+      tooTipTimeCode: null
+    }
+  },
+  mounted() {}
+}
+</script>

package/src/components/AppCompPopUpNext.vue

@@ -208,7 +208,7 @@
 </template>
 
 <script>
-import { mapActions } from 'pinia'
+import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
 
 export default {
@@ -229,6 +229,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(useAppStore, ['getNotes', 'getWidgetOpen']),
     contentLength() {
       let size = null
       if (!this.pType || this.pType !== 'popup-info') return
@@ -399,6 +400,9 @@ export default {
         if (this.pType == 'popup-endActivity')
           this.updateEndPopUp(true) //This will handle the activation of the element in the portal
         else this.updateEndPopUp(false) //This will handle the activation of the element in the portal
+        if (this.getWidgetOpen) {
+          this.$bus.$emit('close-widget')
+        }
         this.$open()
       }
     },