fixes in template with new route and forms

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

@@ -41,7 +41,7 @@
     <teleport to="#fullCalendar">
       <div class="calendar-actives">
         <template class="" v-for="u in getActiveUsers" :key="u.id">
-          <calendar-active :user="u" ></calendar-active>
+          <calendar-active :user="u" :invite="this.$store.getters.getInviteForUser(u)"></calendar-active>
         </template>
       </div>
       <div class="display-options row justify-content-between">
@@ -60,8 +60,8 @@
           <div class="float-end">
             <div class="input-group mb-3">
               <div class="input-group-text">
-                <input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="this.hideWeekEnds" />
-                <label for="showHideWE" class="form-check-label">Masquer les week-ends</label>
+                <input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="this.hideWeekEnds">
+                <label for="showHideWE" class="form-check-label"> Masquer les week-ends</label>
               </div>
             </div>
           </div>
@@ -188,8 +188,9 @@ export default {
       console.log('onDateSelect', payload);
 
       // show an alert if changing mainUser
-      if (this.$store.getters.getMainUser !== null
-        && this.$store.state.me.id !== this.$store.getters.getMainUser.id) {
+      if ((this.$store.getters.getMainUser !== null
+        && this.$store.state.me.id !== this.$store.getters.getMainUser.id)
+        || this.$store.getters.getMainUser === null) {
         if (!window.confirm(this.$t('will_change_main_user_for_me'))) {
           return;
         } else {

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

@@ -1,14 +1,23 @@
 <template>
   <div :style="style" class="calendar-active">
-    <span class="badge-user">{{ user.text }}</span>
-      <span class="form-check-inline form-switch">
-        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
-        &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Disponibilités"><i class="fa fa-calendar-check-o"></i></label>
-      </span>
-      <span class="form-check-inline form-switch">
-        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
-        &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Agenda"><i class="fa fa-calendar"></i></label>
-      </span>
+    <span class="badge-user">
+      {{ user.text }}
+      <template v-if="invite !== null">
+        <i v-if="invite.status === 'accepted'" class="fa fa-check"></i>
+        <i v-else-if="invite.status === 'declined'" class="fa fa-times"></i>
+        <i v-else-if="invite.status === 'pending'" class="fa fa-question-o"></i>
+        <i v-else-if="invite.status === 'tentative'" class="fa fa-question"></i>
+        <span v-else="">{{ invite.status }}</span>
+      </template>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
+      &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Disponibilités"><i class="fa fa-calendar-check-o"></i></label>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
+      &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Agenda"><i class="fa fa-calendar"></i></label>
+    </span>
   </div>
 </template>
 
@@ -17,12 +26,21 @@ import {mapGetters} from 'vuex';
 
 export default {
   name: "CalendarActive",
-  props: ['user'],
+  props: {
+    user: {
+      type: Object,
+      required: true
+    },
+    invite: {
+      type: Object,
+      required: false,
+      default: null,
+    }
+  },
   computed: {
     style() {
       return {
         backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
-        color: 'black',
       };
     },
     rangeShow: {
@@ -53,6 +71,8 @@ export default {
 
   border-radius: 0.5rem;
 
+  color: var(--bs-blue);
+
   & > .badge-user {
     margin-right: 0.5rem;
   }

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js

@@ -92,6 +92,9 @@ export default {
   getInitialDate(state) {
     return state.activity.startDate;
   },
+  getInviteForUser: (state) => (user) => {
+    return state.activity.invites.find(i => i.user.id === user.id);
+  },
   /**
    * get the user data for a specific user
    *

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

@@ -9,8 +9,8 @@
         {
             'title'             : 'Remove calendar item'|trans,
             'confirm_question'  : 'Are you sure you want to remove the calendar item?'|trans,
-            'cancel_route'      : 'chill_calendar_calendar_list',
-            'cancel_parameters' : { 'accompanying_period_id' : accompanyingCourse.id, 'id' : calendar.id },
+            'cancel_route'      : 'chill_calendar_calendar_list_by_period',
+            'cancel_parameters' : { 'id' : accompanyingCourse.id },
             'form'              : delete_form
         } ) }}
 {% endblock %}

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

@@ -33,7 +33,6 @@
     <div id="location"></div>
 {% endif %}
 
-
 {%- if form.startDate is defined -%}
     {{ form_row(form.startDate) }}
 {% endif %}

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

@@ -3,6 +3,9 @@
 {{ form_start(form) }}
 {{ form_errors(form) }}
 
+<div id="calendar"></div> {# <=== vue component #}
+
+<div id="mainUser"></div> {# <=== vue component: mainUser #}
 
 <h2 class="chill-red">{{ 'Concerned groups'|trans }}</h2>
 
@@ -27,6 +30,13 @@
 
 <h2 class="chill-red">{{ 'Calendar data'|trans }}</h2>
 
+<div id="schedule"></div>
+
+{%- if form.location is defined -%}
+    {{ form_row(form.location) }}
+    <div id="location"></div>
+{% endif %}
+
 {%- if form.startDate is defined -%}
     {{ form_row(form.startDate) }}
 {% endif %}
@@ -35,11 +45,12 @@
     {{ form_row(form.endDate) }}
 {% endif %}
 
-{%- if form.location is defined -%}
-    {{ form_row(form.location) }}
-    <div id="location"></div>
+{%- if form.calendarRange is defined -%}
+    {{ form_row(form.calendarRange) }}
 {% endif %}
 
+<div id="fullCalendar"></div>
+
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
 {% endif %}
@@ -52,7 +63,6 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-<div id="fullCalendar"></div>
 
 <ul class="record_actions sticky-form-buttons">
     <li class="cancel">
@@ -61,7 +71,7 @@
         {%- if context == 'person' -%}
         href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'person_id': person.id } )}}"
         {%- else -%}
-        href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'accompanying_period_id': accompanyingCourse.id } )}}"
+        href="{{ chill_return_path_or('chill_calendar_calendar_list_by_period', { 'id': accompanyingCourse.id } )}}"
         {%- endif -%}
         >
         {{ 'Cancel'|trans|chill_return_path_label }}