fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.2

package/src/components/AppCompMenuItem.vue

@@ -7,84 +7,76 @@
     <b-col
       v-for="activity of activities"
       :key="activity.id"
+      cols="6"
       class="menu-section-activity"
       :aria-describedby="activity.id + '-subMenu'"
     >
-      <app-base-button
+      <b-link
         :id="activity.id + '-subMenu'"
-        v-b-toggle="'sidebar-submenu'"
         :title="activity.title"
-        @click="activityInfo(activity)"
+        :to="{
+          name: createRoutes(activity.id)
+        }"
+        @click="startActivity(activity)"
       >
         <div class="menu-card" tag="article">
           <b-row>
-            <div v-show="activity.title" class="title">
-              <h5>{{ activity.title || '' }}</h5>
+            <div v-if="activity.subtitle === undefined" class="title">
+              <h4 v-html="activity.title"></h4>
             </div>
-            <div v-show="activity.subtitle" class="subtitle">
-              <h4>{{ activity.subtitle || '' }}</h4>
+            <div v-else class="title">
+              <h4 v-html="`${activity.title} : ${activity.subtitle}`"></h4>
             </div>
+
             <div class="time">
               <p class="time">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 18 21.01"
-                  width="18 "
-                  height="21.01"
-                  :aria-label="$t('label.timer')"
-                >
-                  <path
-                    id="Path_3904"
-                    d="M12,0H6v2h6V0z M8,13h2V7H8V13z M16.03,6.39l1.42-1.42c-0.43-0.51-0.9-0.98-1.41-1.41l-1.42,1.42
-                      c-3.88-3.1-9.55-2.47-12.65,1.41s-2.47,9.55,1.41,12.65s9.55,2.47,12.65-1.41C18.66,14.34,18.66,9.68,16.03,6.39z M9,19
-                      c-3.87,0-7-3.13-7-7s3.13-7,7-7s7,3.13,7,7c0,3.86-3.13,7-6.99,7C9.01,19,9,19,9,19z"
-                  />
+                <svg width="18" height="21.01" :aria-label="$t('label.timer')">
+                  <use href="#clock-icon" />
                 </svg>
                 {{ activity.time || '00:00' }}
               </p>
             </div>
             <div class="box-gauge">
               <app-comp-jauge
-                :state="getProgressStatus(activity.id)"
                 :max-value="getActivitySize(activity.id)"
                 :value="getPageComplete(activity.id)"
-                :pourcent="getPourcentGauge"
-                :fraction="getFractionGauge"
               />
             </div>
           </b-row>
         </div>
-      </app-base-button>
+      </b-link>
     </b-col>
-    <app-comp-table-of-content></app-comp-table-of-content>
   </b-row>
 </template>
 <script>
 // ...
 import { mapGetters } from 'vuex'
-import AppCompJauge from './AppCompJauge'
+import AppCompJauge from './AppCompJauge.vue'
 export default {
   components: {
     AppCompJauge
   },
   computed: {
     ...mapGetters([
-      'getIntroStatus',
+      'getAllActivities',
       'getAllActivitiesState',
       'getAllCompleted',
       'getAppConfigs',
-      'getMenuSettings'
+      'getMenuSettings',
+      'getModuleInfo'
     ]),
     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.$store.getters.getAllActivities.list.forEach((value, key) => {
+
+      this.getAllActivities().list.forEach((value, key) => {
         let theActivity,
           activityTitle,
           activitySubTitle,
-          activityTime = null
+          activityTime = null,
+          activityPath = ''
 
         if (this.menuInfo[key]) {
           const { title, subTitle, time } = this.menuInfo[key] //get time subTitle time from menu info
@@ -98,41 +90,34 @@ export default {
         // This is the Introduction
         if (key === 'A00') {
           activityTitle = activityTitle || this.$t('text.introduction')
-          theActivity = {
-            id: key,
-            title: activityTitle,
-            subtitle: activitySubTitle,
-            time: activityTime,
-            path: 'introduction',
-            data: value
-          }
-          if (this.getIntroStatus) collection.push(theActivity) // include or not the Introduction in the collection
+          activityPath = 'introduction'
+        } else if (key === 'A99') {
+          activityTitle = activityTitle || this.$t('text.conclusion')
+          activityPath = 'conclusion'
         } else {
           count++
           activityTitle =
             activityTitle || `${this.$t('text.activity')} ${count}`
-          theActivity = {
-            id: key,
-            title: activityTitle,
-            subtitle: activitySubTitle,
-            time: activityTime,
-            path: `activite_${count}`,
-            data: value
-          }
-          collection.push(theActivity) // push the activity in the collection
+          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
-    },
-    getFractionGauge() {
-      return this.getAppConfigs.jauge.fraction
-    },
-    getPourcentGauge() {
-      return this.getAppConfigs.jauge.pourcent
     }
   },
   mounted() {},
@@ -145,48 +130,14 @@ export default {
     getPageComplete(idActivity) {
       /// give all the page that are complete to the gauge
       if (idActivity) {
-        //get the page which is defined as the menu
-        const toIgnore = this.$helper
-          .getRoutesFromVueRouter('A00')
-          .all_routes.find((el) => el.name === 'menu').meta.id
-
         let completed = []
         if (this.getAllCompleted[idActivity]) {
           completed = this.getAllCompleted[idActivity] //get all completed page for the activity
-
-          //for A00 return all completed pages except the menu page
-          if (idActivity === 'A00')
-            completed = completed.filter((c) => Object.keys(c)[0] !== toIgnore)
         }
-        return completed.length
-      }
-    },
-    /**
-     * @description  give a state of an activity. this available to change style but non mandatory
-     * @param {String} activityID
-     * @returns {String} [started|completed|incompleted]
-     */
-    getProgressStatus(activityID) {
-      if (activityID !== 'ID') {
-        let progress = 'incomplete'
-        // if activity as a page to complete
-        if (this.getAllCompleted[activityID]) {
-          let activitySize = this.getActivitySize(activityID)
 
-          // if all activity are in allCompleted give attriube complete if not started
-          if (activitySize === this.getPageComplete(activityID)) {
-            progress = 'completed'
-          } else progress = 'started'
-        }
-        return progress
+        return completed.length
       }
     },
-
-    activityInfo(activity) {
-      //tell the toc which activity was click to fill the information
-      this.$bus.$emit('info-activity', activity)
-    },
-
     /**
      * @description give the size of the state of the activity
      * @param {String} activityID
@@ -206,11 +157,35 @@ export default {
         ? allActivitiesState[activityID].size
         : 0
 
-      // reduce the size if in A00
-      if (activityID === 'A00' && size > 0) size = size - 1
-
       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;
+
+  .row {
+    margin: 0;
+    flex-direction: column;
+  }
+}
+</style>