add lieu et responsable to creneau

src/components/EditeurCreneau.vue

@@ -71,16 +71,32 @@
         :modelValue="creneau.maxAttendee"
         @input="inputListener($event, 'maxAttendee')"
       />
-
+      <styled-input
+        label="Lieu"
+        id="lieu"
+        type="text"
+        class="s6"
+        :modelValue="creneau.location"
+        @input="inputListener($event, 'location')"
+      />
+      <auto-complete-input
+        class="s6"
+        label="Responsable"
+        id="responsable"
+        :strictAutocomplete="true"
+        :limit="5"
+        placeholder="Choisir un respo"
+        :autocompleteList="responsablesList"
+        v-model="responsableIdStr"
+      />
       <styled-input
         label="Description"
         id="description"
         type="textarea"
         class="materialize-textarea"
         :modelValue="creneau.description"
-        @input="inputListener($event, 'description')"
-      >
-      </styled-input>
+        @update:modelValue="inputListener($event, 'description')"
+      />
       <chips-input
         label="Compétences & préférences associées"
         id="compétence_selection"
@@ -89,7 +105,7 @@
         :autocomplete-list="autocompleteCompetencesList"
         :strict-autocomplete="true"
         v-model="competencesStrIdList"
-      ></chips-input>
+      />
       <chips-input
         label="Bénévoles"
         id="bénevole_selection"
@@ -131,7 +147,8 @@
 import { defineComponent, PropType } from "vue";
 import Creneau from "@/models/Creneau";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
-import styledInput from "./input.vue";
+import AutoCompleteInput from "@/components/AutoCompleteInput.vue";
+import styledInput from "@/components/input.vue";
 import chipsInput from "@/components/SelectChipInput.vue";
 import DatePicker from "@/components/date-picker.vue";
 import checkbox from "./checkBox.vue";
@@ -145,7 +162,7 @@ import Competence from "@/models/Competence";
 // TODO Understand why the component only syncro after a first edition of the date
 export default defineComponent({
   name: "EditeurCreneau",
-  components: { chipsInput, styledInput, checkbox, DatePicker },
+  components: { AutoCompleteInput, chipsInput, styledInput, checkbox, DatePicker },
   props: {
     creneau: {
       type: Object as PropType<Creneau>,
@@ -158,6 +175,7 @@ export default defineComponent({
       duree: "",
       benevoleStrIdList: [] as Array<string>,
       competencesStrIdList: [] as Array<string>,
+      responsableIdStr: "",
     };
   },
   watch: {
@@ -170,8 +188,11 @@ export default defineComponent({
     "creneau.benevoleIdList": function (val: Array<number>) {
       this.benevoleStrIdList = val.map((s) => s.toString());
     },
-    creneau: function (val: Creneau) {
-      this.competencesStrIdList = val.competencesIdList.map((s) => s.toString());
+    "creneau.responsableId": function (val: number) {
+      this.responsableIdStr = val.toString();
+    },
+    creneau(val: Creneau) {
+      this.initCreneauData(val);
     },
     competencesStrIdList(val: Array<string>) {
       if (this.creneau) {
@@ -195,6 +216,15 @@ export default defineComponent({
         removeList.forEach(this.removeBenevole2Creneau);
       }
     },
+    responsableIdStr(val: string) {
+      if (this.creneau) {
+        let parseVal = parseInt(val);
+        parseVal = isNaN(parseVal) ? -1 : parseVal;
+        if (this.creneau.responsableId != parseVal) {
+          this.updateCreneau("responsableId", parseVal);
+        }
+      }
+    },
     jour: function () {
       this.updateDates();
     },
@@ -291,6 +321,9 @@ export default defineComponent({
         return { id: competence.id + "", name: competence.fullname };
       });
     },
+    responsablesList(): Array<AutocompleteOptions> {
+      return this.$store.state.benevoleList.map((b) => ({ id: b.id.toString(), name: b.fullname }));
+    },
   },
   methods: {
     getbenevoleScore(benevole: Benevole): number {
@@ -346,7 +379,12 @@ export default defineComponent({
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     inputListener(event: any, field: keyof Creneau) {
-      this.updateCreneau(field, event.target.value);
+      if (field == "responsableId") {
+        console.log(event);
+        this.updateCreneau(field, parseInt(event.target.value));
+      } else {
+        this.updateCreneau(field, event.target.value);
+      }
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     checkboxListener(event: any, field: keyof Creneau) {
@@ -362,6 +400,11 @@ export default defineComponent({
         ).toString();
       }
     },
+    initCreneauData(val: Creneau) {
+      this.benevoleStrIdList = val.benevoleIdList.map((s) => s.toString());
+      this.competencesStrIdList = val.competencesIdList.map((s) => s.toString());
+      this.responsableIdStr = val.responsableId.toString();
+    },
     emitDuplicateOrder: function () {
       this.$emit("duplicate", this.creneau);
     },
@@ -375,8 +418,7 @@ export default defineComponent({
   mounted() {
     this.updateForm();
     if (this.creneau) {
-      this.benevoleStrIdList = this.creneau.benevoleIdList.map((s) => s.toString());
-      this.competencesStrIdList = this.creneau.competencesIdList.map((s) => s.toString());
+      this.initCreneauData(this.creneau);
     }
   },
 });

src/models/Creneau.ts

@@ -11,6 +11,8 @@ export interface ICreneau {
   benevoleIdList: Array<number>;
   competencesIdList: Array<number>;
   description: string;
+  location?: string;
+  responsableId?: number;
   isMeal: boolean;
   fixedAttendee: boolean;
 }
@@ -48,6 +50,8 @@ class Creneau implements ICreneau {
   }
   competencesIdList: number[];
   description: string;
+  location: string;
+  responsableId: number;
 
   _isMeal = false;
   public get isMeal(): boolean {
@@ -85,6 +89,9 @@ class Creneau implements ICreneau {
     this.competencesIdList = "competencesIdList" in obj ? obj.competencesIdList : [];
     this.isMeal = "isMeal" in obj ? obj.isMeal : false;
     this.fixedAttendee = "fixedAttendee" in obj ? obj.fixedAttendee : false;
+    this.location = obj.location ?? "";
+    this.responsableId = "responsableId" in obj ? obj.responsableId ?? -1 : -1;
+
     this.updateEventContent();
   }
   get id(): string {
@@ -193,6 +200,8 @@ class Creneau implements ICreneau {
       description: this.description,
       isMeal: this.isMeal,
       fixedAttendee: this.fixedAttendee,
+      location: this.location,
+      responsableId: this.responsableId,
     };
   }
   /** Parse the plain javscript object that can be serialized */