From d8f80f3d02c5c788016c934253fc8f5ee005db99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Thu, 23 Jun 2022 12:26:48 +0200
Subject: [PATCH] wip on app2

---
 .../Resources/public/types.ts                 |  48 ++---
 .../Resources/public/vuejs/Calendar/api.d.ts  |   5 -
 .../public/vuejs/Calendar/{api.js => api.ts}  |  18 +-
 .../vuejs/Calendar/{const.js => const.ts}     |   0
 .../public/vuejs/Calendar/store/utils.d.ts    |   2 -
 .../Calendar/store/{utils.js => utils.ts}     |  33 ++--
 .../public/vuejs/MyCalendarRange/App.vue      |  70 ++++----
 .../public/vuejs/MyCalendarRange/App2.vue     |  59 +++++++
 .../MyCalendarRange/{i18n.js => i18n.ts}      |   0
 .../public/vuejs/MyCalendarRange/index.js     |  20 ++-
 .../public/vuejs/MyCalendarRange/index2.ts    |  18 ++
 .../vuejs/MyCalendarRange/store/index.d.ts    |  11 --
 .../vuejs/MyCalendarRange/store/index.ts      |  94 +++++-----
 .../store/modules/calendarRanges.ts           | 109 +++++++-----
 .../store/modules/fullcalendar.ts             |  25 ++-
 .../vuejs/MyCalendarRange/store/modules/me.ts |   2 +-
 .../chill.webpack.config.js                   |   2 +-
 .../Resources/public/api/pickTemplate.js      |   2 +-
 .../Resources/public/chill/index.js           |   2 +-
 .../public/chill/js/{date.js => date.ts}      |  27 +--
 ...apiMethods.d.ts => apiMethods.d.ts.backup} |   1 +
 .../Resources/public/lib/api/apiMethods.js    | 110 ------------
 .../Resources/public/lib/api/apiMethods.ts    | 164 ++++++++++++++++++
 .../ChillMainBundle/Resources/public/types.ts |  36 ++++
 .../vuejs/Address/components/DatePane.vue     |   2 +-
 .../EntityWorkflowVueSubscriber.vue           |   2 +-
 .../Notification/NotificationReadToggle.vue   |   2 +-
 .../public/vuejs/_js/{i18n.js => i18n.ts}     |   3 +-
 ...{datetimeFormats.js => datetimeFormats.ts} |   0
 .../Resources/public/lib/household.js         |   2 +-
 .../mod/AccompanyingPeriod/setReferrer.js     |   2 +-
 .../public/vuejs/AccompanyingCourse/api.js    |   2 +-
 .../components/StartDate.vue                  |   2 +-
 .../vuejs/AccompanyingCourse/store/index.js   |   4 +-
 .../AccompanyingCourseWorkCreate/App.vue      |   2 +-
 .../AccompanyingCourseWorkCreate/store.js     |   2 +-
 .../vuejs/AccompanyingCourseWorkEdit/App.vue  |   2 +-
 .../components/FormEvaluation.vue             |   2 +-
 .../vuejs/AccompanyingCourseWorkEdit/store.js |   4 +-
 .../HouseholdMembersEditor/store/index.js     |   4 +-
 .../Resources/public/vuejs/VisGraph/api.js    |   2 +-
 .../AccompanyingPeriod/SetReferrer.vue        |   2 +-
 .../public/vuejs/_components/AddPersons.vue   |   2 +-
 .../_components/Entity/PersonRenderBox.vue    |   2 +-
 44 files changed, 545 insertions(+), 358 deletions(-)
 delete mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.d.ts
 rename src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/{api.js => api.ts} (63%)
 rename src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/{const.js => const.ts} (100%)
 delete mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.d.ts
 rename src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/{utils.js => utils.ts} (67%)
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
 rename src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/{i18n.js => i18n.ts} (100%)
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
 delete mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.d.ts
 rename src/Bundle/ChillMainBundle/Resources/public/chill/js/{date.js => date.ts} (84%)
 rename src/Bundle/ChillMainBundle/Resources/public/lib/api/{apiMethods.d.ts => apiMethods.d.ts.backup} (99%)
 delete mode 100644 src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/types.ts
 rename src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/{i18n.js => i18n.ts} (97%)
 rename src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/{datetimeFormats.js => datetimeFormats.ts} (100%)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
index 4291f2dd9..ce2c920c3 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/types.ts
@@ -1,46 +1,10 @@
 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..
-}
+import {DateTime, User} from 'ChillMainAssets/types';
 
 export interface CalendarRange {
   id: number;
   endDate: DateTime;
-  startdate: DateTime;
+  startDate: DateTime;
   user: User;
   createdAt: DateTime;
   createdBy: User;
@@ -52,3 +16,11 @@ export interface Calendar {
   id: number;
 }
 
+export interface CalendarRemote {
+  id: number;
+  endDate: DateTime;
+  startDate: DateTime;
+  title: string
+}
+
+export {};
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.d.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.d.ts
deleted file mode 100644
index 4c0ea2626..000000000
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-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[];
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
similarity index 63%
rename from src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.js
rename to src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
index d1a4c8426..3abd9a90a 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
@@ -1,7 +1,9 @@
 import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods';
 import {datetimeToISO} from 'ChillMainAssets/chill/js/date';
+import {User} from 'ChillMainAssets/types';
+import {CalendarRange, CalendarRemote} from 'ChillCalendarAssets/types';
 
-const whoami = () => {
+export const whoami = (): Promise<User> => {
   const url = `/api/1.0/main/whoami.json`;
   return fetch(url)
     .then(response => {
@@ -25,24 +27,18 @@ const whoami = () => {
  * @param Date end
  * @return Promise
  */
-const fetchCalendarRangeForUser = (user, start, end) => {
+export const fetchCalendarRangeForUser = (user: User, start: Date, end: Date): Promise<CalendarRange[]> => {
   const uri = `/api/1.0/calendar/calendar-range-available/${user.id}.json`;
   const dateFrom = datetimeToISO(start);
   const dateTo = datetimeToISO(end);
 
-  return fetchResults(uri, {dateFrom, dateTo});
+  return fetchResults<CalendarRange>(uri, {dateFrom, dateTo});
 }
 
-const fetchCalendarRemoteForUser = (user, start, end) => {
+export const fetchCalendarRemoteForUser = (user: User, start: Date, end: Date): Promise<CalendarRemote[]> => {
   const uri = `/api/1.0/calendar/proxy/calendar/by-user/${user.id}/events`;
   const dateFrom = datetimeToISO(start);
   const dateTo = datetimeToISO(end);
 
-  return fetchResults(uri, {dateFrom, dateTo});
+  return fetchResults<CalendarRemote>(uri, {dateFrom, dateTo});
 }
-
-export {
-  whoami,
-  fetchCalendarRangeForUser,
-  fetchCalendarRemoteForUser,
-};
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
similarity index 100%
rename from src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.js
rename to src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.d.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.d.ts
deleted file mode 100644
index e60b2167d..000000000
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-
-export function calendarRangeToFullCalendarEvent(entity: import('ChillCalendarAssets/types').CalendarRange): import('@fullcalendar/vue3').EventInput;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
similarity index 67%
rename from src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
rename to src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
index af194f206..95d9d1609 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
@@ -1,14 +1,26 @@
 import {COLORS} from '../const';
 import {ISOToDatetime} from 'ChillMainAssets/chill/js/date';
+import {DateTime, User} from 'ChillMainAssets/types';
+import {CalendarRange, CalendarRemote} from 'ChillCalendarAssets/types';
+import {EventInput} from '@fullcalendar/vue3';
 
-const addIdToValue = (string, id) => {
+export interface UserData {
+  user: User,
+  calendarRanges: CalendarRange[],
+  calendarRangesLoaded: {}[],
+  remotes: CalendarRemote[],
+  remotesLoaded: {}[],
+  mainColor: string,
+}
+
+export const addIdToValue = (string: string, id: number): string => {
   let array = string ? string.split(',') : [];
   array.push(id.toString());
   let str = array.join();
   return str;
 };
 
-const removeIdFromValue = (string, id) => {
+export const removeIdFromValue = (string: string, id: number) => {
   let array = string.split(',');
   array = array.filter(el => el !== id.toString());
   let str = array.join();
@@ -18,7 +30,7 @@ const removeIdFromValue = (string, id) => {
 /*
 * Assign missing keys for the ConcernedGroups component
 */
-const mapEntity = (entity) => {
+export const mapEntity = (entity: EventInput): EventInput => {
   let calendar =  { ...entity};
   Object.assign(calendar, {thirdParties: entity.professionals});
 
@@ -37,7 +49,7 @@ const mapEntity = (entity) => {
   return calendar;
 };
 
-const createUserData = (user, colorIndex) => {
+export const createUserData = (user: User, colorIndex: number): UserData  => {
   const colorId = colorIndex % COLORS.length;
   console.log('colorId', colorId);
   return {
@@ -51,7 +63,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) => {
+export const calendarRangeToFullCalendarEvent = (entity: CalendarRange): EventInput & {id: string} => {
   return {
     id: `range_${entity.id}`,
     title: "(" + entity.user.text + ")",
@@ -64,7 +76,7 @@ const calendarRangeToFullCalendarEvent = (entity) => {
   };
 }
 
-const remoteToFullCalendarEvent = (entity) => {
+export const remoteToFullCalendarEvent = (entity: CalendarRemote): EventInput & {id: string} => {
   console.log(entity);
   return {
     id: `range_${entity.id}`,
@@ -75,12 +87,3 @@ const remoteToFullCalendarEvent = (entity) => {
     is: 'remote',
   };
 }
-
-export {
-  addIdToValue,
-  calendarRangeToFullCalendarEvent,
-  removeIdFromValue,
-  remoteToFullCalendarEvent,
-  mapEntity,
-  createUserData,
-};
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 111c85adb..35d9d2ca2 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/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>
 
-    <div>Il y a {{ this.eventSource[0].events.length }} events</div>
+    <div>Il y a {{ this.calendarOptions.eventSources[0].events.length }} events</div>
 
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
@@ -96,7 +96,7 @@ import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import { mapGetters, mapActions, mapState } from 'vuex';
-import { vShow } from 'vue';
+import { vShow} from 'vue';
 
 export default {
   name: "App",
@@ -104,6 +104,12 @@ export default {
     FullCalendar,
     Modal
   },
+  renderTracked(event) {
+    console.log('renderTracked' ,event);
+  },
+  renderTriggered(e) {
+    console.log('renderTriggered', e);
+  },
   data() {
     return {
       errorMsg: [],
@@ -122,14 +128,19 @@ export default {
       lastNewDate: null,
       disableCopyDayButton: true,
       showWeekends: false,
-      eventSources: [],
+      start: new Date(),
     }
   },
   computed: {
     ...mapState({
-      rangesToCopy: state => state.rangesToCopy
+      rangesToCopy: state => state.rangesToCopy,
+      key: state => {
+        let k = state.fullCalendar.key + state.calendarRanges.key;
+        console.log('key', k);
+        return k;
+      },
     }),
-    //...mapGetters(),
+    ...mapGetters(['getEventSources']),
       /*, 'appointmentSource'*/
     showMyCalendarWidget: {
       set(value) {
@@ -139,32 +150,22 @@ export default {
         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;
+      let sources = this.getEventSources;
+      console.log('events', sources);
+      return function (calendarInfo, successCallback, failureCallback) {
+        successCallback(sources);
+      }
     },
+
+     */
     calendarOptions() {
       return {
         locale: frLocale,
-        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
+        plugins: [interactionPlugin, timeGridPlugin],
         initialView: 'timeGridWeek',
-        initialDate: window.startDate !== undefined ? window.startDate : new Date(),
+        initialDate: new Date(),
         selectable: true,
         select: this.onDateSelect,
         datesSet: this.onDatesSet,
@@ -172,22 +173,32 @@ export default {
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
         eventClick: this.onEventClick,
-        eventSources: this.eventSources,
+        eventSources: this.getEventSources,
         selectMirror: false,
         editable: true,
         weekends: this.showWeekends,
         slotDuration: '00:15:00',
         slotMinTime: "08:00:00",
         slotMaxTime: "19:00:00",
-        contentHeight: 500,
+        //contentHeight: 500,
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
-          right: 'dayGridMonth timeGridWeek timeGridDay'
+          right: 'timeGridWeek timeGridDay'
         },
       };
     },
   },
+  watch: {
+    key() {
+      console.log('key changed');
+      this.calendarOptions.initialDate = this.start;
+      //this.$refs.fullCalendar.getApi().render();
+    },
+    calendarOptions() {
+      console.log('calendar options changed');
+    }
+  },
   methods: {
     ...mapActions([
       //'fetchRanges',
@@ -198,10 +209,11 @@ export default {
     ]),
     onDatesSet(event) {
       console.log('onDatesSet', event);
+      this.start = event.start;
       this.$store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
         .then(source => {
           console.log('onDatesSet finished');
-          this.eventSources.push(source);
+          //this.eventSources.push(source);
         });
     },
     openModal() {
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
new file mode 100644
index 000000000..b3156c605
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
@@ -0,0 +1,59 @@
+<template>
+  <p>Il y a {{eventSources[0].events.length}} événements</p>
+  <FullCalendar :options="calendarOptions"></FullCalendar>
+</template>
+
+<script setup lang="ts">
+
+//import {CalendarOptions, DatesSetArg, EventSourceInput} from '@fullcalendar/vue3';
+import {reactive, computed, ref} from "vue";
+import {mapGetters, useStore} from "vuex";
+import {key} from './store';
+import '@fullcalendar/core/vdom'; // solves problem with Vite
+import frLocale from '@fullcalendar/core/locales/fr';
+import FullCalendar from '@fullcalendar/vue3';
+import interactionPlugin from "@fullcalendar/interaction";
+import timeGridPlugin from "@fullcalendar/timegrid";
+
+const store = useStore(key);
+
+const eventSources = computed<[]>(() => {
+  console.log('event sources');
+  return store.getters.getEventSources;
+});
+
+const calendarOptions = computed(() => {
+      return {
+        locale: frLocale,
+        plugins: [interactionPlugin, timeGridPlugin],
+        initialView: 'timeGridWeek',
+        initialDate: new Date(),
+        selectable: true,
+        datesSet: onDatesSet,
+        eventSources: eventSources.value,
+        selectMirror: false,
+        editable: true,
+        slotDuration: '00:15:00',
+        slotMinTime: "08:00:00",
+        slotMaxTime: "19:00:00",
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'timeGridWeek timeGridDay'
+        },
+      };
+    });
+
+function onDatesSet(event: any) {
+  console.log('onDatesSet', event);
+  store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
+    .then(source => {
+      console.log('onDatesSet finished');
+      //this.eventSources.push(source);
+    });
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
similarity index 100%
rename from src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
rename to src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
index bb7c75d35..02b2df469 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
@@ -1,16 +1,18 @@
 import { createApp } from 'vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { appMessages } from './i18n'
-import store from './store/index'
+import futureStore from './store/index'
 
 import App from './App.vue';
 
-const i18n = _createI18n(appMessages);
+futureStore().then((store) => {
+  const i18n = _createI18n(appMessages);
 
-const app = createApp({
-   template: `<app></app>`,
-})
-.use(store)
-.use(i18n)
-.component('app', App)
-.mount('#myCalendar');
+  const app = createApp({
+    template: `<app></app>`,
+  })
+    .use(store)
+    .use(i18n)
+    .component('app', App)
+    .mount('#myCalendar');
+});
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
new file mode 100644
index 000000000..46f489f3d
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts
@@ -0,0 +1,18 @@
+import { createApp } from 'vue';
+//import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+//import { appMessages } from './i18n'
+import futureStore, {key} from './store/index'
+
+import App2 from './App2.vue';
+
+futureStore().then((store) => {
+  //const i18n = _createI18n(appMessages);
+
+  const app = createApp({
+    template: `<app></app>`,
+  })
+    .use(store, key)
+    //.use(i18n)
+    .component('app', App2)
+    .mount('#myCalendar');
+});
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.d.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.d.ts
deleted file mode 100644
index 10a3359ec..000000000
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.d.ts
+++ /dev/null
@@ -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;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
index eecfa41ea..a860ae8c1 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
+++ b/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;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
index a17ba81b9..052916ee4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
+++ b/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);
         });
     }
   }
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
index 142a0765d..7168771fd 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
+++ b/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);
+      }
     },
   }
 }
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
index 668e54717..b4bf13fae 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
+++ b/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 {
diff --git a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
index d4ce3f04b..e82210087 100644
--- a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
@@ -6,7 +6,7 @@ module.exports = function(encore, entries) {
     });
 
     encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
-    encore.addEntry('vue_mycalendarrange', __dirname + '/Resources/public/vuejs/MyCalendarRange/index.js');
+    encore.addEntry('vue_mycalendarrange', __dirname + '/Resources/public/vuejs/MyCalendarRange/index2.ts');
     encore.addEntry('page_calendar', __dirname + '/Resources/public/chill/index.js');
     encore.addEntry('mod_answer', __dirname + '/Resources/public/module/Invite/answer.js');
 };
diff --git a/src/Bundle/ChillDocGeneratorBundle/Resources/public/api/pickTemplate.js b/src/Bundle/ChillDocGeneratorBundle/Resources/public/api/pickTemplate.js
index a668fe29d..4c5673d05 100644
--- a/src/Bundle/ChillDocGeneratorBundle/Resources/public/api/pickTemplate.js
+++ b/src/Bundle/ChillDocGeneratorBundle/Resources/public/api/pickTemplate.js
@@ -1,4 +1,4 @@
-import { fetchResults } from "ChillMainAssets/lib/api/apiMethods.js";
+import { fetchResults } from "ChillMainAssets/lib/api/apiMethods.ts";
 
 const fetchTemplates = (entityClass) => {
     let fqdnEntityClass = encodeURI(entityClass);
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/index.js b/src/Bundle/ChillMainBundle/Resources/public/chill/index.js
index dda7b7e67..62bdbc240 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/index.js
@@ -24,7 +24,7 @@ require('./chillmain.scss');
 import { chill } from './js/chill.js';
 global.chill = chill;
 
-require('./js/date.js');
+require('./js/date');
 require('./js/counter.js');
 
 /// Load fonts
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.js b/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts
similarity index 84%
rename from src/Bundle/ChillMainBundle/Resources/public/chill/js/date.js
rename to src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts
index dfe667536..458d20f88 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts
@@ -12,7 +12,7 @@
  * Do not take time into account
  *
  */
-const dateToISO = (date) => {
+export const dateToISO = (date: Date|null): string|null => {
     if (null === date) {
         return null;
     }
@@ -29,7 +29,7 @@ const dateToISO = (date) => {
  *
  * **Experimental**
  */
-const ISOToDate = (str) => {
+export const ISOToDate = (str: string|null): Date|null => {
     if (null === str) {
         return null;
     }
@@ -38,7 +38,7 @@ const ISOToDate = (str) => {
     }
 
     let
-        [year, month, day] = str.split('-');
+        [year, month, day] = str.split('-').map(p => parseInt(p));
 
     return new Date(year, month-1, day);
 }
@@ -47,16 +47,16 @@ const ISOToDate = (str) => {
  * Return a date object from iso string formatted as YYYY-mm-dd:HH:MM:ss+01:00
  *
  */
-const ISOToDatetime = (str) => {
+export const ISOToDatetime = (str: string|null): Date|null => {
     if (null === str) {
         return null;
     }
 
     let
         [cal, times] = str.split('T'),
-        [year, month, date] = cal.split('-'),
+        [year, month, date] = cal.split('-').map(s => parseInt(s)),
         [time, timezone] = times.split(times.charAt(8)),
-        [hours, minutes, seconds] = time.split(':')
+        [hours, minutes, seconds] = time.split(':').map(s => parseInt(s));
     ;
 
     return new Date(year, month-1, date, hours, minutes, seconds);
@@ -66,7 +66,7 @@ const ISOToDatetime = (str) => {
  * Convert a date to ISO8601, valid for usage in api
  *
  */
-const datetimeToISO = (date) => {
+export const datetimeToISO = (date: Date): string => {
     let cal, time, offset;
     cal = [
         date.getFullYear(),
@@ -92,7 +92,7 @@ const datetimeToISO = (date) => {
     return x;
 };
 
-const intervalDaysToISO = (days) => {
+export const intervalDaysToISO = (days: number|string|null): string => {
     if (null === days) {
         return 'P0D';
     }
@@ -100,7 +100,7 @@ const intervalDaysToISO = (days) => {
     return `P${days}D`;
 }
 
-const intervalISOToDays = (str) => {
+export const intervalISOToDays = (str: string|null): number|null => {
     if (null === str) {
         return null
     }
@@ -154,12 +154,3 @@ const intervalISOToDays = (str) => {
 
     return days;
 }
-
-export {
-    dateToISO,
-    ISOToDate,
-    ISOToDatetime,
-    datetimeToISO,
-    intervalISOToDays,
-    intervalDaysToISO,
-};
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts.backup
similarity index 99%
rename from src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts
rename to src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts.backup
index d9d3b7200..07ce99e1a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts.backup
@@ -1,3 +1,4 @@
 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>;
+
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
deleted file mode 100644
index e15ae536a..000000000
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Generic api method that can be adapted to any fetch request
- */
-const makeFetch = (method, url, body, options) => {
-    let opts = {
-        method: method,
-        headers: {
-            'Content-Type': 'application/json;charset=utf-8'
-        },
-        body: (body !== null) ? JSON.stringify(body) : null
-    };
-
-    if (typeof options !== 'undefined') {
-        opts = Object.assign(opts, options);
-    }
-
-    return fetch(url, opts)
-    .then(response => {
-        if (response.ok) {
-            return response.json();
-        }
-
-        if (response.status === 422) {
-            return response.json().then(response => {
-                throw ValidationException(response)
-            });
-        }
-
-        if (response.status === 403) {
-            throw AccessException(response);
-        }
-
-        throw {
-            name: 'Exception',
-            sta: response.status,
-            txt: response.statusText,
-            err: new Error(),
-            violations: response.body
-        };
-    });
-}
-
-/**
- * Fetch results with certain parameters
- */
-const _fetchAction = (page, uri, params) => {
-    const item_per_page = 50;
-    if (params === undefined) {
-        params = {};
-    }
-    let url = uri + '?' + new URLSearchParams({ item_per_page, page, ...params });
-
-    return fetch(url, {
-        method: 'GET',
-        headers: {
-            'Content-Type': 'application/json;charset=utf-8'
-        },
-    }).then(response => {
-        if (response.ok) { return response.json(); }
-        throw new Error({ m: response.statusText });
-    });
-};
-
-const fetchResults = async (uri, params) => {
-    let promises = [],
-        page = 1;
-    let firstData = await _fetchAction(page, uri, params);
-
-    promises.push(Promise.resolve(firstData.results));
-
-    if (firstData.pagination.more) {
-        do {
-            page = ++page;
-            promises.push(_fetchAction(page, uri, params).then(r => Promise.resolve(r.results)));
-        } while (page * firstData.pagination.items_per_page < firstData.count)
-    }
-
-    return Promise.all(promises).then(values => values.flat());
-};
-
-const fetchScopes = () => {
-    return fetchResults('/api/1.0/main/scope.json');
-};
-
-
-/**
- * Error objects to be thrown
- */
-const ValidationException = (response) => {
-    const error = {};
-    error.name = 'ValidationException';
-    error.violations = response.violations.map((violation) => `${violation.title}: ${violation.propertyPath}`);
-    error.titles = response.violations.map((violation) => violation.title);
-    error.propertyPaths = response.violations.map((violation) => violation.propertyPath);
-    return error;
-}
-
-const AccessException = (response) => {
-    const error = {};
-    error.name = 'AccessException';
-    error.violations = ['You are not allowed to perform this action'];
-
-    return error;
-}
-
-export {
-    makeFetch,
-    fetchResults,
-    fetchScopes
-}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
new file mode 100644
index 000000000..0632b7a55
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
@@ -0,0 +1,164 @@
+import {Scope} from 'ChillMainAssets/types';
+
+export type body = {[key: string]: boolean|string|number|null};
+export type fetchOption = {[key: string]: boolean|string|number|null};
+
+export interface Params {
+  [key: string]: number|string
+}
+
+export interface PaginationResponse<T> {
+  pagination: {
+    more: boolean;
+    items_per_page: number;
+  };
+  results: T[];
+  count: number;
+}
+
+export interface FetchParams {
+  [K: string]: string|number|null;
+};
+
+export interface ValidationExceptionInterface {
+  name: 'ValidationException';
+  error: object;
+  violations: string[];
+  titles: string[];
+  propertyPaths: string[];
+}
+
+export interface ValidationErrorResponse {
+  violations: {
+    title: string;
+    propertyPath: string;
+  }[];
+}
+
+export interface AccessExceptionInterface {
+  name: 'AccessException';
+  violations: string[];
+}
+
+
+/**
+ * Generic api method that can be adapted to any fetch request
+ */
+export const makeFetch = <T, Q>(method: 'POST'|'GET'|'PUT'|'PATCH'|'DELETE', url: string, body?: body | T | null, options?: FetchParams): Promise<Q> => {
+    let opts = {
+        method: method,
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        },
+        body: (body !== null || typeof body !== 'undefined') ? JSON.stringify(body) : null
+    };
+
+    if (typeof options !== 'undefined') {
+        opts = Object.assign(opts, options);
+    }
+
+    return fetch(url, opts)
+    .then(response => {
+        if (response.ok) {
+            return response.json();
+        }
+
+        if (response.status === 422) {
+            return response.json().then(response => {
+                throw ValidationException(response)
+            });
+        }
+
+        if (response.status === 403) {
+            throw AccessException(response);
+        }
+
+        throw {
+            name: 'Exception',
+            sta: response.status,
+            txt: response.statusText,
+            err: new Error(),
+            violations: response.body
+        };
+    });
+}
+
+/**
+ * Fetch results with certain parameters
+ */
+function _fetchAction<T>(page: number, uri: string, params?: FetchParams): Promise<PaginationResponse<T>> {
+    const item_per_page: number = 50;
+
+    let searchParams = new URLSearchParams();
+    searchParams.append('item_per_page', item_per_page.toString());
+    searchParams.append('page', page.toString());
+
+    if (params !== undefined) {
+      Object.keys(params).forEach(key => {
+        let v = params[key];
+        if (typeof v === 'string') {
+          searchParams.append(key, v);
+        } else if (typeof v === 'number') {
+          searchParams.append(key, v.toString());
+        } else if (v === null) {
+          searchParams.append(key, '');
+        }
+      });
+    }
+
+    let url = uri + '?' + searchParams.toString();
+
+    return fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        },
+    }).then((response) => {
+        if (response.ok) { return response.json(); }
+        throw new Error(response.statusText);
+    });
+};
+
+export const fetchResults = async<T> (uri: string, params?: FetchParams): Promise<T[]> => {
+    let promises: Promise<T[]>[] = [],
+        page = 1;
+    let firstData: PaginationResponse<T> = await _fetchAction(page, uri, params) as PaginationResponse<T>;
+
+    promises.push(Promise.resolve(firstData.results));
+
+    if (firstData.pagination.more) {
+        do {
+            page = ++page;
+            promises.push(
+              _fetchAction<T>(page, uri, params).then(r => Promise.resolve(r.results))
+            );
+        } while (page * firstData.pagination.items_per_page < firstData.count)
+    }
+
+    return Promise.all(promises).then((values) => values.flat());
+};
+
+export const fetchScopes = (): Promise<Scope[]> => {
+    return fetchResults('/api/1.0/main/scope.json');
+};
+
+
+/**
+ * Error objects to be thrown
+ */
+const ValidationException = (response: ValidationErrorResponse): ValidationExceptionInterface => {
+    const error = {} as ValidationExceptionInterface;
+    error.name = 'ValidationException';
+    error.violations = response.violations.map((violation) => `${violation.title}: ${violation.propertyPath}`);
+    error.titles = response.violations.map((violation) => violation.title);
+    error.propertyPaths = response.violations.map((violation) => violation.propertyPath);
+    return error;
+}
+
+const AccessException = (response: Response): AccessExceptionInterface => {
+    const error = {} as AccessExceptionInterface;
+    error.name = 'AccessException';
+    error.violations = ['You are not allowed to perform this action'];
+
+    return error;
+}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/types.ts b/src/Bundle/ChillMainBundle/Resources/public/types.ts
new file mode 100644
index 000000000..7ff74bb45
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/types.ts
@@ -0,0 +1,36 @@
+export interface DateTime {
+  datetime: string;
+  datetime8601: string
+}
+
+export interface Job {
+  id: number;
+  type: "user_job";
+  label: {
+    "fr": string; // could have other key. How to do that in ts ?
+  }
+}
+
+export interface Center {
+  id: number;
+  type: "center";
+  name: string;
+}
+
+export interface Scope {
+  id: number;
+  type: "scope";
+  name: {
+    "fr": string
+  }
+}
+
+export interface User {
+  type: "user";
+  id: number;
+  username: string;
+  text: string;
+  email: string;
+  user_job: Job;
+  // todo: mainCenter; mainJob; etc..
+}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
index 6a83cbfe2..eb76604d4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
+import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import ActionButtons from './ActionButtons.vue';
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
index 3e3d5405e..895345b63 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 export default {
     name: "EntityWorkflowVueSubscriber",
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
index 892e905b6..7f56e40d6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 export default {
     name: "NotificationReadToggle",
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
similarity index 97%
rename from src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
rename to src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
index f4301981a..12c9b2813 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
@@ -55,11 +55,12 @@ const messages = {
    }
 };
 
-const _createI18n = (appMessages) => {
+const _createI18n = (appMessages: any) => {
    Object.assign(messages.fr, appMessages.fr);
    return createI18n({
       locale: 'fr',
       fallbackLocale: 'fr',
+      // @ts-ignore
       datetimeFormats,
       messages,
    })
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
similarity index 100%
rename from src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.js
rename to src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/lib/household.js b/src/Bundle/ChillPersonBundle/Resources/public/lib/household.js
index c96694dcb..b05959f27 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/lib/household.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/lib/household.js
@@ -1,4 +1,4 @@
-import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 const fetchHouseholdByAddressReference = async (reference) => {
   const url = `/api/1.0/person/household/by-address-reference/${reference.id}.json`
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js b/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
index 939075380..e4bea7d08 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
@@ -1,6 +1,6 @@
 import {createApp} from 'vue';
 import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
-import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
+import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 /**
  *
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index ab95229a2..6912c68ae 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -1,4 +1,4 @@
-import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 /*
 * Endpoint v.2 chill_api_single_accompanying_course__entity
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
index b6a55ef39..fd4b38463 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
@@ -16,7 +16,7 @@
 
 <script>
 
-import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import { mapState } from 'vuex';
 
 export default {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index c5150b015..8324a3d82 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -1,6 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { fetchScopes } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchScopes } from 'ChillMainAssets/lib/api/apiMethods.ts';
 import { getAccompanyingCourse,
    getReferrersSuggested,
    getUsers,
@@ -8,7 +8,7 @@ import { getAccompanyingCourse,
 import { patchPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
 import { patchThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
-import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
+import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date';
 
 
 const debug = process.env.NODE_ENV !== 'production';
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
index 758cd7e5e..b37298ab1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@@ -127,7 +127,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
-import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
+import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
 import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 const i18n = {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/store.js
index 3c2e034d7..3eee7c56a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/store.js
@@ -1,6 +1,6 @@
 
 import { createStore } from 'vuex';
-import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
+import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
 // import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index fb8796de5..04c753358 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -314,7 +314,7 @@
 
 <script>
 import {mapState, mapGetters,} from 'vuex';
-import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import AddResult from './components/AddResult.vue';
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
index b1e657554..e423838d1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -164,7 +164,7 @@
 </template>
 
 <script>
-import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
+import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import { mapGetters, mapState } from 'vuex';
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
index 4b997d002..acbe51981 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
@@ -1,8 +1,8 @@
 import { createStore } from 'vuex';
-import { dateToISO, ISOToDate, datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date.js';
+import { dateToISO, ISOToDate, datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
 import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
-import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
 import { fetchTemplates } from 'ChillDocGeneratorAssets/api/pickTemplate.js';
 
 const debug = process.env.NODE_ENV !== 'production';
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
index f3801576d..63c2aba19 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
@@ -1,8 +1,8 @@
 import { createStore } from 'vuex';
 import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod, fetchAddressSuggestionByPerson} from './../api.js';
-import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js'
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts'
 import { fetchHouseholdByAddressReference } from 'ChillPersonAssets/lib/household.js';
-import { datetimeToISO, dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
+import { datetimeToISO, dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
 
 const debug = process.env.NODE_ENV !== 'production';
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
index 01c335436..dc7f2632c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
@@ -1,5 +1,5 @@
 import { splitId } from './vis-network';
-import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 /**
  * @function getFetch
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
index 38418f305..96196f6fd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
@@ -6,7 +6,7 @@
 
 <script>
 
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
 
 export default {
   name: "SetReferrer",
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index f84fc2e1d..05f622d00 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -303,7 +303,7 @@ export default {
                                        'id': responsePerson.id
                                     },
                                     'start_date': {
-                                       // TODO: use date.js methods (low priority)
+                                       // TODO: use date.ts methods (low priority)
                                        'datetime': `${new Date().toISOString().split('T')[0]}T00:00:00+02:00`
                                     },
                                     'holder': false,
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index f2cf1f7bd..114d0e150 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -200,7 +200,7 @@
 </template>
 
 <script>
-import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
+import {dateToISO} from 'ChillMainAssets/chill/js/date';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';