fcad-core-dragon 2.1.0 → 2.1.2

package/src/components/AppCompInputDropdownNx.vue

@@ -1,299 +1,302 @@
-<!-- About this Component--
- * Renders a SELECT input to display choices of response for the Quiz component
- * Related Quiz to question: DROPDOWN
- * Receives the a data object defined by user
- * Used by AppCompQuiz
- * Uses useQuiz composable
--->
-<template>
-  <div v-if="inputData.length > 0" :id="id" class="input-box">
-    <fieldset :aria-label="fieldsetLabel">
-      <div
-        v-for="(singleDropdown, index) in inputData"
-        :key="singleDropdown.id"
-        class="dropdown-container"
-        :class="`dropdownlist-${singleDropdown.id}`"
-      >
-        <label
-          :id="`label_dropdown_${id}_${singleDropdown.id}`"
-          :for="`dropdown_${id}_${singleDropdown.id}`"
-          v-html="singleDropdown.ennonce"
-        ></label>
-
-        <div class="cnt-input" :class="`${retro[index] ? retro[index] : ''}`">
-          <v-select
-            :id="`dropdown_${id}_${singleDropdown.id}`"
-            :model-value="inputsValue[singleDropdown.id]"
-            item-title="text"
-            :item-props="true"
-            :items="getItemOptions(index)"
-            :open-text="`${$t('message.dropdown_list')}_${singleDropdown.ennonce}`"
-            :aria-describedby="`${id}_${singleDropdown.id}-msg-erreur`"
-            @update:model-value="onSelectUpdate($event, index)"
-          ></v-select>
-
-          <span
-            :id="`${id}_${singleDropdown.id}-msg-erreur`"
-            :key="`msg_chx_${id}_${singleDropdown.id}`"
-            class="sr-only"
-          >
-            {{ messageAccessibility[index] }}
-          </span>
-        </div>
-      </div>
-    </fieldset>
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-import { validateObjType } from '../shared/validators'
-export default {
-  name: 'AppCompInputDropdown',
-  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    solution: {
-      type: Array,
-      default: () => []
-    },
-    id: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['update:modelValue', 'enable-submit'],
-  setup(props) {
-    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
-
-    return { retroType, addRetroStyle, resetRetroStyle }
-  },
-  data() {
-    return {
-      retro: [],
-      messageAccessibility: [],
-      result: [],
-      oldValue: null
-    }
-  },
-  computed: {
-    fieldsetLabel() {
-      let label
-      if (this.inputData.length === 1) {
-        label = this.$t('quizState.dropdownFieldsetSingle')
-      } else {
-        label = `${this.$t('quizState.dropdownFieldsetMulti1')} ${this.inputData.length} ${this.$t('quizState.dropdownFieldsetMulti2')}`
-      }
-      return label
-    },
-    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
-    inputsValue: {
-      get() {
-        return this.modelValue
-      },
-      set(newValue) {
-        this.$emit('update:modelValue', [...newValue])
-      }
-    },
-    mappedOptions() {
-      if (this.inputData.length === 0) return []
-
-      return this.inputData.map((op) => {
-        const key = Object.keys(op)[0]
-        const values = Object.values(op)[2]
-
-        const newValues = [
-          {
-            value: null,
-            disabled: true,
-            selected: true,
-            text: this.$t('message.first_option_dropdown')
-            // text: 'choisir une option'
-          },
-          ...values.map((el) => ({
-            value: el,
-            text: el,
-            selected: false
-          }))
-        ]
-
-        return {
-          [key]: newValues
-        }
-      })
-    }
-  },
-  watch: {
-    inputsValue: {
-      handler() {
-        if (this.$el && this.$el.id !== this.id) return
-        const filled = this.modelValue.filter((val) => val && val.trim() !== '')
-
-        this.$emit('enable-submit', filled.length === this.inputData.length)
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  created() {
-    if (import.meta.env.DEV) {
-      let errors = this.validateInputData()
-      if (errors && errors.errorList.length) {
-        return this.$bus.$emit('input-error', { e: this.id, errors })
-      }
-    }
-  },
-  mounted() {},
-
-  methods: {
-    validateInputData() {
-      let errors = null
-      let stringType = ['id', 'ennonce']
-      let arrayType = ['option']
-      let e = null
-
-      if (!this.inputData.length) return errors
-      for (let i = 0; i < this.inputData.length; i++) {
-        e = validateObjType(
-          this.inputData[i],
-          { stringType, arrayType },
-          null,
-          `liste déroulante #${i + 1}`
-        )
-
-        if (e.errorInConsole.length && e.errorList.length) {
-          errors.errorInConsole.push(e.errorInConsole[0])
-          errors.errorList.push(e.errorList[0])
-        }
-      }
-
-      return errors
-    },
-    /**
-     * @description Method to retrive the options of each selectable input in the mappedOption Object
-     * @param {Number } index - number representing the index of the item in the array of inputElements
-     * @Return a collection of item representing the options for a the selectables
-     */
-    getItemOptions(index) {
-      return Object.values(this.mappedOptions[index])[0]
-    },
-    /**
-     * @description Method to force update of this.inputsValue.
-     * this force the old value and new value of the input to be tracked by VUE.
-     * @param newValue, the new value of the input
-     * @param index index of the selected element
-     */
-
-    onSelectUpdate(newValue, index) {
-      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
-      this.resetRetroStyle([this.retro, this.messageAccessibility])
-      const updated = [...this.inputsValue] //create new array from inputsValue
-      updated[index] = newValue
-      this.inputsValue = updated //trigger vue reactivity for inputsValue
-    },
-    /**
-     * @description Component validation method to validate the user input against the solution
-     * can handle logic of Css style to apply (correct/wrong Answer) and return the result
-     * @return {Object} result
-     */
-    validateAnswer() {
-      let mappedResults
-      if (this.solution != null) {
-        mappedResults = this.inputsValue.map((a, i) => {
-          const s = this.solution[i]
-          return { selected: a, correct: s == a }
-        })
-      } else {
-        mappedResults = this.inputsValue.map((a, i) => {
-          return { selected: a, correct: false }
-        })
-      }
-
-      let { classRetro, mesA11y } = this.addRetroStyle(
-        this.solution,
-        mappedResults,
-        this.inputData.length
-      )
-
-      this.retro = [...classRetro]
-      this.messageAccessibility = [...mesA11y]
-
-      this.retro = classRetro
-      this.messageAccessibility = mesA11y
-
-      this.result = mappedResults.filter((a) => a.selected)
-      let tr = this.retroType(this.solution, this.result)
-
-      let cAns
-      if (this.solution != null) cAns = this.computeResult(this.result)
-      else cAns = false
-
-      return {
-        userAnswer: this.result,
-        correctAnswer: cAns,
-        retroType: tr
-      }
-    },
-    computeResult(result) {
-      const res = result.filter((el) => el.correct)
-      return res.length == this.solution.length
-    }
-  }
-}
-</script>
-<style lang="scss">
-.dropdown-container {
-  position: relative;
-}
-
-fieldset {
-  border: inherit;
-}
-
-div.texteatrou {
-  display: inline !important;
-  .cnt-input {
-    display: inline;
-
-    .v-input {
-      display: inline-block !important;
-
-      .v-input__control,
-      .v-field {
-        width: 240px !important;
-        grid-area: inherit !important;
-
-        .v-field__field {
-          height: 25px !important;
-          padding: 0 !important;
-          min-height: inherit !important;
-
-          .v-field__input {
-            padding-top: 0 !important;
-            padding-bottom: 0 !important;
-            min-height: inherit !important;
-
-            .v-select__selection {
-              min-height: inherit !important;
-            }
-          }
-        }
-
-        .v-field__append-inner {
-          margin-right: 6px;
-        }
-      }
-
-      .v-input__details {
-        display: none;
-      }
-    }
-  }
-}
-</style>
+<!-- About this Component--
+ * Renders a SELECT input to display choices of response for the Quiz component
+ * Related Quiz to question: DROPDOWN
+ * Receives the a data object defined by user
+ * Used by AppCompQuiz
+ * Uses useQuiz composable
+-->
+<template>
+  <div v-if="inputData.length > 0" :id="id" class="input-box">
+    <fieldset :aria-label="fieldsetLabel">
+      <div
+        v-for="(singleDropdown, index) in inputData"
+        :key="singleDropdown.id"
+        class="dropdown-container"
+        :class="`dropdownlist-${singleDropdown.id}`"
+      >
+        <label
+          :id="`label_dropdown_${id}_${singleDropdown.id}`"
+          :for="`dropdown_${id}_${singleDropdown.id}`"
+          v-html="singleDropdown.ennonce"
+        ></label>
+
+        <div class="cnt-input" :class="`${retro[index] ? retro[index] : ''}`">
+          <v-select
+            :id="`dropdown_${id}_${singleDropdown.id}`"
+            :model-value="inputsValue[singleDropdown.id]"
+            item-title="text"
+            :item-props="true"
+            :items="getItemOptions(index)"
+            :open-text="`${$t('message.dropdown_list')}_${singleDropdown.ennonce}`"
+            :aria-describedby="`${id}_${singleDropdown.id}-msg-erreur`"
+            @update:model-value="onSelectUpdate($event, index)"
+          ></v-select>
+
+          <span
+            :id="`${id}_${singleDropdown.id}-msg-erreur`"
+            :key="`msg_chx_${id}_${singleDropdown.id}`"
+            class="sr-only"
+          >
+            {{ messageAccessibility[index] }}
+          </span>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { validateObjType } from '../shared/validators'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompInputDropdown',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue', 'enable-submit'],
+  setup(props) {
+    const { t } = useI18n()
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+
+    return { retroType, addRetroStyle, resetRetroStyle, t }
+  },
+  data() {
+    return {
+      retro: [],
+      messageAccessibility: [],
+      result: [],
+      oldValue: null
+    }
+  },
+  computed: {
+    fieldsetLabel() {
+      let label
+      if (this.inputData.length === 1) {
+        label = this.$t('quizState.dropdownFieldsetSingle')
+      } else {
+        label = `${this.$t('quizState.dropdownFieldsetMulti1')} ${this.inputData.length} ${this.$t('quizState.dropdownFieldsetMulti2')}`
+      }
+      return label
+    },
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+    inputsValue: {
+      get() {
+        return this.modelValue
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', [...newValue])
+      }
+    },
+    mappedOptions() {
+      if (this.inputData.length === 0) return []
+
+      return this.inputData.map((op) => {
+        const key = Object.keys(op)[0]
+        const values = Object.values(op)[2]
+
+        const newValues = [
+          {
+            value: null,
+            disabled: true,
+            selected: true,
+            text: this.$t('message.first_option_dropdown')
+            // text: 'choisir une option'
+          },
+          ...values.map((el) => ({
+            value: el,
+            text: el,
+            selected: false
+          }))
+        ]
+
+        return {
+          [key]: newValues
+        }
+      })
+    }
+  },
+  watch: {
+    inputsValue: {
+      handler() {
+        if (this.$el && this.$el.id !== this.id) return
+        const filled = this.modelValue.filter((val) => val && val.trim() !== '')
+
+        this.$emit('enable-submit', filled.length === this.inputData.length)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (import.meta.env.DEV) {
+      let errors = this.validateInputData()
+      if (errors && errors.errorList.length) {
+        return this.$bus.$emit('input-error', { e: this.id, errors })
+      }
+    }
+  },
+  mounted() {},
+
+  methods: {
+    validateInputData() {
+      let errors = null
+      let stringType = ['id', 'ennonce']
+      let arrayType = ['option']
+      let e = null
+
+      if (!this.inputData.length) return errors
+      for (let i = 0; i < this.inputData.length; i++) {
+        e = validateObjType(
+          this.inputData[i],
+          { stringType, arrayType },
+          null,
+          `liste déroulante #${i + 1}`
+        )
+
+        if (e.errorInConsole.length && e.errorList.length) {
+          errors.errorInConsole.push(e.errorInConsole[0])
+          errors.errorList.push(e.errorList[0])
+        }
+      }
+
+      return errors
+    },
+    /**
+     * @description Method to retrive the options of each selectable input in the mappedOption Object
+     * @param {Number } index - number representing the index of the item in the array of inputElements
+     * @Return a collection of item representing the options for a the selectables
+     */
+    getItemOptions(index) {
+      return Object.values(this.mappedOptions[index])[0]
+    },
+    /**
+     * @description Method to force update of this.inputsValue.
+     * this force the old value and new value of the input to be tracked by VUE.
+     * @param newValue, the new value of the input
+     * @param index index of the selected element
+     */
+
+    onSelectUpdate(newValue, index) {
+      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+      const updated = [...this.inputsValue] //create new array from inputsValue
+      updated[index] = newValue
+      this.inputsValue = updated //trigger vue reactivity for inputsValue
+    },
+    /**
+     * @description Component validation method to validate the user input against the solution
+     * can handle logic of Css style to apply (correct/wrong Answer) and return the result
+     * @return {Object} result
+     */
+    validateAnswer() {
+      let mappedResults
+      if (this.solution != null) {
+        mappedResults = this.inputsValue.map((a, i) => {
+          const s = this.solution[i]
+          return { selected: a, correct: s == a }
+        })
+      } else {
+        mappedResults = this.inputsValue.map((a, i) => {
+          return { selected: a, correct: false }
+        })
+      }
+
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        mappedResults,
+        this.inputData.length
+      )
+
+      this.retro = [...classRetro]
+      this.messageAccessibility = [...mesA11y]
+
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+
+      this.result = mappedResults.filter((a) => a.selected)
+      let tr = this.retroType(this.solution, this.result)
+
+      let cAns
+      if (this.solution != null) cAns = this.computeResult(this.result)
+      else cAns = false
+
+      return {
+        userAnswer: this.result,
+        correctAnswer: cAns,
+        retroType: tr
+      }
+    },
+    computeResult(result) {
+      const res = result.filter((el) => el.correct)
+      return res.length == this.solution.length
+    }
+  }
+}
+</script>
+<style lang="scss">
+.dropdown-container {
+  position: relative;
+}
+
+fieldset {
+  border: inherit;
+}
+
+div.texteatrou {
+  display: inline !important;
+  .cnt-input {
+    display: inline;
+
+    .v-input {
+      display: inline-block !important;
+
+      .v-input__control,
+      .v-field {
+        width: 240px !important;
+        grid-area: inherit !important;
+
+        .v-field__field {
+          height: 25px !important;
+          padding: 0 !important;
+          min-height: inherit !important;
+
+          .v-field__input {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+            min-height: inherit !important;
+
+            .v-select__selection {
+              min-height: inherit !important;
+            }
+          }
+        }
+
+        .v-field__append-inner {
+          margin-right: 6px;
+        }
+      }
+
+      .v-input__details {
+        display: none;
+      }
+    }
+  }
+}
+</style>