From e499ebdf8b550eed2a98b02c8787f4ef5835736d Mon Sep 17 00:00:00 2001 From: nobohan Date: Tue, 17 Aug 2021 21:06:32 +0200 Subject: [PATCH] rdv: add dynamic event sources in fullcalendar (WIP) --- .../Resources/public/vuejs/Calendar/App.vue | 80 ++++++- .../CalendarEvent/CalendarEvent.vue | 213 +++++++++--------- .../CalendarUserSelector.vue | 55 ++++- 3 files changed, 230 insertions(+), 118 deletions(-) diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue index 37caa7b73..a2ca1e5aa 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue @@ -1,20 +1,82 @@ diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue index 3a59aa28c..93749a598 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue @@ -18,23 +18,23 @@ export default { components: { FullCalendar }, + props: ['calendarEvents'], data() { return { - calendarRanges: [], + //calendarRanges: [], calendarOptions: { plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ], initialView: 'timeGridWeek', - initialEvents: window.startDate !== undefined ? - [ - { - id: 1, - start: window.startDate, - end: window.endDate - } - ] : [], + // initialEvents: window.startDate !== undefined ? + // [ + // { + // id: 1, + // start: window.startDate, + // end: window.endDate + // } + // ] : [], initialDate: window.startDate !== undefined ? window.startDate : new Date(), - //events: this.displayEvents(), - eventSources: this.getEventsSources(), + eventSources: this.calendarEvents, selectable: true, select: this.onDateSelect, eventChange: this.onEventChange, @@ -47,103 +47,108 @@ export default { right: 'dayGridMonth,timeGridWeek,timeGridDay' }, }, - errorMsg: {}, + errorMsg: [], } }, methods: { - getCalendarRanges(userId) { - console.log('get Calendar Ranges'); - return fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => { - console.log(calendarRanges); - this.calendarRanges = calendarRanges.results; - let source = { //TODO transform the results above into a object as following - events: [ - { - title: 'Event1', - start: '2021-07-04T09:30:00' - }, - { - title: 'Event2', - start: '2021-07-05T09:30:00' - } - ], - color: 'red', // an option! - textColor: 'white' // an option! - }; - this.calendarRanges = source; - resolve() - })) - .catch((error) => { - this.errorMsg.push(error.message); - }); + init() { + this.getCalendarRanges() + console.log(window.startDate) }, - getEventsSources() { // soit on appelle cette function plus tard, soit on gère différement l'asynchroniété - let userId = 1; - let arr = [ - this.displayEventSource1(), - this.displayEventSource2(), - - fetchCalendarRanges().then(response => { - console.log(response) - return response - // if (response.ok) { return response.results } - }) - //this.calendarRanges - ]; - console.log(arr); - return arr; - }, - displayEvents() { //TODO WIP - return [ - { - title : 'event1', - start : '2021-07-04T10:30:00' - }, - { - title : 'event2', - start : '2021-07-05', - end : '2021-07-07' - }, - { - title : 'event3', - start : '2021-07-09T12:30:00', - allDay : false // will make the time show - } - ] - //return this.calendarRanges // undefined as not fetched when evaluated - }, - displayEventSource1(){ // TODO replace this with the fetch function depending on the User calendar ranges - return { - events: [ - { - title: 'Event1', - start: '2021-07-04T12:30:00' - }, - { - title: 'Event2', - start: '2021-07-05T12:30:00' - } - ], - color: 'yellow', // an option! - textColor: 'black' // an option! - } - }, - displayEventSource2(){ - return { - events: [ - { - title: 'Event1', - start: '2021-08-04T12:30:00' - }, - { - title: 'Event2', - start: '2021-08-05T12:30:00' - } - ], - color: 'green', // an option! - textColor: 'red' // an option! - } + getCalendarRanges() { + // console.log('getCalendarRanges') + // fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => { + // // let calendarEvents = []; + + // // this.users.loaded.forEach(u => { + // // let arr = calendarRanges.results.filter(i => i.user.id = u.id); + // // console.log(arr) + // // calendarEvents.push({ + // // events: arr, + // // color: u.color + // // }) + // // }) + + // // this.calendarEvents = [ + // // { + // // events: [ + // // { + // // title: 'Event1', + // // start: '2021-08-04T12:30:00' + // // }, + // // { + // // title: 'Event2', + // // start: '2021-08-05T12:30:00' + // // } + // // ], + // // color: 'yellow', // an option! + // // textColor: 'black' // an option! + // // } + // // ] + // // console.log(calendarEvents) + // // this.calendarEvents = calendarEvents; + // resolve() + // })) + // .catch((error) => { + // this.errorMsg.push(error.message); + // }); }, + + // getCalendarRanges(userId) { + // console.log('get Calendar Ranges'); + // return fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => { + // console.log(calendarRanges); + // this.calendarRanges = calendarRanges.results; + // let source = { //TODO transform the results above into a object as following + // events: [ + // { + // title: 'Event1', + // start: '2021-07-04T09:30:00' + // }, + // { + // title: 'Event2', + // start: '2021-07-05T09:30:00' + // } + // ], + // color: 'red', // an option! + // textColor: 'white' // an option! + // }; + // this.calendarRanges = source; + // resolve() + // })) + // .catch((error) => { + // this.errorMsg.push(error.message); + // }); + // }, + // getEventsSources() { // soit on appelle cette function plus tard, soit on gère différement l'asynchroniété + // let arr = [ + // this.displayEventSource1(), + // fetchCalendarRanges().then(response => { + // console.log(response) + // return response + // // if (response.ok) { return response.results } + // }) + // //this.calendarRanges + // ]; + // console.log(arr); + // return arr; + // }, + // displayEventSource1(){ // TODO replace this with the fetch function depending on the User calendar ranges + // return { + // events: [ + // { + // title: 'Event1', + // start: '2021-07-04T12:30:00' + // }, + // { + // title: 'Event2', + // start: '2021-07-05T12:30:00' + // } + // ], + // color: 'yellow', // an option! + // textColor: 'black' // an option! + // } + // }, onDateSelect(payload) { this.$store.dispatch('createEvent', payload); }, @@ -152,7 +157,7 @@ export default { } }, mounted() { - this.getCalendarRanges() + this.init() } } diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue index 839b6dd06..40fc4e2cd 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue @@ -13,7 +13,7 @@ :close-on-select="false" :allow-empty="true" :model-value="value" - @update:model-value="updateUsers" + @update:model-value="selectUsers" :options="options"> @@ -23,9 +23,12 @@ import { fetchCalendarRanges } from './js/api' import VueMultiselect from 'vue-multiselect'; +const COLORS = ['red', 'green', 'yellow', 'blue', 'orange', 'white', 'grey']; + export default { name: 'CalendarUserSelector', components: { VueMultiselect }, + props: ['users', 'updateEventsSource', 'calendarEvents'], data() { return { errorMsg: [], @@ -39,16 +42,57 @@ export default { }, getUniqueUserCalendarRanges() { fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => { + let results = calendarRanges.results; + let users = []; - calendarRanges.results.forEach(i => { + + results.forEach(i => { if (!(users.some(j => i.user.id === j.id))){ users.push({ id: i.user.id, - username: i.user.username + username: i.user.username, + color: COLORS[users.length] //TODO manage case where indice is larger than COLORS; Do something recursive with a max. value }) } }); + + let calendarEvents = []; + users.forEach(u => { + let arr = results.filter(i => i.user.id === u.id).map(i => + ({ + start: i.startDate.datetime, + end: i.endDate.datetime + }) + ); + console.log(arr); + calendarEvents.push({ + events: arr, + color: u.color + }) + }) + + console.log(users) + this.users.loaded = users; this.options = users; + + console.log(calendarEvents) + this.calendarEvents.loaded = calendarEvents; + + // // TO TEST + // this.calendarEvents.loaded = [{events: [ + // { + // title: 'Event1', + // start: '2021-08-04T12:30:00' + // }, + // { + // title: 'Event2', + // start: '2021-08-05T12:30:00' + // } + // ], + // color: 'yellow', // an option! + // textColor: 'black' // an option! + // }]; + resolve() })) .catch((error) => { @@ -58,8 +102,9 @@ export default { transName(value) { return `${value.username}`; }, - updateUsers(value) { - console.log(value) + selectUsers(value) { + this.users.selected = value; + this.updateEventsSource(); } }, mounted() {