amélioration de l'éditions de cours

VueJS/src/components/MultipleInput.vue

@@ -7,7 +7,9 @@
         <select class="unwrapped" name="select" multiple size="6" v-if="!small" v-click-outside="$event => small = true"
             v-model="selectedOptions" @change="$emit('value', selectedOptions)">
             <option disabled class="help">ctrl/cmd + clic</option>
-            <option v-for="option in options" :key="option.id" :value="option.id">{{ option.name }}</option>
+            <option v-for="option in options" :key="option.id" :value="option.id" :selected="option.id == 'a'">{{
+                option.name
+            }}</option>
         </select>
     </div>
 </template>
@@ -15,10 +17,7 @@
 <script>
 export default {
     name: 'MultipleInput',
-    props: {
-        label: String,
-        options: Array
-    },
+    props: ['label', 'options', 'edit'],
     data() {
         return {
             small: true,
@@ -27,7 +26,8 @@ export default {
     },
     methods: {
         optionsToString() {
-            return this.selectedOptions.map(id => this.options.find(o => o.id == id).name).join(", ");
+            if (this.$parent.edit != -1 && this.$parent.savedCourses[this.$parent.edit][this.edit]) return this.$parent.savedCourses[this.$parent.edit][this.edit].map(id => this.options.find(o => o.id == id).name).join(", ")
+            else return this.selectedOptions.map(id => this.options.find(o => o.id == id).name).join(", ");
         }
     }
 
@@ -36,8 +36,9 @@ export default {
 
 <style scoped>
 div {
-    width:15rem;
+    width: 15rem;
 }
+
 .unwrapped {
     position: absolute;
     width: 15rem;

VueJS/src/components/PopupAddCourses.vue

@@ -3,7 +3,7 @@
         <div class="background" />
         <div class="window">
             <MainTitle value="Ajouter des cours" />
-            <CloseButton @click.native="$parent.popupVisible = false" />
+            <CloseButton @click.native="$parent.popupVisible = false; edit = -1" />
             <div class="container">
                 <div v-if="homeScreen">
                     <li v-for="(course, key) in savedCourses" :key="key" class="vertical-list">
@@ -23,19 +23,19 @@
                         </li>
                     </div>
                     <div id="forms">
-                        <SimpleInput class="form-element" label="Module" :options="modules"
+                        <SimpleInput class="form-element" label="Module" :options="modules" edit="module"
                             @value="v => $set(course, 'module', v)" />
-                        <MultipleInput class="form-element" label="Groupe(s)" :options="groups"
+                        <MultipleInput class="form-element" label="Groupe(s)" :options="groups" edit="groups"
                             @value="v => $set(course, 'groups', v)" />
-                        <MultipleInput class="form-element" label="Professeur(s)" :options="teachers"
+                        <MultipleInput class="form-element" label="Professeur(s)" :options="teachers" edit="teachers"
                             @value="v => $set(course, 'teachers', v)" />
-                        <SimpleInput class="form-element" label="Type de cours" :options="courseTypes"
+                        <SimpleInput class="form-element" label="Type de cours" :options="courseTypes" edit="courseType"
                             @value="v => $set(course, 'courseType', v)" />
-                        <SimpleInput class="form-element" label="Type de salle" :options="roomTypes"
+                        <SimpleInput class="form-element" label="Type de salle" :options="roomTypes" edit="roomType"
                             @value="v => $set(course, 'roomType', v)" />
                     </div>
                     <div class="buttons">
-                        <SimpleButton value="Annuler" color="#E90B0B" @click.native="homeScreen = true" />
+                        <SimpleButton value="Annuler" color="#E90B0B" @click.native="homeScreen = true; edit=-1" />
                         <SimpleButton value="Valider" color="#05B12B" @click.native="saveCourse" />
                     </div>
                 </div>
@@ -90,7 +90,7 @@ export default {
                 { id: "c", name: "INFoO3-1" },
                 { id: "d", name: "INFO4-1" },
                 { id: "e", name: "INFO4-2" },
-                { id: "e", name: "INFO4-3" },
+                { id: "f", name: "INFO4-3" },
             ],
             courseTypes: [
                 { id: "cm", name: "CM" },

VueJS/src/components/SimpleInput.vue

@@ -2,8 +2,9 @@
     <div>
         <label for="select">{{ label }}</label>
         <select name="select" @change="$emit('value', $event.target.value)">
-            <option selected></option>
-            <option v-for="option in options" :key="option.id" :value="option.id">{{ option.name }}</option>
+            <option :selected="$parent.edit == -1"></option>
+            <option v-for="option in options" :key="option.id" :value="option.id"
+                :selected="$parent.edit != -1 && option.id == $parent.savedCourses[$parent.edit][edit]">{{ option.name }}</option>
         </select>
     </div>
 </template>
@@ -11,7 +12,7 @@
 <script>
 export default {
     name: 'SimpleInput',
-    props: ['label', 'options'],
+    props: ['label', 'options', 'edit'],
     emits: ['value']
 }
 </script>