display locals calendar events in Calendar app

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

@@ -105,6 +105,7 @@
             <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
             <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
             <b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} {{ $t('current_selected')}} </b>
+            <b v-else-if="arg.event.extendedProps.is === 'local'">{{ arg.event.title}}</b>
             <b v-else>{{ arg.timeText }} {{ $t('current_selected')}} </b>
           </span>
         </template>

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

@@ -5,6 +5,7 @@ import {
 import {
   fetchCalendarRangeForUser,
   fetchCalendarRemoteForUser,
+  fetchCalendarLocalForUser,
 } from './../api';
 import {datetimeToISO} from 'ChillMainAssets/chill/js/date';
 import {postLocation} from 'ChillActivityAssets/vuejs/Activity/api';
@@ -56,6 +57,12 @@ export default {
           {user: state.usersData.get(uid).user, start: state.currentView.start, end: state.currentView.end}
         )
       );
+      promises.push(
+        dispatch(
+          'fetchCalendarLocalsForUser',
+          {user: state.usersData.get(uid).user, start: state.currentView.start, end: state.currentView.end}
+        )
+      );
     }
 
     return Promise.all(promises);
@@ -78,6 +85,15 @@ export default {
       });
     }
   },
+  fetchCalendarLocalsForUser({commit, getters}, {user, start, end}) {
+    if (!getters.isCalendarRemoteLoadedForUser({user, start, end})) {
+      return fetchCalendarLocalForUser(user, start, end).then((locals) => {
+        commit('addCalendarLocalsForUser', {user, locals, start, end});
+
+        return Promise.resolve();
+      });
+    }
+  },
   addPersonsInvolved({commit, dispatch}, payload) {
     console.log('### action addPersonsInvolved', payload.result.type);
     console.log('### action addPersonsInvolved payload result', payload.result);

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

@@ -1,5 +1,3 @@
-import {calendarRangeToFullCalendarEvent} from './utils';
-
 export default {
   /**
    * get the main user of the event/Calendar
@@ -85,6 +83,19 @@ export default {
 
         sources.push(s);
       }
+
+      // if remotes is checked, we display also the locals calendars
+      if (kinds.remotes && userData.locals.length > 0) {
+        const s = {
+          'id': `local_${userId}`,
+          events: userData.locals.filter(l => l.originId !== state.activity.id),
+          color: userData.mainColor,
+          textColor: 'black',
+          editable: false,
+        };
+
+        sources.push(s);
+      }
     }
 
     return sources;

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

@@ -2,6 +2,7 @@ import {
   createUserData,
   calendarRangeToFullCalendarEvent,
   remoteToFullCalendarEvent,
+  localsToFullCalendarEvent,
 } from './utils';
 
 export default {
@@ -162,6 +163,27 @@ export default {
     userData.remotes = userData.remotes.concat(eventRemotes);
     userData.remotesLoaded.push({start, end});
   },
+  addCalendarLocalsForUser(state, {user, locals, start, end}) {
+    let userData;
+    if (state.usersData.has(user.id)) {
+      userData = state.usersData.get(user.id);
+    } else {
+      userData = createUserData(user, state.usersData.size);
+      state.usersData.set(user.id, userData);
+    }
+
+    const eventRemotes = locals
+      .filter(r => !state.existingEvents.has(`locals_${r.id}`))
+      .map(r => {
+        // add to existing ids
+        state.existingEvents.add(`locals_${r.id}`);
+        return r;
+      })
+      .map(r => localsToFullCalendarEvent(r));
+
+    userData.locals = userData.locals.concat(eventRemotes);
+    userData.localsLoaded.push({start, end});
+  },
   // Location
   updateLocation(state, value) {
     console.log('### mutation: updateLocation', value);

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

@@ -11,6 +11,8 @@ export interface UserData {
   calendarRangesLoaded: {}[],
   remotes: CalendarRemote[],
   remotesLoaded: {}[],
+  locals: CalendarRemote[],
+  localsLoaded: {}[],
   mainColor: string,
 }
 
@@ -59,6 +61,8 @@ export const createUserData = (user: User, colorIndex: number): UserData  => {
     calendarRangesLoaded: [],
     remotes: [],
     remotesLoaded: [],
+    locals: [],
+    localsLoaded: [],
     mainColor: COLORS[colorId],
   }
 }
@@ -91,10 +95,11 @@ export const remoteToFullCalendarEvent = (entity: CalendarRemote): EventInput &
   };
 }
 
-export const localsToFullCalendarEvent = (entity: CalendarLight): EventInput & {id: string} => {
+export const localsToFullCalendarEvent = (entity: CalendarLight): EventInput & {id: string; originId: number;} => {
   return {
     id: `local_${entity.id}`,
     title: entity.persons.map(p => p.text).join(', '),
+    originId: entity.id,
     start: entity.startDate.datetime8601,
     end: entity.endDate.datetime8601,
     allDay: false,