mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
everything changed to use store for faster re-render of calendar
This commit is contained in:
parent
88784b7f7e
commit
0c61edd0d6
@ -11,7 +11,7 @@
|
||||
<label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
|
||||
</div>
|
||||
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions">
|
||||
<FullCalendar ref="fullCalendar" :options="{...calendarOptions, eventSources: [this.rangeSource, this.appointmentSource]}">
|
||||
<template v-slot:eventContent='arg' >
|
||||
<span class='calendarRangeItems'>
|
||||
<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 timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
|
||||
import { mapState } from 'vuex';
|
||||
import { fetchCalendarRangesByUser, postCalendarRange } from '../_api/api';
|
||||
import { mapGetters, mapActions, mapState } from 'vuex';
|
||||
import { vShow } from 'vue';
|
||||
|
||||
export default {
|
||||
@ -119,14 +119,6 @@ export default {
|
||||
userId: window.userId,
|
||||
showMyCalendar: true,
|
||||
myCalendarClickedEvent: null,
|
||||
calendarEvents: {
|
||||
userCalendar: null,
|
||||
userCalendarRange: null,
|
||||
new: {
|
||||
events: [],
|
||||
color: "#3788d8"
|
||||
}
|
||||
},
|
||||
lastNewDate: null,
|
||||
disableCopyDayButton: true,
|
||||
calendarOptions: {
|
||||
@ -147,74 +139,22 @@ export default {
|
||||
slotMinTime: "08:00:00",
|
||||
slotMaxTime: "19:00:00",
|
||||
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: {
|
||||
left: 'prev next today',
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,week,day'
|
||||
right: 'dayGridMonth timeGridWeek timeGridDay'
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
currentCalendarRanges: state => state.currentCalendarRanges,
|
||||
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
|
||||
rangesToCopy: state => state.rangesToCopy
|
||||
}),
|
||||
...mapGetters(['rangeSource', 'appointmentSource']),
|
||||
showMyCalendarWidget: {
|
||||
set(value) {
|
||||
this.toggleMyCalendar(value);
|
||||
this.updateEventsSource();
|
||||
},
|
||||
get() {
|
||||
return this.showMyCalendar;
|
||||
@ -222,9 +162,13 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.fetchData();
|
||||
},
|
||||
...mapActions([
|
||||
'fetchRanges',
|
||||
'fetchAppointments',
|
||||
'postRange',
|
||||
'patchRange',
|
||||
'deleteRange'
|
||||
]),
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
@ -237,73 +181,6 @@ export default {
|
||||
myCalendarEventDeleteLink() {
|
||||
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) {
|
||||
this.showMyCalendar = value;
|
||||
},
|
||||
@ -324,20 +201,19 @@ export default {
|
||||
return newDate;
|
||||
},
|
||||
onDateSelect(payload) {
|
||||
postCalendarRange({
|
||||
user: {
|
||||
type: 'user',
|
||||
id: window.userId,
|
||||
},
|
||||
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
|
||||
},
|
||||
}).then((_r) => {
|
||||
this.resetCalendar();
|
||||
})
|
||||
const newRange = {
|
||||
user: {
|
||||
type: 'user',
|
||||
id: window.userId,
|
||||
},
|
||||
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
|
||||
},
|
||||
}
|
||||
this.postRange(newRange);
|
||||
},
|
||||
onEventClick(payload) {
|
||||
if (payload.event.extendedProps.myCalendar) {
|
||||
@ -356,36 +232,22 @@ export default {
|
||||
},
|
||||
onClickDelete(payload) {
|
||||
if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
|
||||
deleteCalendarRange(payload.extendedProps.calendarRangeId).then(() => {
|
||||
this.resetCalendar();
|
||||
})
|
||||
this.deleteRange(payload.extendedProps.calendarRangeId)
|
||||
}
|
||||
},
|
||||
onEventDropOrResize(payload) {
|
||||
patchCalendarRange(payload.event.extendedProps.calendarRangeId,
|
||||
{
|
||||
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());
|
||||
const changedEvent = payload.event;
|
||||
this.patchRange(changedEvent);
|
||||
},
|
||||
// isSameDay(date1, date2) {
|
||||
// return date1.getFullYear() === date2.getFullYear() &&
|
||||
// date1.getMonth() === date2.getMonth() &&
|
||||
// date1.getDate() === date2.getDate();
|
||||
// },
|
||||
// isFriday(date) {
|
||||
// return date.getDay() === 5
|
||||
// },
|
||||
copyDay() {
|
||||
const dateToFetch = new Date(this.copyFrom).toISOString();
|
||||
fetchCalendarRangesByUser(this.userId, dateToFetch)
|
||||
.then((ranges) => {
|
||||
ranges.results.forEach((range) => {
|
||||
postCalendarRange({
|
||||
const payload = {
|
||||
userId: this.userId,
|
||||
dateToCopy: new Date(this.copyFrom).toISOString()
|
||||
}
|
||||
this.fetchRanges(payload).then(
|
||||
r => {
|
||||
r.forEach((range) => {
|
||||
this.postRange({
|
||||
user: {
|
||||
type: 'user',
|
||||
id: range.user.id,
|
||||
@ -397,55 +259,9 @@ export default {
|
||||
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() {
|
||||
let start = this.myCalendarClickedEvent.start;
|
||||
@ -456,7 +272,11 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.fetchRanges()
|
||||
|
||||
if (this.showMyCalendar) {
|
||||
this.fetchAppointments(this.userId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,109 +1,152 @@
|
||||
import 'es6-promise/auto';
|
||||
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 store = createStore({
|
||||
strict: debug,
|
||||
state: {
|
||||
// newCalendarRanges: [],
|
||||
// updateCalendarRanges: [],
|
||||
// deleteCalendarRanges: [],
|
||||
// currentCalendarRanges: [],
|
||||
ranges: [],
|
||||
appointments: [],
|
||||
rangesToCopy: []
|
||||
},
|
||||
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: {
|
||||
// setCurrentCalendarRanges(state, payload) {
|
||||
// state.currentCalendarRanges = payload
|
||||
// },
|
||||
// updateRange(state, payload) {
|
||||
// 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
|
||||
// });
|
||||
// },
|
||||
// deleteRange(state, 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);
|
||||
// }
|
||||
setRanges(state, payload) {
|
||||
state.ranges = payload;
|
||||
},
|
||||
setRangesToCopy(state, payload) {
|
||||
state.rangesToCopy = payload
|
||||
},
|
||||
addRange(state, payload) {
|
||||
state.ranges = [...state.ranges, payload];
|
||||
},
|
||||
removeRange(state, payload) {
|
||||
const filteredCollection = state.ranges.filter(
|
||||
(r) => r.calendarRangeId !== payload
|
||||
)
|
||||
state.ranges = filteredCollection;
|
||||
},
|
||||
setAppointments(state, payload) {
|
||||
state.appointments = payload;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
// setCurrentCalendarRanges({ commit }) {
|
||||
// // console.log('userId', window.userId);
|
||||
// fetchCalendarRangesByUser(window.userId)
|
||||
// .then((ranges) => {
|
||||
// // console.log('ranges', ranges.results);
|
||||
// commit('setCurrentCalendarRanges', ranges.results);
|
||||
// })
|
||||
// },
|
||||
// addCalendarRange({ commit }, payload) {
|
||||
// commit('addCalendarRange', payload)
|
||||
// },
|
||||
// createRange({ commit }, payload) {
|
||||
// // console.log('### action createRange', payload);
|
||||
// commit('addRange', payload);
|
||||
// },
|
||||
// updateRange({ commit }, payload) {
|
||||
// // console.log('### action updateRange', payload);
|
||||
// commit('updateRange', payload);
|
||||
// },
|
||||
// deleteRange({ commit }, payload) {
|
||||
// // console.log('### action deleteRange', payload);
|
||||
// commit('deleteRange', payload);
|
||||
// },
|
||||
// clearNewCalendarRanges({ commit }, payload) {
|
||||
// commit('clearNewCalendarRanges', payload);
|
||||
// },
|
||||
// clearUpdateCalendarRanges({ commit }, payload) {
|
||||
// commit('clearUpdateCalendarRanges', payload);
|
||||
// },
|
||||
// clearDeleteCalendarRanges({ commit }, payload) {
|
||||
// commit('clearDeleteCalendarRanges', payload);
|
||||
// },
|
||||
// removeNewCalendarRanges({ commit }, payload) {
|
||||
// commit('removeNewCalendarRanges', payload);
|
||||
// },
|
||||
// removeFromDeleteRange({ commit }, payload) {
|
||||
// commit('removeFromDeleteRange', payload);
|
||||
// },
|
||||
fetchRanges({commit}, payload = null) {
|
||||
const url = payload ? `/api/1.0/calendar/calendar-range-available.json?user=${payload.userId}&start=${payload.dateToCopy}` :
|
||||
`/api/1.0/calendar/calendar-range-available.json?user=${window.userId}`
|
||||
return makeFetch('GET', url)
|
||||
.then((response) => {
|
||||
if (payload) {
|
||||
return response.results;
|
||||
// commit('setRangesToCopy', response.results);
|
||||
} else {
|
||||
const ranges = response.results.map(range => (
|
||||
{
|
||||
start: range.startDate.datetime,
|
||||
end: range.endDate.datetime,
|
||||
calendarRangeId: range.id,
|
||||
toDelete: false
|
||||
}
|
||||
));
|
||||
commit('setRanges', ranges)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
},
|
||||
postRange({commit}, payload) {
|
||||
const url = `/api/1.0/calendar/calendar-range.json?`;
|
||||
makeFetch('POST', url, payload)
|
||||
.then((response) => {
|
||||
const newRange =
|
||||
{
|
||||
start: response.startDate.datetime,
|
||||
end: response.endDate.datetime,
|
||||
calendarRangeId: response.id,
|
||||
toDelete: false
|
||||
}
|
||||
commit('addRange', newRange)
|
||||
})
|
||||
.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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user