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

package/src/components/AppBasePage.vue

@@ -5,7 +5,7 @@
 @Note: Page not created with this component will not have the data automatically traked by the application
 -->
 <template>
-  <div :id="page.id" class="app-page">
+  <div :id="page.id" class="app-page" role="main">
     <slot v-if="!errorPage.length" name="content">
       Page
     </slot>
@@ -52,18 +52,16 @@ export default {
       validator(value) {
         let isValid = true
         if (process.env.NODE_ENV === 'development') {
-          const RequiredpageKeys = ['id', 'activityRef', 'type']
-          let RequiredTypeValues = ['pg_normal', 'pg_menu']
-
-          // Specifics for none DR Mode
-          if (!value.drModeActive)
-            RequiredTypeValues = [
-              ...RequiredTypeValues,
-              'pg_animation',
-              'pg_media'
-            ]
+          const requiredPageKeys = ['id', 'activityRef', 'type']
+          let requiredTypeValues = [
+            'pg_normal',
+            'pg_menu',
+            'pg_animation',
+            'pg_media',
+            'pg_branch'
+          ]
 
-          RequiredpageKeys.forEach((key) => {
+          requiredPageKeys.forEach((key) => {
             if (!Object.keys(value).includes(key)) {
               console.warn(
                 `%c  WARNING!>>> PAGE: PAGE: Missing ${key} for the page in $data `,
@@ -72,13 +70,9 @@ export default {
               isValid = false
             } else if (
               key === 'type' &&
-              !RequiredTypeValues.includes(value[key])
+              !requiredTypeValues.includes(value[key])
             ) {
-              let errString = ''
-              if (value.drModeActive)
-                errString = `Invalid value assigment for type of the page in $data, while DR mode active.`
-              else
-                errString = `Invalid value assigment for type of the page in $data.`
+              let errString = `Invalid value assigment for type of the page in $data.`
 
               console.warn(
                 `%c  WARNING!>>> PAGE: ${errString}`,
@@ -102,7 +96,6 @@ export default {
     ...mapGetters([
       'getRouteHistory',
       'getAllActivitiesState',
-      'getIntroStatus',
       'getAllCompleted',
       'getErrorChoiceDetect'
     ]),
@@ -120,21 +113,18 @@ export default {
     errorPage() {
       let err = false
       if (process.env.NODE_ENV === 'development') {
-        this.page.drModeActive
-        const RequiredpageKeys = ['id', 'activityRef', 'type']
+        const requiredPageKeys = ['id', 'activityRef', 'type']
         const errorList = []
         let count = 0
-        let RequiredTypeValues = ['pg_normal', 'pg_menu']
+        let requiredTypeValues = [
+          'pg_normal',
+          'pg_menu',
+          'pg_animation',
+          'pg_media',
+          'pg_branch'
+        ]
 
-        // Specifics for none DR Mode
-        if (!this.page.drModeActive)
-          RequiredTypeValues = [
-            ...RequiredTypeValues,
-            'pg_animation',
-            'pg_media'
-          ]
-
-        RequiredpageKeys.forEach((key) => {
+        requiredPageKeys.forEach((key) => {
           // required key is missing in $data that was passed for the page
           if (!Object.keys(this.page).includes(key)) {
             errorList.push(`Missing page ${key} in $data`)
@@ -142,15 +132,10 @@ export default {
           // Validator value for type
           else if (
             key === 'type' &&
-            !RequiredTypeValues.includes(this.page[key])
+            !requiredTypeValues.includes(this.page[key])
           ) {
-            if (this.page.drModeActive)
-              errorList.push(
-                `Invalide value assigment for type >>${this.page[key]}<< not supported in DR mode`
-              )
-            else
-              errorList.push(`Invalid value assigment for page type in $data`)
-          } else if (!this.page.drModeActive && count < 1) {
+            errorList.push(`Invalid value assigment for page type in $data`)
+          } else if (count < 1) {
             let errString = null
             const requiredValues = ['video', 'audio']
             switch (this.page.type) {
@@ -171,8 +156,6 @@ export default {
                 break
               // valdation for media page type content
               case 'pg_media':
-                // const requiredpageKeys = ['mType', 'mSources']
-
                 if (
                   !this.page.mediaData ||
                   Object.keys(this.page.mediaData).length < 1
@@ -220,14 +203,12 @@ export default {
                   }
                   //Start validating that the files exsist
                   if (!errString) {
-
                     // start validating that the file for subtitle exist in medias folder
                     if (mSubtitle && mSubtitle.src) return
 
                     //validate that mPoster file is present in media file when set
                     if (mPoster) {
                       if (mPoster.constructor === String) return
-
                       else {
                         let errStringInconsole =
                           '\n 💥 Invalid type declaration for mPoster.\n  🚩 Must be of type {String}'
@@ -298,7 +279,7 @@ export default {
       }
     }
 
-    window.scrollTo(0, 0)
+    //window.scrollTo(0, 0)
   },
   mounted() {},
 
@@ -324,15 +305,8 @@ export default {
   }
 }
 
-#splashscreen {
-  .modal-content {
-    width: 100%;
-    max-width: 800px;
-    min-width: 500px;
-    margin: 0 auto;
-    #splash-form {
-      margin-top: 40px;
-    }
-  }
+.overlay-close-widget {
+  width: 100%;
+  height: 100%;
 }
 </style>

package/src/components/AppCompBif.vue

@@ -0,0 +1,120 @@
+<!--
+ *@ Description: This component is used to display button for each choice
+ *@ What it does: The component set value a or b to the store and go to the next page
+ *
+ *@Note :
+ This component effect TOC(disable if the choice is not made) and  NavigationFull(make jump if choise is not made).
+ This component need Menu setting to declare where the branching start and when the branching end.
+ To switch between choice see getchoiceBif() in PageMixing
+ See template for usage exemple
+-->
+
+<template>
+  <div class="box-bif">
+    <app-base-button
+      id="btn-bif-a"
+      class="btn-bif"
+      :title="titleA"
+      @click="setChoice('A')"
+    >
+      <div class="choice-a">
+        <slot name="content-a" />
+      </div>
+    </app-base-button>
+
+    <app-base-button
+      id="btn-bif-b"
+      class="btn-bif"
+      :title="titleB"
+      @click="setChoice('B')"
+    >
+      <div class="choice-b">
+        <slot name="content-b" />
+      </div>
+    </app-base-button>
+
+  </div>
+</template>
+<script>
+import AppBaseButton from './AppBaseButton.vue'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'AppCompBif',
+  components: { AppBaseButton },
+  props: {
+    titleA: {
+      type: String,
+      default: ''
+    },
+    titleB: {
+      type: String,
+      default: ''
+    },
+    consigne: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['getUserInteraction', 'getCurrentPage'])
+  },
+  mounted() {},
+  methods: {
+    setChoice(choix) {
+      const userInteraction = this.getProgress()
+      this.$set(userInteraction, 'bifChoice', choix)
+
+      let data
+      let num
+      let dataAct
+
+      // gestion go to next page
+      if (this.getCurrentPage.id.indexOf('0') == 1) {
+        data = this.getCurrentPage.id.substring(
+          this.getCurrentPage.id.indexOf('P') + 2
+        )
+      } else {
+        data = this.getCurrentPage.id.substring(
+          this.getCurrentPage.id.indexOf('P') + 1
+        )
+      }
+
+      num = parseInt(data)
+
+      // gestion go to next activity
+      if (this.$route.meta.activity_ref.indexOf('0') == 1) {
+        dataAct = this.$route.meta.activity_ref.substring(
+          this.$route.meta.activity_ref.indexOf('A') + 2
+        )
+      } else {
+        dataAct = this.$route.meta.activity_ref.substring(
+          this.$route.meta.activity_ref.indexOf('A') + 1
+        )
+      }
+
+      // go to next page
+      this.$router.push({
+        name: `activite_${dataAct}.page_${num + 1}`
+      })
+    },
+    getProgress() {
+      const { id, activity_ref } = this.$route.meta
+
+      const record = this.$store.getters.getUserInteraction
+      if (
+        Object.entries(record).length &&
+        record[activity_ref] &&
+        record[activity_ref][id]
+      ) {
+        const { userInteraction } = record[activity_ref][id]
+        return userInteraction
+      }
+      return {}
+    }
+  }
+}
+</script>

package/src/components/AppCompBranchButtons.vue

@@ -49,14 +49,6 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
       </b-col>
     </b-row>
     <b-row v-else>
-      <b-col v-if="consigne">
-        <!--- Paramètre ajouter pour la faire apparaitre au besoin --->
-        <app-base-instruction
-          v-show="consigne"
-          :text-instruction="$t(`instruction.branch`)"
-          :text-button="$t('button.instructions')"
-        />
-      </b-col>
       <b-col
         v-for="branch of branchsStateData"
         :id="branch.id"
@@ -75,7 +67,8 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
           </slot>
 
           <app-comp-button-progress
-            :percent="branch.progression"
+            :set-target="sidebar"
+            :percent="branch.progression ? branch.progression : 0"
             :branch-data="branch"
             :btn-title="getMatchingElement(branch.id).btnTitle"
             no-interaction
@@ -87,7 +80,8 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
         >
           <b-card style="max-width: 20rem;" no-body>
             <app-comp-button-progress
-              :percent="branch.progression"
+              :set-target="sidebar"
+              :percent="branch.progression ? branch.progression : 0"
               :branch-data="branch"
               :btn-title="getMatchingElement(branch.id).btnTitle"
             ></app-comp-button-progress>
@@ -107,7 +101,8 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
         </div>
         <div v-else class="branch-btn-wrapper">
           <app-comp-button-progress
-            :percent="branch.progression"
+            :set-target="sidebar"
+            :percent="branch.progression ? branch.progression : 0"
             :branch-data="branch"
             :btn-title="branch.text"
           ></app-comp-button-progress>
@@ -130,6 +125,10 @@ export default {
       type: Boolean,
       default: false
     },
+    sidebar: {
+      type: String,
+      default: 'branch-viewer'
+    },
     btnTitle: {
       type: String,
       default: ' '
@@ -287,19 +286,14 @@ export default {
     }
   },
   watch: {
-    // getConnectionInfo:{
-    //   //in development environment (localhost), don't wait for the axios call
-    //   // immediate: process.env.NODE_ENV === 'development',
-    //   handler(){
-    //     this.getbranchsData()
-    //   }
-    // },
-
     getAllCompleted: {
       //watch the completions to update the branches progression
       handler() {
-        if (this.getAllCompleted[this.idActivity].length)
-        this.getbranchsData()
+        if (
+          this.getAllCompleted[this.idActivity] &&
+          this.getAllCompleted[this.idActivity].length
+        )
+          this.getbranchsData()
       }
     }
   },
@@ -319,15 +313,16 @@ export default {
       this.branchsStateData = []
       this.branchs.forEach((branch, index) => {
         let branchData = {}
-        branchData.id = branch._ref.slice(0, 7)
+        branchData.id = branch._ref
         branchData.route = branch._namedRoute
-
-        const { state = "new", progression=0 } = this.getBranchProgression(branchData.id)
-
+        let { state = 'new', progression = 0 } = this.getBranchProgression(
+          branchData.id
+        )
         // if (!state || !progression) return
 
         branchData.state = state
         branchData.progression = progression
+        if (isNaN(branchData.progression)) branchData.progression = 0
 
         if (this.isCard) {
           const {
@@ -340,7 +335,10 @@ export default {
 
           branchData = { ...branchData, text, title, imgFile, imgAlt, btnTitle }
 
-          if (typeof branchData.imgAlt === 'undefined') {
+          if (
+            typeof branchData.imgAlt === 'undefined' &&
+            process.env.NODE_ENV === 'development'
+          ) {
             branchData.imgAlt = ''
             console.warn(
               `Bouton d’embranchement: ALT image sans valeur définie pour ${branchData.id}`
@@ -362,16 +360,16 @@ export default {
       if (!this.getAllCompleted[this.idActivity]) return result // no progression found for this activity return result
 
       const total = this.getBranchPagesCount(idBranch) // get all pages for in this branch
-
       //get all completed branches pages
       const completedPages = this.getAllCompleted[this.idActivity].filter(
         (page) => {
           return Object.keys(page)[0].search(idBranch) !== -1
         }
       )
-
       result.progression = Math.floor((completedPages.length / total) * 100)
 
+      if (isNaN(result.progression)) result.progression = 0
+
       if (result.progression === 0) {
         result.state = this.status.NEW
       } else if (result.progression === 100) {
@@ -388,11 +386,14 @@ export default {
      * @return {Array} /Return the total of pages in a specific branch
      */
     getBranchPagesCount(idBranch) {
+      if (this.$router.currentRoute.meta.type !== 'branching') return
+
       const allPages = this.getAllActivities.list
         .get(this.idActivity)
         .get(this.$router.currentRoute.meta.id)
-        .get(idBranch.slice(4, 7))
-      return allPages.size
+        .get(idBranch)
+
+      return allPages.size ? allPages.size : 1
     },
 
     /**

package/src/components/AppCompButtonProgress.vue

@@ -17,56 +17,20 @@
     </svg>
     <button
       :id="`btn_branch_${branchData.id}`"
+      :target-ref="branchData.id"
       :title="btnTitle || $t('text.place_holder.for_title_btn_progress')"
       :class="
         branchData.state === status.COMPLETE
           ? 'branch-btn-default branche-complete'
           : 'branch-btn-default'
       "
-      @click="$router.push({ name: branchData.route })"
+      @click="openBranch(branchData.id)"
     >
-      <svg
-        v-if="branchData.state === status.COMPLETE"
-        id="branch-btn-crochet"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-      >
-        <path
-          id="Tracé_3833"
-          data-name="Tracé 3833"
-          d="M0,0H24V24H0Z"
-          fill="none"
-        />
-        <path
-          id="Tracé_3834"
-          data-name="Tracé 3834"
-          d="M9,16.2,4.8,12,3.4,13.4,9,19,21,7,19.6,5.6Z"
-          fill="#e6f5ff"
-        />
+      <svg v-if="branchData.state === status.COMPLETE" width="24" height="24">
+        <use href="#branch-crochet-icon"></use>
       </svg>
-
-      <svg
-        v-if="branchData.state != status.COMPLETE"
-        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"
-          fill="#fff"
-        />
+      <svg v-if="branchData.state != status.COMPLETE" width="24" height="24">
+        <use href="#navigate-next-icon"></use>
       </svg>
     </button>
   </div>
@@ -79,7 +43,7 @@ export default {
       default: false
     },
     percent: {
-      type: Number,
+      type: [Number],
       default: 0,
       required: true
     },
@@ -87,6 +51,11 @@ export default {
       type: Object,
       required: true
     },
+    setTarget: {
+      type: [String],
+      default: ''
+    },
+
     btnTitle: {
       type: String,
       default: null
@@ -101,11 +70,31 @@ export default {
         NEW: 'new',
         STARTED: 'started',
         COMPLETE: 'complete'
-      }
+      },
+      withRouter: false, //Only for demo purpose. Remove after demo
+      isActive: false
     }
   },
-  beforeMount() {},
-  methods: {}
+
+  created() {
+    if (isNaN(this.percent)) this.percent = 0
+    this.$bus.$on('branching-hidden', this.resetIsActive)
+  },
+
+  beforeDestroy() {
+    this.$bus.$off('branching-hidden', this.resetIsActive)
+  },
+
+  methods: {
+    openBranch(e) {
+      this.isActive = true
+      this.$bus.$emit('open-sidebar', { ctx: 'ctxBranching', e })
+    },
+
+    resetIsActive() {
+      this.isActive = false
+    }
+  }
 }
 </script>
 <style lang="scss">