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

package/src/components/AppCompMenu.vue

@@ -16,38 +16,36 @@
     >
       {{ $t('message.skip_content') }}
     </a>
-    <b-row align-v="center" align-h="center" class="r-menu">
+    <div class="contain-lr">
       <div class="wrapper-lasRoute">
         <div class="box-menu">
           <h1>{{ getLessonid }}</h1>
           <h2 v-html="getLessonTitle"></h2>
+
           <p class="lesson-progess">
             {{ $t('message.progress_card') }} {{ lessonProg() }}
           </p>
-          <b-link
+          <router-link
             id="btn_last_route"
             class="nav_last_route btn-main"
             :title="handelLabel"
             :to="{ name: GoToLastRoute() }"
+            data-test="menu-back-btn"
           >
             {{ handelLabel }}
-          </b-link>
+          </router-link>
         </div>
       </div>
+      <v-row justify="center" align="center" class="r-menu">
+        <v-col id="menu-main" md="10" class="wrapper-MenuItem">
+          <h3>{{ $t('text.activity_title') }}</h3>
 
-      <b-col
-        id="menu-main"
-        md="10"
-        class="wrapper-MenuItem"
-        title="table of content for this lesson"
-      >
-        <h3>{{ $t('text.activity_title') }}</h3>
-
-        <app-comp-menu-item></app-comp-menu-item>
-      </b-col>
-    </b-row>
-    <b-row align-v="center" align-h="center">
-      <b-col md="7">
+          <app-comp-menu-item></app-comp-menu-item>
+        </v-col>
+      </v-row>
+    </div>
+    <v-row justify="center" align="center">
+      <v-col md="7">
         <div v-show="appDebugMode" id="_debug-area">
           <h5>Mode de débogage activé</h5>
           <p>
@@ -78,8 +76,8 @@
             </span>
           </div>
         </div>
-      </b-col>
-    </b-row>
+      </v-col>
+    </v-row>
     <div id="page_info" class="sr-only" aria-hidden="true">
       {{ $t('text.title_content_view') }}
     </div>
@@ -87,8 +85,8 @@
 </template>
 <script>
 // ...
-import { mapGetters } from 'vuex'
-
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 export default {
   name: 'AppCompMenu',
   data() {
@@ -100,14 +98,15 @@ export default {
   },
 
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getRouteHistory',
       'getAllActivitiesState',
       'getAllCompleted',
       'getModuleInfo',
       'getMenuSettings',
       'getAppDebugMode',
-      'getAllCompleted'
+      'getAllCompleted',
+      'getDataFromServer'
     ]),
     appDebugMode() {
       return this.getAppDebugMode
@@ -120,15 +119,12 @@ export default {
       let completeActivity = Object.values(allCompleted)
 
       if (this.noProgress(activity)) {
-        //console.log('dans handleLabel no progress a true')
         label = this.$t('button.menu_item.start')
       } else {
-        // console.log('dans handleLabel no progress a false')
-
         if (activity.length == completeActivity.length) {
           label = this.$t('button.menu_item.end')
         } else {
-          label = this.$t('button.menu_item.middle')
+          label = this.$t('button.menu_item.end')
         }
       }
       return label
@@ -170,10 +166,20 @@ export default {
         }
       }, 2000)
     },
+    // GoToLastRoute() {
+    //   let lastRoute
+    //   //Get all activity state (menu not included)
+
+    //   //No route history Should link to introduction route
+    //   if (!this.getRouteHistory.length) return 'introduction'
+    //   //last Route should be the last element in route history
+    //   lastRoute = this.getRouteHistory.toReversed()[0]
+    //   //create the route link and return it
+    //   return this.createdRoute(lastRoute)
+    // },
     GoToLastRoute() {
       let lastRoute
       let path
-
       //Get all activity state (menu not included)
       const { allActivitiesState } = this.progressWithMenu()
       let state = Object.values(allActivitiesState)
@@ -217,7 +223,7 @@ export default {
         activity = newRoute.type
       } else {
         activity =
-          newRoute.activity_ref.charAt(1) == '0'
+          newRoute.activity_ref && newRoute.activity_ref.charAt(1) == '0'
             ? `activite_${newRoute.activity_ref.substring(2)}`
             : `activite_${newRoute.activity_ref.substring(1)}`
       }
@@ -228,7 +234,6 @@ export default {
 
       //Define path
       path = page !== ' ' ? `${activity}.page_${page}` : activity
-
       return path
     },
     progressWithMenu() {
@@ -297,6 +302,22 @@ export default {
 }
 </script>
 <style lang="scss">
+.contain-lr {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+
+  .wrapper-lasRoute {
+    display: flex;
+    justify-content: flex-end;
+
+    .nav_last_route {
+      display: inline-block;
+    }
+  }
+}
+
 .menu-container {
   width: 100%;
   height: 100%;

package/src/components/AppCompMenuItem.vue

@@ -3,24 +3,26 @@
  @ 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>
-  <b-row v-if="activities.length" class="box-msa">
-    <b-col
+  <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'"
     >
-      <b-link
+      <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">
-          <b-row>
+          <v-row>
             <div v-if="activity.subtitle === undefined" class="title">
               <h4 v-html="activity.title"></h4>
             </div>
@@ -28,11 +30,11 @@
               <h4 v-html="`${activity.title} : ${activity.subtitle}`"></h4>
             </div>
 
-            <div class="time">
+            <div class="cnt-time">
+              <svg :aria-label="$t('label.timer')">
+                <use href="#clock-icon" />
+              </svg>
               <p class="time">
-                <svg width="18" height="21.01" :aria-label="$t('label.timer')">
-                  <use href="#clock-icon" />
-                </svg>
                 {{ activity.time || '00:00' }}
               </p>
             </div>
@@ -42,22 +44,23 @@
                 :value="getPageComplete(activity.id)"
               />
             </div>
-          </b-row>
+          </v-row>
         </div>
-      </b-link>
-    </b-col>
-  </b-row>
+      </router-link>
+    </v-col>
+  </v-row>
 </template>
 <script>
 // ...
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 import AppCompJauge from './AppCompJauge.vue'
 export default {
   components: {
     AppCompJauge
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getAllActivities',
       'getAllActivitiesState',
       'getAllCompleted',
@@ -183,9 +186,43 @@ export default {
   width: 100%;
   padding: 24px;
 
-  .row {
+  .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>