fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppCompTableOfContent.vue

@@ -1,427 +1,433 @@
-<!--
-  ----------------- 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>
-  <div v-if="error" id="sidebar-submenu" :class="{ isOpen: isOpened }">
-    <focus-trap :active="isOpened" :prevent-scroll="true">
-      <div ref="target">
-        <!-- <div class="submenu-header"> -->
-        <app-base-button
-          id="close-toc"
-          class="btn-ghost"
-          :title="$t('button.closePopUp')"
-          @click="onCloseWidget('toc')"
-        >
-          <svg aria-hidden="true" focusable="false">
-            <use href="#close-square-icon" />
-          </svg>
-        </app-base-button>
-        <!-- </div> -->
-
-        <!-- <div class="submenu-content"> -->
-        <p class="t-act" v-html="`${title}`"></p>
-        <div class="box-prog-act">
-          <p>
-            {{ $t('text.activity_progress') }}
-            <span>{{ actProgress }}</span>
-          </p>
-        </div>
-        <div class="box-anchor">
-          <p class="t-toc">{{ $t('text.toc') }}</p>
-
-          <RouterLink
-            v-for="(anchor, index) of anchors"
-            :key="anchor.title"
-            class="toc-item"
-            :done="sectionProgress(index)"
-            :to="{ name: anchor.path }"
-            @click="closeAndNextPage(anchor.path)"
-          >
-            <div class="box-text-anchor">
-              <div class="text-anchor">
-                <p class="anchor-t" v-html="anchor.title"></p>
-                <p class="state">
-                  <span class="box-text">
-                    <svg aria-hidden="true" focusable="false">
-                      <use href="#check-toc" />
-                    </svg>
-                    {{ $t('text.complete') }}
-                  </span>
-                </p>
-              </div>
-              <svg aria-hidden="true" focusable="false">
-                <use href="#chevronD-icon" />
-              </svg>
-            </div>
-          </RouterLink>
-        </div>
-        <!-- </div> -->
-      </div>
-    </focus-trap>
-  </div>
-  <div v-else id="sidebar-submenu" :class="{ isOpen: isOpened }">
-    <p>
-      Cette activité n'existe pas dans menu setting, svp l'ajouter à votre menu
-      setting
-    </p>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-export default {
-  data() {
-    return {
-      title: '',
-      anchors: [],
-      activity: '',
-      isOpened: false,
-      menuInfo: null,
-      actProgress: null,
-      error: true
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      '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('toggle-widget', this.onToggleWidget)
-    this.$bus.$on('close-widget', this.onCloseWidget)
-    this.$bus.$on('info-activity', this.onInfoActivity)
-  },
-  methods: {
-    ...mapActions(useAppStore, ['updateWidgetOpen']),
-    onInfoActivity(data) {
-      //should be conditioned to avoid event firing multiple time on call
-
-      if (data) {
-        this.reset()
-        this.activity = data
-
-        if (!this.getMenuSettings[data]) {
-          return (this.error = false)
-        } else {
-          this.getInfoSubMenu(data)
-          this.getProgressActivity(data)
-        }
-      }
-    },
-    onCloseWidget(data) {
-      this.isOpened = false
-      this.updateWidgetOpen(false)
-      this.reset()
-    },
-    onToggleWidget(data) {
-      if (data.type !== 'toc') return (this.isOpened = false)
-      this.isOpened = !this.isOpened
-      this.updateWidgetOpen(this.isOpened)
-    },
-    /* @Description:Get and set the section to output
-     * @params: activity {Object}: the activity which sections need to be output
-     */
-    getInfoSubMenu(activity) {
-      //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)
-      //Format title in the Progress info
-      switch (nb) {
-        case '0':
-          this.title = menuInfo[activity].subTitle
-            ? `Introduction : ${menuInfo[activity].subTitle}`
-            : `Introduction`
-          break
-
-        case '99':
-          this.title = menuInfo[activity].subTitle
-            ? `Conclusion : ${menuInfo[activity].subTitle}`
-            : `Conclusion`
-          break
-
-        default:
-          this.title = menuInfo[activity].subTitle
-            ? `${this.$t('text.activity')} ${nb} : ${menuInfo[activity].subTitle}`
-            : `${this.$t('text.activity')} ${nb}`
-      }
-
-      //create anchors title and path
-      if (menuInfo[activity] && menuInfo[activity].anchors) {
-        menuInfo[activity].anchors.forEach((element) => {
-          //
-          let _path = null
-          let b = null
-          if (nb == 0 || nb == '0') {
-            b = `introduction`
-          } else if (nb == 99 || nb == '99') {
-            b = `conclusion`
-          } 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)
-      let choosen = this.getBifChoice
-
-      // disable if bif
-      if (data.bif && choosen) {
-        if (choosen.act == act && choosen.page == page) {
-          return false
-        } else {
-          return true
-        }
-      } else {
-        return false
-      }
-    },
-    getAct(data) {
-      //return the id need it
-      if (data) {
-        if (data.substring(data.indexOf('_') + 1).length == 1) {
-          return `A0${data.substring(data.indexOf('_') + 1)}`
-        } else {
-          return `A${data.substring(data.indexOf('_') + 1)}`
-        }
-      }
-    },
-    /**
-     * @description Gives gives length of completed page for an activity
-     * @param {String} idActivity
-     * @returns {Number}
-     */
-    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)} %`
-      }
-    },
-    close() {
-      this.isOpened = !this.isOpened
-      this.updateWidgetOpen(this.isOpened)
-    },
-    closeAndNextPage(NextPage) {
-      this.isOpened = !this.isOpened
-      this.updateWidgetOpen(this.isOpened)
-      this.$router.push({ name: NextPage })
-    },
-    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
-
-      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}`)
-        }
-      } 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 (
-            typeof this.getAllCompleted[this.activity] !== 'undefined' &&
-            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;
-  max-height: 592px;
-  width: 476px;
-  transition: left 0.5s ease-in-out;
-
-  &.isOpen {
-    display: flex;
-    flex-direction: column;
-  }
-
-  #close-toc {
-    position: absolute;
-    right: 24px;
-    top: 24px;
-    margin-bottom: 0;
-    padding: 12px;
-    width: 48px;
-    height: 48px;
-    display: flex;
-    justify-content: center;
-
-    &:focus {
-      box-shadow: inherit !important;
-    }
-  }
-
-  .box-prog-act {
-    width: 319px;
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 16px;
-
-    p {
-      position: relative;
-      width: 100%;
-
-      span {
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-    }
-  }
-
-  .box-anchor {
-    max-height: 366px;
-    overflow-y: auto;
-    padding: 0 4px;
-
-    .t-toc {
-      margin-bottom: 16px;
-    }
-
-    .toc-item {
-      display: block;
-      width: 95%;
-      margin-bottom: 8px;
-
-      .state {
-        display: none;
-
-        .box-text {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          margin-top: 7px;
-
-          svg {
-            margin-right: 10px;
-          }
-        }
-      }
-      &[done='true'] {
-        .state {
-          display: flex;
-          align-items: center;
-          svg {
-            margin-right: 10px;
-          }
-        }
-      }
-
-      .box-text-anchor {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
-  }
-}
-
-.app-nav {
-  &.show,
-  &:hover {
-    .ctn-w {
-      #sidebar-submenu {
-        left: 120px;
-      }
-    }
-  }
-}
-</style>
+<!--
+  ----------------- 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>
+  <div v-if="error" id="sidebar-submenu" :class="{ isOpen: isOpened }">
+    <focus-trap :active="isOpened" :prevent-scroll="true">
+      <div ref="target">
+        <!-- <div class="submenu-header"> -->
+        <app-base-button
+          id="close-toc"
+          class="btn-ghost"
+          :title="$t('button.closePopUp')"
+          @click="onCloseWidget('toc')"
+        >
+          <svg aria-hidden="true" focusable="false">
+            <use href="#close-square-icon" />
+          </svg>
+        </app-base-button>
+        <!-- </div> -->
+
+        <!-- <div class="submenu-content"> -->
+        <p class="t-act" v-html="`${title}`"></p>
+        <div class="box-prog-act">
+          <p>
+            {{ $t('text.activity_progress') }}
+            <span>{{ actProgress }}</span>
+          </p>
+        </div>
+        <div class="box-anchor">
+          <p class="t-toc">{{ $t('text.toc') }}</p>
+
+          <RouterLink
+            v-for="(anchor, index) of anchors"
+            :key="anchor.title"
+            class="toc-item"
+            :done="sectionProgress(index)"
+            :to="{ name: anchor.path }"
+            @click="closeAndNextPage(anchor.path)"
+          >
+            <div class="box-text-anchor">
+              <div class="text-anchor">
+                <p class="anchor-t" v-html="anchor.title"></p>
+                <p class="state">
+                  <span class="box-text">
+                    <svg aria-hidden="true" focusable="false">
+                      <use href="#check-toc" />
+                    </svg>
+                    {{ $t('text.complete') }}
+                  </span>
+                </p>
+              </div>
+              <svg aria-hidden="true" focusable="false">
+                <use href="#chevronD-icon" />
+              </svg>
+            </div>
+          </RouterLink>
+        </div>
+        <!-- </div> -->
+      </div>
+    </focus-trap>
+  </div>
+  <div v-else id="sidebar-submenu" :class="{ isOpen: isOpened }">
+    <p>
+      Cette activité n'existe pas dans menu setting, svp l'ajouter à votre menu
+      setting
+    </p>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    return {
+      title: '',
+      anchors: [],
+      activity: '',
+      isOpened: false,
+      menuInfo: null,
+      actProgress: null,
+      error: true
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      '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('toggle-widget', this.onToggleWidget)
+    this.$bus.$on('close-widget', this.onCloseWidget)
+    this.$bus.$on('info-activity', this.onInfoActivity)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateWidgetOpen']),
+    onInfoActivity(data) {
+      //should be conditioned to avoid event firing multiple time on call
+
+      if (data) {
+        this.reset()
+        this.activity = data
+
+        if (!this.getMenuSettings[data]) {
+          return (this.error = false)
+        } else {
+          this.getInfoSubMenu(data)
+          this.getProgressActivity(data)
+        }
+      }
+    },
+    onCloseWidget(data) {
+      this.isOpened = false
+      this.updateWidgetOpen(false)
+      this.reset()
+    },
+    onToggleWidget(data) {
+      if (data.type !== 'toc') return (this.isOpened = false)
+      this.isOpened = !this.isOpened
+      this.updateWidgetOpen(this.isOpened)
+    },
+    /* @Description:Get and set the section to output
+     * @params: activity {Object}: the activity which sections need to be output
+     */
+    getInfoSubMenu(activity) {
+      //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)
+      //Format title in the Progress info
+      switch (nb) {
+        case '0':
+          this.title = menuInfo[activity].subTitle
+            ? `Introduction : ${menuInfo[activity].subTitle}`
+            : `Introduction`
+          break
+
+        case '99':
+          this.title = menuInfo[activity].subTitle
+            ? `Conclusion : ${menuInfo[activity].subTitle}`
+            : `Conclusion`
+          break
+
+        default:
+          this.title = menuInfo[activity].subTitle
+            ? `${this.$t('text.activity')} ${nb} : ${menuInfo[activity].subTitle}`
+            : `${this.$t('text.activity')} ${nb}`
+      }
+
+      //create anchors title and path
+      if (menuInfo[activity] && menuInfo[activity].anchors) {
+        menuInfo[activity].anchors.forEach((element) => {
+          //
+          let _path = null
+          let b = null
+          if (nb == 0 || nb == '0') {
+            b = `introduction`
+          } else if (nb == 99 || nb == '99') {
+            b = `conclusion`
+          } 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)
+      let choosen = this.getBifChoice
+
+      // disable if bif
+      if (data.bif && choosen) {
+        if (choosen.act == act && choosen.page == page) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    },
+    getAct(data) {
+      //return the id need it
+      if (data) {
+        if (data.substring(data.indexOf('_') + 1).length == 1) {
+          return `A0${data.substring(data.indexOf('_') + 1)}`
+        } else {
+          return `A${data.substring(data.indexOf('_') + 1)}`
+        }
+      }
+    },
+    /**
+     * @description Gives gives length of completed page for an activity
+     * @param {String} idActivity
+     * @returns {Number}
+     */
+    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)} %`
+      }
+    },
+    close() {
+      this.isOpened = !this.isOpened
+      this.updateWidgetOpen(this.isOpened)
+    },
+    closeAndNextPage(NextPage) {
+      this.isOpened = !this.isOpened
+      this.updateWidgetOpen(this.isOpened)
+      this.$router.push({ name: NextPage })
+    },
+    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
+
+      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}`)
+        }
+      } 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 (
+            typeof this.getAllCompleted[this.activity] !== 'undefined' &&
+            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;
+  max-height: 592px;
+  width: 476px;
+  transition: left 0.5s ease-in-out;
+
+  &.isOpen {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #close-toc {
+    position: absolute;
+    right: 24px;
+    top: 24px;
+    margin-bottom: 0;
+    padding: 12px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+
+    &:focus {
+      box-shadow: inherit !important;
+    }
+  }
+
+  .box-prog-act {
+    width: 319px;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 16px;
+
+    p {
+      position: relative;
+      width: 100%;
+
+      span {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+
+  .box-anchor {
+    max-height: 366px;
+    overflow-y: auto;
+    padding: 0 4px;
+
+    .t-toc {
+      margin-bottom: 16px;
+    }
+
+    .toc-item {
+      display: block;
+      width: 95%;
+      margin-bottom: 8px;
+
+      .state {
+        display: none;
+
+        .box-text {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin-top: 7px;
+
+          svg {
+            margin-right: 10px;
+          }
+        }
+      }
+      &[done='true'] {
+        .state {
+          display: flex;
+          align-items: center;
+          svg {
+            margin-right: 10px;
+          }
+        }
+      }
+
+      .box-text-anchor {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+
+.app-nav {
+  &.show,
+  &:hover {
+    .ctn-w {
+      #sidebar-submenu {
+        left: 120px;
+      }
+    }
+  }
+}
+</style>