From 0fe6d7d00b3a9ae4e3f4a0993dabba19b0d6948a Mon Sep 17 00:00:00 2001 From: nobohan Date: Mon, 30 Aug 2021 11:57:15 +0200 Subject: [PATCH] rdv: add calendar range events in myCalendar --- .../public/vuejs/MyCalendarRange/App.vue | 54 +++++++++++++------ .../public/vuejs/MyCalendarRange/index.js | 4 +- .../public/vuejs/MyCalendarRange/store.js | 38 +++++++++++++ .../Resources/public/vuejs/_api/api.js | 12 ++++- 4 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue index 1eaf04335..ace1ec5f4 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue @@ -7,6 +7,7 @@  {{ arg.event.title }} + @@ -17,7 +18,7 @@ import FullCalendar from '@fullcalendar/vue3'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction'; import timeGridPlugin from '@fullcalendar/timegrid'; -import { fetchCalendar } from '../_api/api'; +import { fetchCalendar, fetchCalendarRangesByUser } from '../_api/api'; export default { name: "App", @@ -30,7 +31,8 @@ export default { userId: window.userId, showMyCalendar: true, calendarEvents: { - user: [], + userCalendar: [], + userCalendarRange: [] }, calendarOptions: { locale: frLocale, @@ -59,30 +61,49 @@ export default { }, fetchData() { console.log(this.userId); - fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => { - let results = calendar.results; - let events = results.map(i => + + fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => { + let events = calendarRanges.results.map(i => ({ start: i.startDate.datetime, end: i.endDate.datetime, }) ); - let calendarEventsCurrentUser = { - events: events, - color: 'darkblue', - id: 1000, - editable: false + let calendarRangeEvents = { + events: events, + color: 'orange', + textColor: '#444444' }; - this.calendarEvents.user = calendarEventsCurrentUser; - this.updateEventsSource() - resolve(); + this.calendarEvents.userCalendarRange = calendarRangeEvents; + + fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => { + let events = calendar.results.map(i => + ({ + start: i.startDate.datetime, + end: i.endDate.datetime, + }) + ); + let calendarEventsCurrentUser = { + events: events, + color: 'darkblue', + id: 1000, + editable: false + }; + this.calendarEvents.userCalendar = calendarEventsCurrentUser; + this.updateEventsSource(); + resolve(); + })); + + resolve(); })); }, updateEventsSource() { this.calendarOptions.eventSources = []; + this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange); if (this.showMyCalendar) { - this.calendarOptions.eventSources.push(this.calendarEvents.user); + this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar); } + console.log(this.calendarOptions.eventSources); }, toggleMyCalendar(value) { this.showMyCalendar = value; @@ -92,11 +113,14 @@ export default { }, onDateSelect(payload) { console.log(payload) + this.$store.dispatch('createRange', payload); }, onEventChange(payload) { - //this.$store.dispatch('updateEvent', payload); + console.log(payload) + this.$store.dispatch('updateRange', payload); }, onEventClick(payload) { + console.log(payload) }, }, mounted() { diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js index ca338a3be..a10a16601 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js @@ -1,7 +1,7 @@ import { createApp } from 'vue'; import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n' import { appMessages } from './i18n' -//import store from './store' +import store from './store' import App from './App.vue'; @@ -10,7 +10,7 @@ const i18n = _createI18n(appMessages); const app = createApp({ template: ``, }) -//.use(store) +.use(store) .use(i18n) .component('app', App) .mount('#myCalendar'); diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js new file mode 100644 index 000000000..457069de7 --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js @@ -0,0 +1,38 @@ +import 'es6-promise/auto'; +import { createStore } from 'vuex'; + +const debug = process.env.NODE_ENV !== 'production'; + +const store = createStore({ + strict: debug, + state: { + newCalendarRanges: [], + updateCalendarRanges: [], + deleteCalendarRanges: [] + }, + mutations: { + updateRange(state, payload) { + state.updateCalendarRanges.push({start: payload.start, end: payload.end}); + }, + addRange(state, payload) { + state.newCalendarRanges.push({start: payload.start, end: payload.end}); + } + }, + actions: { + createRange({ commit }, payload) { + console.log('### action createRange', payload); + commit('addRange', payload); + }, + updateRange({ commit }, payload) { + console.log('### action updateRange', payload); + commit('updateRange', payload); + }, + saveRanges({ commit }, payload) { + console.log('### action saveRange', payload); + postRange() + }, + + } +}); + +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 a11ca8498..2c08068fd 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js @@ -12,6 +12,15 @@ const fetchCalendarRanges = () => { }); }; +const fetchCalendarRangesByUser = (userId) => { + const url = `/api/1.0/calendar/calendar-range-available.json?user=${userId}`; + return fetch(url) + .then(response => { + if (response.ok) { return response.json(); } + throw Error('Error with request resource response'); + }); +}; + /* * Endpoint chill_api_single_calendar * method GET, get Calendar events, can be filtered by mainUser @@ -28,5 +37,6 @@ const fetchCalendar = (mainUserId) => { export { fetchCalendarRanges, - fetchCalendar + fetchCalendar, + fetchCalendarRangesByUser };