From 6d607e3939ecab641daff95b912192b80b964f85 Mon Sep 17 00:00:00 2001 From: nobohan Date: Mon, 30 Aug 2021 17:44:52 +0200 Subject: [PATCH] rdv: edit calendar ranges: create and update calendar ranges --- .../ChillCalendarExtension.php | 2 + .../public/vuejs/MyCalendarRange/App.vue | 31 ++++++++-- .../public/vuejs/MyCalendarRange/store.js | 60 ++++++++++++++++++- .../Resources/public/vuejs/_api/api.js | 43 ++++++++++++- 4 files changed, 127 insertions(+), 9 deletions(-) diff --git a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php index 5f20f5968..f4c5411f8 100644 --- a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php +++ b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php @@ -74,6 +74,8 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf Request::METHOD_GET => true, Request::METHOD_HEAD => true, Request::METHOD_POST => true, + Request::METHOD_PATCH => true, + Request::METHOD_DELETE => true, ] ], ] diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue index ace1ec5f4..e28655ab4 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue @@ -7,7 +7,10 @@  {{ arg.event.title }} - + @@ -32,7 +35,11 @@ export default { showMyCalendar: true, calendarEvents: { userCalendar: [], - userCalendarRange: [] + userCalendarRange: [], + new: { + events: [], + color: "red" + } }, calendarOptions: { locale: frLocale, @@ -43,7 +50,7 @@ export default { selectable: true, select: this.onDateSelect, eventChange: this.onEventChange, - eventClick: this.onEventClick, + // eventClick: this.onEventClick, selectMirror: true, editable: true, weekends: false, @@ -67,6 +74,7 @@ export default { ({ start: i.startDate.datetime, end: i.endDate.datetime, + calendarRangeId: i.id }) ); let calendarRangeEvents = { @@ -100,6 +108,7 @@ export default { updateEventsSource() { this.calendarOptions.eventSources = []; this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange); + this.calendarOptions.eventSources.push(this.calendarEvents.new); if (this.showMyCalendar) { this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar); } @@ -113,15 +122,25 @@ export default { }, onDateSelect(payload) { console.log(payload) + this.calendarEvents.new.events.push({ //TODO does not work + start: payload.startStr, + end: payload.endStr, + }); + this.updateEventsSource(); this.$store.dispatch('createRange', payload); }, onEventChange(payload) { console.log(payload) this.$store.dispatch('updateRange', payload); + //TODO update the eventsSource with payload, or use the store for updating the eventsSource }, - onEventClick(payload) { - console.log(payload) - }, + // onEventClick(payload) { + // console.log(payload) + // //TODO update the eventsSource with payload, or use the store for updating the eventsSource + // }, + onClickSave(payload){ + this.$store.dispatch('saveRanges', payload); + } }, mounted() { this.init(); diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js index 457069de7..cec206661 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js @@ -1,5 +1,6 @@ import 'es6-promise/auto'; import { createStore } from 'vuex'; +import { postCalendarRange, patchCalendarRange } from '../_api/api'; const debug = process.env.NODE_ENV !== 'production'; @@ -12,10 +13,23 @@ const store = createStore({ }, mutations: { updateRange(state, payload) { - state.updateCalendarRanges.push({start: payload.start, end: payload.end}); + state.updateCalendarRanges.push({ + id: payload.event.extendedProps.calendarRangeId, + start: payload.event.start, + end: payload.event.end + }); }, addRange(state, payload) { state.newCalendarRanges.push({start: payload.start, end: payload.end}); + }, + clearNewCalendarRanges(state) { + state.newCalendarRanges = []; + }, + clearUpdateCalendarRanges(state) { + state.updateCalendarRanges = []; + }, + deleteUpdateCalendarRanges(state) { + state.deleteCalendarRanges = []; } }, actions: { @@ -29,10 +43,52 @@ const store = createStore({ }, saveRanges({ commit }, payload) { console.log('### action saveRange', payload); - postRange() + console.log(this.state) + //TODO: if smthg new in newCalendarRange, postRange(), if smthg to update in updateCalendarRanges, update... + if (this.state.newCalendarRanges.length > 0){ + this.state.newCalendarRanges.map(cr => { + postCalendarRange({ + user: { + type: 'user', + id: window.userId, + }, + startDate: { + datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200", + }, + endDate: { + datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone + }, + }, 'POST'); + }) + commit('clearNewCalendarRanges'); + } + if (this.state.updateCalendarRanges.length > 0){ + this.state.updateCalendarRanges.map(cr => { + console.log(cr) + patchCalendarRange(cr.id, + { + startDate: { + datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200", + }, + endDate: { + datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone + }, + }); + }) + commit('clearUpdateCalendarRanges'); + } + if (this.state.deleteCalendarRanges.length > 0){ + this.state.deleteCalendarRanges.map(cr => { + postCalendarRange({ + id: cr.id //TODO check functionning + }, 'DELETE'); + }) + commit('deleteUpdateCalendarRanges'); + } }, } }); + export default store; diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js index 2c08068fd..c062d0d6e 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js @@ -35,8 +35,49 @@ const fetchCalendar = (mainUserId) => { }); }; + +/* +* Endpoint chill_api_single_calendar_range__entity_create +* method POST or DELETE, post CalendarRange entity +*/ +const postCalendarRange = (body, method) => { + const url = `/api/1.0/calendar/calendar-range.json?`; + return fetch(url, { + method: method, + headers: { + 'Content-Type': 'application/json;charset=utf-8' + }, + body: JSON.stringify(body) + }).then(response => { + if (response.ok) { return response.json(); } + throw Error('Error with request resource response'); + }); +}; + +/* +* Endpoint chill_api_single_calendar_range__entity +* method PATCH, patch CalendarRange entity +*/ +const patchCalendarRange = (id, body) => { + console.log(body) + const url = `/api/1.0/calendar/calendar-range/${id}.json`; + return fetch(url, { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json;charset=utf-8' + }, + body: JSON.stringify(body) + }).then(response => { + if (response.ok) { return response.json(); } + throw Error('Error with request resource response'); + }); +}; + + export { fetchCalendarRanges, fetchCalendar, - fetchCalendarRangesByUser + fetchCalendarRangesByUser, + postCalendarRange, + patchCalendarRange };