wip on app2

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

@@ -1,11 +0,0 @@
-import 'es6-promise/auto';
-import { MeState } from './modules/me';
-import { FullCalendarState } from './modules/fullcalendar';
-import { CalendarRangesState } from './modules/calendarRanges';
-export interface State {
-    me: MeState;
-    fullCalendar: FullCalendarState;
-    calendarRanges: CalendarRangesState;
-}
-declare const store: import("vuex").Store<State>;
-export default store;

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

@@ -1,13 +1,14 @@
 import 'es6-promise/auto';
-import Vuex from 'vuex';
+import {Store, createStore} from 'vuex';
+import {InjectionKey} from "vue";
 //import actions from './actions';
 //import getters from './getters';
 //import mutations from './mutations';
-import {User} from 'ChillCalendarAssets/types';
 import me, {MeState} from './modules/me';
 import fullCalendar, {FullCalendarState} from './modules/fullcalendar';
-import calendarRanges, {CalendarRangesState} from './modules/calendarRanges';
+import calendarRanges, {CalendarRangesState, RangeSource} from './modules/calendarRanges';
 import {whoami} from 'ChillCalendarAssets/vuejs/Calendar/api';
+import {User} from 'ChillMainAssets/types';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -18,46 +19,61 @@ export interface State {
   startDate: Date|null,
   endDate: Date|null,
    */
-  me: MeState,
-  fullCalendar: FullCalendarState,
+  //key: number,
   calendarRanges: CalendarRangesState,
-
+  fullCalendar: FullCalendarState
 }
 
-const store = new Vuex.Store<State>({
-  strict: debug,
-  modules: {
-    me,
-    fullCalendar,
-    calendarRanges,
-  },
-  getters: {
-    getEventSources(state, getters) {
-      let s = [
-        getters["calendarRanges/getRangeSource"],
-      ];
+export const key: InjectionKey<Store<State>> = Symbol();
 
-      console.log('getEventSources', s);
+const futureStore = function(): Promise<Store<State>> {
+  return whoami().then((user: User) => {
+    const store = createStore<State>({
+      strict: debug,
+      /*
+      state: (): State => ({
+        //key: 0,
+      }),
 
-      return s;
-    }
-  }
-  /*
-  state: {
-    appointments: [],
-    appointmentsShown: true,
-    startDate: null,
-    endDate: null,
-  },
-   */
-  //getters,
-  //mutations,
-  //actions,
-});
+       */
+      modules: {
+        me,
+        fullCalendar,
+        calendarRanges,
+      },
+      getters: {
+        getEventSources(state, getters, rootState): RangeSource[] {
+          let s = [];
+          s.push(rootState.calendarRanges.rangeSource);
 
-whoami().then((me: User) => {
-  store.commit('me/setWhoAmi', me, {root: true})
-  store.dispatch('calendarRanges/fetchRanges', null, {root: true});
-});
+          console.log('getEventSources', s);
 
-export default store;
+          return s;
+        },
+      },
+      mutations: {
+        increaseKey(state: State) {
+          //state.key = state.key + 1;
+        }
+      }
+      /*
+      state: {
+        appointments: [],
+        appointmentsShown: true,
+        startDate: null,
+        endDate: null,
+      },
+       */
+      //getters,
+      //mutations,
+      //actions,
+    });
+
+    store.commit('me/setWhoAmi', user, {root: true})
+    //store.dispatch('calendarRanges/fetchRanges', null, {root: true});
+
+    return Promise.resolve(store);
+  });
+}
+
+export default futureStore;

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

@@ -1,43 +1,66 @@
 import {State} from './../index';
-import {ActionContext} from 'vuex';
+import {ActionContext, Module} from 'vuex';
 import {CalendarRange/*, CalendarRangeEvent*/} from 'ChillCalendarAssets/types';
 import {fetchCalendarRangeForUser} from 'ChillCalendarAssets/vuejs/Calendar/api';
 import {calendarRangeToFullCalendarEvent/*, CalendarRangeEvent*/} from 'ChillCalendarAssets/vuejs/Calendar/store/utils';
-import {EventInput} from '@fullcalendar/vue3';
-
-export interface CalendarRangesState {
-  ranges: EventInput[],
-  rangesLoaded: {start: Date, end: Date}[],
-  rangesIndex: Set<string>,
-}
+import {EventInput, EventSource} from '@fullcalendar/vue3';
 
 export interface RangeSource {
+  id: string,
   events: EventInput[],
-  borderColor: string,
-  backgroundColor: string,
-  textColor: string
+  //borderColor: string,
+  //backgroundColor: string,
+  //textColor: string
 }
 
+export interface CalendarRangesState {
+  rangeSource: RangeSource,
+  rangesLoaded: {start: number, end: number}[],
+  rangesIndex: Set<string>,
+  key: number
+}
+
+
 type Context = ActionContext<CalendarRangesState, State>;
 
-export default {
+export default <Module<CalendarRangesState, State>> {
   namespaced: true,
   state: (): CalendarRangesState => ({
-    ranges: [],
+    rangeSource: {
+      id: 'ranges',
+      events: [],
+      //borderColor: "#3788d8",
+      //backgroundColor: '#ffffff',
+      //textColor: '#444444',
+    },
     rangesLoaded: [],
-    rangesIndex: new Set<string>
+    rangesIndex: new Set<string>(),
+    key: 0
   }),
   getters: {
+    /*
     getRangeSource(state: CalendarRangesState): RangeSource {
-      let o = {
+      const o = {
+        id: 'ranges',
         events: state.ranges,
-        borderColor: "#3788d8",
-        backgroundColor: '#ffffff',
-        textColor: '#444444',
+        //borderColor: "#3788d8",
+        //backgroundColor: '#ffffff',
+        //textColor: '#444444',
       }
       console.log('getRangeSource', o);
       return o;
     },
+
+     */
+    isRangeLoaded: (state: CalendarRangesState) => ({start, end}: {start: Date, end: Date}): boolean => {
+      for (let range of state.rangesLoaded) {
+        if (start.getTime() === range.start && end.getTime() === range.end) {
+          return true;
+        }
+      }
+
+      return false;
+    },
   },
   mutations: {
     addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
@@ -46,12 +69,17 @@ export default {
       const toAdd = ranges
         .map(cr => calendarRangeToFullCalendarEvent(cr))
         .filter(r => !state.rangesIndex.has(r.id));
-      state.ranges.push(...toAdd);
-      toAdd.forEach((r) => {state.rangesIndex.add(r.id)});
-      console.log('ranges', state.ranges);
+      console.log('toAdd', toAdd);
+      //state.rangeSource.events.push(...toAdd);
+      toAdd.forEach((r) => {
+        state.rangesIndex.add(r.id);
+        state.rangeSource.events.push(r);
+      });
+      state.key = state.key + toAdd.length;
+      console.log('ranges', state.rangeSource.events);
     },
     addLoaded(state: CalendarRangesState, payload: {start: Date, end: Date}) {
-      state.rangesLoaded.push({start: payload.start, end: payload.end});
+      state.rangesLoaded.push({start: payload.start.getTime(), end: payload.end.getTime()});
     },/*
 
   setRangesToCopy(state: State, payload: CalendarRange[]) {
@@ -59,49 +87,52 @@ export default {
   },*/
     addRange(state: CalendarRangesState, payload: CalendarRange) {
       const asEvent = calendarRangeToFullCalendarEvent(payload);
-      state.ranges = [...state.ranges, asEvent];
+      state.rangeSource.events.push(asEvent);
       state.rangesIndex.add(asEvent.id);
+      state.key = state.key + 1;
     },
     removeRange(state: CalendarRangesState, 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: {
-    fetchRanges(ctx: Context): Promise<RangeSource> {
-      console.log('fetchRanges');
+    fetchRanges(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(ctx.getters.getRangeSource);
       }
-
-      if (ctx.rootState.fullCalendar.currentView.start === null || ctx.rootState.fullCalendar.currentView.end === null) {
-        console.log('current view dates are null');
-        return Promise.resolve(ctx.getters.getRangeSource);
-      }
-
-      if (ctx.getters.isRangeLoaded) {
+/*
+      if (ctx.getters.isRangeLoaded({start, end})) {
         console.log('range already loaded');
         return Promise.resolve(ctx.getters.getRangeSource);
-      }
+      }*/
 
       ctx.commit('addLoaded', {
-        start: ctx.rootState.fullCalendar.currentView.start,
-        end: ctx.rootState.fullCalendar.currentView.end,
+        start: start,
+        end: end,
       });
 
       return fetchCalendarRangeForUser(
         ctx.rootGetters['me/getMe'],
-        ctx.rootState.fullCalendar.currentView.start,
-        ctx.rootState.fullCalendar.currentView.end
+        start,
+        end
       )
-        .then((ranges: CalendarRange[]) => {
+        .then((ranges) => {
           ctx.commit('addRanges', ranges);
-          return Promise.resolve(ctx.getters.getRangeSource);
+          return Promise.resolve(null);
         });
     }
   }

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

@@ -6,7 +6,8 @@ export interface FullCalendarState {
   currentView: {
     start: Date|null,
     end: Date|null,
-  }
+  },
+  key: number
 }
 
 type Context = ActionContext<FullCalendarState, State>;
@@ -17,20 +18,32 @@ export default {
     currentView: {
       start: null,
       end: null,
-    }
+    },
+    key: 0,
   }),
   mutations: {
     setCurrentDatesView: function(state: FullCalendarState, payload: {start: Date, end: Date}): void {
       state.currentView.start = payload.start;
       state.currentView.end = payload.end;
     },
+    increaseKey: function(state: FullCalendarState): void {
+      state.key = state.key + 1;
+    }
   },
   actions: {
-    setCurrentDatesView(ctx: Context, p: {start: Date, end: Date}): Promise<RangeSource> {
-      console.log('dispatch setCurrentDatesView', p);
-      ctx.commit('setCurrentDatesView', {start: p.start, end: p.end});
+    setCurrentDatesView(ctx: Context, {start, end}: {start: Date|null, end: Date|null}): Promise<null> {
+      console.log('dispatch setCurrentDatesView', {start, end});
 
-      return ctx.dispatch('calendarRanges/fetchRanges', null, {root: true});
+      if (ctx.state.currentView.start !== start || ctx.state.currentView.end !== end) {
+        ctx.commit('setCurrentDatesView', {start, end});
+      }
+
+      if (start !== null && end !== null) {
+        console.log('start, end', {start, end});
+        return ctx.dispatch('calendarRanges/fetchRanges', {start, end}, {root: true}).then(_ => Promise.resolve(null));
+      } else {
+        return Promise.resolve(null);
+      }
     },
   }
 }

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

@@ -1,5 +1,5 @@
 import {State} from './../index';
-import {User} from 'ChillCalendarAssets/types';
+import {User} from 'ChillMainAssets/types';
 import {ActionContext} from 'vuex';
 
 export interface MeState {