fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppCompMenuItem.vue

@@ -1,240 +1,246 @@
-<!--
- @ Description: This component is used to display and create the link's to all the activity creation in module.
- @ What it does: Goes trougth all the activity in the router and create a card that open the Table of content (appCompTableOfContent) that display the anchor.Display the title and subtitle enter in menu.json. Must be used with AppCompTableOfContent and AppCompMenu.
--->
-<template>
-  <v-row v-if="activities.length" class="box-msa">
-    <v-col
-      v-for="activity of activities"
-      :key="activity.id"
-      cols="6"
-      class="menu-section-activity"
-      :aria-describedby="activity.id + '-subMenu'"
-    >
-      <router-link
-        :id="activity.id + '-subMenu'"
-        :title="activity.title"
-        :data-test="`item-menu-${activity.id}`"
-        class="btn-menu"
-        :to="{
-          name: createRoutes(activity.id)
-        }"
-        @click="startActivity(activity)"
-      >
-        <div class="menu-card" tag="article">
-          <v-row>
-            <div v-if="activity.subtitle === undefined" class="title">
-              <h4 v-html="activity.title"></h4>
-            </div>
-            <div v-else class="title">
-              <h4
-                v-html="
-                  `${activity.title}${cardTitleSeparator}${activity.subtitle}`
-                "
-              ></h4>
-            </div>
-
-            <div class="cnt-time">
-              <svg
-                :aria-label="$t('label.timer')"
-                aria-hidden="true"
-                focusable="false"
-              >
-                <use href="#clock-icon" />
-              </svg>
-              <p class="time">{{ activity.time || '00:00' }}</p>
-            </div>
-            <div class="box-gauge">
-              <app-comp-jauge
-                :max-value="getActivitySize(activity.id)"
-                :value="getPageComplete(activity.id)"
-              />
-            </div>
-          </v-row>
-        </div>
-      </router-link>
-    </v-col>
-  </v-row>
-</template>
-<script>
-// ...
-import { mapState } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import AppCompJauge from './AppCompJauge.vue'
-export default {
-  components: {
-    AppCompJauge
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getAllActivities',
-      'getAllActivitiesState',
-      'getAllCompleted',
-      'getAppConfigs',
-      'getMenuSettings',
-      'getModuleInfo'
-    ]),
-    /*
-     * Apply different punctuation for colons. No space before a colon in english, one space before a colon in french
-     */
-    cardTitleSeparator() {
-      return this.getAppConfigs.lang.toLowerCase() == 'en' ? ': ' : ' : '
-    },
-    activities() {
-      // get the data for list of the page for this module from the store and
-      // get the route of the page from the router to build the menu with its routes
-      let count = 0
-      const collection = []
-
-      this.getAllActivities().list.forEach((value, key) => {
-        let theActivity,
-          activityTitle,
-          activitySubTitle,
-          activityTime = null,
-          activityPath = ''
-
-        if (this.menuInfo[key]) {
-          const { title, subTitle, time } = this.menuInfo[key] //get time subTitle time from menu info
-          //set the title
-          if (title && title != ' ') activityTitle = title
-          //set the subtitle
-          if (subTitle && subTitle != ' ') activitySubTitle = subTitle
-          //set the time
-          if (time && time != ' ') activityTime = time
-        }
-        // This is the Introduction
-        if (key === 'A00') {
-          activityTitle = activityTitle || this.$t('text.introduction')
-          activityPath = 'introduction'
-        } else if (key === 'A99') {
-          activityTitle = activityTitle || this.$t('text.conclusion')
-          activityPath = 'conclusion'
-        } else {
-          count++
-          activityTitle =
-            activityTitle || `${this.$t('text.activity')} ${count}`
-          activityPath = `activite_${count}`
-        }
-
-        theActivity = {
-          id: key,
-          title: activityTitle,
-          subtitle: activitySubTitle,
-          time: activityTime,
-          path: activityPath,
-          data: value
-        }
-
-        collection.push(theActivity) // push the activity in the collection
-      })
-
-      return collection
-    },
-    menuInfo() {
-      let menuInfo = this.getMenuSettings
-      return menuInfo
-    }
-  },
-  mounted() {},
-  methods: {
-    /**
-     * @description Gives gives length of completed page for an activity
-     * @param {String} idActivity
-     * @returns {Number}
-     */
-    getPageComplete(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
-        }
-
-        return completed.length
-      }
-    },
-    /**
-     * @description give the size of the state of the activity
-     * @param {String} activityID
-     * @returns {Number} size
-     */
-    getActivitySize(activityID) {
-      /*
-       * Note:
-       * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
-       * cf: https://reactgo.com/javascript-clone-object/
-       */
-
-      const allActivitiesState = JSON.parse(
-        JSON.stringify(this.getAllActivitiesState)
-      )
-      let size = allActivitiesState[activityID]
-        ? allActivitiesState[activityID].size
-        : 0
-
-      return size
-    },
-    createRoutes(data) {
-      let activity
-
-      if (data.charAt(1) == '0' || data.charAt(1) == 0) {
-        activity = data.substr(2)
-      } else {
-        activity = data.substr(1)
-      }
-
-      if (activity == 0 && activity == '0') return `introduction`
-      if (activity == '99') return `conclusion`
-      else return `activite_${activity}`
-    },
-    startActivity(a) {
-      //this.$bus.$emit('send-starting-event', a)
-    }
-  }
-}
-</script>
-<style lang="scss">
-.menu-card {
-  width: 100%;
-  padding: 24px;
-
-  .v-row {
-    margin: 0;
-    flex-direction: column;
-
-    .title {
-      flex-grow: 4;
-      width: 80%;
-      margin-bottom: 30px;
-
-      h3 {
-        text-align: left;
-      }
-    }
-
-    .cnt-time {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-bottom: 20px;
-
-      svg {
-        width: 18px;
-        height: 18px;
-        margin-right: 10px;
-      }
-    }
-
-    .box-gauge {
-      display: block;
-      width: 100%;
-
-      .box-g {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-  }
-}
-</style>
+<!--
+ @ Description: This component is used to display and create the link's to all the activity creation in module.
+ @ What it does: Goes trougth all the activity in the router and create a card that open the Table of content (appCompTableOfContent) that display the anchor.Display the title and subtitle enter in menu.json. Must be used with AppCompTableOfContent and AppCompMenu.
+-->
+<template>
+  <v-row v-if="activities.length" class="box-msa">
+    <v-col
+      v-for="activity of activities"
+      :key="activity.id"
+      cols="6"
+      class="menu-section-activity"
+      :aria-describedby="activity.id + '-subMenu'"
+    >
+      <router-link
+        :id="activity.id + '-subMenu'"
+        :title="activity.title"
+        :data-test="`item-menu-${activity.id}`"
+        class="btn-menu"
+        :to="{
+          name: createRoutes(activity.id)
+        }"
+        @click="startActivity(activity)"
+      >
+        <div class="menu-card" tag="article">
+          <v-row>
+            <div v-if="activity.subtitle === undefined" class="title">
+              <h4 v-html="activity.title"></h4>
+            </div>
+            <div v-else class="title">
+              <h4
+                v-html="
+                  `${activity.title}${cardTitleSeparator}${activity.subtitle}`
+                "
+              ></h4>
+            </div>
+
+            <div class="cnt-time">
+              <svg
+                :aria-label="$t('label.timer')"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <use href="#clock-icon" />
+              </svg>
+              <p class="time">{{ activity.time || '00:00' }}</p>
+            </div>
+            <div class="box-gauge">
+              <app-comp-jauge
+                :max-value="getActivitySize(activity.id)"
+                :value="getPageComplete(activity.id)"
+              />
+            </div>
+          </v-row>
+        </div>
+      </router-link>
+    </v-col>
+  </v-row>
+</template>
+<script>
+// ...
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import AppCompJauge from './AppCompJauge.vue'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  components: {
+    AppCompJauge
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getAllActivities',
+      'getAllActivitiesState',
+      'getAllCompleted',
+      'getAppConfigs',
+      'getMenuSettings',
+      'getModuleInfo'
+    ]),
+    /*
+     * Apply different punctuation for colons. No space before a colon in english, one space before a colon in french
+     */
+    cardTitleSeparator() {
+      return this.getAppConfigs.lang.toLowerCase() == 'en' ? ': ' : ' : '
+    },
+    activities() {
+      // get the data for list of the page for this module from the store and
+      // get the route of the page from the router to build the menu with its routes
+      let count = 0
+      const collection = []
+
+      this.getAllActivities().list.forEach((value, key) => {
+        let theActivity,
+          activityTitle,
+          activitySubTitle,
+          activityTime = null,
+          activityPath = ''
+
+        if (this.menuInfo[key]) {
+          const { title, subTitle, time } = this.menuInfo[key] //get time subTitle time from menu info
+          //set the title
+          if (title && title != ' ') activityTitle = title
+          //set the subtitle
+          if (subTitle && subTitle != ' ') activitySubTitle = subTitle
+          //set the time
+          if (time && time != ' ') activityTime = time
+        }
+        // This is the Introduction
+        if (key === 'A00') {
+          activityTitle = activityTitle || this.$t('text.introduction')
+          activityPath = 'introduction'
+        } else if (key === 'A99') {
+          activityTitle = activityTitle || this.$t('text.conclusion')
+          activityPath = 'conclusion'
+        } else {
+          count++
+          activityTitle =
+            activityTitle || `${this.$t('text.activity')} ${count}`
+          activityPath = `activite_${count}`
+        }
+
+        theActivity = {
+          id: key,
+          title: activityTitle,
+          subtitle: activitySubTitle,
+          time: activityTime,
+          path: activityPath,
+          data: value
+        }
+
+        collection.push(theActivity) // push the activity in the collection
+      })
+
+      return collection
+    },
+    menuInfo() {
+      let menuInfo = this.getMenuSettings
+      return menuInfo
+    }
+  },
+  mounted() {},
+  methods: {
+    /**
+     * @description Gives gives length of completed page for an activity
+     * @param {String} idActivity
+     * @returns {Number}
+     */
+    getPageComplete(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
+        }
+
+        return completed.length
+      }
+    },
+    /**
+     * @description give the size of the state of the activity
+     * @param {String} activityID
+     * @returns {Number} size
+     */
+    getActivitySize(activityID) {
+      /*
+       * Note:
+       * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
+       * cf: https://reactgo.com/javascript-clone-object/
+       */
+
+      const allActivitiesState = JSON.parse(
+        JSON.stringify(this.getAllActivitiesState)
+      )
+      let size = allActivitiesState[activityID]
+        ? allActivitiesState[activityID].size
+        : 0
+
+      return size
+    },
+    createRoutes(data) {
+      let activity
+
+      if (data.charAt(1) == '0' || data.charAt(1) == 0) {
+        activity = data.substr(2)
+      } else {
+        activity = data.substr(1)
+      }
+
+      if (activity == 0 && activity == '0') return `introduction`
+      if (activity == '99') return `conclusion`
+      else return `activite_${activity}`
+    },
+    startActivity(a) {
+      //this.$bus.$emit('send-starting-event', a)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.menu-card {
+  width: 100%;
+  padding: 24px;
+
+  .v-row {
+    margin: 0;
+    flex-direction: column;
+
+    .title {
+      flex-grow: 4;
+      width: 80%;
+      margin-bottom: 30px;
+
+      h3 {
+        text-align: left;
+      }
+    }
+
+    .cnt-time {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 20px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+      }
+    }
+
+    .box-gauge {
+      display: block;
+      width: 100%;
+
+      .box-g {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>