diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 2f21078bf..96fb1667c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -11,7 +11,7 @@
-
+
{{ arg.timeText }}
@@ -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)
+ }
}
}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index c4fd7b4c4..046a09ef3 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -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;