add feature add and delete range

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

@@ -24,6 +24,7 @@ export interface State {
   calendarRanges: CalendarRangesState,
   calendarRemotes: CalendarRemotesState,
   fullCalendar: FullCalendarState,
+  me: MeState,
 }
 
 export const key: InjectionKey<Store<State>> = Symbol();

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

@@ -1,20 +1,24 @@
 import {State} from './../index';
 import {ActionContext, Module} from 'vuex';
-import {CalendarRange/*, CalendarRangeEvent*/} from 'ChillCalendarAssets/types';
+import {CalendarRange, CalendarRangeEdit} from "ChillCalendarAssets/types";
 import {fetchCalendarRangeForUser} from 'ChillCalendarAssets/vuejs/Calendar/api';
-import {calendarRangeToFullCalendarEvent/*, CalendarRangeEvent*/} from 'ChillCalendarAssets/vuejs/Calendar/store/utils';
-import {EventInput, EventSource} from '@fullcalendar/vue3';
+import {calendarRangeToFullCalendarEvent} from 'ChillCalendarAssets/vuejs/Calendar/store/utils';
+import {UserAssociatedInterface} from "../../../../../../../ChillMainBundle/Resources/public/types";
+import {EventInput} from '@fullcalendar/vue3';
+import {makeFetch} from "../../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+import {datetimeToISO} from "../../../../../../../ChillMainBundle/Resources/public/chill/js/date";
+import type {EventInputCalendarRange} from "ChillCalendarAssets/types";
 
 export interface CalendarRangesState {
-  ranges: EventInput[],
-  rangesLoaded: {start: number, end: number}[],
+  ranges: (EventInput | EventInputCalendarRange) [],
+  rangesLoaded: { start: number, end: number }[],
   rangesIndex: Set<string>,
   key: number
 }
 
 type Context = ActionContext<CalendarRangesState, State>;
 
-export default <Module<CalendarRangesState, State>> {
+export default <Module<CalendarRangesState, State>>{
   namespaced: true,
   state: (): CalendarRangesState => ({
     ranges: [],
@@ -23,7 +27,7 @@ export default <Module<CalendarRangesState, State>> {
     key: 0
   }),
   getters: {
-    isRangeLoaded: (state: CalendarRangesState) => ({start, end}: {start: Date, end: Date}): boolean => {
+    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;
@@ -35,12 +39,12 @@ export default <Module<CalendarRangesState, State>> {
   },
   mutations: {
     addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
-      console.log('addRanges', ranges);
-
       const toAdd = ranges
         .map(cr => calendarRangeToFullCalendarEvent(cr))
-        .map(cr => ({...cr, backgroundColor: 'white', borderColor:'#3788d8',
-          textColor: 'black'}))
+        .map(cr => ({
+          ...cr, backgroundColor: 'white', borderColor: '#3788d8',
+          textColor: 'black'
+        }))
         .filter(r => !state.rangesIndex.has(r.id));
 
       toAdd.forEach((r) => {
@@ -49,7 +53,7 @@ export default <Module<CalendarRangesState, State>> {
       });
       state.key = state.key + toAdd.length;
     },
-    addExternals(state, externalEvents: (EventInput & {id: string})[] ) {
+    addExternals(state, externalEvents: (EventInput & { id: string })[]) {
       const toAdd = externalEvents
         .filter(r => !state.rangesIndex.has(r.id));
 
@@ -59,7 +63,7 @@ export default <Module<CalendarRangesState, State>> {
       });
       state.key = state.key + toAdd.length;
     },
-    addLoaded(state: CalendarRangesState, payload: {start: Date, end: Date}) {
+    addLoaded(state: CalendarRangesState, payload: { start: Date, end: Date }) {
       state.rangesLoaded.push({start: payload.start.getTime(), end: payload.end.getTime()});
     },/*
 
@@ -72,21 +76,24 @@ export default <Module<CalendarRangesState, State>> {
       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;
+    removeRange(state: CalendarRangesState, calendarRangeId: number) {
+      const found = state.ranges.find(r => r.calendarRangeId === calendarRangeId && r.is === "range");
 
-       */
+      if (found !== undefined) {
+        state.ranges = state.ranges.filter(
+          (r) => !(r.calendarRangeId === calendarRangeId && r.is === "range")
+        );
+
+        if (typeof found.id === "string") { // should always be true
+          state.rangesIndex.delete(found.id);
+        }
+
+        state.key = state.key + 1;
+      }
     },
   },
   actions: {
-    fetchRanges(ctx: Context, payload: {start: Date, end: Date}): Promise<null> {
+    fetchRanges(ctx: Context, payload: { start: Date, end: Date }): Promise<null> {
       console.log('fetchRanges', payload);
       const start = payload.start;
       const end = payload.end;
@@ -115,6 +122,48 @@ export default <Module<CalendarRangesState, State>> {
           ctx.commit('addRanges', ranges);
           return Promise.resolve(null);
         });
-    }
+    },
+    createRange(ctx, {start, end}: { start: Date, end: Date }): Promise<null> {
+      const url = `/api/1.0/calendar/calendar-range.json?`;
+
+      if (ctx.rootState.me.me === null) {
+        throw new Error('user is currently null');
+      }
+
+      const body = {
+        user: {
+          id: ctx.rootState.me.me.id,
+          type: "user"
+        },
+        startDate: {
+          datetime: datetimeToISO(start),
+        },
+        endDate: {
+          datetime: datetimeToISO(end)
+        },
+      } as CalendarRangeEdit;
+
+      return makeFetch<CalendarRangeEdit, CalendarRange>('POST', url, body)
+        .then((newRange) => {
+
+          ctx.commit('addRange', newRange);
+
+          return Promise.resolve(null);
+        })
+        .catch((error) => {
+          console.log(error);
+
+          throw error;
+        })
+    },
+    deleteRange({commit}, calendarRangeId: number) {
+      const url = `/api/1.0/calendar/calendar-range/${calendarRangeId}.json`;
+
+      makeFetch<undefined, never>('DELETE', url)
+        .then((_) => {
+          commit('removeRange', calendarRangeId);
+        });
+    },
+
   }
 };