From 66bc6a69e918ced807ec9d300360cb5cc11b540e Mon Sep 17 00:00:00 2001
From: VIAUD Nathan <nathan.viaud@inria.fr>
Date: Tue, 17 Oct 2023 09:33:46 +0200
Subject: [PATCH 1/4] feat(label): score input

---
 src/features/forms/components/inputs/ScoreInput.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/features/forms/components/inputs/ScoreInput.vue b/src/features/forms/components/inputs/ScoreInput.vue
index 19a32449..4aa2f02b 100644
--- a/src/features/forms/components/inputs/ScoreInput.vue
+++ b/src/features/forms/components/inputs/ScoreInput.vue
@@ -47,10 +47,11 @@ function onBlur() {
 </script>
 
 <template>
-    <label for="input-score">{{ label }}</label>
-    <div id="input-score" class="input-score">
+    <label :for="label">{{ label }}</label>
+    <div class="input-score">
         <button @click="minus(inputValue)"><i class="icon-minus-circle"></i></button>
         <input
+            :id="label"
             type="number"
             :value="inputValue"
             @input="emit('input', ($event.target as HTMLInputElement).value)"
-- 
GitLab


From c986c73e28313a44e2c4328647c674b05c7ca9b3 Mon Sep 17 00:00:00 2001
From: VIAUD Nathan <nathan.viaud@inria.fr>
Date: Tue, 17 Oct 2023 09:33:56 +0200
Subject: [PATCH 2/4] feat(label): HTML input

---
 src/features/forms/components/inputs/HtmlInput.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/features/forms/components/inputs/HtmlInput.vue b/src/features/forms/components/inputs/HtmlInput.vue
index 938ae2e3..7cfd4340 100644
--- a/src/features/forms/components/inputs/HtmlInput.vue
+++ b/src/features/forms/components/inputs/HtmlInput.vue
@@ -90,11 +90,20 @@ function onBlur() {
     if(startValue !== content.value) emit('saveGivenState', savedState);
 }
 
+//? Didn't find a way to link the label to the editor because it uses a contenteditable p
+function focusEditor() {
+    const editor = getTinymce().activeEditor;
+    editor.focus();
+}
+
 </script>
 
 <template>
-    <label for="editor">{{ label }}</label>
-    <Editor 
+<!--    <label for="editor">{{ label }}</label>-->
+    <label @click="focusEditor">Mon label à moi</label>
+    <Editor
+        aria-labelledby="editor"
+        id="editor"
         ref="editor"
         v-model="content"
         api-key="no-api-key"
-- 
GitLab


From 9273705c44abc441ff68864caf92f4477c98a08b Mon Sep 17 00:00:00 2001
From: VIAUD Nathan <nathan.viaud@inria.fr>
Date: Tue, 17 Oct 2023 09:34:33 +0200
Subject: [PATCH 3/4] feat(label): HTML input

---
 src/features/forms/components/inputs/HtmlInput.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/features/forms/components/inputs/HtmlInput.vue b/src/features/forms/components/inputs/HtmlInput.vue
index 7cfd4340..8edfacfd 100644
--- a/src/features/forms/components/inputs/HtmlInput.vue
+++ b/src/features/forms/components/inputs/HtmlInput.vue
@@ -99,11 +99,8 @@ function focusEditor() {
 </script>
 
 <template>
-<!--    <label for="editor">{{ label }}</label>-->
-    <label @click="focusEditor">Mon label à moi</label>
+    <label @click="focusEditor">{{ label }}</label>
     <Editor
-        aria-labelledby="editor"
-        id="editor"
         ref="editor"
         v-model="content"
         api-key="no-api-key"
-- 
GitLab


From 5f321fe946b67ec2e809967d9e9e121dd351b7d8 Mon Sep 17 00:00:00 2001
From: VIAUD Nathan <nathan.viaud@inria.fr>
Date: Tue, 17 Oct 2023 10:56:35 +0200
Subject: [PATCH 4/4] feat(label): changing labels attribute for

---
 .../forms/components/inputs/FileInput.vue      |  5 +++--
 .../forms/components/inputs/GenericInput.vue   | 18 ++++++++++++++++--
 .../forms/components/inputs/HtmlInput.vue      |  1 +
 .../forms/components/inputs/RepeatInput.vue    |  5 +++--
 .../forms/components/inputs/ScoreInput.vue     |  5 +++--
 .../forms/components/inputs/TextAreaInput.vue  |  5 +++--
 .../forms/components/inputs/TextInput.vue      |  5 +++--
 .../inputs/card/components/CheckBoxInput.vue   |  5 +++--
 .../inputs/card/components/RadioInput.vue      | 16 ++++++++--------
 .../inputs/card/components/SelectInput.vue     |  5 +++--
 10 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/features/forms/components/inputs/FileInput.vue b/src/features/forms/components/inputs/FileInput.vue
index 8bf85a34..fc2b234e 100644
--- a/src/features/forms/components/inputs/FileInput.vue
+++ b/src/features/forms/components/inputs/FileInput.vue
@@ -4,6 +4,7 @@ import { graphService } from '@/src/shared/services';
 import { getCurrentState } from '@/src/shared/services/undoRedo.service';
 
 const props = defineProps<{
+    id: string;
     inputValue: string;
     label: string;
     accept: string;
@@ -68,7 +69,7 @@ let savedState = '';
 </script>
 
 <template>
-    <label class="input-label" :for="label">{{ label }}</label>
+    <label class="input-label" :for="id">{{ label }}</label>
     <div v-show="url" class="show-input">
         <div class="input-file">
             <input ref="fileInput" class="file" type="file" :accept="accept" @change="changeImage">
@@ -82,7 +83,7 @@ let savedState = '';
         </div>
     </div>
     <div v-if="!url">
-        <button :id="label" class="btn btn-form" @click="openFile">
+        <button :id="id" class="btn btn-form" @click="openFile">
             <i class="icon-plus"></i>
             {{ placeholder }}
         </button>
diff --git a/src/features/forms/components/inputs/GenericInput.vue b/src/features/forms/components/inputs/GenericInput.vue
index 2d7f0d26..eddc770e 100644
--- a/src/features/forms/components/inputs/GenericInput.vue
+++ b/src/features/forms/components/inputs/GenericInput.vue
@@ -14,8 +14,9 @@ import BadgesInput from './badges/BadgesInput.vue';
 import IconPicker from './badges/components/IconPicker.vue';
 import ConditionInput from './badges/components/ConditionInput.vue';
 import { Input, RepeatInputEvent } from '@/src/shared/interfaces';
+import { computed } from 'vue';
 
-defineProps<{
+const props = defineProps<{
     input: Input;
     inputValue: string | boolean | string[];
     icon?: string;
@@ -31,11 +32,16 @@ const emit = defineEmits<{
     (e: 'saveGivenState', state: string): void;
 }>();
 
+const inputId = computed(() => {
+    return props.pos !== null && props.pos !== undefined ? `${props.input.id}-${props.pos}` : props.input.id;
+});
+
 </script>
 
 <template>
     <TextInput
         v-if="input.type === 'text'"
+        :id="inputId"
         :label="input.label"
         :placeholder="input.placeholder"
         :input-value="inputValue as string"
@@ -45,6 +51,7 @@ const emit = defineEmits<{
     />
     <HtmlInput
         v-if="input.type === 'html'"
+        :id="inputId"
         :label="input.label"
         :placeholder="input.placeholder"
         :input-value="inputValue as string"
@@ -54,6 +61,7 @@ const emit = defineEmits<{
     />
     <TextAreaInput 
         v-if="input.type === 'textarea'"
+        :id="inputId"
         :label="input.label"
         :placeholder="input.placeholder"
         :input-value="inputValue as string"
@@ -61,8 +69,9 @@ const emit = defineEmits<{
         @input="emit('input', $event)"
         @save-given-state="emit('saveGivenState', $event)"
     />
-    <FileInput 
+    <FileInput
         v-if="input.type === 'file'"
+        :id="inputId"
         :label="input.label"
         :accept="input.accept"
         :input-value="inputValue as string"
@@ -72,6 +81,7 @@ const emit = defineEmits<{
     />
     <ScoreInput
         v-if="input.type === 'score'"
+        :id="inputId"
         :label="input.label"
         :input-value="inputValue as string"
         @input="emit('input', $event)"
@@ -79,6 +89,7 @@ const emit = defineEmits<{
     />
     <CheckBoxInput
         v-if="input.type === 'checkbox'"
+        :id="inputId"
         :label="input.label"
         :input-value="inputValue as boolean"
         :pos="pos"
@@ -87,6 +98,7 @@ const emit = defineEmits<{
     />
     <RadioInput
         v-if="input.type === 'radio-group'"
+        :id="inputId"
         :label="input.label"
         :input-value="inputValue as string"
         :pos="pos"
@@ -95,6 +107,7 @@ const emit = defineEmits<{
     />
     <SelectInput 
         v-if="input.type === 'select'"
+        :id="inputId"
         :label="input.label"
         :placeholder="input.placeholder"
         :input-value="inputValue as string"
@@ -105,6 +118,7 @@ const emit = defineEmits<{
     />
     <RepeatInput
         v-if="input.type === 'repeat'"
+        :id="inputId"
         :label="input.label"
         :placeholder="input.placeholder"
         :input-values="inputValue as string[]"
diff --git a/src/features/forms/components/inputs/HtmlInput.vue b/src/features/forms/components/inputs/HtmlInput.vue
index 8edfacfd..11e1aaea 100644
--- a/src/features/forms/components/inputs/HtmlInput.vue
+++ b/src/features/forms/components/inputs/HtmlInput.vue
@@ -6,6 +6,7 @@ import {graphService} from '@/src/shared/services';
 import { getCurrentState } from '@/src/shared/services/undoRedo.service';
 
 const props = defineProps<{
+    id: string;
     label: string;
     inputValue: string;
     placeholder?: string;
diff --git a/src/features/forms/components/inputs/RepeatInput.vue b/src/features/forms/components/inputs/RepeatInput.vue
index 06d8c82e..27d4a6d8 100644
--- a/src/features/forms/components/inputs/RepeatInput.vue
+++ b/src/features/forms/components/inputs/RepeatInput.vue
@@ -15,6 +15,7 @@ import { ref } from 'vue';
 import { generateContentId } from '@/src/shared/services/graph.service';
 
 const props = defineProps<{
+    id: string;
     inputs: Input[];
     label: string;
     inputValues: string[];
@@ -152,7 +153,7 @@ function dragOver(event: DragEvent) {
         <!--suppress VueUnrecognizedSlot -->
         <template #item="{ element, index }">
             <div :key="index" class="card draggable-card">
-                <div 
+                <div
                     class="card-header" 
                     :class="{ 'border-bottom': inputs.length >= 1, 'clickable': element.action }" 
                     @click="onClick(index, element.action)"
@@ -172,7 +173,7 @@ function dragOver(event: DragEvent) {
                     </div>
                 </div>
                 <div v-if="!element.action" class="card-content">
-                    <GenericInput 
+                    <GenericInput
                         v-for="(input, indexKey) in inputs"
                         :key="indexKey"
                         :input="input"
diff --git a/src/features/forms/components/inputs/ScoreInput.vue b/src/features/forms/components/inputs/ScoreInput.vue
index 4aa2f02b..ad4bf233 100644
--- a/src/features/forms/components/inputs/ScoreInput.vue
+++ b/src/features/forms/components/inputs/ScoreInput.vue
@@ -3,6 +3,7 @@ import { getCurrentState } from '@/src/shared/services/undoRedo.service';
 
 
 const props = defineProps<{
+    id: string;
     inputValue: string;
     label: string;
 }>();
@@ -47,11 +48,11 @@ function onBlur() {
 </script>
 
 <template>
-    <label :for="label">{{ label }}</label>
+    <label :for="id">{{ label }}</label>
     <div class="input-score">
         <button @click="minus(inputValue)"><i class="icon-minus-circle"></i></button>
         <input
-            :id="label"
+            :id="id"
             type="number"
             :value="inputValue"
             @input="emit('input', ($event.target as HTMLInputElement).value)"
diff --git a/src/features/forms/components/inputs/TextAreaInput.vue b/src/features/forms/components/inputs/TextAreaInput.vue
index 9a8f536e..225ae1d0 100644
--- a/src/features/forms/components/inputs/TextAreaInput.vue
+++ b/src/features/forms/components/inputs/TextAreaInput.vue
@@ -3,6 +3,7 @@ import { getCurrentState } from '@/src/shared/services/undoRedo.service';
 
 
 const props = defineProps<{
+    id: string
     label: string;
     placeholder: string;
     inputValue: string;
@@ -34,9 +35,9 @@ function onBlur() {
 </script>
 
 <template>
-    <label class="input-label" :for="label">{{ label }}</label>
+    <label class="input-label" :for="id">{{ label }}</label>
     <textarea
-        :id="label"
+        :id="id"
         class="input input-textarea"
         :class="{ 'input-card' : insideCard }"
         :placeholder="placeholder"
diff --git a/src/features/forms/components/inputs/TextInput.vue b/src/features/forms/components/inputs/TextInput.vue
index c9b67541..5d650b0f 100644
--- a/src/features/forms/components/inputs/TextInput.vue
+++ b/src/features/forms/components/inputs/TextInput.vue
@@ -2,6 +2,7 @@
 import { getCurrentState } from '@/src/shared/services/undoRedo.service';
 
 const props = defineProps<{
+    id: string;
     label: string;
     placeholder?: string;
     inputValue: string;
@@ -34,9 +35,9 @@ function onBlur() {
 </script>
 
 <template>
-    <label v-if="label !== ''" class="input-label" :for="label">{{ label }}</label>
+    <label v-if="label !== ''" class="input-label" :for="id">{{ label }}</label>
     <input
-        :id="label"
+        :id="id"
         class="input"
         :class="{ 'input-card' : insideCard }"
         type="text"
diff --git a/src/features/forms/components/inputs/card/components/CheckBoxInput.vue b/src/features/forms/components/inputs/card/components/CheckBoxInput.vue
index 8be574ca..86200a67 100644
--- a/src/features/forms/components/inputs/card/components/CheckBoxInput.vue
+++ b/src/features/forms/components/inputs/card/components/CheckBoxInput.vue
@@ -2,6 +2,7 @@
 import { getCurrentState } from '@/src/shared/services/undoRedo.service';
 
 defineProps<{
+    id: string;
     inputValue: boolean;
     label: string;
     pos: number;
@@ -27,13 +28,13 @@ function onChange(event: Event) {
 <template>
     <div class="checkbox">
         <input
-            :id="'Checkbox' + String(pos)"
+            :id="id"
             class="checkbox-input"
             type="checkbox"
             :checked="inputValue"
             @change="onChange"
         >
-        <label :for="'Checkbox' + String(pos)">{{ label }}</label>
+        <label :for="id">{{ label }}</label>
     </div>
 </template>
 
diff --git a/src/features/forms/components/inputs/card/components/RadioInput.vue b/src/features/forms/components/inputs/card/components/RadioInput.vue
index 289f2e67..06a9f2e7 100644
--- a/src/features/forms/components/inputs/card/components/RadioInput.vue
+++ b/src/features/forms/components/inputs/card/components/RadioInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { getCurrentState } from '@/src/shared/services/undoRedo.service';
 
-
 defineProps<{
-   inputValue: string;
-   label: string;
-   pos: number
+    id: string;
+    inputValue: string;
+    label: string;
+    pos: number
 }>();
 
 const emit = defineEmits<{
@@ -28,25 +28,25 @@ function onChange(value: string) {
         <div :id="String(pos)" class="radio-group">
             <div class="radio-btn">
                 <input
-                    :id="'left-' + String(pos)"
+                    :id="'left-' + id"
                     :name="'pos' + pos"
                     type="radio"
                     class="radio-input"
                     :checked="inputValue === '1'"
                     @change="onChange('1')"
                 >
-                <label :for="'left-' + String(pos)">Choix gauche</label>
+                <label :for="'left-' + id">Choix gauche</label>
             </div>
             <div class="radio-btn">
                 <input
-                    :id="'right-' + String(pos)"
+                    :id="'right-' + id"
                     :checked="inputValue === '2'"
                     :name="'pos' + pos"
                     class="radio-input"
                     type="radio"
                     @change="onChange('2')"
                 >
-                <label :for="'right-' + String(pos)">Choix droite</label>
+                <label :for="'right-' + id">Choix droite</label>
             </div>
         </div>
     </div>
diff --git a/src/features/forms/components/inputs/card/components/SelectInput.vue b/src/features/forms/components/inputs/card/components/SelectInput.vue
index 6e8fbeab..ece4a05f 100644
--- a/src/features/forms/components/inputs/card/components/SelectInput.vue
+++ b/src/features/forms/components/inputs/card/components/SelectInput.vue
@@ -5,6 +5,7 @@ import { useEditorStore } from '@/src/shared/stores';
 const editorStore = useEditorStore();
 
 const props = defineProps<{
+    id: string;
     label: string;
     inputValue: string;
     placeholder: string;
@@ -36,9 +37,9 @@ function onChange(event: Event) {
 
 <template>
     <div class="select">
-        <label for="select-box">{{ label }}</label>
+        <label :for="id">{{ label }}</label>
         <select
-            id="select-box"
+            :id="id"
             :value="inputValue"
             class="select-box"
             @change="onChange"
-- 
GitLab