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

package/src/components/AppBase.vue

@@ -4,79 +4,68 @@
   - validate the data for the App configuration
   - Send the xapi statement
   - Manage the fetching and setting of data from serveur
+  - Example of use: <app-base :app-config="$data"></app-base>
  @ Must be used.
 -->
 <template>
   <div id="App-base" fluid :class="{ iPad: resizeiPad }">
     <template v-if="error.length">
-      <b-row>
-        <b-col>
+      <v-row>
+        <v-col>
           <app-base-error-display
             :errors-list="error"
             error-type="appConfig"
             error-title="Configuration de l'application"
           />
-        </b-col>
-      </b-row>
+        </v-col>
+      </v-row>
     </template>
     <template v-else>
-      <template>
-        <transition name="bounce" mode="in-out">
-          <div
-            v-if="showBuildInfo && !buildInfoClicked"
-            id="build-info"
-            @click="buildInfoClicked = true"
-          >
-            <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
-            <span>FCAD {{ $helper.getFcadVersion() }}</span>
-            <span>{{ $helper.getBuildTime() }}</span>
-          </div>
-        </transition>
-
-        <router-view class="box" />
-
-        <app-icons />
-      </template>
+      <transition name="bounce" mode="in-out">
+        <div
+          v-if="showBuildInfo && !buildInfoClicked"
+          id="build-info"
+          @click="buildInfoClicked = true"
+        >
+          <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
+          <span>FCAD {{ $helper.getFcadVersion() }}</span>
+          <span>template {{ $helper.getTemplateVersion() }}</span>
+          <span>{{ $helper.getBuildTime() }}</span>
+        </div>
+      </transition>
+
+      <router-view class="box" />
+
+      <app-icons-next :extra-icons="userExtraIcons" />
     </template>
-    <b-overlay
-      v-show="!appReady"
+
+    <v-overlay
       id="overlay_loading"
-      :show="!appReady"
-      rounded="lg"
-      variant="white"
+      :model-value="!appReady"
+      class="align-center justify-center"
+      scrim="white"
       blur="3px"
       opacity="0.8"
     >
-      <template #overlay>
-        <div class="d-flex grp-spinners align-items-center">
-          <b-spinner small type="grow" variant="secondary"></b-spinner>
-          <b-spinner
-            style="width: 1.2rem; height: 1.2rem"
-            type="grow"
-            variant="secondary"
-          ></b-spinner>
-
-          <b-spinner
-            style="width: 1.8rem; height: 1.8rem"
-            type="grow"
-            variant="dark"
-          ></b-spinner>
-
-          <b-spinner
-            style="width: 1.2rem; height: 1.2rem"
-            type="grow"
-            variant="secondary"
-          ></b-spinner>
-          <b-spinner small type="grow" variant="secondary"></b-spinner>
-          <!-- We add an SR only text for screen readers -->
-          <span class="sr-only">{{ $t('message.loading_state_msg') }}</span>
-        </div>
-      </template>
-    </b-overlay>
+      <div class="text-center grp-spinners">
+        <v-progress-circular
+          :size="50"
+          :width="3"
+          color="#003552"
+          bg-color="#d3effe"
+          indeterminate
+        ></v-progress-circular>
+
+        <span class="sr-only">
+          {{ $t('message.loading_state_msg') }}
+        </span>
+      </div>
+    </v-overlay>
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore.js'
 import { timerMixin } from '../mixins/timerMixin'
 import { validateAppContent } from '../shared/validators'
 import AppBaseErrorDisplay from './AppBaseErrorDisplay.vue'
@@ -93,6 +82,10 @@ export default {
       }
     }
   },
+  setup() {
+    const store = useAppStore()
+    return { store }
+  },
 
   data() {
     return {
@@ -106,7 +99,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getCurrentBrowser',
       'getIsMobile',
       'getDeviceType',
@@ -118,7 +111,9 @@ export default {
       'getAllActivities',
       'getMediaPlaybarValues',
       'getAppConfigs',
-      'getErrorMenu'
+      'getErrorMenu',
+      'getRouteHistory',
+      'getBookmarkEnabled'
     ]),
     getwidth() {
       return window.innerWidth
@@ -146,10 +141,22 @@ export default {
         lang = displayList.find((l) => l.includes(this.$i18n.locale))
       }
       return lang
+    },
+    userExtraIcons() {
+      const icons = this.$helper.getSettingsFromStore('extra_icons')
+        ? this.$helper.getSettingsFromStore('extra_icons')
+        : null
+      return icons
+    } /**
+     * @description Set default value for bookmark
+     */,
+    bookmarkActive() {
+      return this.getBookmarkEnabled
     }
   },
   watch: {
     getConnectionInfo: {
+      deep: true,
       //in development environment (localhost), don't wait for the axios call
       immediate: import.meta.env.DEV,
       handler() {
@@ -210,6 +217,7 @@ export default {
   },
 
   created() {
+    this.bookmarkActive
     if (import.meta.env.DEV) {
       this.checkForErrors()
     }
@@ -217,22 +225,22 @@ export default {
 
     if (!this.error.length) {
       this.updateTracker('appBase', 'loading')
-      this.$store.dispatch('setAppConfigs', this.appConfig)
+      this.setAppConfigs(this.appConfig)
     }
 
     window.versionFCAD = this.$helper.getFcadVersionString()
     //check if this is running in a mobile environment and register state in the store
     const md = new mobileDetect(window.navigator.userAgent)
     md.mobile() !== null
-      ? this.$store.dispatch('setMobileState', true)
-      : this.$store.dispatch('setMobileState', false)
+      ? this.setMobileState(true)
+      : this.setMobileState(false)
     const currentBrowser = this.getBrowser() //get current browser vendor
 
     // register the current browser in the store
-    this.$store.dispatch('setCurrentBrowser', currentBrowser)
+    this.setCurrentBrowser(currentBrowser)
 
     // register device type running the App in the store (ios, Android or Deskop)
-    this.$store.dispatch('setDeviceType', this.detectDevice())
+    this.setDeviceType(this.detectDevice())
 
     this.$bus.$on('set-comp-status', this.updateTracker)
     this.$bus.$on('send-xapi-statement', this.sendXapiStatements)
@@ -264,8 +272,22 @@ export default {
     this.$bus.$off('reset-focus-on', this.resetFocus)
     this.$bus.$off('send-xapi-statement', this.sendXapiStatements)
     this.$bus.$off('move-to-target', this.moveTo)
+
+    if (this.getAppConfigs.remote) this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
   methods: {
+    ...mapActions(useAppStore, [
+      'setDeviceType',
+      'updateDataFetchFromServer',
+      'setUserMetaData',
+      'setRouteHistory',
+      'setApplicationSettings',
+      'setMediaPlaybarValues',
+      'updateCompStatusTracker',
+      'setAppConfigs',
+      'setMobileState',
+      'setCurrentBrowser'
+    ]),
     /**
      * @description set the desired language for the app default is french
      * @param {String} [lang=fr]
@@ -349,20 +371,17 @@ export default {
         this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
         this.getConnectionInfo.activity_id
       )
-      const { routeHistory, ...userProgress } = progress
+      const { routeHistory = [], ...userProgress } = progress
 
       const completedState = await this.$xapi._getLessonStatus(
         this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
         this.getConnectionInfo.activity_id
       )
 
-      //=======UPCOMING: Uncomment lines bellow when these properties are integrated ========
-      // Get existing record for user preferred settings
-      // const applicationSettings = await this.$xapi._getPreferredSettings(
-      //   this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-      //   this.getConnectionInfo.activity_id
-      // )
-
+      const lessonPosition = await this.$xapi._getLessonPosition(
+        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        this.getConnectionInfo.activity_id
+      )
       //======= End UPCOMING: Uncomment when this property are integrated ========
       //Get existing record for play bar settings. Play bar info is from the activity Parent ID and not activity id
       const _url = new URL(this.getConnectionInfo.activity_id)
@@ -371,28 +390,33 @@ export default {
         this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
         parentID
       )
-      const lessonPosition = await this.$xapi._getLessonPosition(
+
+      //=======UPCOMING: Uncomment lines bellow when these properties are integrated ========
+      // Get existing record for user preferred settings
+      const applicationSettings = await this.$xapi._getPreferredSettings(
         this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        this.getConnectionInfo.activity_id
+        parentID
       )
-
       //Update the App Store data
-      this.$store.dispatch('updateDataFetchFromServer', {
+      this.updateDataFetchFromServer({
         userProgress,
         routeHistory,
         lessonPosition,
         completedState,
-        playbarValues
+        playbarValues,
+        applicationSettings
+      }).then(() => {
+        // console.log('DATA FROM SERVER', {
+        //   userProgress,
+        //   routeHistory,
+        //   lessonPosition,
+        //   completedState,
+        //   playbarValues,
+        //   applicationSettings
+        // })// for testing
+
+        this.updateTracker('appBase_fetch', 'ready')
       })
-      // console.log('DATA FROM SERVER', {
-      //   userProgress,
-      //   routeHistory,
-      //   lessonPosition,
-      //   completedState,
-      //   playbarValues
-      // })
-
-      this.updateTracker('appBase_fetch', 'ready')
     },
 
     executeCloseEventTriggered() {
@@ -430,8 +454,11 @@ export default {
               const userProgress = JSON.parse(scormRecord).userData
               const routeHistory = JSON.parse(scormRecord).routeHistory
 
-              this.$store.dispatch('setUserMetaData', userProgress)
-              this.$store.dispatch('setRouteHistory', routeHistory) // update store recored with existing record
+              this.setUserMetaData(userProgress)
+              this.setRouteHistory(routeHistory) // update store recored with existing record
+              //Should Redirect to the last Route in History
+              // const lastRoute = routeHistory.toReversed()[0]
+              // this.$router.push({ name: lastRoute.parent._namedRoute })
             }
 
             // No LMS use LocalStorage record
@@ -439,12 +466,10 @@ export default {
             this.$idb.openDB().then(() => {
               this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
                 if (res && res.$record) {
-                  const { routeHistory, userSettings, ...userData } =
-                    res.$record
-                  this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
-                  this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
-                  if (userSettings)
-                    this.$store.dispatch('setApplicationSettings', userSettings) // update store record with existing user settings
+                  const { routeHistory, userSettings, progress } = res.$record
+                  this.setUserMetaData(...progress) // update store record with existing record
+                  this.setRouteHistory(routeHistory) // update store record with existing route info
+                  if (userSettings) this.setApplicationSettings(userSettings) // update store record with existing user settings
                 }
               })
             })
@@ -461,30 +486,36 @@ export default {
             ) {
               if (!this.getDataFromServer) return
               //Try to get the user progress from LRS
-              const { playbarValues, routeHistory, userProgress } =
-                this.getDataFromServer
-
-              this.$store.dispatch('setUserMetaData', userProgress) // update store record with existing record
-              this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing record
-              if (playbarValues)
-                this.$store.dispatch('setMediaPLaybarValues', playbarValues) // update store record with existing record
-              //Should update the playbar values
+              const {
+                playbarValues,
+                routeHistory,
+                userProgress,
+                lessonPosition,
+                applicationSettings
+              } = this.getDataFromServer
+
+              this.setUserMetaData(userProgress) // update store record with existing record
+              this.setRouteHistory(routeHistory) // update store record with existing record
+
+              if (playbarValues) this.setMediaPlaybarValues(playbarValues) // update store record with existing record
+
+              if (applicationSettings)
+                this.setApplicationSettings(applicationSettings) // set the user preferred settings
+
+              //Handel bookmark navigation
+              if (this.bookmarkActive && lessonPosition)
+                this.$router.push({ name: lessonPosition }) //Should Redirect to bookmark
             } else {
               //Get existing records for user data in local store
               this.$idb.openDB().then(() => {
                 this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
                   if (res && res.$record) {
-                    const { routeHistory, userSettings, ...userData } =
-                      res.$record
-
-                    this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
-                    this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
+                    const { routeHistory, userSettings, progress } = res.$record
+                    this.setUserMetaData(progress) // update store record with existing record
+                    this.setRouteHistory(routeHistory) // update store record with existing route info
 
                     if (userSettings) {
-                      this.$store.dispatch(
-                        'setApplicationSettings',
-                        userSettings
-                      ) // update store record with existing user setting
+                      this.setApplicationSettings(userSettings) // update store record with existing user setting
                     }
                   }
                 })
@@ -494,11 +525,10 @@ export default {
 
           break
       }
-
       this.updateTracker('appBase', 'ready')
     },
     updateTracker(name, status) {
-      this.$store.dispatch('updateCompStatusTracker', { name, status })
+      this.updateCompStatusTracker({ name, status })
     },
     //============================Multiple Satements  Sending at once======================================
     /**
@@ -775,12 +805,22 @@ export default {
         extensions: [
           {
             id: 'ending-point',
-            content: this.$route.name
+            content: (() =>
+              this.$route.name == 'menu'
+                ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                    ._namedRoute
+                : this.$route.name)()
           },
           {
             id: 'user-data',
             content: {
-              routeHistory: this.getRouteHistory,
+              routeHistory: (() => {
+                const history = this.getRouteHistory.toReversed() //get the route history from the last
+
+                history[0] = this.$route.meta // change the last recored route to the current route
+
+                return history.toReversed()
+              })(),
               ...lessonsData
             }
           }
@@ -809,9 +849,36 @@ export default {
           }
         ]
       }
-      //================================STATEMENT FOR THE PLAYBAR ===============================================
+      //================================STATEMENT FOR THE SETTINGS ===============================================
 
-      this.sendXapiStatements([stmtPlaybar, stmt, endStmt], null, option) //send xapi statement
+      //Creating custom statement
+      const stmtUserSettings = {
+        id: (() => {
+          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
+          else return null
+        })(),
+        verb: 'preferred',
+        definition: text,
+        description: text,
+        extensions: [
+          {
+            id: 'application-settings',
+            content: {
+              ...this.getApplicationSettings
+            }
+            // content: {
+            //   bookmark: false
+            // } //for testing
+          }
+        ]
+      }
+      //================================END STATEMENT ===============================================
+
+      this.sendXapiStatements(
+        [stmtPlaybar, stmtUserSettings, stmt, endStmt],
+        null,
+        option
+      ) //send xapi statement
 
       if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
 
@@ -826,8 +893,9 @@ export default {
      */
     async resetUserData() {
       this.$bus.$emit('set-comp-status', 'appBase', 'loading')
-      this.$store.dispatch('setUserMetaData', {}) // resetting store record with existing for user data
-      this.$store.dispatch('setRouteHistory', []) // resetting  store record for all last visited pages
+      this.setUserMetaData({}) // resetting store record with existing for user data
+      this.setApplicationSettings({}) // resetting store record for settings
+      this.setRouteHistory([]) // resetting  store record for all last visited pages
 
       this.$bus.$emit('stop-timer')
       if (this.getModuleInfo.packageType !== 'xapi') return
@@ -836,9 +904,7 @@ export default {
         return this.$idb.deleteDataInDB(this.getModuleInfo.idbID) //Must call the idb delete methode to reset indexDB store
 
       //Send a completion statement for the current activity
-      let aTitle = `${this.$t('text.activity')} ${
-        this.getConnectionInfo.activity_id
-      }`
+      let aTitle = `${this.$t('text.activity')} ${this.getConnectionInfo.activity_id}`
 
       //Custom text for description and definition of the stament to be sent
       let text
@@ -849,7 +915,7 @@ export default {
       /*Dispatch a send statement event to method AppBaseModule sendXapiStatement(s)
        Content values are:
           User data URI: "host_address/course_ID/Lesson_ID/user-data" ex: "http://localhost:8080/330N01FD6001/m1l1/ // user-data" and
-          User Bookmark URI: "host_address/course_ID/Lesson_ID/ending-point" ex: ""http://localhost:8080/330N01FD6001/m1l1/ending-point": "menu"
+          User Bookmark URI: "host_address/course_ID/Lesson_ID/ending-point" ex: ""http://localhost:8080/330N01FD6001/m1l1/ending-point": "introduction"
        */
       const baseStmt = {
         definition: text,
@@ -866,7 +932,11 @@ export default {
         extensions: [
           {
             id: 'ending-point',
-            content: this.$route.name
+            content: (() =>
+              this.$route.name == 'menu'
+                ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                    ._namedRoute
+                : this.$route.name)()
           },
           {
             id: 'user-data',
@@ -876,24 +946,53 @@ export default {
         duration: null,
         completion: false // Resetting completion state value to
       }
+      //================================STATEMENT FOR THE SETTINGS ===============================================
 
-      this.sendXapiStatements([exitStmt, endStmt])
+      //Creating custom statement
+      const stmtUserSettings = {
+        ...baseStmt,
+        id: (() => {
+          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
+          else return null
+        })(),
+
+        verb: 'preferred',
+        extensions: [
+          {
+            id: 'application-settings',
+            content: new Object()
+          }
+        ]
+      }
+      //================================END STATEMENT ===============================================
+
+      this.sendXapiStatements([stmtUserSettings, exitStmt, endStmt])
 
       this.$bus.$emit('set-comp-status', 'appBase', 'ready')
 
       // Creating a asynchronous fecth method that would resolve after a 2 second
       const fetchData = async () => {
-        return new Promise((resolve) => {
-          setTimeout(
-            () =>
-              resolve(
-                this.$xapi._getProgress(
-                  this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-                  this.getConnectionInfo.activity_id
-                )
-              ),
-            2000
+        //funtion that will make a multiple request on the server
+        const requests = async () => {
+          const _url = new URL(this.getConnectionInfo.activity_id)
+          const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
+
+          const progress = await this.$xapi._getProgress(
+            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+            this.getConnectionInfo.activity_id
+          )
+          const lessonPosition = await this.$xapi._getLessonPosition(
+            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+            this.getConnectionInfo.activity_id
+          )
+          const applicationSettings = await this.$xapi._getPreferredSettings(
+            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+            parentID
           )
+          return { progress, lessonPosition, applicationSettings }
+        }
+        return new Promise((resolve) => {
+          setTimeout(() => resolve(requests()), 2000)
         })
       }
 
@@ -928,11 +1027,11 @@ export default {
         if (targetEl) skipTo = targetEl
       }
 
-      opt.top = skipTo.offsetTop + opt.top // Set scroll top from target top
+      if (skipTo) opt.top = skipTo.offsetTop + opt.top // Set scroll top from target top
 
-      skipTo.setAttribute('tabIndex', -1) //Allowing accessibility control with keyboard
+      if (skipTo) skipTo.setAttribute('tabIndex', -1) //Allowing accessibility control with keyboard
       window.scrollTo(opt)
-      this.resetFocus(skipTo) //focus on the target
+      if (skipTo) this.resetFocus(skipTo) //focus on the target
     },
 
     /**
@@ -998,11 +1097,6 @@ export default {
 }
 </script>
 <style lang="scss">
-body {
-  &:focus {
-    border: none !important;
-  }
-}
 #App-base {
   width: 100%;
   height: 100%;
@@ -1015,10 +1109,6 @@ body {
     top: 0;
     left: 0;
     z-index: 9999;
-
-    .grp-spinners span {
-      margin: 0px 2px;
-    }
   }
 
   #build-info {
@@ -1046,4 +1136,12 @@ body {
     position: relative;
   }
 }
+.grp-spinners {
+  span {
+    margin: 0px 2px;
+  }
+  .v-progress-circular {
+    margin: 0.8rem !important;
+  }
+}
 </style>

package/src/components/AppBaseButton.vue

@@ -8,7 +8,7 @@
     :type="type"
     class="btn"
     :class="{ click: isClick, 'btn-visited': isVisited, md_disabled: isActive }"
-    :aria-disabled="isActive"
+    :aria-disabled="isActive ? true : null"
     @click="click"
     @focus="focus"
     @blur="blur"
@@ -32,6 +32,7 @@ export default {
       default: 'button'
     }
   },
+  emits: ['click', 'focus', 'blur', 'mouseenter', 'mouseleave'],
   data() {
     return {
       isClick: false,
@@ -82,10 +83,5 @@ export default {
 .btn {
   display: flex;
   align-items: center;
-
-  &.md_disabled {
-    background-color: #80808066 !important;
-    opacity: 0.5;
-  }
 }
 </style>