working calendar ranges with a subset of features

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts

@@ -7,6 +7,7 @@ import {InjectionKey} from "vue";
 import me, {MeState} from './modules/me';
 import fullCalendar, {FullCalendarState} from './modules/fullcalendar';
 import calendarRanges, {CalendarRangesState} from './modules/calendarRanges';
+import calendarRemotes, {CalendarRemotesState} from './modules/calendarRemotes';
 import {whoami} from 'ChillCalendarAssets/vuejs/Calendar/api';
 import {User} from 'ChillMainAssets/types';
 
@@ -21,7 +22,8 @@ export interface State {
    */
   //key: number,
   calendarRanges: CalendarRangesState,
-  fullCalendar: FullCalendarState
+  calendarRemotes: CalendarRemotesState,
+  fullCalendar: FullCalendarState,
 }
 
 export const key: InjectionKey<Store<State>> = Symbol();
@@ -40,6 +42,7 @@ const futureStore = function(): Promise<Store<State>> {
         me,
         fullCalendar,
         calendarRanges,
+        calendarRemotes,
       },
       mutations: {
         increaseKey(state: State) {

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts

@@ -39,6 +39,18 @@ export default <Module<CalendarRangesState, State>> {
 
       const toAdd = ranges
         .map(cr => calendarRangeToFullCalendarEvent(cr))
+        .map(cr => ({...cr, backgroundColor: 'white', borderColor:'#3788d8',
+          textColor: 'black'}))
+        .filter(r => !state.rangesIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.rangesIndex.add(r.id);
+        state.ranges.push(r);
+      });
+      state.key = state.key + toAdd.length;
+    },
+    addExternals(state, externalEvents: (EventInput & {id: string})[] ) {
+      const toAdd = externalEvents
         .filter(r => !state.rangesIndex.has(r.id));
 
       toAdd.forEach((r) => {
@@ -83,11 +95,11 @@ export default <Module<CalendarRangesState, State>> {
         console.log('me is not there');
         return Promise.resolve(ctx.getters.getRangeSource);
       }
-/*
+
       if (ctx.getters.isRangeLoaded({start, end})) {
         console.log('range already loaded');
         return Promise.resolve(ctx.getters.getRangeSource);
-      }*/
+      }
 
       ctx.commit('addLoaded', {
         start: start,

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRemotes.ts

@@ -0,0 +1,120 @@
+import {State} from './../index';
+import {ActionContext, Module} from 'vuex';
+import {CalendarRemote} from 'ChillCalendarAssets/types';
+import {fetchCalendarRemoteForUser} from 'ChillCalendarAssets/vuejs/Calendar/api';
+import {calendarRangeToFullCalendarEvent} from 'ChillCalendarAssets/vuejs/Calendar/store/utils';
+import {EventInput, EventSource} from '@fullcalendar/vue3';
+import {remoteToFullCalendarEvent} from "../../../Calendar/store/utils";
+import {TransportExceptionInterface} from "ChillMainAssets/lib/api/apiMethods";
+import {COLORS} from "ChillCalendarAssets/vuejs/Calendar/const";
+
+export interface CalendarRemotesState {
+  remotes: EventInput[],
+  remotesLoaded: {start: number, end: number}[],
+  remotesIndex: Set<string>,
+  key: number
+}
+
+type Context = ActionContext<CalendarRemotesState, State>;
+
+export default <Module<CalendarRemotesState, State>> {
+  namespaced: true,
+  state: (): CalendarRemotesState => ({
+    remotes: [],
+    remotesLoaded: [],
+    remotesIndex: new Set<string>(),
+    key: 0
+  }),
+  getters: {
+    isRemotesLoaded: (state: CalendarRemotesState) => ({start, end}: {start: Date, end: Date}): boolean => {
+      for (let range of state.remotesLoaded) {
+        if (start.getTime() === range.start && end.getTime() === range.end) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+  },
+  mutations: {
+    addRemotes(state: CalendarRemotesState, ranges: CalendarRemote[]) {
+      console.log('addRemotes', ranges);
+
+      const toAdd = ranges
+        .map(cr => remoteToFullCalendarEvent(cr))
+        .filter(r => !state.remotesIndex.has(r.id));
+
+      toAdd.forEach((r) => {
+        state.remotesIndex.add(r.id);
+        state.remotes.push(r);
+      });
+      state.key = state.key + toAdd.length;
+    },
+    addLoaded(state: CalendarRemotesState, payload: {start: Date, end: Date}) {
+      state.remotesLoaded.push({start: payload.start.getTime(), end: payload.end.getTime()});
+    },/*
+
+  setRangesToCopy(state: State, payload: CalendarRange[]) {
+    state.rangesToCopy = payload
+  },*/
+    addRemote(state: CalendarRemotesState, payload: CalendarRemote) {
+      const asEvent = remoteToFullCalendarEvent(payload);
+      state.remotes.push(asEvent);
+      state.remotesIndex.add(asEvent.id);
+      state.key = state.key + 1;
+    },
+    removeRemote(state: CalendarRemotesState, payload: EventInput) {
+      /*
+      state.ranges = state.ranges.filter(
+        (r) => r.id !== payload.id
+      );
+      if (typeof payload.id === "string") {
+        state.rangesIndex.delete(payload.id);
+      }
+      state.key = state.key + 1;
+
+       */
+    },
+  },
+  actions: {
+    fetchRemotes(ctx: Context, payload: {start: Date, end: Date}): Promise<null> {
+      console.log('fetchRanges', payload);
+      const start = payload.start;
+      const end = payload.end;
+
+      if (ctx.rootGetters['me/getMe'] === null) {
+        console.log('me is not there');
+        return Promise.resolve(null);
+      }
+
+      if (ctx.getters.isRemotesLoaded({start, end})) {
+        console.log('range already loaded');
+        return Promise.resolve(ctx.getters.getRangeSource);
+      }
+
+      ctx.commit('addLoaded', {
+        start: start,
+        end: end,
+      });
+
+      return fetchCalendarRemoteForUser(
+        ctx.rootGetters['me/getMe'],
+        start,
+        end
+      )
+        .then((remotes: CalendarRemote[]) => {
+          //ctx.commit('addRemotes', remotes);
+          const inputs = remotes
+            .map(cr => remoteToFullCalendarEvent(cr))
+            .map(cr => ({...cr, backgroundColor: COLORS[0], textColor: 'black', editable: false}))
+          ctx.commit('calendarRanges/addExternals', inputs, {root: true});
+          return Promise.resolve(null);
+        })
+        .catch((e: TransportExceptionInterface) => {
+          console.error(e);
+
+          return Promise.resolve(null);
+        });
+    }
+  }
+};

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts

@@ -38,8 +38,13 @@ export default {
       }
 
       if (start !== null && end !== null) {
-        console.log('start, end', {start, end});
-        return ctx.dispatch('calendarRanges/fetchRanges', {start, end}, {root: true}).then(_ => Promise.resolve(null));
+
+        return Promise.all([
+          ctx.dispatch('calendarRanges/fetchRanges', {start, end}, {root: true}).then(_ => Promise.resolve(null)),
+          ctx.dispatch('calendarRemotes/fetchRemotes', {start, end}, {root: true}).then(_ => Promise.resolve(null))
+          ]
+        ).then(_ => Promise.resolve(null));
+
       } else {
         return Promise.resolve(null);
       }