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

package/src/components/AppCompBranchButtons.vue

@@ -16,7 +16,7 @@ card (optionel):
 Objet qui défini le contenu de la composante b-card
 exemple:
 {
-  imgFile: 'imgCarte.jpg', (l'image doit se trouver dans le dossier src/assets/img du projet)
+  imgFile: '/src/assets/img/imgCarte.jpg', (l'image doit être appelé par un import ex : import imgCarte1 from '@/assets/img/imgCarte.jpg')
   title: 'Titre embranchment',
   text: 'Ceci est un embranchment factice, affiché sous la forme de carte.'
   brchName: 'P02_E01'
@@ -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
@@ -85,14 +78,15 @@ Si la composante est appelée sans prop, les boutons par défaut seront génér
           v-else-if="isCard && cards.length"
           class="branch-btn-wrapper branch-btn-card"
         >
-          <b-card style="max-width: 20rem;" no-body>
+          <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>
             <b-card-img
-              :src="require(`@/assets/img/${branch.imgFile}`)"
+              :src="branch.imgFile"
               :alt="`${branch.imgAlt}`"
             ></b-card-img>
             <b-card-body>
@@ -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: ' '
@@ -139,7 +138,7 @@ export default {
       default: () => null,
       validator(dataArray) {
         let isValid = true
-        if (process.env.NODE_ENV === 'development') {
+        if (import.meta.env.DEV) {
           let errMsg = false
 
           //card must have at least 2 elements
@@ -166,27 +165,18 @@ export default {
 
                   if (!el[k]) {
                     isValid = false
-                    errMsg = `\n 💥 Missing 👉 ${k} 👈 in object ${index +
-                      1} in ➡ card \n  🚩Allowed indexes are: 👉 ${requiredKeys}`
+                    errMsg = `\n 💥 Missing 👉 ${k} 👈 in object ${
+                      index + 1
+                    } in ➡ card \n  🚩Allowed indexes are: 👉 ${requiredKeys}`
                     break
                   } else {
                     if (el[k].constructor !== String) {
-                      errMsg = `\n 💥 Invalid 👉 ${k} 👈 declaration in ➡ object ${index +
-                        1} ➡ of card. \n  🚩 Must be of type {String}`
+                      errMsg = `\n 💥 Invalid 👉 ${k} 👈 declaration in ➡ object ${
+                        index + 1
+                      } ➡ of card. \n  🚩 Must be of type {String}`
                       isValid = false
                       break
                     }
-                    // start validation of existance of image
-                    else if (k === 'imgFile') {
-                      const imgName = el.imgFile
-                      try {
-                        //test if all states exists
-                        require(`@/assets/img/${imgName}`)
-                      } catch (error) {
-                        isValid = false
-                        errMsg = `\n 💥 Problem loading image with name "${imgName}", \n double check if it is present in the img 📁`
-                      }
-                    }
                   }
                   if (!isValid) break
                 }
@@ -205,7 +195,7 @@ export default {
       default: () => null,
       validator: (dataArray) => {
         let isValid = true
-        if (process.env.NODE_ENV === 'development') {
+        if (import.meta.env.DEV) {
           let errMsg = false
           //card must have at least 2 elements
           if (dataArray.length < 2) {
@@ -230,13 +220,15 @@ export default {
 
                   if (!el[k]) {
                     isValid = false
-                    errMsg = `\n 💥 Missing 👉 ${k} 👈 in object ${index +
-                      1} in ➡ customButtom \n  🚩Allowed indexes are: 👉 ${requiredKeys}`
+                    errMsg = `\n 💥 Missing 👉 ${k} 👈 in object ${
+                      index + 1
+                    } in ➡ customButtom \n  🚩Allowed indexes are: 👉 ${requiredKeys}`
                     break
                   } else {
                     if (el[k].constructor !== String) {
-                      errMsg = `\n 💥 Invalid 👉 ${k} 👈 declaration in ➡ object ${index +
-                        1} ➡ of customButton. \n  🚩 Must be of type {String}`
+                      errMsg = `\n 💥 Invalid 👉 ${k} 👈 declaration in ➡ object ${
+                        index + 1
+                      } ➡ of customButton. \n  🚩 Must be of type {String}`
                       isValid = false
                       break
                     }
@@ -278,7 +270,7 @@ export default {
     ...mapGetters(['getAllCompleted', 'getAllActivities', 'getConnectionInfo']),
     hasErrors() {
       let error = false
-      if (process.env.NODE_ENV === 'development') {
+      if (import.meta.env.DEV) {
         if (this.isCard) error = this.validateProp('cards')
         else if (this.isCustomButton) error = this.validateProp('customButtons')
         else error = false
@@ -287,19 +279,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,28 +306,31 @@ 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 {
-            title,
+          const { title, text, imgFile, imgAlt, btnTitle } =
+            this.getMatchingElement(branchData.id)
+
+          branchData = {
+            ...branchData,
             text,
+            title,
             imgFile,
             imgAlt,
             btnTitle
-          } = this.getMatchingElement(branchData.id)
-
-          branchData = { ...branchData, text, title, imgFile, imgAlt, btnTitle }
+          }
 
-          if (typeof branchData.imgAlt === 'undefined') {
+          if (typeof branchData.imgAlt === 'undefined' && import.meta.env.DEV) {
             branchData.imgAlt = ''
             console.warn(
               `Bouton d’embranchement: ALT image sans valeur définie pour ${branchData.id}`
@@ -362,16 +352,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 +378,14 @@ export default {
      * @return {Array} /Return the total of pages in a specific branch
      */
     getBranchPagesCount(idBranch) {
-      const allPages = this.getAllActivities.list
-        .get(this.idActivity)
+      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
     },
 
     /**
@@ -421,8 +414,9 @@ export default {
               if (el.constructor !== Object) {
                 isValid = false
                 let index = this.cards.indexOf(el)
-                errMsg = `Le data pour la carte ${index +
-                  1} n'est pas de type Object`
+                errMsg = `Le data pour la carte ${
+                  index + 1
+                } n'est pas de type Object`
               }
               if (!isValid) break
             }
@@ -436,27 +430,18 @@ export default {
                 for (let k of requiredKeys) {
                   if (!el[k]) {
                     isValid = false
-                    errMsg = `l'Attribut 👉 ${k} 👈 pour la carte ${index +
-                      1} n'as pas été défini`
+                    errMsg = `l'Attribut 👉 ${k} 👈 pour la carte ${
+                      index + 1
+                    } n'as pas été défini`
                     break
                   } else {
                     if (el[k].constructor !== String) {
-                      errMsg = `l'Attribut 👉 ${k} 👈  pour la carte  ${index +
-                        1} doit être de type {String}`
+                      errMsg = `l'Attribut 👉 ${k} 👈  pour la carte  ${
+                        index + 1
+                      } doit être de type {String}`
                       isValid = false
                       break
                     }
-                    // start validation of existance of image
-                    else if (k === 'imgFile') {
-                      const imgName = el.imgFile
-                      try {
-                        //test if all states exists
-                        require(`@/assets/img/${imgName}`)
-                      } catch (error) {
-                        isValid = false
-                        errMsg = `Problème de téléchargement pour le fichier 👉"${imgName}"👈. Êtes vous certain qu'il ce trouve dans le 📁 img du projet?`
-                      }
-                    }
                   }
                   if (!isValid) break
                 }
@@ -469,8 +454,9 @@ export default {
                 if (!searchEl) {
                   errMsg = `Aucune branch correspondante avec le nom ${
                     el.brchName
-                  } pour la carte ${index +
-                    1}. Êtes vous sûre d'avoir indiqué la bonne branch?`
+                  } pour la carte ${
+                    index + 1
+                  }. Êtes vous sûre d'avoir indiqué la bonne branch?`
                   isValid = false
                 }
 
@@ -495,8 +481,9 @@ export default {
               if (el.constructor !== Object) {
                 isValid = false
                 let index = this.customButtons.indexOf(el)
-                errMsg = `Le data pour le button ${index +
-                  1} n'est pas de type {Object}`
+                errMsg = `Le data pour le button ${
+                  index + 1
+                } n'est pas de type {Object}`
               }
               if (!isValid) break
             }
@@ -511,8 +498,9 @@ export default {
                 for (let k of requiredKeys) {
                   if (!el[k]) {
                     isValid = false
-                    errMsg = `l'Attribut 👉 ${k} 👈 pour la button ${index +
-                      1} n'as pas été défini`
+                    errMsg = `l'Attribut 👉 ${k} 👈 pour la button ${
+                      index + 1
+                    } n'as pas été défini`
                     break
                   } else {
                     // Expecting String for properties name and brchName
@@ -520,8 +508,9 @@ export default {
                       ['name', 'brchName'].includes(k) &&
                       el[k].constructor !== String
                     ) {
-                      errMsg = `l'Attribut 👉 ${k} 👈  pour la button  ${index +
-                        1} doit être de type {String}`
+                      errMsg = `l'Attribut 👉 ${k} 👈  pour la button  ${
+                        index + 1
+                      } doit être de type {String}`
                       isValid = false
                       break
                     }
@@ -537,8 +526,9 @@ export default {
                 if (!searchEl) {
                   errMsg = `Aucune branch correspondante avec le nom ${
                     el.brchName
-                  } pour le bouton ${index +
-                    1}. Êtes vous sûre d'avoir indiqué la bonne branch?`
+                  } pour le bouton ${
+                    index + 1
+                  }. Êtes vous sûre d'avoir indiqué la bonne branch?`
                   isValid = false
                 }
 

package/src/components/AppCompButtonProgress.vue

@@ -1,72 +1,21 @@
 <template>
   <div class="button-progress-wrapper">
-    <!-- Building a Progress Ring, Quickly: https://css-tricks.com/building-progress-ring-quickly/ -->
-    <svg class="progress-ring" width="54" height="54">
-      <circle
-        class="progress-ring__circle"
-        stroke-width="3"
-        fill="transparent"
-        :r="radius"
-        cx="25"
-        cy="25"
-        :stroke-dasharray="circumference"
-        :stroke-dashoffset="
-          circumference - (branchData.progression / 100) * circumference
-        "
-      ></circle>
-    </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 +28,7 @@ export default {
       default: false
     },
     percent: {
-      type: Number,
+      type: [Number],
       default: 0,
       required: true
     },
@@ -87,6 +36,11 @@ export default {
       type: Object,
       required: true
     },
+    setTarget: {
+      type: [String],
+      default: ''
+    },
+
     btnTitle: {
       type: String,
       default: null
@@ -101,11 +55,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)
+  },
+
+  beforeUnmount() {
+    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">