rdv: add content of calendar item in a modal

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue

@@ -14,9 +14,9 @@
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
-        <b>{{ arg.timeText }}</b>
+          <b>{{ arg.timeText }}</b>
           <i>&nbsp;{{ arg.event.title }}</i>
-          <a class="fa fa-fw fa-times"
+          <a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
             @click.prevent="onClickDelete(arg.event)">
           </a>
         </span>
@@ -70,6 +70,47 @@
       </div>
     </div>
   </div>
+
+  <teleport to="body">
+    <modal v-if="modal.showModal"
+      :modalDialogClass="modal.modalDialogClass"
+      @close="modal.showModal = false">
+
+        <template v-slot:header>
+          <h2 class="modal-title"> {{ this.myCalendarClickedEvent.start.toLocaleString() }} - {{ this.myCalendarClickedEvent.end.toLocaleString() }}</h2>
+        </template>
+
+        <template v-slot:body>
+          <p>{{ $t('by')}} {{this.myCalendarClickedEvent.user.username }}</p>
+          <p>{{ $t('main_user_concerned') }} : {{ this.myCalendarClickedEvent.mainUser.username }}</p>
+          <p v-if="myCalendarClickedEvent.comment.length > 0" >{{ this.myCalendarClickedEvent.comment }}</p>
+        </template>
+
+        <template v-slot:footer>
+          <ul class="record_actions">
+            <li>
+              <a
+                class="btn btn-show"
+                :href=myCalendarEventShowLink() >
+              </a>
+            </li>
+            <li>
+              <a
+                class="btn btn-update"
+                :href=myCalendarEventUpdateLink() >
+              </a>
+            </li>
+            <li>
+              <a
+                class="btn btn-delete"
+                :href=myCalendarEventDeleteLink() >
+              </a>
+            </li>
+          </ul>
+        </template>
+
+      </modal>
+   </teleport>
 </template>
 
 <script>
@@ -79,22 +120,29 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
 import { mapState } from 'vuex';
 
 export default {
   name: "App",
   components: {
-    FullCalendar
+    FullCalendar,
+    Modal
   },
   data() {
     return {
       errorMsg: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-m"
+      },
       flag: {
         loading: false
       },
       userId: window.userId,
       showMyCalendar: true,
+      myCalendarClickedEvent: null,
       calendarEvents: {
          userCalendar: null,
          userCalendarRange: null,
@@ -116,6 +164,7 @@ export default {
         eventChange: this.onEventChange,
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
+        eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
         weekends: false,
@@ -149,6 +198,18 @@ export default {
     init() {
       this.fetchData();
     },
+    openModal() {
+      this.modal.showModal = true;
+    },
+    myCalendarEventShowLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/show?user_id=${ this.userId }`
+    },
+    myCalendarEventUpdateLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/edit?user_id=${ this.userId }`
+    },
+    myCalendarEventDeleteLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
+    },
     resetCalendar() {
       this.fetchData();
       this.calendarEvents.new = {
@@ -179,8 +240,15 @@ export default {
         fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
           let events = calendar.results.map(i =>
             ({
+              myCalendar: true,
+              calendarId: i.id,
               start: i.startDate.datetime,
               end: i.endDate.datetime,
+              user: i.user,
+              mainUser: i.mainUser,
+              persons: i.persons,
+              professionals: i.professionals,
+              comment: i.comment
             })
           );
           let calendarEventsCurrentUser = {
@@ -238,6 +306,26 @@ export default {
       payload.event.setProp('textColor', '#444444');
       this.$store.dispatch('updateRange', payload);
     },
+    onEventClick(payload) {
+      console.log(payload)
+      console.log(payload.event)
+      console.log(payload.event.extendedProps)
+
+      if (payload.event.extendedProps.myCalendar) {
+        this.myCalendarClickedEvent = {
+          id: payload.event.extendedProps.calendarId,
+          start: payload.event.start,
+          end: payload.event.end,
+          user: payload.event.extendedProps.user,
+          mainUser: payload.event.extendedProps.mainUser,
+          persons: payload.event.extendedProps.persons,
+          professionals: payload.event.extendedProps.professionals,
+          comment: payload.event.extendedProps.comment
+        };
+        console.log(this.myCalendarClickedEvent)
+        this.openModal();
+      }
+    },
     onClickSave(payload) {
       this.flag.loading = true;
       if (this.$store.state.newCalendarRanges.length > 0){

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js

@@ -10,7 +10,9 @@ const appMessages = {
       copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
       new_range_to_save: "Nouvelles plages à enregistrer",
       update_range_to_save: "Plages à modifier",
-      delete_range_to_save: "Plages à supprimer"
+      delete_range_to_save: "Plages à supprimer",
+      by: "Par",
+      main_user_concerned: "Utilisateur concerné"
    }
 }