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

package/src/components/AppCompBranchButtons.vue

@@ -1,582 +1,552 @@
-<!-- Composante qui génère les boutons d'embranchment d'une page.
-
-**props**
-*********************************
-customButtons (optionel):
-Tableau d'objets contenant les informations à propos des  boutons custom à créer pour chaque embranchement.
-exemple pour une page avec 2 embranchments:
-[
-  { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' },
-  { name: 'bouton_A02_P01_E02', brchName: 'P02_E02' }
-]
-un template custom peut ensuite être donner pour habiller chaque bouton en faisant reférence au  nom dynamique du slot
-<template #P02_E01></template>
-*********************************
-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)
-  title: 'Titre embranchment',
-  text: 'Ceci est un embranchment factice, affiché sous la forme de carte.'
-  brchName: 'P02_E01'
-  btnTitle: ''
-}
-*********************************
-Si la composante est appelée sans prop, les boutons par défaut seront générés.
--->
-<template>
-  <b-row id="branch-buttons-component">
-    <b-row v-if="hasErrors" class="warning-error">
-      <b-col class="box-error">
-        <div class="yellow-box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Erreur: composante app-comp-branch-buttons
-          </h2>
-          <p>
-            Vous avez une/des erreur(s) lors de la création des
-            {{ isCard ? 'cartes' : `boutons` }} d'embranchments. Voir
-            ci-dessous:
-            <br />
-          </p>
-          <ul>
-            <li>
-              {{ hasErrors }}
-            </li>
-          </ul>
-        </div>
-      </b-col>
-    </b-row>
-    <b-row v-else>
-      <b-col
-        v-for="branch of branchsStateData"
-        :id="branch.id"
-        :key="branch.id"
-        class="branch-btn"
-      >
-        <div
-          v-if="isCustomButton"
-          :id="getMatchingElement(branch.id).name"
-          class="branch-btn-wrapper"
-        >
-          <slot :name="branch.id">
-            <p class="name-btn-branch">
-              {{ getMatchingElement(branch.id).name }}
-            </p>
-          </slot>
-
-          <app-comp-button-progress
-            :set-target="sidebar"
-            :percent="branch.progression ? branch.progression : 0"
-            :branch-data="branch"
-            :btn-title="getMatchingElement(branch.id).btnTitle"
-            no-interaction
-          ></app-comp-button-progress>
-        </div>
-        <div
-          v-else-if="isCard && cards.length"
-          class="branch-btn-wrapper branch-btn-card"
-        >
-          <b-card style="max-width: 20rem;" no-body>
-            <app-comp-button-progress
-              :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}`)"
-              :alt="`${branch.imgAlt}`"
-            ></b-card-img>
-            <b-card-body>
-              <b-card-title>
-                {{ branch.title }}
-              </b-card-title>
-              <b-card-text>
-                {{ branch.text }}
-              </b-card-text>
-            </b-card-body>
-          </b-card>
-        </div>
-        <div v-else class="branch-btn-wrapper">
-          <app-comp-button-progress
-            :set-target="sidebar"
-            :percent="branch.progression ? branch.progression : 0"
-            :branch-data="branch"
-            :btn-title="branch.text"
-          ></app-comp-button-progress>
-        </div>
-      </b-col>
-    </b-row>
-  </b-row>
-</template>
-<script>
-// ...
-import { mapGetters } from 'vuex'
-import AppCompButtonProgress from './AppCompButtonProgress.vue'
-
-export default {
-  components: {
-    AppCompButtonProgress
-  },
-  props: {
-    consigne: {
-      type: Boolean,
-      default: false
-    },
-    sidebar: {
-      type: String,
-      default: 'branch-viewer'
-    },
-    btnTitle: {
-      type: String,
-      default: ' '
-    },
-    cards: {
-      type: Array,
-      default: () => null,
-      validator(dataArray) {
-        let isValid = true
-        if (process.env.NODE_ENV === 'development') {
-          let errMsg = false
-
-          //card must have at least 2 elements
-          if (dataArray.length < 2) {
-            isValid = false
-            errMsg = `\n card require at least 2 element`
-          } else {
-            for (let el of dataArray) {
-              //Each element in card must be of type Object and can not be empty
-              if (el.constructor !== Object) {
-                isValid = false
-                errMsg = `\n Element in card must be of type Object`
-                break
-              }
-            }
-            //Start validation of required keys
-            if (isValid) {
-              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
-
-              for (let el of dataArray) {
-                //Validate that require key exist for each element in card
-                for (let k of requiredKeys) {
-                  let index = dataArray.indexOf(el)
-
-                  if (!el[k]) {
-                    isValid = false
-                    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}`
-                      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
-                }
-                if (!isValid) break
-              }
-            }
-          }
-
-          if (errMsg) console.error(`🧱 app-comp-branch-buttons \n  ${errMsg}`)
-        }
-        return isValid
-      }
-    },
-    customButtons: {
-      type: Array,
-      default: () => null,
-      validator: (dataArray) => {
-        let isValid = true
-        if (process.env.NODE_ENV === 'development') {
-          let errMsg = false
-          //card must have at least 2 elements
-          if (dataArray.length < 2) {
-            isValid = false
-            errMsg = `\n customButton require at least 2 element`
-          } else {
-            for (let el of dataArray) {
-              //Each element in card must be of type Object and can not be empty
-              if (el.constructor !== Object) {
-                isValid = false
-                errMsg = `\n Element in customButton must be of type Object`
-                break
-              }
-            }
-            //Start validation of keys if no error detected
-            if (isValid) {
-              const requiredKeys = ['name', 'brchName']
-              for (let el of dataArray) {
-                //Validate that require key exist for each element in card
-                for (let k of requiredKeys) {
-                  let index = dataArray.indexOf(el)
-
-                  if (!el[k]) {
-                    isValid = false
-                    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}`
-                      isValid = false
-                      break
-                    }
-                  }
-                  if (!isValid) break
-                }
-                if (!isValid) break
-              }
-            }
-            if (errMsg)
-              console.error(`🧱 app-comp-branch-buttons \n  ${errMsg}`)
-          }
-        }
-        return isValid
-      }
-    }
-  },
-  data() {
-    const svgRadius = 23
-    return {
-      errors: [],
-      radius: svgRadius,
-      circumference: svgRadius * 2 * Math.PI,
-      branchs: null,
-      branchsStateData: null,
-      idActivity: null,
-      isCustomButton: false,
-      isCard: false,
-      customButtonStyle: null,
-      status: {
-        NEW: 'new',
-        STARTED: 'started',
-        COMPLETE: 'complete'
-      },
-      hasErr: null
-    }
-  },
-  computed: {
-    ...mapGetters(['getAllCompleted', 'getAllActivities', 'getConnectionInfo']),
-    hasErrors() {
-      let error = false
-      if (process.env.NODE_ENV === 'development') {
-        if (this.isCard) error = this.validateProp('cards')
-        else if (this.isCustomButton) error = this.validateProp('customButtons')
-        else error = false
-      }
-      return error
-    }
-  },
-  watch: {
-    getAllCompleted: {
-      //watch the completions to update the branches progression
-      handler() {
-        if (
-          this.getAllCompleted[this.idActivity] &&
-          this.getAllCompleted[this.idActivity].length
-        )
-          this.getbranchsData()
-      }
-    }
-  },
-  mounted() {
-    this.isCustomButton = this.customButtons && this.customButtons.length > 0
-    this.isCard = this.cards && Object.keys(this.cards).length != 0
-    this.idActivity = this.$router.currentRoute.meta.activity_ref
-    this.branchs = this.$router.currentRoute.meta.children
-    this.getbranchsData()
-  },
-  methods: {
-    /**
-     * @description Method to get the progression for a branch
-     *
-     */
-    getbranchsData() {
-      this.branchsStateData = []
-      this.branchs.forEach((branch, index) => {
-        let branchData = {}
-        branchData.id = branch._ref
-        branchData.route = branch._namedRoute
-        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,
-            text,
-            imgFile,
-            imgAlt,
-            btnTitle
-          } = this.getMatchingElement(branchData.id)
-
-          branchData = { ...branchData, text, title, imgFile, imgAlt, btnTitle }
-
-          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}`
-            )
-          }
-        }
-        this.branchsStateData[index] = branchData
-      })
-    },
-
-    /**
-     * @description Method to get the progression for a branch
-     * @param {String} idBranch the id of the branch ex: "P01_E01"
-     * @return {Number} Return the percentage of completion (from 0 to 100) and the current state of a specific branch
-     */
-    getBranchProgression(idBranch) {
-      let result = { state: null, progression: null }
-
-      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) {
-        result.state = this.status.COMPLETE
-      } else {
-        result.state = this.status.STARTED
-      }
-      return result
-    },
-
-    /**
-     * @description Method to get the numbers of pages in a branch
-     * @param {String} idBranch the id of the branch ex: "A02_E01_P01"
-     * @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)
-
-      return allPages.size ? allPages.size : 1
-    },
-
-    /**
-     * @description Method to validate data in the prop card|customButton.
-     * @param {String} propName  The name of the property card|customButton
-     * @return {String} errMsg  false | string message
-     */
-    validateProp(propName) {
-      let isValid = true
-      let errMsg = false
-
-      switch (propName) {
-        case 'cards': {
-          // verify that numbers of element is equal to number
-          //card must have at least 2 elements
-          if (
-            this.cards.constructor !== Array ||
-            this.cards.length !== this.branchs.length
-          ) {
-            isValid = false
-            errMsg = `La propriété cards doit être un tableau contenant ${this.branchs.length} elements`
-          } else {
-            //Start validation of content of each object in cards
-            for (let el of this.cards) {
-              //Each element in card must be of type Object and can not be empty
-              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`
-              }
-              if (!isValid) break
-            }
-            //Start validation of required keys
-            if (isValid) {
-              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
-
-              for (let el of this.cards) {
-                let index = this.cards.indexOf(el)
-                //Validate that require key exist for each element in card
-                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`
-                    break
-                  } else {
-                    if (el[k].constructor !== 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
-                }
-
-                // Start validation of existing branch for this element
-                let searchEl = this.branchs.find((b) =>
-                  b._ref.includes(el.brchName)
-                )
-
-                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?`
-                  isValid = false
-                }
-
-                if (!isValid) break
-              }
-            }
-          }
-          break
-        }
-
-        case 'customButtons': {
-          if (
-            this.customButtons.constructor !== Array ||
-            this.customButtons.length !== this.branchs.length
-          ) {
-            isValid = false
-            errMsg = `La propriété customButtons doit être un tableau contenant ${this.branchs.length} elements`
-          } else {
-            //Start validation of content of each object in customButtons
-            for (let el of this.customButtons) {
-              //Each element in card must be of type Object and can not be empty
-              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}`
-              }
-              if (!isValid) break
-            }
-
-            //Start validation of required keys
-            if (isValid) {
-              const requiredKeys = ['name', 'brchName']
-
-              for (let el of this.customButtons) {
-                //Validate that require key exist for each element for customButton
-                let index = this.customButtons.indexOf(el)
-                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`
-                    break
-                  } else {
-                    // Expecting String for properties name and brchName
-                    if (
-                      ['name', 'brchName'].includes(k) &&
-                      el[k].constructor !== String
-                    ) {
-                      errMsg = `l'Attribut 👉 ${k} 👈  pour la button  ${index +
-                        1} doit être de type {String}`
-                      isValid = false
-                      break
-                    }
-                  }
-                  if (!isValid) break
-                }
-
-                // Start validation of existing branch for this element
-                let searchEl = this.branchs.find((b) =>
-                  b._ref.includes(el.brchName)
-                )
-
-                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?`
-                  isValid = false
-                }
-
-                if (!isValid) break
-              }
-            }
-          }
-          break
-        }
-      }
-
-      return errMsg
-    },
-
-    /**
-     * @description methode to retive matching data of branch in the prop card| customButton
-     * @param {String} id The id of the branch
-     * @return {Object}  Matching element from
-     */
-    getMatchingElement(id) {
-      if (this.isCustomButton) {
-        return this.customButtons.find((c) => c.brchName === id)
-      }
-      if (this.isCard) {
-        return this.cards.find((c) => c.brchName === id)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.branch-btn-wrapper {
-  position: relative;
-  .branch-btn-custom {
-    background-color: transparent;
-    border: none;
-  }
-}
-</style>
+<!-- Composante qui génère les boutons d'embranchment d'une page.
+
+**props**
+*********************************
+customButtons (optionel):
+Tableau d'objets contenant les informations à propos des  boutons custom à créer pour chaque embranchement.
+exemple pour une page avec 2 embranchments:
+[
+  { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' },
+  { name: 'bouton_A02_P01_E02', brchName: 'P02_E02' }
+]
+un template custom peut ensuite être donner pour habiller chaque bouton en faisant reférence au  nom dynamique du slot
+<template #P02_E01></template>
+*********************************
+card (optionel):
+Objet qui défini le contenu de la composante b-card
+exemple:
+{
+  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'
+  btnTitle: ''
+}
+*********************************
+Si la composante est appelée sans prop, les boutons par défaut seront générés.
+-->
+<template>
+  <v-row id="branch-buttons-component">
+    <app-base-error-display
+      v-if="hasErrors"
+      :error-group="'component'"
+      :error-title="`ERREUR: COMPOSANT D'EMBRANCHEMENT`"
+      :errors-list="hasErrors"
+      :error-text="`Vous avez une/des erreur(s) lors de la création des
+            ${(() => (isCard ? 'cartes' : `boutons`))()} d'embranchments.`"
+    />
+    <v-row v-else>
+      <v-col
+        v-for="branch of branchsStateData"
+        :id="branch.id"
+        :key="branch.id"
+        class="branch-btn"
+      >
+        <div
+          v-if="isCustomButton"
+          :id="getMatchingElement(branch.id).name"
+          class="branch-btn-wrapper"
+        >
+          <slot :name="branch.id">
+            <p class="name-btn-branch">
+              {{ getMatchingElement(branch.id).name }}
+            </p>
+          </slot>
+
+          <app-comp-button-progress
+            :set-target="sidebar"
+            :percent="branch.progression ? branch.progression : 0"
+            :branch-data="branch"
+            :btn-title="getMatchingElement(branch.id).btnTitle"
+            no-interaction
+          ></app-comp-button-progress>
+        </div>
+        <div
+          v-else-if="isCard && cards.length"
+          class="branch-btn-wrapper branch-btn-card"
+        >
+          <v-card class="mx-auto" max-width="20rem">
+            <v-img :src="branch.imgFile" :alt="`${branch.imgAlt}`" cover>
+              <v-toolbar color="transparent">
+                <template #append>
+                  <app-comp-button-progress
+                    :set-target="sidebar"
+                    :percent="branch.progression ? branch.progression : 0"
+                    :branch-data="branch"
+                    :btn-title="getMatchingElement(branch.id).btnTitle"
+                  ></app-comp-button-progress>
+                </template>
+              </v-toolbar>
+            </v-img>
+
+            <v-card-title>{{ branch.title }}</v-card-title>
+            <v-card-text>
+              {{ branch.text }}
+            </v-card-text>
+          </v-card>
+        </div>
+        <div v-else class="branch-btn-wrapper">
+          <app-comp-button-progress
+            :set-target="sidebar"
+            :percent="branch.progression ? branch.progression : 0"
+            :branch-data="branch"
+            :btn-title="branch.text"
+          ></app-comp-button-progress>
+        </div>
+      </v-col>
+    </v-row>
+  </v-row>
+</template>
+<script>
+// ...
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import AppCompButtonProgress from './AppCompButtonProgress.vue'
+
+export default {
+  components: {
+    AppCompButtonProgress
+  },
+  props: {
+    consigne: {
+      type: Boolean,
+      default: false
+    },
+    sidebar: {
+      type: String,
+      default: 'branch-viewer'
+    },
+    btnTitle: {
+      type: String,
+      default: ' '
+    },
+    cards: {
+      type: Array,
+      default: () => null,
+      validator(dataArray) {
+        let isValid = true
+        if (import.meta.env.DEV) {
+          let errMsg = false
+
+          //card must have at least 2 elements
+          if (dataArray.length < 2) {
+            isValid = false
+            errMsg = `\n card require at least 2 element`
+          } else {
+            for (let el of dataArray) {
+              //Each element in card must be of type Object and can not be empty
+              if (el.constructor !== Object) {
+                isValid = false
+                errMsg = `\n Element in card must be of type Object`
+                break
+              }
+            }
+            //Start validation of required keys
+            if (isValid) {
+              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
+
+              for (let el of dataArray) {
+                //Validate that require key exist for each element in card
+                for (let k of requiredKeys) {
+                  let index = dataArray.indexOf(el)
+
+                  if (!el[k]) {
+                    isValid = false
+                    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}`
+                      isValid = false
+                      break
+                    }
+                  }
+                  if (!isValid) break
+                }
+                if (!isValid) break
+              }
+            }
+          }
+
+          if (errMsg) console.error(`🧱 app-comp-branch-buttons \n  ${errMsg}`)
+        }
+        return isValid
+      }
+    },
+    customButtons: {
+      type: Array,
+      default: () => null,
+      validator: (dataArray) => {
+        let isValid = true
+        if (import.meta.env.DEV) {
+          let errMsg = false
+          //card must have at least 2 elements
+          if (dataArray.length < 2) {
+            isValid = false
+            errMsg = `\n customButton require at least 2 element`
+          } else {
+            for (let el of dataArray) {
+              //Each element in card must be of type Object and can not be empty
+              if (el.constructor !== Object) {
+                isValid = false
+                errMsg = `\n Element in customButton must be of type Object`
+                break
+              }
+            }
+            //Start validation of keys if no error detected
+            if (isValid) {
+              const requiredKeys = ['name', 'brchName']
+              for (let el of dataArray) {
+                //Validate that require key exist for each element in card
+                for (let k of requiredKeys) {
+                  let index = dataArray.indexOf(el)
+
+                  if (!el[k]) {
+                    isValid = false
+                    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}`
+                      isValid = false
+                      break
+                    }
+                  }
+                  if (!isValid) break
+                }
+                if (!isValid) break
+              }
+            }
+            if (errMsg)
+              console.error(`🧱 app-comp-branch-buttons \n  ${errMsg}`)
+          }
+        }
+        return isValid
+      }
+    }
+  },
+  data() {
+    const svgRadius = 23
+    return {
+      errors: [],
+      radius: svgRadius,
+      circumference: svgRadius * 2 * Math.PI,
+      branchs: null,
+      branchsStateData: null,
+      idActivity: null,
+      isCustomButton: false,
+      isCard: false,
+      customButtonStyle: null,
+      status: {
+        NEW: 'new',
+        STARTED: 'started',
+        COMPLETE: 'complete'
+      },
+      hasErr: null
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getAllCompleted',
+      'getAllActivities',
+      'getConnectionInfo'
+    ]),
+    hasErrors() {
+      let error = false
+      if (import.meta.env.DEV) {
+        if (this.isCard) error = this.validateProp('cards')
+        else if (this.isCustomButton) error = this.validateProp('customButtons')
+        else error = false
+      }
+
+      return error
+    }
+  },
+  watch: {
+    getAllCompleted: {
+      deep: true,
+      //watch the completions to update the branches progression
+      handler() {
+        if (
+          this.getAllCompleted[this.idActivity] &&
+          this.getAllCompleted[this.idActivity].length
+        )
+          this.getbranchsData()
+      }
+    }
+  },
+  mounted() {
+    this.isCustomButton = this.customButtons && this.customButtons.length > 0
+    this.isCard = this.cards && Object.keys(this.cards).length != 0
+    this.idActivity = this.$router.currentRoute.value.meta.activity_ref
+    this.branchs = this.$router.currentRoute.value.meta.children
+    this.getbranchsData()
+  },
+  methods: {
+    /**
+     * @description Method to get the progression for a branch
+     *
+     */
+    getbranchsData() {
+      this.branchsStateData = []
+      this.branchs.forEach((branch, index) => {
+        let branchData = {}
+        branchData.id = branch._ref
+        branchData.route = branch._namedRoute
+        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, text, imgFile, imgAlt, btnTitle } =
+            this.getMatchingElement(branchData.id)
+
+          branchData = {
+            ...branchData,
+            text,
+            title,
+            imgFile,
+            imgAlt,
+            btnTitle
+          }
+
+          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}`
+            )
+          }
+        }
+        this.branchsStateData[index] = branchData
+      })
+    },
+
+    /**
+     * @description Method to get the progression for a branch
+     * @param {String} idBranch the id of the branch ex: "P01_E01"
+     * @return {Number} Return the percentage of completion (from 0 to 100) and the current state of a specific branch
+     */
+    getBranchProgression(idBranch) {
+      let result = { state: null, progression: null }
+
+      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) {
+        result.state = this.status.COMPLETE
+      } else {
+        result.state = this.status.STARTED
+      }
+      return result
+    },
+
+    /**
+     * @description Method to get the numbers of pages in a branch
+     * @param {String} idBranch the id of the branch ex: "A02_E01_P01"
+     * @return {Array} /Return the total of pages in a specific branch
+     */
+    getBranchPagesCount(idBranch) {
+      if (this.$router.currentRoute.value.meta.type !== 'branching') return
+
+      const allPages = this.getAllActivities()
+        .list.get(this.idActivity)
+        .get(this.$router.currentRoute.value.meta.id)
+        .get(idBranch)
+
+      return allPages.size ? allPages.size : 1
+    },
+
+    /**
+     * @description Method to validate data in the prop card|customButton.
+     * @param {String} propName  The name of the property card|customButton
+     * @return {String} errMsg  false | string message
+     */
+    validateProp(propName) {
+      let isValid = true
+      let errMsg = false
+
+      switch (propName) {
+        case 'cards': {
+          // verify that numbers of element is equal to number
+          //card must have at least 2 elements
+          if (
+            this.cards.constructor !== Array ||
+            this.cards.length !== this.branchs.length
+          ) {
+            isValid = false
+            errMsg = `La propriété cards doit être un tableau contenant ${this.branchs.length} elements`
+          } else {
+            //Start validation of content of each object in cards
+            for (let el of this.cards) {
+              //Each element in card must be of type Object and can not be empty
+              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`
+              }
+              if (!isValid) break
+            }
+            //Start validation of required keys
+            if (isValid) {
+              const requiredKeys = ['imgFile', 'title', 'text', 'brchName']
+
+              for (let el of this.cards) {
+                let index = this.cards.indexOf(el)
+                //Validate that require key exist for each element in card
+                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`
+                    break
+                  } else {
+                    if (el[k].constructor !== String) {
+                      errMsg = `l'Attribut 👉 ${k} 👈  pour la carte  ${
+                        index + 1
+                      } doit être de type {String}`
+                      isValid = false
+                      break
+                    }
+                  }
+                  if (!isValid) break
+                }
+
+                // Start validation of existing branch for this element
+                let searchEl = this.branchs.find((b) =>
+                  b._ref.includes(el.brchName)
+                )
+
+                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?`
+                  isValid = false
+                }
+
+                if (!isValid) break
+              }
+            }
+          }
+          break
+        }
+
+        case 'customButtons': {
+          if (
+            this.customButtons.constructor !== Array ||
+            this.customButtons.length !== this.branchs.length
+          ) {
+            isValid = false
+            errMsg = `La propriété customButtons doit être un tableau contenant ${this.branchs.length} elements`
+          } else {
+            //Start validation of content of each object in customButtons
+            for (let el of this.customButtons) {
+              //Each element in card must be of type Object and can not be empty
+              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}`
+              }
+              if (!isValid) break
+            }
+
+            //Start validation of required keys
+            if (isValid) {
+              const requiredKeys = ['name', 'brchName']
+
+              for (let el of this.customButtons) {
+                //Validate that require key exist for each element for customButton
+                let index = this.customButtons.indexOf(el)
+                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`
+                    break
+                  } else {
+                    // Expecting String for properties name and brchName
+                    if (
+                      ['name', 'brchName'].includes(k) &&
+                      el[k].constructor !== String
+                    ) {
+                      errMsg = `l'Attribut 👉 ${k} 👈  pour la button  ${
+                        index + 1
+                      } doit être de type {String}`
+                      isValid = false
+                      break
+                    }
+                  }
+                  if (!isValid) break
+                }
+
+                // Start validation of existing branch for this element
+                let searchEl = this.branchs.find((b) =>
+                  b._ref.includes(el.brchName)
+                )
+
+                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?`
+                  isValid = false
+                }
+
+                if (!isValid) break
+              }
+            }
+          }
+          break
+        }
+      }
+
+      return errMsg
+    },
+
+    /**
+     * @description methode to retive matching data of branch in the prop card| customButton
+     * @param {String} id The id of the branch
+     * @return {Object}  Matching element from
+     */
+    getMatchingElement(id) {
+      if (this.isCustomButton) {
+        return this.customButtons.find((c) => c.brchName === id)
+      }
+      if (this.isCard) {
+        return this.cards.find((c) => c.brchName === id)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.branch-btn-wrapper {
+  position: relative;
+  .branch-btn-custom {
+    background-color: transparent;
+    border: none;
+  }
+}
+</style>