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

everything changed to use store for faster re-render of calendar

Browse Source
This commit is contained in:
Julie Lenaerts 2022-05-17 15:49:50 +02:00
parent 88784b7f7e
commit 0c61edd0d6
2 changed files with 180 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

270
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
View File

@ -11,7 +11,7 @@
<label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label> <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
</div> </div>
<FullCalendar ref="fullCalendar" :options="calendarOptions"> <FullCalendar ref="fullCalendar" :options="{...calendarOptions, eventSources: [this.rangeSource, this.appointmentSource]}">
<template v-slot:eventContent='arg' > <template v-slot:eventContent='arg' >
<span class='calendarRangeItems'> <span class='calendarRangeItems'>
<b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b> <b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b>
@ -94,8 +94,8 @@ import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction'; import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
import Modal from 'ChillMainAssets/vuejs/_components/Modal'; import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api'; import { fetchCalendarRangesByUser, postCalendarRange } from '../_api/api';
import { mapState } from 'vuex'; import { mapGetters, mapActions, mapState } from 'vuex';
import { vShow } from 'vue'; import { vShow } from 'vue';
export default { export default {
@ -119,14 +119,6 @@ export default {
userId: window.userId, userId: window.userId,
showMyCalendar: true, showMyCalendar: true,
myCalendarClickedEvent: null, myCalendarClickedEvent: null,
calendarEvents: {
userCalendar: null,
userCalendarRange: null,
new: {
events: [],
color: "#3788d8"
}
},
lastNewDate: null, lastNewDate: null,
disableCopyDayButton: true, disableCopyDayButton: true,
calendarOptions: { calendarOptions: {
@ -147,74 +139,22 @@ export default {
slotMinTime: "08:00:00", slotMinTime: "08:00:00",
slotMaxTime: "19:00:00", slotMaxTime: "19:00:00",
contentHeight: 500, contentHeight: 500,
customButtons: {
prev: {
click: () => {
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.prev();
this.fetchData();
}
},
next: {
click: () => {
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.next();
this.fetchData();
}
},
day: {
text: this.$t('day'),
click: () => {
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.changeView('timeGridDay');
this.fetchData();
}
},
week: {
text: this.$t('week'),
click: () => {
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.changeView('timeGridWeek');
this.fetchData();
}
},
month: {
text: this.$t('month'),
click: () => {
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.changeView('dayGridMonth');
this.fetchData();
}
},
today: {
text: this.$t('today'),
click: () => {
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.changeView('timeGridDay', new Date());
this.fetchData();
}
},
},
headerToolbar: { headerToolbar: {
left: 'prev next today', left: 'prev,next today',
center: 'title', center: 'title',
right: 'month,week,day' right: 'dayGridMonth timeGridWeek timeGridDay'
}, },
}, },
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
currentCalendarRanges: state => state.currentCalendarRanges, rangesToCopy: state => state.rangesToCopy
newCalendarRanges: state => state.newCalendarRanges,
updateCalendarRanges: state => state.updateCalendarRanges,
deleteCalendarRanges: state => state.deleteCalendarRanges,
dirty: state => state.newCalendarRanges.length > 0 || state.updateCalendarRanges.length > 0 || state.deleteCalendarRanges.length > 0
}), }),
...mapGetters(['rangeSource', 'appointmentSource']),
showMyCalendarWidget: { showMyCalendarWidget: {
set(value) { set(value) {
this.toggleMyCalendar(value); this.toggleMyCalendar(value);
this.updateEventsSource();
}, },
get() { get() {
return this.showMyCalendar; return this.showMyCalendar;
@ -222,9 +162,13 @@ export default {
} }
}, },
methods: { methods: {
init() { ...mapActions([
this.fetchData(); 'fetchRanges',
}, 'fetchAppointments',
'postRange',
'patchRange',
'deleteRange'
]),
openModal() { openModal() {
this.modal.showModal = true; this.modal.showModal = true;
}, },
@ -237,73 +181,6 @@ export default {
myCalendarEventDeleteLink() { myCalendarEventDeleteLink() {
return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }` return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
}, },
resetCalendar() {
this.fetchData();
this.calendarEvents.new = {
events: [],
color: "#3788d8"
};
this.updateEventsSource();
},
fetchData() {
this.flag.loading = true;
const startDate = this.$refs.fullCalendar.getApi().view.currentStart.toISOString()
const endDate = this.$refs.fullCalendar.getApi().view.currentEnd.toISOString()
fetchCalendarRangesByUser(this.userId, startDate, endDate).then(calendarRanges => new Promise((resolve, reject) => {
let events = calendarRanges.results.map(i =>
({
start: i.startDate.datetime,
end: i.endDate.datetime,
calendarRangeId: i.id,
toDelete: false
})
);
let calendarRangeEvents = {
events: events,
borderColor: "#3788d8",
backgroundColor: '#ffffff',
textColor: '#444444',
};
this.calendarEvents.userCalendarRange = calendarRangeEvents;
fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
let events = calendar.results.map(i =>
({
myCalendar: true,
calendarId: i.id,
start: i.startDate.datetime,
end: i.endDate.datetime,
user: i.user,
mainUser: i.mainUser,
persons: i.persons,
professionals: i.professionals,
comment: i.comment
})
);
let calendarEventsCurrentUser = {
events: events,
color: 'darkblue',
id: 1000,
editable: false
};
this.calendarEvents.userCalendar = calendarEventsCurrentUser;
this.updateEventsSource();
this.flag.loading = false;
resolve();
}));
resolve();
}));
},
updateEventsSource() {
this.calendarOptions.eventSources = [];
this.calendarOptions.eventSources.push(this.calendarEvents.new);
this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
if (this.showMyCalendar) {
this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
}
},
toggleMyCalendar(value) { toggleMyCalendar(value) {
this.showMyCalendar = value; this.showMyCalendar = value;
}, },
@ -324,20 +201,19 @@ export default {
return newDate; return newDate;
}, },
onDateSelect(payload) { onDateSelect(payload) {
postCalendarRange({ const newRange = {
user: { user: {
type: 'user', type: 'user',
id: window.userId, id: window.userId,
}, },
startDate: { startDate: {
datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200", datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
}, },
endDate: { endDate: {
datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
}, },
}).then((_r) => { }
this.resetCalendar(); this.postRange(newRange);
})
}, },
onEventClick(payload) { onEventClick(payload) {
if (payload.event.extendedProps.myCalendar) { if (payload.event.extendedProps.myCalendar) {
@ -356,36 +232,22 @@ export default {
}, },
onClickDelete(payload) { onClickDelete(payload) {
if (payload.extendedProps.hasOwnProperty("calendarRangeId")) { if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
deleteCalendarRange(payload.extendedProps.calendarRangeId).then(() => { this.deleteRange(payload.extendedProps.calendarRangeId)
this.resetCalendar();
})
} }
}, },
onEventDropOrResize(payload) { onEventDropOrResize(payload) {
patchCalendarRange(payload.event.extendedProps.calendarRangeId, const changedEvent = payload.event;
{ this.patchRange(changedEvent);
startDate: {
datetime: `${payload.event.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
},
endDate: {
datetime: `${payload.event.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
},
}).then((_r) => this.resetCalendar());
}, },
// isSameDay(date1, date2) {
// return date1.getFullYear() === date2.getFullYear() &&
// date1.getMonth() === date2.getMonth() &&
// date1.getDate() === date2.getDate();
// },
// isFriday(date) {
// return date.getDay() === 5
// },
copyDay() { copyDay() {
const dateToFetch = new Date(this.copyFrom).toISOString(); const payload = {
fetchCalendarRangesByUser(this.userId, dateToFetch) userId: this.userId,
.then((ranges) => { dateToCopy: new Date(this.copyFrom).toISOString()
ranges.results.forEach((range) => { }
postCalendarRange({ this.fetchRanges(payload).then(
r => {
r.forEach((range) => {
this.postRange({
user: { user: {
type: 'user', type: 'user',
id: range.user.id, id: range.user.id,
@ -397,55 +259,9 @@ export default {
datetime: this.replaceDate(range.endDate.datetime, this.copyTo), datetime: this.replaceDate(range.endDate.datetime, this.copyTo),
}, },
}) })
.then((_r) => this.resetCalendar());
}) })
}) }
)
// if (this.calendarEvents.new.events.length > 0) {
// // Create the copied events
// let increment = !this.calendarOptions.weekends && this.isFriday(this.lastNewDate) ? 24*60*60*1000*3 : 24*60*60*1000;
// let events = this.calendarEvents.new.events.filter(
// i => this.isSameDay(new Date(i.start), this.lastNewDate)).map(
// i => {
// let startDate = new Date(new Date(i.start).getTime() + increment);
// let endDate = new Date(new Date(i.end).getTime() + increment);
// return ({
// start: startDate.toISOString(),
// end: endDate.toISOString()
// })
// }
// );
// let copiedEvents = {
// events: events,
// color: "#3788d8"
// };
// // console.log(copiedEvents);
// // Add to the calendar
// let newEvents = this.calendarEvents.new.events;
// newEvents.push(...copiedEvents.events);
// this.calendarEvents.new = {
// events: newEvents,
// color: "#3788d8"
// };
// this.updateEventsSource();
// // Set the last new date
// this.lastNewDate = new Date(copiedEvents.events[copiedEvents.events.length - 1].start);
// // Dispatch in store for saving
// for (let i = 0; i < copiedEvents.events.length; i++) {
// let eventObj = {
// start: new Date(copiedEvents.events[i].start),
// end: new Date(copiedEvents.events[i].end)
// }
// this.$store.dispatch('createRange', eventObj);
// }
// } else {
// console.log('no new events to copy-paste!')
// }
}, },
renderEventDate() { renderEventDate() {
let start = this.myCalendarClickedEvent.start; let start = this.myCalendarClickedEvent.start;
@ -456,7 +272,11 @@ export default {
} }
}, },
mounted() { mounted() {
this.init(); this.fetchRanges()
if (this.showMyCalendar) {
this.fetchAppointments(this.userId)
}
} }
} }
</script> </script>

227
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
View File

@ -1,109 +1,152 @@
import 'es6-promise/auto'; import 'es6-promise/auto';
import { createStore } from 'vuex'; import { createStore } from 'vuex';
import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api'; import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
// import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
const debug = process.env.NODE_ENV !== 'production'; const debug = process.env.NODE_ENV !== 'production';
const store = createStore({ const store = createStore({
strict: debug, strict: debug,
state: { state: {
// newCalendarRanges: [], ranges: [],
// updateCalendarRanges: [], appointments: [],
// deleteCalendarRanges: [], rangesToCopy: []
// currentCalendarRanges: [], },
getters: {
rangeSource (state) {
return {
events: state.ranges,
borderColor: "#3788d8",
backgroundColor: '#ffffff',
textColor: '#444444',
}
},
appointmentSource (state) {
return {
events: state.appointments,
color: "darkblue",
id: 1000,
editable: false
}
}
}, },
mutations: { mutations: {
// setCurrentCalendarRanges(state, payload) { setRanges(state, payload) {
// state.currentCalendarRanges = payload state.ranges = payload;
// }, },
// updateRange(state, payload) { setRangesToCopy(state, payload) {
// state.updateCalendarRanges.push({ state.rangesToCopy = payload
// id: payload.event.extendedProps.calendarRangeId, },
// start: payload.event.start, addRange(state, payload) {
// end: payload.event.end state.ranges = [...state.ranges, payload];
// }); },
// }, removeRange(state, payload) {
// addRange(state, payload) { const filteredCollection = state.ranges.filter(
// state.newCalendarRanges.push({ (r) => r.calendarRangeId !== payload
// start: payload.start, )
// end: payload.end state.ranges = filteredCollection;
// }); },
// }, setAppointments(state, payload) {
// deleteRange(state, payload) { state.appointments = payload;
// state.deleteCalendarRanges.push({ }
// id: payload.extendedProps.calendarRangeId,
// start: payload.start,
// end: payload.end
// });
// },
// clearNewCalendarRanges(state) {
// state.newCalendarRanges = [];
// },
// clearUpdateCalendarRanges(state) {
// state.updateCalendarRanges = [];
// },
// clearDeleteCalendarRanges(state) {
// state.deleteCalendarRanges = [];
// },
// removeNewCalendarRanges(state, payload) {
// let filteredCollection = state.newCalendarRanges.filter(
// (e) => e.start.toString() !== payload.start.toString() && e.end.toString() !== payload.end.toString()
// )
// state.newCalendarRanges = filteredCollection;
// },
// removeFromDeleteRange(state, payload) {
// let filteredCollection = state.deleteCalendarRanges.filter(
// (e) => e.start.toString() !== payload.start.toString() && e.end.toString() !== payload.end.toString()
// )
// state.deleteCalendarRanges = filteredCollection;
// },
// addCalendarRange(state, payload) {
// state.currentCalendarRanges.push(payload);
// }
}, },
actions: { actions: {
// setCurrentCalendarRanges({ commit }) { fetchRanges({commit}, payload = null) {
// // console.log('userId', window.userId); const url = payload ? `/api/1.0/calendar/calendar-range-available.json?user=${payload.userId}&start=${payload.dateToCopy}` :
// fetchCalendarRangesByUser(window.userId) `/api/1.0/calendar/calendar-range-available.json?user=${window.userId}`
// .then((ranges) => { return makeFetch('GET', url)
// // console.log('ranges', ranges.results); .then((response) => {
// commit('setCurrentCalendarRanges', ranges.results); if (payload) {
// }) return response.results;
// }, // commit('setRangesToCopy', response.results);
// addCalendarRange({ commit }, payload) { } else {
// commit('addCalendarRange', payload) const ranges = response.results.map(range => (
// }, {
// createRange({ commit }, payload) { start: range.startDate.datetime,
// // console.log('### action createRange', payload); end: range.endDate.datetime,
// commit('addRange', payload); calendarRangeId: range.id,
// }, toDelete: false
// updateRange({ commit }, payload) { }
// // console.log('### action updateRange', payload); ));
// commit('updateRange', payload); commit('setRanges', ranges)
// }, }
// deleteRange({ commit }, payload) { })
// // console.log('### action deleteRange', payload); .catch((error) => {
// commit('deleteRange', payload); console.log(error);
// }, })
// clearNewCalendarRanges({ commit }, payload) { },
// commit('clearNewCalendarRanges', payload); postRange({commit}, payload) {
// }, const url = `/api/1.0/calendar/calendar-range.json?`;
// clearUpdateCalendarRanges({ commit }, payload) { makeFetch('POST', url, payload)
// commit('clearUpdateCalendarRanges', payload); .then((response) => {
// }, const newRange =
// clearDeleteCalendarRanges({ commit }, payload) { {
// commit('clearDeleteCalendarRanges', payload); start: response.startDate.datetime,
// }, end: response.endDate.datetime,
// removeNewCalendarRanges({ commit }, payload) { calendarRangeId: response.id,
// commit('removeNewCalendarRanges', payload); toDelete: false
// }, }
// removeFromDeleteRange({ commit }, payload) { commit('addRange', newRange)
// commit('removeFromDeleteRange', payload); })
// }, .catch((error) => {
console.log(error);
})
},
deleteRange({commit}, payload) {
const url = `/api/1.0/calendar/calendar-range/${payload}.json`;
makeFetch('DELETE', url)
.then((response) => {
if (response == 200) {
commit('removeRange', payload);
}
})
.catch((error) => {
console.log(error);
})
},
patchRange({commit}, payload) {
const url = `/api/1.0/calendar/calendar-range/${payload.extendedProps.calendarRangeId}.json`;
const body = {
startDate: {
datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
},
endDate: {
datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
},
}
makeFetch('PATCH', url, body)
.then((response) => {
console.log('response', response);
})
.catch((error) => {
console.log(error);
})
},
fetchAppointments({commit}, payload) {
const url = `/api/1.0/calendar/calendar.json?main_user=${payload}&item_per_page=1000`
makeFetch('GET', url)
.then((response) => {
const appointments = response.results.map(a => (
{
myCalendar: true,
calendarId: a.id,
start: a.startDate.datetime,
end: a.endDate.datetime,
user: a.user,
mainUser: a.mainUser,
persons: a.persons,
professionals: a.professionals,
comment: a.comment
})
);
commit('setAppointments', appointments)
})
.catch((error) => {
console.log(error);
})
},
} }
}); });
// store.dispatch('setCurrentCalendarRanges');
export default store; export default store;