add toggle button to show/add remote and ranges for each user in calendar

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

@@ -1,5 +1,15 @@
 <template>
-<span class="badge" :style="style">{{ user.text }}</span>
+<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>
 </template>
 
 <script>
@@ -14,17 +24,22 @@ export default {
         backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
       };
     },
-    mainColor() {
+    rangeShow: {
-      return 'blue';
+      set (value) {
-      console.log('mainColor userId', this.userId);
+        this.$store.commit('showUserOnCalendar', {user: this.user, ranges: value});
-      console.log(this.$store.state.usersData);
+      },
-
+      get() {
-      if (!this.$store.getters.hasUserDataById(this.userId)) {
+        return this.$store.getters.isRangeShownOnCalendarForUser(this.user);
-        return 'blue';
       }
-
+    },
-      return this.$store.getters.getUserDataById(this.userId).mainColor;
+    remoteShow: {
+      set (value) {
+        this.$store.commit('showUserOnCalendar', {user: this.user, remote: value});
+      },
+      get() {
+        return this.$store.getters.isRemoteShownOnCalendarForUser(this.user);
       }
+    },
   }
 }
 </script>

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

@@ -37,7 +37,7 @@ export default {
         });
       }
     },
-    addPersonsInvolved({ commit }, payload) {
+    addPersonsInvolved({ commit, dispatch }, payload) {
         console.log('### action addPersonsInvolved', payload.result.type);
         switch (payload.result.type) {
             case 'person':
@@ -49,8 +49,10 @@ export default {
                 aThirdParties.value = addIdToValue(aThirdParties.value, payload.result.id);
                 break;
             case 'user':
-                let aUsers = document.getElementById("chill_activitybundle_activity_invites");
+                let aUsers = document.getElementById("chill_activitybundle_activity_users");
                 aUsers.value = addIdToValue(aUsers.value, payload.result.id);
+                commit('showUserOnCalendar', {user: payload.result, ranges: false, remote: true});
+                dispatch('fetchCalendarEvents');
                 break;
         };
         commit('addPersonsInvolved', payload);

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

@@ -45,10 +45,10 @@ export default {
 
       console.log('userData', userData);
 
-      if (kinds.includes(USER_CALENDAR_SHOW_RANGES) && userData.calendarRanges.length > 0) {
+      if (kinds.ranges && userData.calendarRanges.length > 0) {
         console.log('adding ranges for user', userId);
         const s = {
-          //'id': `ranges_${userId}`,
+          'id': `ranges_${userId}`,
           events: userData.calendarRanges,
           color: userData.mainColor,
           backgroundColor: 'white',
@@ -113,7 +113,38 @@ export default {
 
     return false;
   },
+  /**
+   * return true if the user ranges are shown on calendar
+   *
+   * @param state
+   * @returns boolean
+   */
+  isRangeShownOnCalendarForUser: (state) => (user) => {
+    console.log(user);
+    const k = state.currentView.users.get(user.id);
+    if (typeof k === 'undefined') {
+      console.error('try to determinate if calendar range is shown and user is not in currentView');
+      return false;
+    }
+    console.log('k', k);
 
+    return k.ranges;
+  },
+
+  /**
+   * return true if the user remote is shown on calendar
+   * @param state
+   * @returns boolean
+   */
+  isRemoteShownOnCalendarForUser: (state) => (user) => {
+    const k = state.currentView.users.get(user.id);
+    if (typeof k === 'undefined') {
+      console.error('try to determinate if calendar range is shown and user is not in currentView');
+      return false;
+    }
+
+    return k.remote;
+  },
 
 
   suggestedEntities(state, getters) {

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

@@ -55,7 +55,7 @@ whoami().then(me => {
 });
 
 if (null !== store.getters.getMainUser) {
-  store.commit('showUserOnCalendar', {what: [USER_CALENDAR_SHOW_RANGES], user: store.getters.getMainUser});
+  store.commit('showUserOnCalendar', {ranges: true, remote: true, user: store.getters.getMainUser});
 }
 
 export default store;

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

@@ -8,13 +8,20 @@ export default {
     state.currentView.start = start;
     state.currentView.end = end;
   },
-  showUserOnCalendar(state, {user, what}) {
+  showUserOnCalendar(state, {user, ranges, remote}) {
-    console.log('showUserOnCalendar', {user: user.id, what});
     if (!state.usersData.has(user.id)) {
       state.usersData.set(user.id, createUserData(user, state.usersData.size));
     }
-    state.currentView.users.set(user.id, what);
+
-    console.log('state at end', state);
+    const cur = state.currentView.users.get(user.id);
+
+    state.currentView.users.set(
+      user.id,
+      {
+        ranges: typeof ranges !== 'undefined' ? ranges : cur.ranges,
+        remote: typeof remote !== 'undefined' ? remote : cur.remote,
+      }
+    );
   },
 
   // ConcernedGroups