fcad-core-dragon 2.1.1 → 2.2.0-beta.1

package/src/components/AppCompInputCheckBoxNx.vue

@@ -1,323 +1,326 @@
-<!-- About this Component--
- * Renders a checkboxe input type  for the Quiz component
- * Related Quiz to question: REPONSE_MULTIPLE
- * Receives the a data object defined by user
- * Used by AppCompQuiz
--->
-<template>
-  <div :id="id" class="input-box">
-    <fieldset :aria-label="fieldsetLabel">
-      <template
-        v-for="(choixReponse, index) in inputData"
-        :Key="`div_chx_${id}_${choixReponse.id}`"
-      >
-        <div class="box-checkbox">
-          <label
-            :key="`lbl_chx_${id}-${choixReponse.id}`"
-            :for="`boxchx_${id}_${choixReponse.id}`"
-            class="checkbox-label"
-            :class="[
-              {
-                answerSlct: isSelected(choixReponse.value)
-              },
-              `${retro[index] || ''}`
-            ]"
-          >
-            <input
-              :id="`boxchx_${id}_${choixReponse.id}`"
-              :key="`boxchx_${id}_${id}-${choixReponse.id}`"
-              :checked="isSelected(choixReponse.value)"
-              type="checkbox"
-              :name="`btn-checkbox-${id}`"
-              :aria-labelledby="`span_${id}_${choixReponse.id}`"
-              :aria-describedby="`${id}_${choixReponse.id}-msg-erreur`"
-              @change="onSelectUpdate($event, choixReponse.value)"
-            />
-            <span
-              :id="`span_${id}_${choixReponse.id}`"
-              class="checkbox-contenu"
-              v-html="choixReponse.value"
-            ></span>
-            <span
-              :id="`${id}_${choixReponse.id}-msg-erreur`"
-              :key="`msg_chx_${id}_${choixReponse.id}`"
-              class="sr-only"
-            >
-              {{ messageAccessibility[index] }}
-            </span>
-          </label>
-        </div>
-      </template>
-    </fieldset>
-  </div>
-</template>
-<script>
-import { useQuiz } from '../composables/useQuiz'
-import { validateObjType } from '../shared/validators'
-export default {
-  name: 'AppCompInputCheckBoxNx',
-  /* 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() {
-    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
-
-    return { retroType, addRetroStyle, resetRetroStyle }
-  },
-  data() {
-    return {
-      quizInputDataValue: [],
-      result: null,
-      retro: [],
-      messageAccessibility: [],
-      selectedItems: []
-    }
-  },
-  computed: {
-    fieldsetLabel() {
-      return `${this.$t('quizState.checkboxFieldset')} ${this.inputData.length} ${this.$t('quizState.options')}`
-    },
-    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
-    inputsValue: {
-      get() {
-        return this.modelValue
-      },
-
-      set(newValue) {
-        if (
-          (this.$el && this.$el.id !== this.id) ||
-          newValue.constructor !== Array
-        )
-          return
-
-        this.$emit('update:modelValue', newValue)
-      }
-    },
-    /**
-     * internal reactive value that map the options to add SELECTED attribute on each option
-     * this attribute value can be changed when user select the option
-     */
-    mappedOptions() {
-      const options = this.inputData.map((op) => {
-        const selectedItem = this.modelValue.find((i) => i.id === op.id)
-        return {
-          ...op,
-          selected: selectedItem ? selectedItem.selected : false
-        }
-      })
-
-      return options
-    }
-  },
-  watch: {
-    inputsValue: {
-      handler(newVal) {
-        this.$emit('enable-submit', newVal.length > 0)
-      },
-      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 })
-    }
-
-    this.quizInputDataValue = this.inputData
-  },
-  mounted() {},
-
-  methods: {
-    /**
-     * @description validate the raw data received by the component to render is view
-     * @returns {Object} errors - errorList: to display in view and errorConsole, to be displayed in console
-     */
-    validateInputData() {
-      let errors = null //array for errors dectected
-      let stringType = ['id', 'value']
-
-      if (!this.inputData.length) return errors
-      for (let i = 0; i < this.inputData.length; i++) {
-        errors = validateObjType(
-          this.inputData[i],
-          { stringType },
-          null,
-          `choix_reponse #${i + 1}`
-        )
-        const { errorList, errorInConsole } = errors
-
-        if (errorList.length || errorInConsole.length) return errors
-      }
-
-      return errors
-    },
-
-    /**
-     * @description inicate wether the element is checked or not.
-     * Element is selected if in the modelValue
-     * @param value value of tje element to be checked
-     */
-    isSelected(value) {
-      const existing = this.modelValue.includes(value)
-      return existing
-    },
-
-    /**
-     * @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(event, value) {
-      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
-
-      const isChecked = event.target.checked
-      this.resetRetroStyle([this.retro, this.messageAccessibility])
-      let updatedValue = [...this.modelValue]
-
-      if (isChecked) {
-        const existing = updatedValue.includes(value)
-        if (!existing) updatedValue.push(value)
-      } else updatedValue = updatedValue.filter((v) => v !== value)
-
-      this.$emit('update:modelValue', updatedValue)
-    },
-    /**
-     * @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() {
-      // Validate the user answer
-      //Created a custom validated object for inputData
-      let mappedResults
-      if (this.solution != null) {
-        mappedResults = this.inputData.map(
-          (a) =>
-            (a = {
-              ...a,
-              correct: this.solution.includes(a.id)
-            })
-        )
-      } else {
-        mappedResults = this.inputData.map(
-          (a) =>
-            (a = {
-              ...a,
-              correct: null
-            })
-        )
-      }
-
-      let { classRetro, mesA11y } = this.addRetroStyle(
-        this.solution,
-        mappedResults,
-        this.inputData.length
-      )
-
-      this.retro = classRetro
-      this.messageAccessibility = mesA11y
-
-      //filer mapped to return a customized object of the user selection
-      this.result = mappedResults
-        .filter((a) => this.inputsValue.includes(a.value))
-        .map((a) => {
-          const { id, value, correct } = a
-          return { id, selected: value, correct }
-        })
-
-      let retro = this.retroType(this.solution, this.result)
-
-      let cAns
-      if (this.solution != null) cAns = this.computeResult(this.result)
-      else cAns = false
-
-      //Object to return validation to parent
-      return {
-        userAnswer: this.result,
-        correctAnswer: cAns,
-        retroType: retro
-      }
-    },
-    /**
-     * @description - compute the correct elements in user response
-     * compare with  the solution and return wether user succeeded or failed
-     * @param {Object} result - user responses
-     * @retuns boolean
-     */
-    computeResult(result) {
-      const res = this.result.filter((el) => el.correct)
-
-      return (
-        res.length == this.solution.length &&
-        this.solution.length == this.result.length
-      )
-    }
-  }
-}
-</script>
-<style lang="scss">
-fieldset {
-  border: inherit;
-}
-
-.custom-control-input:focus ~ .custom-control-label::before {
-  border: inherit;
-}
-
-.custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: inherit;
-  -webkit-box-shadow: inherit;
-}
-
-fieldset {
-  border: inherit;
-}
-
-.custom-checkbox {
-  width: 100%;
-  height: 100%;
-  padding-left: 0;
-
-  input {
-    width: 100%;
-    height: 100%;
-  }
-
-  label {
-    width: 100%;
-    height: 100%;
-
-    &:after,
-    &:before {
-      border: inherit;
-      top: 0px;
-      left: 0px;
-      height: 0;
-      width: 0;
-      background-color: inherit;
-      border: inherit;
-    }
-  }
-}
-</style>
+<!-- About this Component--
+ * Renders a checkboxe input type  for the Quiz component
+ * Related Quiz to question: REPONSE_MULTIPLE
+ * Receives the a data object defined by user
+ * Used by AppCompQuiz
+-->
+<template>
+  <div :id="id" class="input-box">
+    <fieldset :aria-label="fieldsetLabel">
+      <template
+        v-for="(choixReponse, index) in inputData"
+        :Key="`div_chx_${id}_${choixReponse.id}`"
+      >
+        <div class="box-checkbox">
+          <label
+            :key="`lbl_chx_${id}-${choixReponse.id}`"
+            :for="`boxchx_${id}_${choixReponse.id}`"
+            class="checkbox-label"
+            :class="[
+              {
+                answerSlct: isSelected(choixReponse.value)
+              },
+              `${retro[index] || ''}`
+            ]"
+          >
+            <input
+              :id="`boxchx_${id}_${choixReponse.id}`"
+              :key="`boxchx_${id}_${id}-${choixReponse.id}`"
+              :checked="isSelected(choixReponse.value)"
+              type="checkbox"
+              :name="`btn-checkbox-${id}`"
+              :aria-labelledby="`span_${id}_${choixReponse.id}`"
+              :aria-describedby="`${id}_${choixReponse.id}-msg-erreur`"
+              @change="onSelectUpdate($event, choixReponse.value)"
+            />
+            <span
+              :id="`span_${id}_${choixReponse.id}`"
+              class="checkbox-contenu"
+              v-html="choixReponse.value"
+            ></span>
+            <span
+              :id="`${id}_${choixReponse.id}-msg-erreur`"
+              :key="`msg_chx_${id}_${choixReponse.id}`"
+              class="sr-only"
+            >
+              {{ messageAccessibility[index] }}
+            </span>
+          </label>
+        </div>
+      </template>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { validateObjType } from '../shared/validators'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompInputCheckBoxNx',
+  /* 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() {
+    const { t } = useI18n()
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+    return { retroType, addRetroStyle, resetRetroStyle, t }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      result: null,
+      retro: [],
+      messageAccessibility: [],
+      selectedItems: []
+    }
+  },
+  computed: {
+    fieldsetLabel() {
+      return `${this.$t('quizState.checkboxFieldset')} ${this.inputData.length} ${this.$t('quizState.options')}`
+    },
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+    inputsValue: {
+      get() {
+        return this.modelValue
+      },
+
+      set(newValue) {
+        if (
+          (this.$el && this.$el.id !== this.id) ||
+          newValue.constructor !== Array
+        )
+          return
+
+        this.$emit('update:modelValue', newValue)
+      }
+    },
+    /**
+     * internal reactive value that map the options to add SELECTED attribute on each option
+     * this attribute value can be changed when user select the option
+     */
+    mappedOptions() {
+      const options = this.inputData.map((op) => {
+        const selectedItem = this.modelValue.find((i) => i.id === op.id)
+        return {
+          ...op,
+          selected: selectedItem ? selectedItem.selected : false
+        }
+      })
+
+      return options
+    }
+  },
+  watch: {
+    inputsValue: {
+      handler(newVal) {
+        this.$emit('enable-submit', newVal.length > 0)
+      },
+      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 })
+    }
+
+    this.quizInputDataValue = this.inputData
+  },
+  mounted() {},
+
+  methods: {
+    /**
+     * @description validate the raw data received by the component to render is view
+     * @returns {Object} errors - errorList: to display in view and errorConsole, to be displayed in console
+     */
+    validateInputData() {
+      let errors = null //array for errors dectected
+      let stringType = ['id', 'value']
+
+      if (!this.inputData.length) return errors
+      for (let i = 0; i < this.inputData.length; i++) {
+        errors = validateObjType(
+          this.inputData[i],
+          { stringType },
+          null,
+          `choix_reponse #${i + 1}`
+        )
+        const { errorList, errorInConsole } = errors
+
+        if (!errorList || !errorInConsole) return null
+        return errors
+      }
+
+      return errors
+    },
+
+    /**
+     * @description inicate wether the element is checked or not.
+     * Element is selected if in the modelValue
+     * @param value value of tje element to be checked
+     */
+    isSelected(value) {
+      const existing = this.modelValue.includes(value)
+      return existing
+    },
+
+    /**
+     * @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(event, value) {
+      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
+
+      const isChecked = event.target.checked
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+      let updatedValue = [...this.modelValue]
+
+      if (isChecked) {
+        const existing = updatedValue.includes(value)
+        if (!existing) updatedValue.push(value)
+      } else updatedValue = updatedValue.filter((v) => v !== value)
+
+      this.$emit('update:modelValue', updatedValue)
+    },
+    /**
+     * @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() {
+      // Validate the user answer
+      //Created a custom validated object for inputData
+      let mappedResults
+      if (this.solution != null) {
+        mappedResults = this.inputData.map(
+          (a) =>
+            (a = {
+              ...a,
+              correct: this.solution.includes(a.id)
+            })
+        )
+      } else {
+        mappedResults = this.inputData.map(
+          (a) =>
+            (a = {
+              ...a,
+              correct: null
+            })
+        )
+      }
+
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        mappedResults,
+        this.inputData.length
+      )
+
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+
+      //filer mapped to return a customized object of the user selection
+      this.result = mappedResults
+        .filter((a) => this.inputsValue.includes(a.value))
+        .map((a) => {
+          const { id, value, correct } = a
+          return { id, selected: value, correct }
+        })
+
+      let retro = this.retroType(this.solution, this.result)
+
+      let cAns
+      if (this.solution != null) cAns = this.computeResult(this.result)
+      else cAns = false
+
+      //Object to return validation to parent
+      return {
+        userAnswer: this.result,
+        correctAnswer: cAns,
+        retroType: retro
+      }
+    },
+    /**
+     * @description - compute the correct elements in user response
+     * compare with  the solution and return wether user succeeded or failed
+     * @param {Object} result - user responses
+     * @retuns boolean
+     */
+    computeResult(result) {
+      const res = this.result.filter((el) => el.correct)
+
+      return (
+        res.length == this.solution.length &&
+        this.solution.length == this.result.length
+      )
+    }
+  }
+}
+</script>
+<style lang="scss">
+fieldset {
+  border: inherit;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  border: inherit;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: inherit;
+  -webkit-box-shadow: inherit;
+}
+
+fieldset {
+  border: inherit;
+}
+
+.custom-checkbox {
+  width: 100%;
+  height: 100%;
+  padding-left: 0;
+
+  input {
+    width: 100%;
+    height: 100%;
+  }
+
+  label {
+    width: 100%;
+    height: 100%;
+
+    &:after,
+    &:before {
+      border: inherit;
+      top: 0px;
+      left: 0px;
+      height: 0;
+      width: 0;
+      background-color: inherit;
+      border: inherit;
+    }
+  }
+}
+</style>