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

package/src/components/AppCompPlayBarNext.vue

@@ -263,12 +263,12 @@ mediaMixins is used for all the methods/data shared between audio and video. In
               @mouseenter="activateLabel($event.currentTarget)"
               @mouseleave="deactivateLabel($event.currentTarget)"
               @focus="
-                activateLabel($event.currentTarget),
-                  changeFocusState('volumeSlider', true)
+                (activateLabel($event.currentTarget),
+                changeFocusState('volumeSlider', true))
               "
               @blur="
-                deactivateLabel($event.currentTarget),
-                  changeFocusState('volumeSlider', false)
+                (deactivateLabel($event.currentTarget),
+                changeFocusState('volumeSlider', false))
               "
             />
             <span class="volume-label" aria-hidden="true">
@@ -292,7 +292,7 @@ mediaMixins is used for all the methods/data shared between audio and video. In
             class="btn subtitleBtns"
             :aria-label="ccLabel"
             :data-title="`${ccLabel} (c)`"
-            :disabled="!hasSubtitle"
+            :is-disabled="!hasSubtitle"
             :class="{
               md_disabled: !hasSubtitle,
               displayLabel: btnsLabelDisplay['btn-subtitles'] === true
@@ -320,11 +320,11 @@ mediaMixins is used for all the methods/data shared between audio and video. In
             class="btn-transcript"
             :aria-label="transcriptLabel"
             :data-title="`${transcriptLabel} (t)`"
-            :disabled="transcriptBtnDisabled"
             :class="{
               md_disabled: transcriptBtnDisabled,
               displayLabel: btnsLabelDisplay['btn-transcript'] === true
             }"
+            :is-disabled="transcriptBtnDisabled"
             @click="toggleViewTranscript($event)"
             @mouseenter="activateLabel($event)"
             @mouseleave="deactivateLabel($event)"
@@ -350,11 +350,11 @@ mediaMixins is used for all the methods/data shared between audio and video. In
             ref="$btn-fullscreen"
             class="fullscreenBtns"
             :aria-label="fullscreenLabel"
-            :disabled="fullscreenBtnDisabled"
             :class="{
               md_disabled: fullscreenBtnDisabled,
               displayLabel: btnsLabelDisplay['btn-fullscreen'] === true
             }"
+            :is-disabled="fullscreenBtnDisabled"
             :data-title="`${fullscreenLabel} (f)`"
             @click="toggleFullScreen()"
             @mouseenter="activateLabel($event)"
@@ -682,9 +682,8 @@ export default {
     if (this.firefoxTrack) {
       this.firefoxTrack.removeEventListener('cuechange', this.fireFoxMoveCC)
     }
-    //this.$bus.$off('play-media', this.handleMediaControls)
+
     this.$bus.$off('transcript-hidden', this.resetTranscript)
-    return this.$bus.$off('close-sidebar', 'ctxTranscript')
   },
   methods: {
     ...mapActions(useAppStore, [
@@ -899,6 +898,7 @@ export default {
      * @description - Toggle the state fo the sound
      */
     toggleMute() {
+      if (!this.showControlsValue) this.showControls()
       //Check first the volume of the media
       if (this.mediaElement.volume == 0) this.muted = true
 
@@ -952,7 +952,7 @@ export default {
 
     handleMediaControls(e) {
       e = e.code
-      this.showControls()
+      if (!this.showControlsValue) this.showControls()
       switch (e) {
         case 'ArrowLeft':
           //If focus is on Volume, VolDown
@@ -1334,6 +1334,7 @@ export default {
 
     /** "@description  -update the information of the seek tooltip*/
     updateSeekTooltip(evt) {
+      if (!this.showControlsValue) this.showControls()
       //Elm progress Bar
       const progressBar = this.progressBar
       //progressBar position on the page
@@ -1423,6 +1424,7 @@ export default {
      */
     toggleFullScreen() {
       const fullscreenElement = this.mediaContainer
+
       if (document.fullscreenElement) {
         // exitFullscreen is only available on the Document object.
         document.exitFullscreen()
@@ -1435,6 +1437,7 @@ export default {
      * @description update the value of fulls screen state
      */
     updateFullScreenState() {
+      if (!this.showControlsValue) this.showControls()
       this.fullscreenOn = !this.fullscreenOn
     },
 
@@ -1463,6 +1466,7 @@ export default {
       this.setMediaSubtitles(false)
     },
     toggleViewSubtitle() {
+      if (!this.showControlsValue) this.showControls()
       if (this.subtitlesEnabled) return this.hideSubtitles()
       if (!this.subtitlesEnabled) return this.showSubtitles()
     },
@@ -1474,6 +1478,7 @@ export default {
      * @fires 'close-sidebar' to AppBaseModule
      */
     toggleViewTranscript(event) {
+      if (!this.showControlsValue) this.showControls()
       this.transcriptEnabled = !this.transcriptEnabled
       //When the function is called after a user interaction (mouse or keyboard), emit event
       if (event) {
@@ -1550,6 +1555,7 @@ export default {
      * @description Method to reset the transcript state
      */
     resetTranscript(content) {
+      if (!this.showControlsValue) this.showControls()
       this.transcriptEnabled = false
       this.otherVideoTranscriptShown = false
     },
@@ -1685,9 +1691,11 @@ export default {
 
         right: calc(var(--progress-thumb-size) / -2);
         top: calc(
-          -1 * (
+          -1 *
+            (
               var(--progress-thumb-size) / 2 - var(--progress-bar-height) / 2
-            ) - var(--progress-bar-border-height) / 2
+            ) - var(--progress-bar-border-height) /
+            2
         );
         display: flex;
         align-items: center;

package/src/components/AppCompPopUpNext.vue

@@ -208,13 +208,12 @@
 </template>
 
 <script>
-import AppBaseErrorDisplay from './AppBaseErrorDisplay.vue'
 import { mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
 
 export default {
   name: 'AppCompPopUp',
-  components: { AppBaseErrorDisplay },
+
   data() {
     return {
       pType: null,
@@ -397,8 +396,6 @@ export default {
         this.pType = data.type
         this.pName = data.name
 
-        console.log(this.pType)
-
         if (this.pType == 'popup-endActivity')
           this.updateEndPopUp(true) //This will handle the activation of the element in the portal
         else this.updateEndPopUp(false) //This will handle the activation of the element in the portal

package/src/components/AppCompQuizNext.vue

@@ -77,7 +77,7 @@
             :id="`btn_quiz_${quizData.id}`"
             ref="quiz"
             class="btn-quiz btn-main"
-            :is-active="quizIsNotAnswered || attemptsReached"
+            :is-disabled="quizIsNotAnswered || attemptsReached"
             :title="txtBtnSubmit"
             @click="validateAnswers"
           >
@@ -306,18 +306,21 @@ export default {
           break
         case ['dropdown', 'texte_troue_select', 'texte_tableau'].includes(
           type_question
-        ):
+        ): {
+          const searchedVal = type_question == 'texte_tableau' ? '' : null
           if (
             this.quizInputType.length < choix_reponse.length ||
-            this.$helper.containsValue(this.quizInputType, null)
+            this.$helper.containsValue(this.quizInputType, searchedVal)
           )
             notAnswer = true
           break
+        }
 
         case type_question == 'texte_troue':
           if (texte_base) {
             const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
             let matchAll = texte_base.split(regex)
+
             if (
               this.quizInputType.length < matchAll.length - 1 ||
               this.$helper.containsValue(this.quizInputType, '')
@@ -2271,7 +2274,7 @@ export default {
         const { type_question } = this.quizData
         switch (true) {
           case ['choix_unique', 'reponse_ouverte'].includes(type_question):
-            if (oldValue !== null) {
+            if (newValue !== null && oldValue !== '') {
               this.showSolution = false
             }
             break
@@ -2870,6 +2873,7 @@ export default {
           const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
           let matchAll = texte_base.split(regex)
           let listInputTextFill = this.quizInputType
+
           if (
             listInputTextFill.length == matchAll.length - 1 &&
             !this.$helper.containsValue(listInputTextFill, null) &&

package/src/components/AppCompQuizRecall.vue

@@ -16,25 +16,33 @@
       {{ quizRecall.title }}
     </component>
     <!--Quiz answer conditionning-->
-    <template v-if="quizRecall.done == true">
-      <div
-        v-if="quizRecall.hypertext_done"
-        class="quizRecall-text-done"
-        v-html="quizRecall.hypertext_done"
-      ></div>
-      <div class="quizRecall-ennonce" v-html="quizRecall.ennonce"></div>
-      <textarea
-        v-model="quizRecall.answer"
-        disabled
-        class="form-control"
-      ></textarea>
-    </template>
-    <template v-if="quizRecall.done == false">
-      <div
-        v-if="quizRecall.hypertext_undone"
-        class="quizRecall-text-undone"
-        v-html="quizRecall.hypertext_undone"
-      ></div>
+    <app-base-error-display
+      v-if="hasError.length"
+      :error-group="'component'"
+      :error-title="`ERREUR: COMPOSANT QUIZ RECALL`"
+      :errors-list="hasError"
+    ></app-base-error-display>
+    <template v-else>
+      <template v-if="quizRecall.done == true">
+        <div
+          v-if="quizRecall.hypertext_done"
+          class="quizRecall-text-done"
+          v-html="quizRecall.hypertext_done"
+        ></div>
+        <div class="quizRecall-ennonce" v-html="quizRecall.ennonce"></div>
+        <textarea
+          v-model="quizRecall.answer"
+          disabled
+          class="form-control"
+        ></textarea>
+      </template>
+      <template v-if="quizRecall.done == false">
+        <div
+          v-if="quizRecall.hypertext_undone"
+          class="quizRecall-text-undone"
+          v-html="quizRecall.hypertext_undone"
+        ></div>
+      </template>
     </template>
   </section>
 </template>
@@ -62,6 +70,7 @@ export default {
           'message.recall_undone'
         )}</p>` /*String traduite par défaut*/
       },
+      hasError: [],
       quizData: null
     }
   },
@@ -98,6 +107,8 @@ export default {
      */
     findQuizdataObject(searchObject, quizID) {
       for (let property in searchObject) {
+        //Should only check for not null poperties
+        if (!searchObject[property]) continue
         // Should only check for Object or Array property
         if (
           searchObject[property].constructor !== Array &&
@@ -124,6 +135,7 @@ export default {
     getQuizData(activityId, pageId) {
       if (pageId && activityId) {
         let pageData = this.getPageData(activityId, pageId)
+
         if (pageData) {
           this.quizData = this.findQuizdataObject(
             pageData,
@@ -132,17 +144,21 @@ export default {
 
           //Warn that the specified quiz could not be found
           if (!this.quizData) {
+            let msgErr = `Aucun quiz avec id '${this.quizRecallData.quizId}' pour la ${pageId} de ${activityId}`
             console.warn(
               `%c WARNING!>>> Quiz Recall: Unable to find a quiz with type_question 'reponse_ouverte' and id '${this.quizRecallData.quizId}' in ${pageId} of ${activityId}`,
               'background: orange; color: white; display: block; margin:5px;'
             )
+            this.hasError.push(msgErr)
           }
         } else {
           this.quizRecall.done == false
+          let msgErr = `Aucun quiz avec id '${this.quizRecallData.quizId}' pour la ${pageId} de ${activityId}`
           console.warn(
             `%c WARNING!>>> AppCompQuizRecall : QuizData ActivityID and PageID combinaison is invalid.`,
             'background: orange; color: white; display: block; margin:5px;'
           )
+          this.hasError.push(msgErr)
         }
       } else {
         this.quizRecall.done == false
@@ -243,17 +259,21 @@ export default {
 
       //Validate if all properties in quizRecallData are valid
       if (wrongProperties.length > 0) {
+        let msgErr = `QuizRecallData ${wrongProperties} invalid`
         console.warn(
-          `%c WARNING!>>> AppCompQuizRecall : QuizRecallData ${wrongProperties} invalid. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
+          `%c WARNING!>>> AppCompQuizRecall : ${msgErr}. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
           'background: orange; color: white; display: block; margin:5px;'
         )
+        this.hasError.push(msgErr)
       }
       //Validate if all required properties are present in quizRecallData
       if (missingRequired.length > 0) {
+        let msgErr = `QuizRecallData missing required ${missingRequired} property`
         console.warn(
-          `%c WARNING!>>>  AppCompQuizRecall : QuizRecallData missing required ${missingRequired} property. Required properties: activityId and pageId. Optional properties:  title, titletag, hypertext_done and hypertext_undone.`,
+          `%c WARNING!>>>  AppCompQuizRecall : ${msgErr}. Required properties: activityId and pageId. Optional properties:  title, titletag, hypertext_done and hypertext_undone.`,
           'background: orange; color: white; display: block; margin:5px;'
         )
+        this.hasError.push(msgErr)
       }
     },
     /*Get a title tag (string). Return true if the tag is valid and false is it's not*/
@@ -264,10 +284,12 @@ export default {
       if (tags && value && tags.find((element) => element == lowerValue))
         return true
       else {
+        let msgErr = `Your quizRecallData titletag is not valid`
         console.warn(
-          '%c WARNING!>>> recallMixins: Your quizRecallData titletag is not valid. You can use h1,h2,h3,h4,h5,h6,p,or span',
+          '%c WARNING!>>> AppCompQuizRecall : Your quizRecallData titletag is not valid. You can use h1,h2,h3,h4,h5,h6,p,or span',
           'background: orange; color: white; display: block; margin:5px;'
         )
+        this.hasError.push(msgErr)
         return false
       }
     }

package/src/components/AppCompTableOfContent.vue

@@ -8,55 +8,59 @@
 -->
 
 <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>
+  <div v-if="error" id="sidebar-submenu" :class="{ isOpen: isOpened }">
+    <focus-trap :active="isOpened">
+      <div ref="target">
+        <app-base-button
+          id="close-toc"
+          class="btn-ghost"
+          :title="$t('button.closePopUp')"
+          @click="onCloseWidget('toc')"
+        >
           <svg>
-            <use href="#chevronD-icon" />
+            <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>
+
+          <RouterLink
+            v-for="(anchor, index) of anchors"
+            :key="anchor.title"
+            class="toc-item"
+            :done="sectionProgress(index)"
+            :to="{ name: anchor.path }"
+            @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>
+          </RouterLink>
         </div>
-      </a>
-    </div>
+      </div>
+    </focus-trap>
   </div>
-  <div v-else id="sidebar-submenu" :class="{ isOpen: open }">
+  <div v-else id="sidebar-submenu" :class="{ isOpen: isOpened }">
     <p>
       Cette activité n'existe pas dans menu setting, svp l'ajouter à votre menu
       setting
@@ -73,7 +77,7 @@ export default {
       title: '',
       anchors: [],
       activity: '',
-      open: false,
+      isOpened: false,
       menuInfo: null,
       actProgress: null,
       error: true
@@ -101,7 +105,7 @@ export default {
   methods: {
     ...mapActions(useAppStore, ['updateWidgetOpen']),
     onInfoActivity(data) {
-      //should be condition to avoid event fireing multiple time on call
+      //should be conditioned to avoid event firing multiple time on call
 
       if (data) {
         this.reset()
@@ -116,23 +120,18 @@ export default {
       }
     },
     onCloseWidget(data) {
-      this.open = false
+      this.isOpened = 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
-      }
+      if (data.type !== 'toc') return (this.isOpened = false)
+      this.isOpened = !this.isOpened
+      this.updateWidgetOpen(this.isOpened)
     },
     /* @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
@@ -226,12 +225,12 @@ export default {
       }
     },
     close() {
-      this.open = !this.open
-      this.updateWidgetOpen(this.open)
+      this.isOpened = !this.isOpened
+      this.updateWidgetOpen(this.isOpened)
     },
     closeAndNextPage(NextPage) {
-      this.open = !this.open
-      this.updateWidgetOpen(this.open)
+      this.isOpened = !this.isOpened
+      this.updateWidgetOpen(this.isOpened)
       this.$router.push({ name: NextPage })
     },
     reset() {
@@ -267,10 +266,10 @@ export default {
           for (let g = 1; g == numPage; g++) {
             tabPageSec.push(`P${g}`)
           }
-
           if (
+            typeof this.getAllCompleted[this.activity] !== 'undefined' &&
             this.getAllCompleted[this.activity].length !==
-            this.getAllActivitiesState[this.activity].size
+              this.getAllActivitiesState[this.activity].size
           )
             return false
         }

package/src/components/AppCompViewDisplay.vue

@@ -1,6 +1,6 @@
-<template>
-  <router-view />
-</template>
-<script>
-export default {}
-</script>
+<template>
+  <router-view />
+</template>
+<script>
+export default {}
+</script>

package/src/components/BaseModule.vue

@@ -5,11 +5,6 @@
 -->
 <template>
   <div v-if="mData" class="module-wrapper">
-    <!-- <div
-      class="overlay-close-widget"
-      :class="{ blockOverlay: over }"
-      @click="overlayClose()"
-    ></div> -->
     <slot name="mTitle" />
     <slot>Module</slot>
   </div>
@@ -32,20 +27,8 @@ export default {
     }
   },
 
-  mounted() {
-    // this.$bus.$on('toggle-widget', () => {
-    //   this.over = true
-    // })
-    // this.$bus.$on('close-widget', () => {
-    //   this.over = false
-    // })
-  },
   created() {},
-  methods: {
-    // overlayClose() {
-    //   this.$bus.$emit('close-widget')
-    // }
-  }
+  methods: {}
 }
 </script>
 

package/src/components/tests__/AppBaseButton.spec.js

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils'
+import AppBaseButton from '../AppBaseButton.vue'
+import { describe, expect, test } from 'vitest'
+
+describe('AppBaseButton.vue', () => {
+  test('It renders a button', () => {
+    const wrapper = mount(AppBaseButton)
+
+    expect(wrapper.text()).toContain('Button')
+  })
+  // test prop value :type
+  test('Button has the correct type', () => {
+    const wrapper = mount(AppBaseButton, {
+      props: { type: 'submit' }
+    })
+    // expect(wrapper.props().type).toBe(submit)
+    expect(wrapper.get('button').attributes('type')).toBe('submit')
+  })
+  //test prop value : isActive
+  test('Button render a correct state', () => {
+    const wrapper = mount(AppBaseButton, {
+      props: { isDisabled: true }
+    })
+    expect(wrapper.get('button').classes()).toEqual(
+      expect.arrayContaining(['md_disabled'])
+    )
+
+    // expect(wrapper.props().isActive).toBe(true)
+  })
+
+  //test slot
+  test('Renders slot content properly', () => {
+    const wrapper = mount(AppBaseButton, {
+      slots: {
+        default: 'Mon bouton custome'
+      }
+    })
+
+    expect(wrapper.get('button').text()).toBe('Mon bouton custome')
+  })
+
+  //test click with event emitter
+  test('Emit event with value of the the $el when clicked', () => {
+    const wrapper = mount(AppBaseButton, {
+      slots: {
+        default: 'Mon bouton custome'
+      }
+    })
+    wrapper.get('button').trigger('click')
+    const clickEvent = wrapper.emitted('click')[0]
+    expect(clickEvent[0]).toEqual(wrapper.vm.$el)
+  })
+})

package/src/main.js

@@ -143,9 +143,9 @@ export default {
       if (key === 'menuSettings') {
         const mapAct = appStore.$state.thisModule.activities
         if (!mapAct) return
-        const keys4Lesson = ['lessonTitle', ...mapAct.keys()]
+        const keys4Lesson = ['lessonTitle', 'lessonNumber', ...mapAct.keys()]
         const keys4ActivityOpt = ['title', 'subTitle']
-        const keys4ActivityMando = ['time', 'anchors']
+        const keys4ActivityMandatory = ['time', 'anchors']
         const keys4Anchors = ['anchorName', 'pageRef', 'page']
 
         const errChecked = validatefileContent(
@@ -153,7 +153,7 @@ export default {
           options.menuSettings,
           {
             keys4Lesson,
-            keys4ActivityMando,
+            keys4ActivityMandatory,
             keys4ActivityOpt,
             keys4Anchors
           }