fix planning page with new component

src/PlanningPage.vue

@@ -4,7 +4,14 @@
     <div v-if="isLoading" class="loading">Chargement en cours <br /><dots /></div>
     <template v-else-if="hasData">
       <h1 style="text-align: center">{{ title }}</h1>
-      <planning />
+      <auto-complete-input
+        id="benevole-selection-input"
+        label="Entrée votre nom"
+        :autocompleteList="autocompleteData"
+        :strictAutocomplete="true"
+        v-model="benevoleId"
+      />
+      <planning :benevoleId="benevoleId" />
     </template>
     <div class="no-info" v-else>
       <i class="material-icons">travel_explore</i>
@@ -16,24 +23,39 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import Planning from "@/views/PlanningPersonnel.vue";
+import AutoCompleteInput from "@/components/AutoCompleteInput.vue";
+
 import Dots from "@/components/Dots.vue";
 import cHeader from "@/components/Header.vue";
 import importJsonState from "@/mixins/ImportJsonState";
 import Toast from "./utils/Toast";
+import Benevole from "./models/Benevole";
+import AutocompleteValues from "./models/AutocompleteOptions";
 
 const API_URL = process.env.VUE_APP_API_URL;
 const uuidv4check = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i;
 
 export default defineComponent({
   mixins: [importJsonState],
-  components: { Planning, Dots, cHeader },
+  components: { Planning, Dots, cHeader, AutoCompleteInput },
   data() {
-    return { isLoading: true, hasData: false };
+    return { isLoading: true, hasData: false, benevoleValue: "" };
   },
   computed: {
     title(): string {
       return this.$store.state.evenement.name;
     },
+    benevoleId(): number {
+      return parseInt(this.benevoleValue) ?? -1;
+    },
+    benevoleList(): Array<Benevole> {
+      return this.$store.state.benevoleList;
+    },
+    autocompleteData(): Array<AutocompleteValues> {
+      return this.benevoleList.map((o) => {
+        return { id: o.id.toString(), name: o.fullname };
+      });
+    },
   },
   mounted() {
     Toast({ html: "Bienvenue" });

src/views/PlanningPersonnel.vue

@@ -1,13 +1,5 @@
 <template>
   <div class="planning-container">
-    <auto-complete-input
-      class="search-benevole"
-      id="benevole-selection-input"
-      label="Choisir un bénévole"
-      :autocompleteList="autocompleteData"
-      :strictAutocomplete="true"
-      v-model="benevoleId"
-    />
     <div
       class="daily-agenda"
       v-for="(thisDayCreneauList, day) in personalCreneauListPerDay"
@@ -21,7 +13,7 @@
           :creneau="creneau"
           :current-benevole="currentBenevole"
           @contact="onContact"
-        ></creneau-viewer>
+        />
       </div>
     </div>
     <div class="modal" v-if="showContact" @click="closeModal">
@@ -44,20 +36,20 @@
 
 <script lang="ts">
 import CreneauViewer from "../components/CollapsableCreneauViewer.vue";
-import AutoCompleteInput from "../components/AutoCompleteInput.vue";
 import { defineComponent } from "vue";
 import Creneau from "@/models/Creneau";
 import Benevole from "@/models/Benevole";
-import AutocompleteValues from "@/models/AutocompleteOptions";
 import { Dictionary } from "lodash";
 import dayjs from "dayjs";
 
 export default defineComponent({
-  components: { CreneauViewer, AutoCompleteInput },
+  components: { CreneauViewer },
+  props: {
+    benevoleId: { type: Number, default: -1 },
+  },
   data: function () {
     return {
       currentBenevole: undefined as Benevole | undefined,
-      benevoleId: "",
       showContact: undefined as Benevole | undefined,
     };
   },
@@ -73,11 +65,6 @@ export default defineComponent({
     benevoleList(): Array<Benevole> {
       return this.$store.state.benevoleList;
     },
-    autocompleteData(): Array<AutocompleteValues> {
-      return this.benevoleList.map((o) => {
-        return { id: o.id.toString(), name: o.fullname };
-      });
-    },
     personalCreneauListPerDay(): Dictionary<Array<Creneau>> {
       if (this.currentBenevole !== undefined) {
         const benevole = this.currentBenevole;
@@ -108,14 +95,13 @@ export default defineComponent({
         this.showContact = undefined;
       }
     },
-    updateCurrentBenevole: function () {
-      const id = parseInt(this.benevoleId);
-      const bList = this.benevoleList.filter((b) => b.id == id);
+    updateCurrentBenevole() {
+      const bList = this.benevoleList.filter((b) => b.id == this.benevoleId);
       if (bList.length > 0) {
         this.currentBenevole = bList[0];
       }
     },
-    onContact: function (benevole: Benevole) {
+    onContact(benevole: Benevole) {
       this.showContact = benevole;
     },
     getFanfare(benevole: Benevole): string {
@@ -126,6 +112,9 @@ export default defineComponent({
         .join(", ");
     },
   },
+  mounted() {
+    this.updateCurrentBenevole();
+  },
 });
 </script>