improve output visualisation

src/PlanningPage.vue

@@ -10,6 +10,7 @@
         :autocompleteList="autocompleteData"
         :strictAutocomplete="true"
         v-model="benevoleId"
+        style="width: 350px"
       />
       <planning :benevoleId="benevoleId" />
     </template>
@@ -60,6 +61,7 @@ export default defineComponent({
   mounted() {
     Toast({ html: "Bienvenue" });
     const uuid = document.location.pathname.split("/").reverse()[0];
+    this.benevoleValue = location.search.substr(1).split("=")[1];
     if (uuidv4check.test(uuid)) {
       const url = `${API_URL}api/evenements/${uuid}`;
       fetch(url)
@@ -88,6 +90,11 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.main-container {
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+}
 .no-info {
   display: flex;
   flex-direction: column;

src/components/CollapsableCreneauViewer.vue

@@ -29,6 +29,15 @@
             <span class="chip-label">{{ benevole.shortame }}</span>
           </div>
         </div>
+        <template v-if="responsable">
+          <div class="agenda-creneau-details--title">Le responsable</div>
+          <div class="agenda-creneau-details--content">
+            <div class="chip chip--clickable" @click="onClickContact(responsable)">
+              <i class="material-icons chip-icon">person</i>
+              <span class="chip-label">{{ responsable.shortame }}</span>
+            </div>
+          </div>
+        </template>
         <template v-if="prevCreneau">
           <div class="agenda-creneau-details--title">Ceux que tu remplace</div>
           <div class="agenda-creneau-details--content">

src/components/PrintableCreneauViewer.vue

@@ -9,6 +9,12 @@
       <div v-if="responsable">
         <u>Responsable:</u> {{ responsable.fullname }} (tel: {{ responsable.phone }})
       </div>
+      <div v-if="creneauBenevoleList.length > 0">
+        <span>Ceux avec qui tu sera? </span>
+        <span v-for="benevole in creneauBenevoleList" :key="benevole.id">
+          {{ benevole.shortame }},
+        </span>
+      </div>
       <div v-if="nextCreneauBenevoleList.length > 0">
         <span>Qui te remplacera? </span>
         <span v-for="benevole in nextCreneauBenevoleList" :key="benevole.id">
@@ -23,16 +29,8 @@
 import { defineComponent } from "vue";
 
 import CreneauView from "@/mixins/creneauView";
-import Benevole from "@/models/Benevole";
 export default defineComponent({
   mixins: [CreneauView],
-  computed: {
-    responsable(): Benevole | null {
-      return this.creneau?.responsableId != undefined
-        ? this.$store.getters.getBenevoleById(this.creneau?.responsableId) ?? null
-        : null;
-    },
-  },
 });
 </script>
 

src/mixins/creneauView.ts

@@ -7,6 +7,11 @@ export default defineComponent({
     creneau: { type: Object as PropType<Creneau> },
   },
   computed: {
+    responsable(): Benevole | null {
+      return this.creneau?.responsableId != undefined
+        ? this.$store.getters.getBenevoleById(this.creneau?.responsableId) ?? null
+        : null;
+    },
     creneauBenevoleList(): Array<Benevole> {
       if (this.creneau) {
         return this.getBenevoleforCreneau(this.creneau);