basic structure for using modules in stores and convert to TS

src/Bundle/ChillCalendarBundle/Resources/public/types.ts

@@ -0,0 +1,54 @@
+import {EventInput} from '@fullcalendar/vue3';
+
+export interface DateTime {
+  datetime: string;
+  datetime8601: string
+}
+
+export interface Job {
+  id: number;
+  interface: "user_job";
+  label: {
+    "fr": string; // could have other key. How to do that in ts ?
+  }
+}
+
+export interface Center {
+  id: number;
+  interface: "center";
+  name: string;
+}
+
+export interface Scope {
+  id: number;
+  interface: "scope";
+  name: {
+    "fr": string
+  }
+}
+
+export interface User {
+  interface: "user";
+  id: number;
+  username: string;
+  text: string;
+  email: string;
+  user_job: Job;
+  // todo: mainCenter; mainJob; etc..
+}
+
+export interface CalendarRange {
+  id: number;
+  endDate: DateTime;
+  startdate: DateTime;
+  user: User;
+  createdAt: DateTime;
+  createdBy: User;
+  updatedAt: DateTime;
+  updatedBy: User;
+}
+
+export interface Calendar {
+  id: number;
+}
+

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.d.ts

@@ -0,0 +1,5 @@
+export function whoami(): import('ChillCalendarAssets/types').User;
+
+export function fetchCalendarRangeForUser(user: import('ChillCalendarAssets/types').User, start: Date, end: Date): import('ChillCalendarAssets/types').CalendarRange[];
+
+export function fetchCalendarRemoteForUser(user: import('ChillCalendarAssets/types').User, start: Date, end: Date): import('ChillCalendarAssets/types').Calendar[];

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

@@ -0,0 +1,2 @@
+
+export function calendarRangeToFullCalendarEvent(entity: import('ChillCalendarAssets/types').CalendarRange): import('@fullcalendar/vue3').EventInput;

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

@@ -50,6 +50,7 @@ const createUserData = (user, colorIndex) => {
   }
 }
 
+// TODO move this function to a more global namespace, as it is in use in MyCalendarRange app
 const calendarRangeToFullCalendarEvent = (entity) => {
   return {
     id: `range_${entity.id}`,

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

@@ -11,7 +11,7 @@
       <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
     </div>
 
-    <FullCalendar ref="fullCalendar" :options="{...calendarOptions, eventSources: [this.rangeSource, this.appointmentSource]}">
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
           <b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b>
@@ -119,20 +119,61 @@ export default {
       myCalendarClickedEvent: null,
       lastNewDate: null,
       disableCopyDayButton: true,
-      calendarOptions: {
+      showWeekends: false,
+      eventSources: [],
+    }
+  },
+  computed: {
+    ...mapState({
+      rangesToCopy: state => state.rangesToCopy
+    }),
+    //...mapGetters(),
+      /*, 'appointmentSource'*/
+    showMyCalendarWidget: {
+      set(value) {
+        this.toggleMyCalendar(value);
+      },
+      get() {
+        return this.showMyCalendar;
+      }
+    },
+    events() {
+      let e = this.$store.getters.getEventSources;
+      console.log('events', e);
+
+      e.push(
+        {
+          id: 'fake',
+          events: [
+            {
+              start: '2022-06-17T12:00:00+02:00',
+              end: '2022-06-17T14:00:00+02:00',
+              title: Math.random().toString(36).slice(2, 7),
+
+            }
+          ]
+        }
+      );
+
+      return e;
+    },
+    calendarOptions() {
+      return {
         locale: frLocale,
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
         initialView: 'timeGridWeek',
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
         selectable: true,
         select: this.onDateSelect,
+        datesSet: this.onDatesSet,
         eventChange: this.onEventChange,
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
         eventClick: this.onEventClick,
+        eventSources: this.eventSources,
         selectMirror: false,
         editable: true,
-        weekends: false,
+        weekends: this.showWeekends,
         slotDuration: '00:15:00',
         slotMinTime: "08:00:00",
         slotMaxTime: "19:00:00",
@@ -142,31 +183,25 @@ export default {
           center: 'title',
           right: 'dayGridMonth timeGridWeek timeGridDay'
         },
-      },
-    }
-  },
-  computed: {
-    ...mapState({
-      rangesToCopy: state => state.rangesToCopy
-    }),
-    ...mapGetters(['rangeSource', 'appointmentSource']),
-    showMyCalendarWidget: {
-      set(value) {
-        this.toggleMyCalendar(value);
-      },
-      get() {
-        return this.showMyCalendar;
-      }
-    }
+      };
+    },
   },
   methods: {
     ...mapActions([
-      'fetchRanges',
-      'fetchAppointments',
+      //'fetchRanges',
+      //'fetchAppointments',
       'postRange',
       'patchRange',
       'deleteRange'
     ]),
+    onDatesSet(event) {
+      console.log('onDatesSet', event);
+      this.$store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
+        .then(source => {
+          console.log('onDatesSet finished');
+          this.eventSources.push(source);
+        });
+    },
     openModal() {
       this.modal.showModal = true;
     },
@@ -184,7 +219,7 @@ export default {
       this.showMyCalendar = value;
     },
     toggleWeekends: function() {
-      this.calendarOptions.weekends = !this.calendarOptions.weekends;
+      this.showWeekends = !this.showWeekends;
     },
     replaceDate(from, to) {
 
@@ -271,10 +306,8 @@ export default {
     }
   },
   mounted() {
-    this.fetchRanges()
-
     if (this.showMyCalendar) {
-      this.fetchAppointments(this.userId)
+     // this.fetchAppointments(this.userId)
     }
   }
 }

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;

src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts

@@ -0,0 +1,3 @@
+export function fetchResults<T>(uri: string, params: {item_per_page?: number}): Promise<T[]>;
+
+export function makeFetch<T, B>(method: "GET"|"POST"|"PATCH"|"DELETE", url: string, body: B, options: {[key: string]: string}): Promise<T>;