basic structure for using modules in stores and convert to TS

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/actions.ts.backup

@@ -1,28 +1,43 @@
-import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
+import {makeFetch, fetchResults} from 'ChillMainAssets/lib/api/apiMethods';
+import {fetchCalendarRangeForUser} from 'ChillCalendarAssets/vuejs/Calendar/api';
+import {ActionContext} from 'vuex';
+import {State} from './index';
+
+type Context = ActionContext<State, State>;
 
 const actions = {
-  fetchRanges({commit}, payload = null) {
-    const url = payload ? `/api/1.0/calendar/calendar-range-available.json?user=${payload.userId}&start=${payload.dateToCopy}` :
-      `/api/1.0/calendar/calendar-range-available.json?user=${window.userId}`
-    return makeFetch('GET', url)
-      .then((response) => {
-        if (payload) {
-          return response.results;
-        } else {
-          const ranges = response.results.map(range => (
-            {
-              start: range.startDate.datetime,
-              end: range.endDate.datetime,
-              calendarRangeId: range.id,
-              toDelete: false
-            }
-          ));
-          commit('setRanges', ranges)
-        }
+  setCurrentDatesView(, {start, end}) {
+    commit('setCurrentDatesView', {start, end});
+    dispatch('fetchRanges');
+  },
+  fetchRanges({commit, state}, payload = null) {
+    if (state.me === null) {
+      console.log('me is not there');
+      return Promise.resolve();
+    }
+
+    if (state.currentView.start === null || state.currentView.end === null) {
+      console.log('current view dates are null');
+      return Promise.resolve();
+    }
+
+    if (getters.isRangeLoaded) {
+      console.log('range already loaded');
+      return Promise.resolve();
+    }
+
+    commit('addLoaded', {start: state.currentView.start, end: state.currentView.end});
+
+    return fetchCalendarRangeForUser(state.me, state.currentView.start, state.currentView.end)
+      .then(ranges => {
+        commit('setRanges', ranges);
+        return Promise.resolve();
       })
-      .catch((error) => {
-        console.log(error);
+      .catch(err => {
+        console.error(err);
+        return Promise.resolve();
       })
+    ;
   },
   postRange({commit}, payload) {
     const url = `/api/1.0/calendar/calendar-range.json?`;

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/getters.ts.backup

@@ -18,7 +18,16 @@ const getters = {
     } else {
       return null
     }
-  }
+  },
+  isRangeLoaded: (state) => (start, end) => {
+    for (let {rStart, rEnd} of state.rangesLoaded) {
+      if (start === rStart && end === rEnd) {
+        return true;
+      }
+    }
+
+    return false;
+  },
 };
 
 export default getters;

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

@@ -0,0 +1,11 @@
+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.js

@@ -1,21 +0,0 @@
-import 'es6-promise/auto';
-import {createStore} from 'vuex';
-import actions from './actions';
-import getters from './getters';
-import mutations from './mutations';
-
-const debug = process.env.NODE_ENV !== 'production';
-
-const store = createStore({
-  strict: debug,
-  state: {
-    ranges: [],
-    appointments: [],
-    appointmentsShown: true
-  },
-  getters,
-  mutations,
-  actions,
-});
-
-export default store;

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

@@ -0,0 +1,63 @@
+import 'es6-promise/auto';
+import Vuex from 'vuex';
+//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 {whoami} from 'ChillCalendarAssets/vuejs/Calendar/api';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+export interface State {
+  /*
+  appointments: Calendar[],
+  appointmentsShown: boolean,
+  startDate: Date|null,
+  endDate: Date|null,
+   */
+  me: MeState,
+  fullCalendar: FullCalendarState,
+  calendarRanges: CalendarRangesState,
+
+}
+
+const store = new Vuex.Store<State>({
+  strict: debug,
+  modules: {
+    me,
+    fullCalendar,
+    calendarRanges,
+  },
+  getters: {
+    getEventSources(state, getters) {
+      let s = [
+        getters["calendarRanges/getRangeSource"],
+      ];
+
+      console.log('getEventSources', s);
+
+      return s;
+    }
+  }
+  /*
+  state: {
+    appointments: [],
+    appointmentsShown: true,
+    startDate: null,
+    endDate: null,
+  },
+   */
+  //getters,
+  //mutations,
+  //actions,
+});
+
+whoami().then((me: User) => {
+  store.commit('me/setWhoAmi', me, {root: true})
+  store.dispatch('calendarRanges/fetchRanges', null, {root: true});
+});
+
+export default store;

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

@@ -0,0 +1,108 @@
+import {State} from './../index';
+import {ActionContext} 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>,
+}
+
+export interface RangeSource {
+  events: EventInput[],
+  borderColor: string,
+  backgroundColor: string,
+  textColor: string
+}
+
+type Context = ActionContext<CalendarRangesState, State>;
+
+export default {
+  namespaced: true,
+  state: (): CalendarRangesState => ({
+    ranges: [],
+    rangesLoaded: [],
+    rangesIndex: new Set<string>
+  }),
+  getters: {
+    getRangeSource(state: CalendarRangesState): RangeSource {
+      let o = {
+        events: state.ranges,
+        borderColor: "#3788d8",
+        backgroundColor: '#ffffff',
+        textColor: '#444444',
+      }
+      console.log('getRangeSource', o);
+      return o;
+    },
+  },
+  mutations: {
+    addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
+      console.log('addRanges', ranges);
+
+      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);
+    },
+    addLoaded(state: CalendarRangesState, payload: {start: Date, end: Date}) {
+      state.rangesLoaded.push({start: payload.start, end: payload.end});
+    },/*
+
+  setRangesToCopy(state: State, payload: CalendarRange[]) {
+    state.rangesToCopy = payload
+  },*/
+    addRange(state: CalendarRangesState, payload: CalendarRange) {
+      const asEvent = calendarRangeToFullCalendarEvent(payload);
+      state.ranges = [...state.ranges, asEvent];
+      state.rangesIndex.add(asEvent.id);
+    },
+    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);
+      }
+    },
+  },
+  actions: {
+    fetchRanges(ctx: Context): Promise<RangeSource> {
+      console.log('fetchRanges');
+      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) {
+        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,
+      });
+
+      return fetchCalendarRangeForUser(
+        ctx.rootGetters['me/getMe'],
+        ctx.rootState.fullCalendar.currentView.start,
+        ctx.rootState.fullCalendar.currentView.end
+      )
+        .then((ranges: CalendarRange[]) => {
+          ctx.commit('addRanges', ranges);
+          return Promise.resolve(ctx.getters.getRangeSource);
+        });
+    }
+  }
+};

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

@@ -0,0 +1,38 @@
+import {State} from './../index';
+import {ActionContext} from 'vuex';
+import {RangeSource} from './calendarRanges';
+
+export interface FullCalendarState {
+  currentView: {
+    start: Date|null,
+    end: Date|null,
+  }
+}
+
+type Context = ActionContext<FullCalendarState, State>;
+
+export default {
+  namespaced: true,
+  state: (): FullCalendarState => ({
+    currentView: {
+      start: null,
+      end: null,
+    }
+  }),
+  mutations: {
+    setCurrentDatesView: function(state: FullCalendarState, payload: {start: Date, end: Date}): void {
+      state.currentView.start = payload.start;
+      state.currentView.end = payload.end;
+    },
+  },
+  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});
+
+      return ctx.dispatch('calendarRanges/fetchRanges', null, {root: true});
+    },
+  }
+}
+
+

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

@@ -0,0 +1,29 @@
+import {State} from './../index';
+import {User} from 'ChillCalendarAssets/types';
+import {ActionContext} from 'vuex';
+
+export interface MeState {
+  me: User|null,
+}
+
+type Context = ActionContext<MeState, State>;
+
+export default {
+  namespaced: true,
+  state: (): MeState => ({
+    me: null,
+  }),
+  getters: {
+    getMe: function(state: MeState): User|null {
+      return state.me;
+    },
+  },
+  mutations: {
+    setWhoAmi(state: MeState, me: User) {
+      state.me = me;
+    },
+  }
+};
+
+
+

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

@@ -1,25 +0,0 @@
-const mutations = {
-  setRanges(state, payload) {
-    state.ranges = payload;
-  },
-  setRangesToCopy(state, payload) {
-    state.rangesToCopy = payload
-  },
-  addRange(state, payload) {
-    state.ranges = [...state.ranges, payload];
-  },
-  removeRange(state, payload) {
-    const filteredCollection = state.ranges.filter(
-      (r) => r.calendarRangeId !== payload
-    )
-    state.ranges = filteredCollection;
-  },
-  setAppointments(state, payload) {
-    state.appointments = payload;
-  },
-  setAppointmentShown(state, payload) {
-    state.appointmentsShown = payload
-  }
-};
-
-export default mutations;

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/mutations.ts.backup

@@ -0,0 +1,39 @@
+import {State} from './index';
+import {CalendarRange, Calendar, User} from 'ChillCalendarAssets/types';
+
+const mutations = {
+  setCurrentDatesView(state: State, payload: {start: Date, end: Date}) {
+    state.currentView.start = payload.start;
+    state.currentView.end = payload.end;
+  },
+  addRanges(state: State, ranges: CalendarRange[]) {
+    console.log('addRanges', ranges);
+
+    const toAdd = ranges.filter(r => !state.rangesIndex.has(r.id));
+    state.ranges.push(...toAdd);
+    toAdd.forEach((r) => {state.rangesIndex.add(r.id)});
+  },
+  addLoaded(state: State, payload: {start: Date, end: Date}) {
+    state.rangesLoaded.push({start: payload.start, end: payload.end});
+  },/*
+  setRangesToCopy(state: State, payload: CalendarRange[]) {
+    state.rangesToCopy = payload
+  },*/
+  addRange(state: State, payload: CalendarRange) {
+    state.ranges = [...state.ranges, payload];
+  },
+  removeRange(state: State, payload: CalendarRange) {
+    const filteredCollection = state.ranges.filter(
+      (r) => r.calendarRangeId !== payload
+    )
+    state.ranges = filteredCollection;
+  },
+  setAppointments(state: State, payload: Calendar) {
+    state.appointments = payload;
+  },
+  setAppointmentShown(state: State, payload: boolean) {
+    state.appointmentsShown = payload
+  }
+};
+
+export default mutations;