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
    *