rdv: add content of calendar item in a modal

src/Bundle/ChillCalendarBundle/Entity/Calendar.php

@@ -37,12 +37,14 @@ class Calendar
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
+     * @Serializer\Groups({"calendar:read"})
      */
     private ?int $id;
 
     /**
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\User")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private User $user;
 
@@ -64,6 +66,7 @@ class Calendar
      *     cascade={"persist", "remove", "merge", "detach"})
      * @ORM\JoinTable(name="chill_calendar.calendar_to_persons")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private Collection $persons;
 
@@ -74,6 +77,7 @@ class Calendar
      *     cascade={"persist", "remove", "merge", "detach"})
      * @ORM\JoinTable(name="chill_calendar.calendar_to_thirdparties")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private Collection $professionals;
 
@@ -89,6 +93,7 @@ class Calendar
 
     /**
      * @ORM\Embedded(class=CommentEmbeddable::class, columnPrefix="comment_")
+     * @Serializer\Groups({"calendar:read"})
      */
     private CommentEmbeddable $comment;
 

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

@@ -16,7 +16,7 @@
         <span class='calendarRangeItems'>
           <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é"
    }
 }
 

src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig

@@ -16,11 +16,7 @@
 
 {% if context == 'user' %}
     <div id="myCalendar"></div>
-{% endif %}
-
-{% if context == 'user' %}
-    <h2 class="chill-red">{{ 'My calendar list' |trans }}</h2>
-{% endif %}
+{% else %}
 
     {% if calendarItems|length == 0 %}
         <p class="chill-no-data-statement">
@@ -56,16 +52,6 @@
 
                         {% endif %}
 
-                    {% if context == 'user' and calendar.accompanyingPeriod is not empty %}
-                        <a class="btn btn-sm btn-outline-primary"
-                            title="{{ 'Period number %number%'|trans({'%number%': calendar.accompanyingPeriod.id}) }}"
-                            href="{{ chill_path_add_return_path(
-                                "chill_user_accompanying_course_index",
-                                { 'accompanying_period_id': calendar.accompanyingPeriod.id }
-                            ) }}"><i class="fa fa-random"></i>
-                        </a>
-                    {% endif %}
-
                         
                     </div>
                     <div class="item-col">
@@ -152,3 +138,8 @@
         </li>
     </ul>
     {% endif %}
+
+
+
+{% endif %}
+