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

package/src/components/AppCompTableOfContent.vue

@@ -1,264 +1,387 @@
-<!--
-  ----------------- MUST ADD OVERAY TO CLOSE WIDGET ------------------
-  ----------------- 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 id="sidebar-submenu" :class="{ isOpen: open }">
-    <app-base-button id="close-toc" @click="close()">X</app-base-button>
-    <p>{{ $t('text.you_are_here') }}</p>
-    <p v-html="title"></p>
-
-    <div>
-      <p>{{ actProgress }} {{ $t('text.activity_progress') }}</p>
-    </div>
-
-    <div class="box">
-      <b-link
-        v-for="anchor of anchors"
-        :key="anchor.title"
-        :to="{
-          name: anchor.path
-        }"
-        @click="close()"
-      >
-        <div>
-          <p>{{ anchor.title }}</p>
-          <p></p>
-        </div>
-      </b-link>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  data() {
-    return {
-      title: '',
-      anchors: [],
-      activity: '',
-      open: false,
-      menuInfo: null,
-      actProgress: null
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getMenuSettings',
-      'getAnchorsForActivity',
-      'getBifChoice',
-      'getAllCompleted',
-      'getAllActivitiesState'
-    ])
-  },
-  mounted() {
-    this.$bus.$on('toggle-widget', (data) => {
-      if (data == 'toc') this.open = !this.open
-      else this.open = false
-    })
-
-    this.$bus.$on('close-widget', (data) => {
-      this.open = false
-      this.reset()
-    })
-
-    this.$bus.$on('info-activity', (data) => {
-      //should be condition to avoid event fireing multiple time on call
-
-      if (data) {
-        this.reset()
-        this.activity = data
-        this.getInfoSubMenu(data)
-        this.getProgressActivity(data)
-      }
-    })
-  },
-  methods: {
-    /* @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
-      }`
-
-      let count = 0
-
-      //create anchors title and path
-      if (menuInfo[activity] && menuInfo[activity].anchors) {
-        menuInfo[activity].anchors.forEach((element) => {
-          count++
-
-          //
-          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: `${this.$t('text.anchors')} ${count} : ${
-              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
-
-        // reduce the size if in A00
-        if (idActivity === 'A00' && size > 0) size = size - 1
-
-        // return pourcent of activity completion
-        this.actProgress = `${Math.round((completed.length * 100) / size)} %`
-      }
-    },
-    close() {
-      this.open = !this.open
-      this.reset()
-    },
-    reset() {
-      this.anchors = []
-      this.activity = ''
-      this.activity = ''
-    }
-  }
-}
-</script>
-<style lang="scss">
-#sidebar-submenu {
-  display: none;
-  position: absolute;
-  left: 200%;
-  top: 0;
-  background: white;
-  width: 450px;
-
-  &.isOpen {
-    display: block;
-  }
-
-  .b-sidebar-header {
-    display: none;
-    pointer-events: none;
-  }
-
-  .box {
-    .box-time {
-      width: 100%;
-      padding: 10px 20px;
-    }
-
-    .box-contenu {
-      padding: 20px;
-      @media screen and (max-width: 1100px) {
-        padding: 0;
-      }
-
-      .box-ttl {
-        @media screen and (max-width: 1100px) {
-          padding: 15px 0px 10px 20px;
-        }
-      }
-
-      .container-anchor {
-        margin-top: 35px;
-        margin-left: 35px;
-        padding-left: 24px;
-        padding-top: 14px;
-        max-height: 75vh;
-        overflow-y: auto;
-
-        @media screen and (max-width: 1100px) {
-          padding: 0;
-          margin: 0;
-        }
-
-        .box-sa {
-          margin-bottom: 16px;
-
-          @media screen and (max-width: 1100px) {
-            padding: 19px 20px 19px 47px;
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-}
-</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: 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>