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

package/src/components/AppCompTableOfContent.vue

@@ -1,45 +1,54 @@
 <!--
+  ----------------- MUST ADD ERROR GESTION ------------------
+  ----------------- MUST ADD label terminer ------------------
+  ----------------- MUST ADD css ------------------
+
  @ Description: This component is used to display the sub menu to show the anchor of a activity.
  @ What it does: The component show the data that was enter in menu.json and create de link to the anchor from those information. This componant must be use with app-comp-menu-Item and app-comp-menu.
 -->
 
 <template>
-  <b-sidebar id="sidebar-submenu" backdrop shadow right>
-    <div class="box">
-      <div class="box-time">
-        <p>{{ time }}</p>
-      </div>
+  <div v-if="error" id="sidebar-submenu" :class="{ isOpen: open }">
+    <app-base-button
+      id="close-toc"
+      :title="$t('button.closePopUp')"
+      @click="close()"
+    >
+      X
+    </app-base-button>
 
-      <div class="box-contenu">
-        <div class="box-ttl">
-          <h2>{{ title }}</h2>
+    <p class="t-act" v-html="title"></p>
 
-          <h3>{{ subtitle }}</h3>
-        </div>
+    <div class="box-prog-act">
+      <p>
+        {{ $t('text.activity_progress') }}
+        <span>{{ actProgress }}</span>
+      </p>
+    </div>
 
-        <div class="container-anchor">
-          <div
-            v-for="(anchor, index) of anchors"
-            :id="activityId + '-submenu-anchor-' + index"
-            :key="index"
-            class="box-sa"
-          >
-            <b-link
-              :to="{
-                name: anchor.path,
-                hash: (() => (anchor.anchorTag ? `#${anchor.anchorTag}` : ''))()
-              }"
-              @click="scrollToAnchor($event)"
-            >
-              <span @click="scrollToAnchor($event)">
-                {{ anchor.anchorName }}
-              </span>
-            </b-link>
-          </div>
+    <div class="box-anchor">
+      <p class="t-toc">{{ $t('text.toc') }}</p>
+
+      <b-link
+        v-for="(anchor, index) of anchors"
+        :key="anchor.title"
+        class="toc-item"
+        :done="sectionProgress(index)"
+        @click="closeAndNextPage(anchor.path)"
+      >
+        <div class="box-text-anchor">
+          <p class="anchor-t" v-html="anchor.title"></p>
+          <p class="state">{{ $t('text.complete') }}</p>
         </div>
-      </div>
+      </b-link>
     </div>
-  </b-sidebar>
+  </div>
+  <div v-else id="sidebar-submenu" :class="{ isOpen: open }">
+    <p>
+      Cette activité n'existe pas dans menu setting, svp l'ajouter à votre menu
+      setting
+    </p>
+  </div>
 </template>
 
 <script>
@@ -48,53 +57,116 @@ import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      //activitiSubMenu: [],
-      activityId: null,
       title: '',
-      subtitle: '',
-      time: '',
       anchors: [],
-      activity: ''
+      activity: '',
+      open: false,
+      menuInfo: null,
+      actProgress: null,
+      error: true
     }
   },
   computed: {
-    ...mapGetters(['getMenuSettings', 'getAnchorsForActivity', 'getBifChoice'])
+    ...mapGetters([
+      'getMenuSettings',
+      'getAnchorsForActivity',
+      'getBifChoice',
+      'getAllCompleted',
+      'getAllActivitiesState'
+    ])
+  },
+  beforeUnmount() {
+    this.$bus.$off('toggle-widget', this.onToggleWidget)
+    this.$bus.$off('close-widget', this.onCloseWidget)
+    this.$bus.$off('info-activity', this.onInfoActivity)
   },
   mounted() {
-    this.$bus.$on('info-activity', (data) => {
+    this.$bus.$on('toggle-widget', this.onToggleWidget)
+    this.$bus.$on('close-widget', this.onCloseWidget)
+    this.$bus.$on('info-activity', this.onInfoActivity)
+  },
+  methods: {
+    onInfoActivity(data) {
       //should be condition to avoid event fireing multiple time on call
+
       if (data) {
+        this.reset()
         this.activity = data
-        //this.getInfoSubMenu(this.activity)
-        this.getInfoSubMenu(data)
+
+        if (!this.getMenuSettings[data]) {
+          return (this.error = false)
+        } else {
+          this.getInfoSubMenu(data)
+          this.getProgressActivity(data)
+        }
       }
-    })
-  },
-  methods: {
+    },
+    onCloseWidget(data) {
+      this.open = false
+      this.$store.dispatch('updateWidgetOpen', false)
+      this.reset()
+    },
+    onToggleWidget(data) {
+      if (data == 'toc') {
+        this.open = !this.open
+        this.$store.dispatch('updateWidgetOpen', true)
+      } else {
+        this.$store.dispatch('updateWidgetOpen', false)
+        this.open = false
+      }
+    },
     /* @Description:Get and set the section to output
      * @params: activity {Object}: the activity which sections need to be output
      */
     //
     getInfoSubMenu(activity) {
-      if (activity) {
-        this.title = activity.title
-        this.subtitle = activity.subtitle
-        this.time = activity.time
-
-        //get the anchors for this activity from the store
-        let menuInfo = this.getMenuSettings
-
-        if (menuInfo[activity.id] && menuInfo[activity.id].anchors) {
-          const anchors = menuInfo[activity.id].anchors
-          this.buildAnchorsRoutes(anchors)
-        } else this.anchors = []
-      } else {
-        this.title = ''
-        this.subtitle = ''
-        this.time = ''
+      //get the anchors for this activity from the store
+      let menuInfo = this.getMenuSettings
+
+      let nb = null
+
+      //Get title are if no title construct acitivty
+      if (menuInfo[activity] && menuInfo[activity].title)
+        this.title = menuInfo[activity].title
+
+      if (activity.charAt(1) == '0' || activity.charAt(1) == 0)
+        nb = activity.substr(2)
+      else nb = activity.substr(1)
+
+      this.title = `${this.$t('text.activity')} ${nb} : ${
+        menuInfo[activity].subTitle
+      }`
+
+      let count = 0
+
+      //create anchors title and path
+      if (menuInfo[activity] && menuInfo[activity].anchors) {
+        menuInfo[activity].anchors.forEach((element) => {
+          count++
+
+          //
+          let _path = null
+          let b = null
+          if (nb == 0 || nb == '0') {
+            b = `introduction`
+          } else {
+            b = `activite_${nb}`
+          }
+
+          if (element.page == 'page_1') {
+            _path = `${b}`
+          } else {
+            _path = `${b}.${element.page}`
+          }
+
+          let info = {
+            title: `${element.anchorName}`,
+            path: _path
+          }
+          this.anchors.push(info)
+        })
       }
     },
-
     disable(data) {
       let page = data.pageRef
       let act = this.getAct(data.path)
@@ -112,7 +184,7 @@ export default {
       }
     },
     getAct(data) {
-      //return data.substring(data.indexOf('_'))
+      //return the id need it
       if (data) {
         if (data.substring(data.indexOf('_') + 1).length == 1) {
           return `A0${data.substring(data.indexOf('_') + 1)}`
@@ -121,49 +193,142 @@ export default {
         }
       }
     },
-    /* @Description:build the route for the anchors in the menu
+    /**
+     * @description Gives gives length of completed page for an activity
+     * @param {String} idActivity
+     * @returns {Number}
      */
-    buildAnchorsRoutes(anchors) {
-      //build the route for each anchors
-      for (let a of anchors) {
-        let _path = ''
-        if (a.page === 'page_1') _path = this.activity.path
-        else _path = `${this.activity.path}.${a.page}`
-        a.path = _path
+    getProgressActivity(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
+        }
+
+        const allActivitiesState = JSON.parse(
+          JSON.stringify(this.getAllActivitiesState)
+        )
+        let size = allActivitiesState[idActivity]
+          ? allActivitiesState[idActivity].size
+          : 0
+
+        // return pourcent of activity completion
+        this.actProgress = `${Math.round((completed.length * 100) / size)} %`
       }
-      this.anchors = anchors
     },
+    close() {
+      this.open = !this.open
+      this.$store.dispatch('updateWidgetOpen', this.open)
+    },
+    closeAndNextPage(NextPage) {
+      this.$router.push({ name: NextPage })
+      this.open = !this.open
+      this.$store.dispatch('updateWidgetOpen', this.open)
+    },
+    reset() {
+      this.anchors = []
+      this.activity = ''
+    },
+    sectionProgress(index) {
+      let menuInfo = this.getMenuSettings
+      let nextIndex = index + 1
+      let nextSec
+      let curSec = menuInfo[this.activity].anchors[index].pageRef
 
-    /**
-     * @description signal a scoll action to perform by application.
-     * - Send an update status for application to the Store
-     * - send an anchor state update to the Store
-     * - Send a scoll message to the $bus
-     * - THIS METHODE DOES NOT PERFORM Scroll. scroll action will be perform by the PAGE after receiving the scroll message
-     * @param {Object} event - the element that is the scoll target
-     */
-    scrollToAnchor(event) {
-      // Making sure that the method will be executed in write sequence. Adding timeout with delay of 0 to solve asynchronicity issues.
-      setTimeout(() => {
-        // if there a Anchor to go to bus give the page the signasl to scroll
-        if (this.$route.hash) {
-          this.$store.dispatch('updateAppStatus', 'loading') // set the app status to ready
-          this.$store.commit('UPDATE_ANCHOR_STATE', false)
-          this.$bus.$emit('target-to-scroll', event.target)
+      let nb
+      let tabPageSec = []
+      let tabcomplete = []
+
+      if (nextIndex < menuInfo[this.activity].anchors.length) {
+        nextSec = menuInfo[this.activity].anchors[nextIndex].pageRef
+      }
+
+      if (nextSec != undefined) {
+        nb = parseInt(nextSec.substring(1))
+
+        while (nb > parseInt(curSec.substring(1))) {
+          nb--
+          if (nb < 10) tabPageSec.push(`P0${nb}`)
+          else tabPageSec.push(`P${nb}`)
         }
-      }, 0)
+      } else {
+        if (menuInfo[this.activity].anchors.length == 1) {
+          let numPage = this.getAllActivitiesState[this.activity].size
+
+          for (let g = 1; g == numPage; g++) {
+            tabPageSec.push(`P${g}`)
+          }
+
+          if (
+            this.getAllCompleted[this.activity].length !==
+            this.getAllActivitiesState[this.activity].size
+          )
+            return false
+        }
+        tabPageSec.push(curSec)
+      }
+
+      let completeActPage = this.getAllCompleted[this.activity]
+
+      if (completeActPage) {
+        completeActPage.find((value) => {
+          let w = Object.keys(value)
+          tabcomplete.push(w[0])
+        })
+
+        const isSubset = (array1, array2) =>
+          array2.every((element) => array1.includes(element))
+
+        return isSubset(tabcomplete, tabPageSec)
+      }
     }
   }
 }
 </script>
 <style lang="scss">
 #sidebar-submenu {
+  display: none;
+  position: absolute;
+  left: 75px;
+  top: 0;
+  transition: left 0.5s ease-in-out;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid;
+
+    position: absolute;
+    left: -10px;
+    top: 10px;
+  }
+
+  &.isOpen {
+    display: block;
+  }
+
   .b-sidebar-header {
     display: none;
     pointer-events: none;
   }
 
-  .box {
+  .box-anchor {
+    .toc-item {
+      .state {
+        display: none;
+      }
+      &[done='true'] {
+        .state {
+          display: block;
+        }
+      }
+    }
+
     .box-time {
       width: 100%;
       padding: 10px 20px;
@@ -206,4 +371,15 @@ export default {
     }
   }
 }
+
+.navbar {
+  &.show,
+  &:hover {
+    .ctn-w {
+      #sidebar-submenu {
+        left: 120px;
+      }
+    }
+  }
+}
 </style>

package/src/components/AppCompTranscript.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="transcript-container" v-html="content"></div>
+</template>
+<script>
+export default {
+  props: {
+    content: {
+      type: String,
+      default: `Hello Wolrd!`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#transcript-container {
+  padding: 30px;
+}
+</style>