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

package/src/components/AppCompQuizRecall.vue

@@ -1,8 +1,10 @@
 <!--
- @ Description: This component is used to display a quiz and its answer from a previous page if it has been completed by the user. The only quiz type supported is open answer (textarea) and the quiz must be in the same lesson. 
- @ What it does: Retrieve the quizData specific to an activity ID and pageID. Then, retrieve the answers previously saved by the user to this quiz. After, create an html element including title and conditional content. If the answer have been previously saved, a specific hypertext, the question and the answer (disabled textarea) are displayed. If the answer have not been saved, another hypertext is displayed. 
+ @ Description: This component is used to display a quiz and its answer from a previous page if it has been completed by the user. The only quiz type supported is open answer (textarea) and the quiz must be in the same lesson.
+ @ What it does: Retrieve the quizData specific to an activity ID and pageID. Then, retrieve the answers previously saved by the user to this quiz. After, create an html element including title and conditional content. If the answer have been previously saved, a specific hypertext, the question and the answer (disabled textarea) are displayed. If the answer have not been saved, another hypertext is displayed.
+ @How to use: in a page call <app-comp-quiz-recall :quiz-recall-data="defineDQuizRecallData">
+ ** where "defineDQuizRecallData" refers to data object of quiz to pass to component
+ ** data object should containt following attributes: quizId,activityId,pageId,hypertext_done',hypertext_undone,title,titletag
 -->
-
 <template>
   <section class="quizRecall">
     <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
@@ -39,7 +41,9 @@
 
 <script>
 //Recall mixins has the necessary datas and functions to give back quizRecall statu
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+
 export default {
   name: 'AppCompQuizRecall',
   props: {
@@ -53,9 +57,7 @@ export default {
         ennonce: '',
         title: '',
         titletag: 'h4',
-        hypertext_done: `<p>${this.$t(
-          'message.recall_done'
-        )}</p>` /*String traduite par défaut*/,
+        hypertext_done: `<p>${this.$t('message.recall_done')}</p>` /*String traduite par défaut*/,
         hypertext_undone: `<p>${this.$t(
           'message.recall_undone'
         )}</p>` /*String traduite par défaut*/
@@ -64,30 +66,21 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getAllCompleted', 'getUserInteraction', 'getPageData'])
-  },
-  watch: {
-    //Change quizRecall when userData is changed (it is where answer are saved)
-    getUserInteraction(newUserData, oldUserData) {
-      if (this.quizRecallData && this.quizData) {
-        this.getQuizRecallAnswer(this.quizRecallData, this.quizData)
-      } else {
-        this.quizRecall.done == false
-      }
-    }
+    ...mapState(useAppStore, [
+      'getAllCompleted',
+      'getUserInteraction',
+      'getPageInteraction',
+      'getPageData'
+    ])
   },
-  mounted() {},
   created() {
     //Validate quizRecall data
     //(no validation to the quiz, only to the new datas)
     this.validateQuizRecallData(this.quizRecallData)
-
+    const { activityId, pageId } = this.quizRecallData
     //Get quizData and validate the quiz type
-    if (this.quizRecallData.activityId && this.quizRecallData.pageId) {
-      this.getQuizData(
-        this.quizRecallData.activityId,
-        this.quizRecallData.pageId
-      )
+    if (activityId && pageId) {
+      this.getQuizData(activityId, pageId)
     }
 
     //Get quizRecall answer
@@ -105,34 +98,40 @@ export default {
      */
     findQuizdataObject(searchObject, quizID) {
       for (let property in searchObject) {
-        // Check if the current property is an object and has the required properties
+        // Should only check for Object or Array property
         if (
-          typeof searchObject[property] === 'object' &&
-          searchObject[property] !== null
-        ) {
-          if (
-            searchObject[property].id === quizID &&
-            searchObject[property].type_question === 'reponse_ouverte'
-          ) {
-            return searchObject[property] // Valid Quiz data found
-          }
-        }
-      }
+          searchObject[property].constructor !== Array &&
+          searchObject[property].constructor !== Object
+        )
+          continue
 
-      // No reponse_ouverte quiz data with specified ID was found
-      return null
+        // Convert if it not an Array but an Objet
+        const searchArray =
+          searchObject[property].constructor === Object
+            ? [searchObject[property]]
+            : searchObject[property]
+
+        //Only Search for quiz:
+        //Search Array is a list of quiz if one of its element has at least the property 'type_question'
+        return searchArray[0]['type_question']
+          ? searchArray.find(
+              (e) => e.id === quizID && e.type_question === 'reponse_ouverte'
+            )
+          : null
+      }
     },
     //Get datas from the original open answer quiz
     getQuizData(activityId, pageId) {
       if (pageId && activityId) {
         let pageData = this.getPageData(activityId, pageId)
-        if (pageData && pageData.content) {
+        if (pageData) {
           this.quizData = this.findQuizdataObject(
-            pageData.content,
+            pageData,
             this.quizRecallData.quizId
           )
+
           //Warn that the specified quiz could not be found
-          if (this.quizData === null) {
+          if (!this.quizData) {
             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;'
@@ -150,51 +149,51 @@ export default {
       }
     },
     //Get datas from quizRecallData and userData and add them to quizRecall object
-    getQuizRecallAnswer(quizRecallData, quizData) {
+    getQuizRecallAnswer() {
       //Get userData
-      let userData = this.getUserInteraction
-      //Get quizId
-      let quizId = quizData.id
-      //Get activityId
-      let activityId = quizRecallData.activityId
-      //Get pageId
-      let pageId = quizRecallData.pageId
+      const {
+        activityId,
+        pageId,
+        quizId,
+        hypertext_done,
+        hypertext_undone,
+        title,
+        titletag
+      } = this.quizRecallData
+
+      let userData = this.getPageInteraction(activityId, pageId)
+
       //Add hypertext_done and undone to quizRecall
-      if (quizRecallData.hypertext_done) {
-        this.quizRecall.hypertext_done = quizRecallData.hypertext_done
+      if (hypertext_done) {
+        this.quizRecall.hypertext_done = hypertext_done
       }
-      if (quizRecallData.hypertext_undone) {
-        this.quizRecall.hypertext_undone = quizRecallData.hypertext_undone
+      if (hypertext_undone) {
+        this.quizRecall.hypertext_undone = hypertext_undone
       }
       //Add the title if it exists
-      if (quizRecallData.title) {
-        this.quizRecall.title = quizRecallData.title
+      if (title) {
+        this.quizRecall.title = title
         //Modify le titletag
-        if (quizRecallData.titletag) {
-          let validator = this.validateTitleTag(this.quizRecallData.titletag)
+        if (titletag) {
+          let validator = this.validateTitleTag(titletag)
           if (validator) {
-            this.quizRecall.titletag = this.quizRecallData.titletag
+            this.quizRecall.titletag = titletag
           }
         }
       }
 
       //If quiz answer exists in userData, quizRecall done is true and add the quiz answer to quizRecall
-      if (
-        userData &&
-        userData[activityId] &&
-        userData[activityId][pageId] &&
-        userData[activityId][pageId].userInteraction &&
-        userData[activityId][pageId].userInteraction.quizAnswers &&
-        userData[activityId][pageId].userInteraction.quizAnswers[quizId]
-      ) {
-        this.quizRecall.done = true
-        this.quizRecall.answer =
-          userData[activityId][pageId].userInteraction.quizAnswers[quizId]
-        this.quizRecall.ennonce = quizData.ennonce
-      } else {
-        //If the quiz answer doesn't exist
-        this.quizRecall.done = false
-      }
+      if (!userData || !userData.userInteraction)
+        return (this.quizRecall.done = false)
+
+      const { quizAnswers } = userData.userInteraction
+
+      if (!quizAnswers || !quizAnswers[quizId])
+        return (this.quizRecall.done = false)
+
+      this.quizRecall.done = true
+      this.quizRecall.answer = quizAnswers[quizId].value
+      this.quizRecall.ennonce = this.quizData.ennonce
     },
 
     //Validate quizRecallData

package/src/components/{AppCompSVG.vue → AppCompSVGNext.vue}

@@ -12,9 +12,7 @@
   @STYLING If multiple path, use the id to style a specific path (see the svg width app-icons class at the end of the DOM to see all the ID in the inspector -- but the path fill/stroke can only be modified once per symbol per 'use'; idealy use one path per icon to modified it more easily)
 -->
 <script>
-//import { h } from 'vue'
-
-const IconsList = [
+const defaultIconsList = [
   {
     id: 'pause-icon',
     viewBox: '0 0 21.23 24',
@@ -88,14 +86,6 @@ const IconsList = [
       }
     ]
   },
-  {
-    id: 'pip-icon',
-    paths: [
-      {
-        d: 'M21 19.031v-14.063h-18v14.063h18zM23.016 18.984q0 0.797-0.609 1.406t-1.406 0.609h-18q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h18q0.797 0 1.406 0.586t0.609 1.383v14.016zM18.984 11.016v6h-7.969v-6h7.969z'
-      }
-    ]
-  },
   {
     id: 'subtitle-off-icon',
     viewBox: '0 0 40.53 32',
@@ -134,50 +124,20 @@ const IconsList = [
   },
   {
     id: 'close-square-icon',
-    viewBox: '0 0 16 16',
-    paths: [
-      {
-        d: 'M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'
-      },
-      {
-        d: 'M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'
-      }
-    ]
-  },
-  {
-    id: 'branch-crochet-icon',
+    viewBox: '0 0 39 36',
     paths: [
       {
-        id: 'Tracé_3833',
-        'data-name': 'Tracé 3833',
-        d: 'M0,0H24V24H0Z',
-        fill: 'none'
-      },
-
-      {
-        id: 'Tracé_3834',
-        'data-name': 'Tracé 3834',
-        d: 'M9,16.2,4.8,12,3.4,13.4,9,19,21,7,19.6,5.6Z',
-        fill: '#e6f5ff'
+        d: 'M19.5,20.5L6.7,33.3c-0.3,0.3-0.8,0.5-1.3,0.5c-0.5,0-1-0.2-1.3-0.5C3.7,33,3.5,32.5,3.5,32	c0-0.5,0.2-1,0.5-1.3l12.8-12.8L4.1,5.1C3.7,4.7,3.5,4.2,3.5,3.8c0-0.5,0.2-1,0.5-1.3c0.3-0.4,0.8-0.6,1.3-0.5c0.5,0,1,0.2,1.3,0.5	l12.8,12.8L32.3,2.4c0.3-0.3,0.8-0.5,1.3-0.5c0.5,0,1,0.2,1.3,0.5c0.4,0.3,0.6,0.8,0.5,1.3c0,0.5-0.2,1-0.5,1.3L22.2,17.9L35,30.7	c0.3,0.3,0.5,0.8,0.5,1.3c0,0.5-0.2,1-0.5,1.3c-0.3,0.4-0.8,0.6-1.3,0.5c-0.5,0-1-0.2-1.3-0.5L19.5,20.5z'
       }
     ]
   },
   {
     id: 'navigate-next-icon',
-    viewBox: '0 0 7.41 12',
+    viewBox: '0 0 39 36',
     paths: [
       {
         id: 'Path_3899',
-        'data-name': 'Path 3899',
-        d: 'M0,0H24V24H0Z',
-        fill: 'none'
-      },
-
-      {
-        id: 'Path_3900',
-        'data-name': 'Path 3900',
-        d: 'M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z',
-        transform: 'translate(-8.61 -6)'
+        d: 'M23.4,17.9L11.2,5.7c-0.4-0.4-0.6-1-0.6-1.6c0-0.6,0.2-1.2,0.6-1.6	c0.4-0.4,1-0.7,1.6-0.7c0.6,0,1.2,0.2,1.6,0.7L27.8,16c0.3,0.2,0.5,0.6,0.6,0.9c0.1,0.3,0.2,0.7,0.2,1c0,0.3-0.1,0.7-0.2,1	c-0.1,0.3-0.3,0.6-0.6,0.9L14.3,33.2c-0.4,0.4-1,0.6-1.6,0.6c-0.6,0-1.2-0.2-1.6-0.6c-0.4-0.4-0.7-1-0.7-1.6c0-0.6,0.2-1.2,0.7-1.6	L23.4,17.9z'
       }
     ]
   },
@@ -199,19 +159,21 @@ const IconsList = [
   },
   {
     id: 'fleche-gauche-icon',
+    viewBox: '0 0 36.2 31.9',
     paths: [
       {
-        id: 'arrow_forward_FILL0_wght400_GRAD0_opsz48',
-        d: 'M11.7 23.4c-.3 0-.6-.1-.8-.3L.3 12.5c-.1-.1-.2-.2-.3-.4v-.4c0-.1 0-.3.1-.4.1-.1.2-.3.3-.4L10.9.3c.5-.4 1.1-.4 1.6 0 .4.5.4 1.2 0 1.6l-8.6 8.6h19c.6 0 1.1.5 1.1 1.2 0 .6-.5 1.1-1.2 1.1H3.9l8.6 8.6c.4.5.4 1.1 0 1.6-.2.3-.5.4-.8.4z'
+        id: 'ico_fleche_droite',
+        d: 'M8.2,14.1h22.2c0.4,0,0.8,0.1,1,0.4c0.3,0.3,0.4,0.7,0.4,1c0,0.4-0.1,0.8-0.4,1	c-0.3,0.3-0.7,0.4-1,0.4H8.2l10.1,10.1c0.3,0.3,0.4,0.6,0.4,1c0,0.4-0.2,0.8-0.5,1c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.8-0.2-1-0.4	L3.8,16.8c-0.2-0.2-0.3-0.4-0.4-0.6c-0.1-0.2-0.1-0.4-0.1-0.7c0-0.2,0-0.4,0.1-0.7c0.1-0.2,0.2-0.4,0.4-0.6L16.2,2	c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.8,0.1,1.1,0.4c0.3,0.3,0.5,0.6,0.5,1c0,0.4-0.2,0.8-0.5,1L8.2,14.1z'
       }
     ]
   },
   {
     id: 'fleche-droite-icon',
+    viewBox: '0 0 36.2 31.9',
     paths: [
       {
-        id: 'arrow_forward_FILL0_wght400_GRAD0_opsz48',
-        d: 'M11.4 23.1c-.4-.5-.4-1.1 0-1.6l8.6-8.6H1.1c-.6 0-1.2-.5-1.2-1.1 0-.6.5-1.2 1.1-1.2h19L11.4 2c-.4-.5-.4-1.2 0-1.6.5-.4 1.1-.4 1.6 0L23.6 11c.1.1.2.2.3.4.1.1.1.3.1.4 0 .1 0 .3-.1.4-.1.2-.2.3-.3.4L13 23.2c-.2.2-.5.3-.8.3-.3-.1-.6-.2-.8-.4z'
+        id: 'ico_fleche_droite',
+        d: 'M27,17.1H4.8c-0.4,0-0.8-0.1-1-0.4c-0.3-0.3-0.4-0.7-0.4-1c0-0.4,0.1-0.8,0.4-1	c0.3-0.3,0.7-0.4,1-0.4H27L16.9,4.1c-0.3-0.3-0.4-0.6-0.4-1c0-0.4,0.2-0.8,0.5-1c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.8,0.2,1,0.4	l12.4,12.4c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.1,0.4,0.1,0.7c0,0.2,0,0.4-0.1,0.7c-0.1,0.2-0.2,0.4-0.4,0.6L19,29.2	c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.8-0.1-1.1-0.4c-0.3-0.3-0.5-0.6-0.5-1c0-0.4,0.2-0.8,0.5-1L27,17.1z'
       }
     ]
   },
@@ -246,90 +208,140 @@ const IconsList = [
   },
   {
     id: 'home-icon',
-    viewBox: '0 0 20 17',
+    viewBox: '0 0 39 36',
     paths: [
       {
         id: 'Path_3912',
-        'data-name': 'Path 3912',
-        d: 'M10,20V14h4v6h5V12h3L12,3,2,12H5v8Z',
-        transform: 'translate(-2 -3)'
+        d: 'M4.9,30.9V13.7c0-0.5,0.1-1.1,0.4-1.6c0.2-0.5,0.6-0.9,1-1.2l11.1-8.3	c0.6-0.5,1.3-0.7,2.1-0.7c0.8,0,1.5,0.2,2.1,0.7l11.1,8.3c0.4,0.3,0.8,0.7,1,1.2c0.2,0.5,0.4,1,0.4,1.6v17.2c0,0.8-0.3,1.5-0.9,2.1	c-0.5,0.6-1.3,0.9-2.1,0.9H25c-0.5,0-0.9-0.2-1.3-0.5c-0.3-0.3-0.5-0.8-0.5-1.3v-9.5c0-0.5-0.2-0.9-0.5-1.3	c-0.3-0.3-0.8-0.5-1.3-0.5h-3.9c-0.5,0-0.9,0.2-1.3,0.5c-0.3,0.3-0.5,0.8-0.5,1.3v9.5c0,0.5-0.2,0.9-0.5,1.3	c-0.3,0.3-0.8,0.5-1.3,0.5H7.8c-0.8,0-1.5-0.3-2.1-0.9C5.2,32.5,4.9,31.7,4.9,30.9z'
       }
     ]
   },
   {
-    id: 'timeline-icon',
-    viewBox: '0 0 33 18',
+    id: 'toc-icon',
+    viewBox: '0 0 39 36',
     paths: [
       {
-        id: 'timeline_FILL0_wght400_GRAD0_opsz48',
-        'data-name': 'timeline FILL0 wght400 GRAD0 opsz48',
-        d: 'M2.93,18.46a2.63,2.63,0,0,1,0-5.25l.39,0a4.21,4.21,0,0,1,.49.09l7.5-7.5a2.73,2.73,0,0,1-.1-.48c0-.13,0-.26,0-.39a2.62,2.62,0,0,1,4.48-1.84A2.51,2.51,0,0,1,16.43,5s0,.33-.11.85L20.45,10a2.73,2.73,0,0,1,.48-.1l.38,0,.37,0a2.66,2.66,0,0,1,.49.1l6-6a4.21,4.21,0,0,1-.09-.49c0-.12,0-.25,0-.38a2.63,2.63,0,1,1,2.63,2.63l-.38,0a3.86,3.86,0,0,1-.49-.09l-6,6a4,4,0,0,1,.09.48,2.55,2.55,0,0,1,0,.39,2.63,2.63,0,0,1-5.25,0c0-.13,0-.26,0-.39a2.73,2.73,0,0,1,.1-.48L14.67,7.47a2.66,2.66,0,0,1-.49.1l-.38,0L13,7.47,5.45,15a4.21,4.21,0,0,1,.09.49c0,.13,0,.25,0,.38A2.63,2.63,0,0,1,2.93,18.46Z',
-        transform: 'translate(-0.31 -0.46)'
+        id: 'ico_progression',
+        d: 'M6.5,26.7c-0.7,0-1.3-0.3-1.8-0.7c-0.5-0.5-0.8-1.1-0.7-1.8c0-0.7,0.3-1.3,0.7-1.8	c0.5-0.5,1.1-0.8,1.8-0.7c0.1,0,0.3,0,0.4,0c0.1,0,0.3,0.1,0.4,0.1l6.9-6.9c-0.1-0.1-0.1-0.3-0.1-0.4c0-0.1,0-0.3,0-0.4	c0-0.7,0.3-1.3,0.7-1.8c0.5-0.5,1.1-0.8,1.8-0.7c0.7,0,1.3,0.3,1.8,0.7c0.5,0.5,0.8,1.1,0.7,1.8c0,0.3-0.1,0.5-0.1,0.8l4,4	c0.1-0.1,0.2-0.1,0.4-0.1c0.1,0,0.3,0,0.4,0c0.1,0,0.3,0,0.4,0c0.1,0,0.3,0.1,0.4,0.1l5.5-5.5C30.1,13.3,30,13.1,30,13	c0-0.1,0-0.3,0-0.4c0-0.7,0.3-1.3,0.7-1.8c0.5-0.5,1.1-0.7,1.8-0.7c0.7,0,1.3,0.3,1.8,0.7c0.5,0.5,0.8,1.1,0.7,1.8	c0,0.7-0.3,1.3-0.7,1.8c-0.5,0.5-1.1,0.8-1.8,0.7c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3-0.1-0.4-0.1l-5.5,5.5c0.1,0.1,0.1,0.2,0.1,0.4	c0,0.1,0,0.3,0,0.4c0,0.7-0.3,1.3-0.7,1.8c-0.5,0.5-1.1,0.8-1.8,0.7c-0.7,0-1.3-0.3-1.8-0.7c-0.5-0.5-0.8-1.1-0.7-1.8	c0-0.1,0-0.3,0-0.4c0-0.1,0.1-0.3,0.1-0.4l-4-4c-0.1,0.1-0.3,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0c-0.3,0-0.5-0.1-0.8-0.1l-6.9,6.9	C8.9,23.5,9,23.6,9,23.7c0,0.1,0,0.3,0,0.4c0,0.7-0.3,1.3-0.7,1.8C7.8,26.4,7.1,26.7,6.5,26.7z'
       }
     ]
   },
   {
     id: 'info-icon',
-    viewBox: '0 0 17.9 17.91',
+    viewBox: '0 0 500 500',
     paths: [
       {
-        d: 'M9.07 13.41a.65.65 0 0 0 .67-.63V8.66a.63.63 0 0 0-.2-.46.67.67 0 0 0-.47-.2.65.65 0 0 0-.67.63v4.08a.59.59 0 0 0 .2.46.67.67 0 0 0 .47.24ZM9 6.34a.69.69 0 0 0 .53-.2.67.67 0 0 0 .21-.52.74.74 0 0 0-.21-.54.73.73 0 0 0-1 0 .74.74 0 0 0-.21.54.67.67 0 0 0 .21.52.69.69 0 0 0 .47.2Zm0 11.57a9 9 0 0 1-3.55-.69 8.68 8.68 0 0 1-4.76-4.76 9.45 9.45 0 0 1 0-7.09 8.79 8.79 0 0 1 1.9-2.85 9.05 9.05 0 0 1 12.8 12.8 8.88 8.88 0 0 1-2.86 1.9 9.1 9.1 0 0 1-3.53.69Z'
+        d: 'M428.3,170.42c-9.35-21.99-22.82-41.99-39.68-58.91c-16.94-16.85-36.94-30.32-58.94-39.66	c-22.86-9.8-47.51-14.77-72.38-14.62c-24.88-0.17-49.53,4.79-72.4,14.59c-21.99,9.35-41.99,22.82-58.91,39.68	c-16.85,16.94-30.32,36.94-39.66,58.94c-9.8,22.86-14.78,47.51-14.62,72.38c-0.18,24.88,4.79,49.53,14.59,72.4	c9.35,21.99,22.82,41.99,39.68,58.91c16.94,16.85,36.94,30.32,58.94,39.66c22.86,9.8,47.51,14.77,72.38,14.62	c24.88,0.18,49.53-4.79,72.4-14.59c21.99-9.35,41.99-22.82,58.91-39.68c16.85-16.94,30.32-36.94,39.66-58.94	c9.8-22.86,14.78-47.51,14.62-72.38C443.07,217.94,438.1,193.29,428.3,170.42z M271.95,326.3c0.1,3.91-1.43,7.69-4.21,10.44	c-2.75,2.79-6.53,4.31-10.44,4.21c-3.91,0.1-7.69-1.43-10.44-4.21c-2.78-2.75-4.31-6.53-4.21-10.44v-83.03	c-0.1-3.91,1.43-7.69,4.21-10.44c2.75-2.78,6.53-4.31,10.44-4.21c3.91-0.1,7.69,1.43,10.44,4.21c2.78,2.75,4.31,6.53,4.21,10.44	V326.3z M268.54,190.64c-2.96,3-7.03,4.64-11.24,4.54v0.01c-4.21,0.1-8.28-1.54-11.24-4.55c-3-2.96-4.64-7.03-4.54-11.24	c-0.1-4.21,1.54-8.28,4.54-11.24c2.96-3,7.03-4.64,11.24-4.54c4.21-0.1,8.28,1.54,11.24,4.54c3,2.96,4.64,7.03,4.54,11.24	C273.18,183.61,271.54,187.68,268.54,190.64z'
+        //d: 'M428.3,170.42c-9.35-21.99-22.82-41.99-39.68-58.91c-16.94-16.85-36.94-30.32-58.94-39.66	c-22.86-9.8-47.51-14.77-72.38-14.62c-24.88-0.17-49.53,4.79-72.4,14.59c-21.99,9.35-41.99,22.82-58.91,39.68	c-16.85,16.94-30.32,36.94-39.66,58.94c-9.8,22.86-14.78,47.51-14.62,72.38c-0.18,24.88,4.79,49.53,14.59,72.4	c9.35,21.99,22.82,41.99,39.68,58.91c16.94,16.85,36.94,30.32,58.94,39.66c22.86,9.8,47.51,14.77,72.38,14.62	c24.88,0.18,49.53-4.79,72.4-14.59c21.99-9.35,41.99-22.82,58.91-39.68c16.85-16.94,30.32-36.94,39.66-58.94	c9.8-22.86,14.78-47.51,14.62-72.38C443.07,217.94,438.1,193.29,428.3,170.42z M271.95,326.3c0.1,3.91-1.43,7.69-4.21,10.44	c-2.75,2.79-6.53,4.31-10.44,4.21c-3.91,0.1-7.69-1.43-10.44-4.21c-2.78-2.75-4.31-6.53-4.21-10.44v-83.03	c-0.1-3.91,1.43-7.69,4.21-10.44c2.75-2.78,6.53-4.31,10.44-4.21c3.91-0.1,7.69,1.43,10.44,4.21c2.78,2.75,4.31,6.53,4.21,10.44	V326.3z M268.54,190.64c-2.96,3-7.03,4.64-11.24,4.54v0.01c-4.21,0.1-8.28-1.54-11.24-4.55c-3-2.96-4.64-7.03-4.54-11.24	c-0.1-4.21,1.54-8.28,4.54-11.24c2.96-3,7.03-4.64,11.24-4.54c4.21-0.1,8.28,1.54,11.24,4.54c3,2.96,4.64,7.03,4.54,11.24	C273.18,183.61,271.54,187.68,268.54,190.64z'
       }
     ]
   },
   {
     id: 'clock-icon',
-    viewBox: '0 0 18 21.01',
+    viewBox: '0 0 39 36',
+    paths: [
+      {
+        id: 'ico_duree',
+        d: 'M21.2,17v-6.6c0-0.3-0.1-0.7-0.4-0.9c-0.2-0.2-0.6-0.4-0.9-0.4c-0.3,0-0.7,0.1-0.9,0.4	c-0.2,0.2-0.4,0.6-0.4,0.9v7c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.4,0.3,0.5l5.8,5.8c0.2,0.2,0.5,0.4,0.9,0.4c0.3,0,0.7-0.1,0.9-0.4	c0.2-0.2,0.4-0.6,0.4-0.9c0-0.3-0.1-0.7-0.4-0.9L21.2,17z M19.9,33.5c-2.1,0-4.3-0.4-6.2-1.3c-1.9-0.8-3.6-2-5.1-3.4	c-1.5-1.5-2.6-3.2-3.4-5.1c-0.8-2-1.3-4.1-1.3-6.2c0-2.1,0.4-4.3,1.3-6.2c0.8-1.9,2-3.6,3.4-5.1c1.5-1.5,3.2-2.6,5.1-3.4	c2-0.8,4.1-1.3,6.2-1.3c2.1,0,4.3,0.4,6.2,1.3c1.9,0.8,3.6,2,5.1,3.4c1.5,1.5,2.6,3.2,3.4,5.1c0.8,2,1.3,4.1,1.3,6.2	c0,2.1-0.4,4.3-1.3,6.2c-0.8,1.9-2,3.6-3.4,5.1c-1.5,1.5-3.2,2.6-5.1,3.4C24.2,33.1,22.1,33.6,19.9,33.5z M19.9,31	c3.6,0.1,7-1.4,9.5-3.9c2.6-2.5,4-6,3.9-9.5c0.1-3.6-1.4-7-3.9-9.5c-2.5-2.6-6-4-9.5-3.9c-3.6-0.1-7,1.4-9.5,3.9	c-2.6,2.5-4,6-3.9,9.5c-0.1,3.6,1.4,7,3.9,9.5C12.9,29.7,16.4,31.1,19.9,31L19.9,31z'
+      }
+    ]
+  },
+  {
+    id: 'link-icon',
+    viewBox: '0 0 39 36',
+    paths: [
+      {
+        id: 'ico_link',
+        d: 'M11.2,25.5c-2,0-4-0.8-5.4-2.2c-1.5-1.4-2.3-3.4-2.2-5.4c0-2,0.8-4,2.2-5.4	c1.4-1.5,3.4-2.3,5.4-2.2h5.1c0.3,0,0.7,0.1,0.9,0.4c0.2,0.2,0.4,0.6,0.4,0.9c0,0.3-0.1,0.7-0.4,0.9c-0.2,0.2-0.6,0.4-0.9,0.4h-5.1	c-1.4,0-2.7,0.5-3.6,1.5c-1,0.9-1.5,2.3-1.5,3.6c0,1.4,0.5,2.7,1.5,3.6c0.9,1,2.3,1.5,3.6,1.5h5.1c0.3,0,0.7,0.1,0.9,0.4	c0.2,0.2,0.4,0.6,0.4,0.9c0,0.3-0.1,0.7-0.4,0.9c-0.2,0.2-0.6,0.4-0.9,0.4L11.2,25.5z M14.5,19.1c-0.3,0-0.7-0.1-0.9-0.4	c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.3,0.1-0.7,0.4-0.9c0.2-0.2,0.6-0.4,0.9-0.4h10.1c0.3,0,0.7,0.1,0.9,0.4c0.2,0.2,0.4,0.6,0.4,0.9	c0,0.3-0.1,0.7-0.4,0.9c-0.2,0.2-0.6,0.4-0.9,0.4H14.5z M22.8,25.5c-0.3,0-0.7-0.1-0.9-0.4c-0.2-0.2-0.4-0.6-0.4-0.9	c0-0.3,0.1-0.7,0.4-0.9c0.2-0.2,0.6-0.4,0.9-0.4h5.1c1.4,0,2.7-0.5,3.6-1.5c1-0.9,1.5-2.3,1.5-3.6c0-1.4-0.5-2.7-1.5-3.6	c-0.9-1-2.3-1.5-3.6-1.5h-5.1c-0.3,0-0.7-0.1-0.9-0.4c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.3,0.1-0.7,0.4-0.9c0.2-0.2,0.6-0.4,0.9-0.4h5.1	c2,0,4,0.8,5.4,2.2c1.5,1.4,2.3,3.4,2.2,5.4c0,2-0.8,4-2.2,5.4c-1.4,1.5-3.4,2.3-5.4,2.2L22.8,25.5z'
+      }
+    ]
+  },
+  {
+    id: 'plus-icon',
+    viewBox: '0 0 39 36',
+    paths: [
+      {
+        id: 'ico_plus',
+        d: 'M17.7,19.7H5.4c-0.5,0-1-0.2-1.3-0.5c-0.4-0.3-0.5-0.8-0.5-1.3c0-0.5,0.2-1,0.5-1.3	C4.4,16.2,4.9,16,5.4,16h12.3V3.7c0-0.5,0.2-1,0.5-1.3C18.6,2,19,1.9,19.5,1.9c0.5,0,1,0.2,1.3,0.5c0.4,0.3,0.5,0.8,0.5,1.3V16h12.3	c0.5,0,1,0.2,1.3,0.5c0.4,0.3,0.5,0.8,0.5,1.3c0,0.5-0.2,1-0.5,1.3c-0.3,0.4-0.8,0.5-1.3,0.5H21.4V32c0,0.5-0.2,1-0.5,1.3	c-0.3,0.4-0.8,0.5-1.3,0.5c-0.5,0-1-0.2-1.3-0.5c-0.4-0.3-0.5-0.8-0.5-1.3V19.7z'
+      }
+    ]
+  },
+  {
+    id: 'check-icon',
+    viewBox: '0 0 39 36',
+    paths: [
+      {
+        id: 'ico_check',
+        d: 'M14.4,25.1L32.4,7c0.3-0.3,0.7-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5c0.3,0.3,0.5,0.7,0.5,1.1	c0,0.4-0.2,0.8-0.5,1.1l-19,19c-0.3,0.4-0.8,0.6-1.3,0.6c-0.5,0-1-0.2-1.3-0.6l-8.7-8.7c-0.3-0.3-0.5-0.7-0.5-1.1	c0-0.4,0.2-0.8,0.5-1.1c0.3-0.3,0.7-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5L14.4,25.1z'
+      }
+    ]
+  },
+  {
+    id: 'chevronD-icon',
+    viewBox: '0 0 39 36',
     paths: [
       {
-        id: 'Path_3904',
-        d: 'M12 0H6v2h6V0zM8 13h2V7H8v6zm8.03-6.61 1.42-1.42c-.43-.51-.9-.98-1.41-1.41l-1.42 1.42c-3.88-3.1-9.55-2.47-12.65 1.41S-.5 15.94 3.38 19.04s9.55 2.47 12.65-1.41a8.992 8.992 0 0 0 0-11.24zM9 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7c0 3.86-3.13 7-6.99 7H9z'
+        id: 'ico_chevronD',
+        d: 'M19.5,26.9c-0.3,0-0.7-0.1-1-0.2c-0.3-0.1-0.6-0.3-0.9-0.6L4.2,12.7c-0.4-0.4-0.6-1-0.6-1.6	c0-0.6,0.2-1.2,0.6-1.6c0.4-0.4,1-0.7,1.6-0.7c0.6,0,1.2,0.2,1.6,0.7l12.2,12.2L31.7,9.5c0.4-0.4,1-0.6,1.6-0.6	c0.6,0,1.2,0.2,1.6,0.6c0.4,0.4,0.7,1,0.7,1.6c0,0.6-0.2,1.2-0.7,1.6L21.4,26.1c-0.2,0.3-0.6,0.5-0.9,0.6	C20.2,26.8,19.9,26.9,19.5,26.9z'
+      }
+    ]
+  },
+  {
+    id: 'check-toc',
+    viewBox: '0 0 97.3 95.1',
+    paths: [
+      {
+        id: 'ico_succes',
+        d: 'M42.3,58l-11-11c-0.7-0.7-1.5-1-2.5-1c-0.9,0-1.9,0.3-2.5,1c-0.7,0.7-1,1.6-1,2.5	c0,0.9,0.4,1.8,1,2.5l13,13c0.8,0.8,1.9,1.3,3,1.3c1.1,0,2.2-0.5,3-1.3l26.4-26.4c0.7-0.7,1-1.5,1-2.5c0-0.9-0.3-1.9-1-2.5	c-0.7-0.7-1.6-1-2.5-1c-0.9,0-1.8,0.4-2.5,1L42.3,58z M49.1,92.9c-6,0-12-1.2-17.6-3.5c-5.3-2.3-10.2-5.5-14.3-9.6	c-4.1-4.1-7.4-8.9-9.6-14.3C5.2,59.9,4,53.9,4.1,47.9c0-6,1.2-12,3.5-17.6C9.9,25,13.1,20.1,17.2,16c4.1-4.1,8.9-7.4,14.3-9.6	C37,4,43,2.8,49.1,2.9c6,0,12,1.2,17.6,3.5c5.3,2.3,10.2,5.5,14.3,9.6c4.1,4.1,7.4,8.9,9.6,14.3c2.4,5.6,3.6,11.5,3.5,17.6	c0,6-1.2,12-3.5,17.6c-2.3,5.3-5.5,10.2-9.6,14.3c-4.1,4.1-8.9,7.4-14.3,9.6C61.1,91.7,55.1,92.9,49.1,92.9z'
       }
     ]
   }
 ]
 
-export default {
+import { h, defineComponent, ref } from 'vue'
+import { validateSvgDefinition } from '../shared/validators'
+export default defineComponent({
+  name: 'AppCompSVGNext',
   props: {
-    viewBox: {
-      type: String,
-      default: '0 0 24 24'
+    extraIcons: {
+      type: Array,
+      default: () => []
     }
   },
+  setup(props) {
+    let extraIcons =
+      props.extraIcons && validateSvgDefinition(props.extraIcons)
+        ? ref(props.extraIcons)
+        : ref([])
 
-  methods: {},
+    let iconsList = ref([])
 
-  render(h) {
-    return h('svg', { style: 'display: none', class: 'app-icons' }, [
-      h(
-        'defs',
-        {},
-        IconsList.map((icon) => {
-          return h(
-            'symbol',
-            {
-              attrs: {
+    function addToListIcons(icons) {
+      icons = icons || []
+      iconsList.value = [...defaultIconsList, ...icons.value]
+    }
+
+    addToListIcons(extraIcons)
+
+    return () =>
+      h('svg', { style: { display: 'none' } }, [
+        h('defs', null, [
+          iconsList.value.map((icon, index) => {
+            return h(
+              'symbol',
+              {
                 id: icon.id,
                 viewBox: (() => (icon.viewBox ? icon.viewBox : '0 0 24 24'))()
-              }
-            },
-            icon.paths.map((_p) => {
-              return h('path', { attrs: { ..._p } })
-            })
-          )
-        })
-      )
-    ])
+              },
+              [
+                icon.paths.map((_p) => {
+                  return h('path', { ..._p })
+                })
+              ]
+            )
+          })
+        ])
+      ])
   }
-}
+})
 </script>
-
-<style lang="scss" scoped>
-svg {
-  width: 28px;
-  height: 28px;
-  fill: #fff;
-  stroke: #fff;
-  cursor: pointer;
-}
-</style>

package/src/components/AppCompSettingsMenu.vue

@@ -9,10 +9,7 @@
     @hidden="onClose"
   >
     <div class="pl-3 pr-3">
-      <b-form-group
-        v-slot="{ ariaDescribedby }"
-        :label="$t('user_settings.title')"
-      >
+      <b-form-group :label="$t('user_settings.title')">
         <b-form-checkbox
           v-for="(setting, index) in Object.entries(settingsSelected)"
           :key="index"
@@ -40,7 +37,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 import AppBaseButton from './AppBaseButton.vue'
 
 export default {
@@ -53,7 +51,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getApplicationSettings',
       'getModuleInfo',
       'getUserInteraction',
@@ -67,6 +65,7 @@ export default {
   watch: {
     getApplicationSettings: {
       immediate: true,
+      deep: true,
       handler() {
         this.getAppSettingsInStore()
       }
@@ -80,6 +79,10 @@ export default {
     })
   },
   methods: {
+    ...mapActions(useAppStore, [
+      'setApplicationSettings',
+      'updateUserMetaData'
+    ]),
     getAppSettingsInStore() {
       this.settingsSelected = { ...this.getApplicationSettings }
     },
@@ -90,7 +93,7 @@ export default {
       this.saveSettingsToStore(this.settingsSelected)
     },
     saveSettingsToStore(settings) {
-      this.$store.dispatch('setApplicationSettings', settings)
+      this.setApplicationSettings(settings)
     },
     /**
      * @description Save the user preferred settings to vue store and LRS or local store:
@@ -147,7 +150,7 @@ export default {
         }, 1000)
       } else {
         this.$set(this.getUserInteraction, 'userSettings', appSettings) // adding the usersettings to user Interaction to save to save to the local DB
-        this.$store.dispatch('updateUserMetaData', this.getUserInteraction) //force update of the userInteraction to ensure saving of settings in local DB
+        this.updateUserMetaData(this.getUserInteraction) //force update of the userInteraction to ensure saving of settings in local DB
       }
 
       //update sidebar data