calendar app: fix error on users on startup

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

@@ -23,15 +23,13 @@
   <location></location>
 
     <teleport to="#fullCalendar">
-      <div class="row">
+      <div>
-        <template v-for="u in getActiveUsers" :key="u.id">
+        <template class="" v-for="u in getActiveUsers" :key="u.id">
-          <div class="col-md-4">
           <calendar-active :user="u" ></calendar-active>
-          </div>
         </template>
       </div>
-      <div class="row">
+      <div class="row justify-content-between">
-        <div class="col-md-6">
+        <div class="col-sm-4 col-xs-12">
           <div class="input-group mb-3">
             <label class="input-group-text" for="slotDuration">Durée des créneaux</label>
             <select v-model="this.slotDuration" id="slotDuration" class="form-select">
@@ -42,7 +40,8 @@
             </select>
           </div>
         </div>
-        <div class="col-md-6 self-end-m">
+        <div class="col-sm-4 col-xs-12">
+          <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" />
@@ -51,6 +50,7 @@
             </div>
           </div>
         </div>
+      </div>
       <FullCalendar ref="fullCalendar" :options="calendarOptions">
         <template v-slot:eventContent='arg'>
           <b>{{ arg.timeText }}</b>
@@ -73,7 +73,7 @@ import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import CalendarActive from './Components/CalendarActive';
 import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
-import {mapGetters} from "vuex";
+import {mapGetters, mapState} from "vuex";
 
 export default {
   name: "App",
@@ -94,6 +94,7 @@ export default {
   },
   computed: {
     ...mapGetters(['getMainUser']),
+    ...mapState(['activity']),
     events() {
       return this.$store.getters.getEventSources;
     },
@@ -102,7 +103,7 @@ export default {
         locale: frLocale,
         plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, dayGridPlugin],
         initialView: 'timeGridWeek',
-        initialDate: this.$store.getters.initialDate,
+        initialDate: this.$store.getters.getInitialDate,
         eventSources: this.events,
         selectable: true,
         datesSet: this.onDatesSet,
@@ -121,7 +122,7 @@ export default {
           timeGrid: {
             slotEventOverlap: false,
             slotDuration: this.slotDuration,
-            scrollTime: '10:00:00',
+            //scrollTime: '10:00:00',
           },
           dayGridThreeDays: {
             type: 'dayGridWeek',

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

@@ -1,15 +1,15 @@
 <template>
-<span class="badge" :style="style">
+  <div :style="style" style="display: inline-block;">
-  {{ user.text }}
+    <span class="badge-user">{{ user.text }}</span>
-  <span class="form-check form-switch">
+      <span class="form-check-inline form-switch">
         <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
         <label class="form-check-label" for="flexSwitchCheckDefault">Disponibilité</label>
       </span>
-  <span class="form-check form-switch">
+      <span class="form-check-inline form-switch">
         <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
         <label class="form-check-label" for="flexSwitchCheckDefault">Agenda</label>
       </span>
-</span>
+  </div>
 </template>
 
 <script>

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

@@ -81,6 +81,7 @@ export default {
   },
   addPersonsInvolved({commit, dispatch}, payload) {
     console.log('### action addPersonsInvolved', payload.result.type);
+    console.log('### action addPersonsInvolved payload result', payload.result);
     switch (payload.result.type) {
       case 'person':
         let aPersons = document.getElementById("chill_activitybundle_activity_persons");

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

@@ -91,6 +91,10 @@ export default {
 
     return sources;
   },
+  getInitialDate(state) {
+    console.log('initialDate', state.activity.startDate);
+    return state.activity.startDate;
+  },
   /**
    * get the user data for a specific user
    *

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

@@ -57,4 +57,8 @@ if (null !== store.getters.getMainUser) {
   store.commit('showUserOnCalendar', {ranges: true, remotes: true, user: store.getters.getMainUser});
 }
 
+for (let u of store.state.activity.users) {
+  store.commit('showUserOnCalendar', {ranges: false, remotes: false, user: u});
+}
+
 export default store;

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

@@ -19,9 +19,8 @@ const removeIdFromValue = (string, id) => {
 * Assign missing keys for the ConcernedGroups component
 */
 const mapEntity = (entity) => {
-  console.log('mapEntity', entity);
   let calendar =  { ...entity};
-  Object.assign(calendar, {thirdParties: entity.professionals, users: entity.invites});
+  Object.assign(calendar, {thirdParties: entity.professionals});
 
   if (entity.startDate !== null ) {
     calendar.startDate = ISOToDatetime(entity.startDate.datetime);
@@ -35,8 +34,6 @@ const mapEntity = (entity) => {
     calendar.calendarRange.id = `range_${entity.calendarRange.id}`;
   }
 
-  console.log('new calendar object ', calendar);
-
   return calendar;
 };