From c31886fea34e6f70744063bd2d97514c35f9fbc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 6 Jun 2022 15:13:36 +0200
Subject: [PATCH] calendar app: fix error on users on startup

---
 .../Resources/public/vuejs/Calendar/App.vue   | 31 ++++++++++---------
 .../Calendar/Components/CalendarActive.vue    | 22 ++++++-------
 .../public/vuejs/Calendar/store/actions.js    |  1 +
 .../public/vuejs/Calendar/store/getters.js    |  4 +++
 .../public/vuejs/Calendar/store/index.js      |  4 +++
 .../public/vuejs/Calendar/store/utils.js      |  5 +--
 6 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index 7765d3db4..dcf7f7450 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -23,15 +23,13 @@
   <location></location>
 
     <teleport to="#fullCalendar">
-      <div class="row">
-        <template v-for="u in getActiveUsers" :key="u.id">
-          <div class="col-md-4">
-            <calendar-active :user="u" ></calendar-active>
-          </div>
+      <div>
+        <template class="" v-for="u in getActiveUsers" :key="u.id">
+          <calendar-active :user="u" ></calendar-active>
         </template>
       </div>
-      <div class="row">
-        <div class="col-md-6">
+      <div class="row justify-content-between">
+        <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,11 +40,13 @@
             </select>
           </div>
         </div>
-        <div class="col-md-6 self-end-m">
-          <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>
+        <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" />
+                <label for="showHideWE" class="form-check-label">Masquer les week-ends</label>
+              </div>
             </div>
           </div>
         </div>
@@ -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',
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
index 23ef4565e..4c0a20457 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue
@@ -1,15 +1,15 @@
 <template>
-<span class="badge" :style="style">
-  {{ user.text }}
-  <span class="form-check 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">
-    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
-    <label class="form-check-label" for="flexSwitchCheckDefault">Agenda</label>
-  </span>
-</span>
+  <div :style="style" style="display: inline-block;">
+    <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">
+        <label class="form-check-label" for="flexSwitchCheckDefault">Disponibilité</label>
+      </span>
+      <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>
+  </div>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js
index ab24d17ac..741dbd120 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js
+++ b/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");
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
index 3f87ca203..492738060 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js
+++ b/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
    *
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js
index 01322be0f..723ad9151 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js
+++ b/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;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
index 7c36b4342..a322a25ac 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
+++ b/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;
 };