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

package/src/components/AppCompTableOfContent.vue

@@ -1,387 +1,386 @@
-<!--
-  ----------------- 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: open }">
-    <app-base-button
-      id="close-toc"
-      class="btn-ghost"
-      :title="$t('button.closePopUp')"
-      @click="close()"
-    >
-      <svg>
-        <use href="#close-square-icon" />
-      </svg>
-    </app-base-button>
-
-    <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>
-
-      <a
-        v-for="(anchor, index) of anchors"
-        :key="anchor.title"
-        class="toc-item"
-        :done="sectionProgress(index)"
-        @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">
-              <svg>
-                <use href="#check-toc" />
-              </svg>
-              {{ $t('text.complete') }}
-            </p>
-          </div>
-          <svg>
-            <use href="#chevronD-icon" />
-          </svg>
-        </div>
-      </a>
-    </div>
-  </div>
-  <div v-else id="sidebar-submenu" :class="{ isOpen: open }">
-    <p>
-      Cette activité n'existe pas dans menu setting, svp l'ajouter à votre menu
-      setting
-    </p>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-export default {
-  data() {
-    return {
-      title: '',
-      anchors: [],
-      activity: '',
-      open: 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 condition to avoid event fireing 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.open = false
-      this.updateWidgetOpen(false)
-      this.reset()
-    },
-    onToggleWidget(data) {
-      if (data == 'toc') {
-        this.open = !this.open
-        this.updateWidgetOpen(true)
-      } else {
-        this.updateWidgetOpen(false)
-        this.open = false
-      }
-    },
-    /* @Description:Get and set the section to output
-     * @params: activity {Object}: the activity which sections need to be output
-     */
-    //
-    getInfoSubMenu(activity) {
-      //get the anchors for this activity from the store
-      let menuInfo = this.getMenuSettings
-
-      let nb = null
-
-      //Get title are if no title construct acitivty
-      if (menuInfo[activity] && menuInfo[activity].title)
-        this.title = menuInfo[activity].title
-
-      if (activity.charAt(1) == '0' || activity.charAt(1) == 0)
-        nb = activity.substr(2)
-      else nb = activity.substr(1)
-
-      this.title = `${this.$t('text.activity')} ${nb} : ${menuInfo[activity].subTitle}`
-
-      //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 {
-            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.open = !this.open
-      this.updateWidgetOpen(this.open)
-    },
-    closeAndNextPage(NextPage) {
-      this.open = !this.open
-      this.updateWidgetOpen(this.open)
-      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 (
-            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: block;
-  }
-
-  #close-toc {
-    position: absolute;
-    right: 24px;
-    margin-bottom: 0;
-    padding: 11px;
-    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;
-      }
-      &[done='true'] {
-        .state {
-          display: block;
-        }
-      }
-
-      .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">
+      <div ref="target">
+        <app-base-button
+          id="close-toc"
+          class="btn-ghost"
+          :title="$t('button.closePopUp')"
+          @click="onCloseWidget('toc')"
+        >
+          <svg>
+            <use href="#close-square-icon" />
+          </svg>
+        </app-base-button>
+
+        <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">
+                  <svg>
+                    <use href="#check-toc" />
+                  </svg>
+                  {{ $t('text.complete') }}
+                </p>
+              </div>
+              <svg>
+                <use href="#chevronD-icon" />
+              </svg>
+            </div>
+          </RouterLink>
+        </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)
+
+      this.title = `${this.$t('text.activity')} ${nb} : ${menuInfo[activity].subTitle}`
+
+      //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 {
+            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: block;
+  }
+
+  #close-toc {
+    position: absolute;
+    right: 24px;
+    margin-bottom: 0;
+    padding: 11px;
+    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;
+      }
+      &[done='true'] {
+        .state {
+          display: block;
+        }
+      }
+
+      .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>