Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

rdv: add dynamic event sources in fullcalendar (WIP)

Browse Source
This commit is contained in:
nobohan 2021-08-17 21:06:32 +02:00
parent 07f086dd61
commit e499ebdf8b
3 changed files with 230 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
View File

@ -1,20 +1,82 @@
<template>
<concerned-groups></concerned-groups>
<calendar-user-selector></calendar-user-selector>
<calendar-event></calendar-event>
<concerned-groups></concerned-groups>
<calendar-user-selector
v-bind:users="users"
v-bind:calendarEvents="calendarEvents"
v-bind:updateEventsSource="updateEventsSource">
</calendar-user-selector>
<calendar-event
v-bind:calendarEvents="calendarEvents">
</calendar-event>
</template>
<script>
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import CalendarEvent from '../_components/CalendarEvent/CalendarEvent.vue';
import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
import { fetchCalendarRanges } from '../_components/CalendarEvent/js/api';
export default {
name: "App",
components: {
ConcernedGroups,
CalendarEvent,
CalendarUserSelector,
}
name: "App",
components: {
ConcernedGroups,
CalendarEvent,
CalendarUserSelector,
},
data() {
return {
errorMsg: [],
users: {
loaded: [],
selected: []
},
calendarEvents: {
loaded: [],
selected: []
}
}
},
methods: {
updateEventsSource() {
console.log('updateEventsSource')
//TODO: how to update source events??? use https://fullcalendar.io/docs/Calendar-addEventSource?
//TODO
// fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
// let calendarEvents = [];
// calendarRanges.results.forEach(i => {
// calendarEvents.push({
// })
// });
// this.calendarEvents = calendarEvents;
// resolve()
// }))
// .catch((error) => {
// this.errorMsg.push(error.message);
// });
// 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!
// }
// ]
}
},
// mounted() {
// this.init();
// }
}
</script>

211
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarEvent/CalendarEvent.vue
View File

@ -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(),
getCalendarRanges() {
// console.log('getCalendarRanges')
// fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
// // let calendarEvents = [];
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!
}
// // 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()
}
}
</script>

55
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
View File

@ -13,7 +13,7 @@
:close-on-select="false"
:allow-empty="true"
:model-value="value"
@update:model-value="updateUsers"
@update:model-value="selectUsers"
:options="options">
</VueMultiselect>
</div>
@ -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() {