From ce78177ab7f8a1e0c9abe687c3dd57adcc18e58b Mon Sep 17 00:00:00 2001 From: Julie Lenaerts Date: Wed, 11 May 2022 14:44:11 +0200 Subject: [PATCH] only fetch data for view and adapt all callbacks for header buttons --- .../Controller/CalendarRangeAPIController.php | 14 +- .../public/vuejs/MyCalendarRange/App.vue | 148 +++++++++--------- .../public/vuejs/MyCalendarRange/i18n.js | 9 +- .../Resources/public/vuejs/_api/api.js | 11 +- 4 files changed, 107 insertions(+), 75 deletions(-) diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php index 018d23426..b8e3710b2 100644 --- a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php +++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php @@ -12,6 +12,7 @@ declare(strict_types=1); namespace Chill\CalendarBundle\Controller; use Chill\MainBundle\CRUD\Controller\ApiController; +use DateTime; use Symfony\Component\HttpFoundation\JsonResponse; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; @@ -36,11 +37,22 @@ class CalendarRangeAPIController extends ApiController $sql = $sql . ' AND c.user = :user'; $query = $em->createQuery($sql) ->setParameter('user', $user); + + if ($request->query->has('start') && $request->query->has('end')) { + $startDate = $request->query->get('start'); + $endDate = $request->query->get('end'); + + $sql = $sql . ' AND c.startDate > :startDate AND c.endDate < :endDate'; + $query = $em ->createQuery($sql) + ->setParameter('startDate', $startDate) + ->setParameter('endDate', $endDate) + ->setParameter('user', $user); + } } else { $query = $em->createQuery($sql); } - $results = $query->getResult(); + dump($results); return $this->json(['count' => count($results), 'results' => $results], Response::HTTP_OK, [], ['groups' => ['read']]); //TODO use also the paginator, eg return $this->serializeCollection('get', $request, $_format, $paginator, $results); diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue index dcfc52f12..28880ff7b 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue @@ -24,9 +24,25 @@ -
+
+

{{ $t('copy_range_from_to') }}

+
+ +
+ +
+ +
+ +
+ +
+
+ +
    • -
    -
    +
    --> + @@ -163,7 +179,6 @@ export default { plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ], initialView: 'timeGridWeek', initialDate: window.startDate !== undefined ? window.startDate : new Date(), - eventSource: [], selectable: true, select: this.onDateSelect, eventChange: this.onEventChange, @@ -174,14 +189,53 @@ export default { editable: true, weekends: false, slotDuration: '00:15:00', - slotMinutes: 15, slotMinTime: "08:00:00", - slotMaxTime: "18:00:00", - contentHeight: 450, + 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(); + } + }, + }, headerToolbar: { - left: 'prev,next today', + left: 'prev next', center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay' + right: 'month,week,day' }, }, } @@ -202,12 +256,11 @@ export default { get() { return this.showMyCalendar; } - }, + } }, methods: { init() { this.fetchData(); - console.log('calendar', this.$refs.fullCalendar.getApi().view.getCurrentData()) }, openModal() { this.modal.showModal = true; @@ -231,7 +284,13 @@ export default { }, fetchData() { this.flag.loading = true; - fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => { + const startDate = this.$refs.fullCalendar.getApi().view.currentStart.toISOString() + const endDate = this.$refs.fullCalendar.getApi().view.currentEnd.toISOString() + + console.log('startDate', startDate, 'endDate', endDate) + fetchCalendarRangesByUser(this.userId, startDate, endDate).then(calendarRanges => new Promise((resolve, reject) => { + console.log('calendarRanges', calendarRanges.results); + let events = calendarRanges.results.map(i => ({ start: i.startDate.datetime, @@ -292,7 +351,7 @@ export default { this.calendarOptions.weekends = !this.calendarOptions.weekends; }, onDateSelect(payload) { - let events = this.calendarEvents.new.events; + // let events = this.calendarEvents.new.events; // events.push({ // start: payload.startStr, // end: payload.endStr @@ -337,6 +396,7 @@ export default { }).then((_r) => this.resetCalendar()); }, onEventClick(payload) { + // console.log(payload); if (payload.event.extendedProps.myCalendar) { this.myCalendarClickedEvent = { id: payload.event.extendedProps.calendarId, @@ -351,65 +411,11 @@ export default { this.openModal(); } }, - // onClickSave(payload) { - // this.flag.loading = true; - // if (this.$store.state.newCalendarRanges.length > 0){ - // Promise.all(this.$store.state.newCalendarRanges.map(cr => { - // postCalendarRange({ - // user: { - // type: 'user', - // id: window.userId, - // }, - // startDate: { - // datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200", - // }, - // endDate: { - // datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone - // }, - // }) - // }) - // ).then((_r) => this.resetCalendar()); - - // this.$store.dispatch('clearNewCalendarRanges', payload); - // } - // if (this.$store.state.updateCalendarRanges.length > 0){ - // Promise.all(this.$store.state.updateCalendarRanges.map(cr => { - // patchCalendarRange(cr.id, - // { - // startDate: { - // datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200", - // }, - // endDate: { - // datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone - // }, - // }) - // }) - // ).then((_r) => this.resetCalendar()); - // this.$store.dispatch('clearUpdateCalendarRanges', payload); - // } - // if (this.$store.state.deleteCalendarRanges.length > 0){ - // Promise.all(this.$store.state.deleteCalendarRanges.map(cr => { - // deleteCalendarRange(cr.id) - // }) - // ).then((_r) => this.resetCalendar()); - // this.$store.dispatch('clearDeleteCalendarRanges', payload); - // } - - // }, onClickDelete(payload) { if (payload.extendedProps.hasOwnProperty("calendarRangeId")) { deleteCalendarRange(payload.extendedProps.calendarRangeId).then(() => { this.resetCalendar(); }) - // if (payload.extendedProps.toDelete) { - // payload.setExtendedProp('toDelete', false) - // payload.setProp('borderColor', '#79bafc'); - // this.$store.dispatch('removeFromDeleteRange', payload); - // } else { - // payload.setExtendedProp('toDelete', true) - // payload.setProp('borderColor', '#dddddd'); - // this.$store.dispatch('deleteRange', payload); - // } } else { let newEvents = this.calendarEvents.new.events; let filterEvents = newEvents.filter((e) => @@ -420,7 +426,7 @@ export default { color: "#3788d8" }; - this.$store.dispatch('removeNewCalendarRanges', payload); + // this.$store.dispatch('removeNewCalendarRanges', payload); this.updateEventsSource(); } diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js index 2305b307b..486e6f6cd 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js @@ -3,6 +3,8 @@ const appMessages = { edit_your_calendar_range: "Planifiez vos plages de disponibilités", show_my_calendar: "Afficher mon calendrier", show_weekends: "Afficher les week-ends", + copy_range: "Copier", + copy_range_from_to: "Copier les plages d'un jour à l'autre", copy_range_to_next_day: "Copier les plages du jour au jour suivant", copy_range_from_day: "Copier les plages du ", to_the_next_day: " au jour suivant", @@ -12,7 +14,12 @@ const appMessages = { update_range_to_save: "Plages à modifier", delete_range_to_save: "Plages à supprimer", by: "Par", - main_user_concerned: "Utilisateur concerné" + main_user_concerned: "Utilisateur concerné", + dateFrom: "De", + dateTo: "à", + day: "Jour", + week: "Semaine", + month: "Mois", } } diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js index 7aad8ace2..852750f29 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js @@ -12,8 +12,15 @@ const fetchCalendarRanges = () => { }); }; -const fetchCalendarRangesByUser = (userId) => { - const url = `/api/1.0/calendar/calendar-range-available.json?user=${userId}`; +const fetchCalendarRangesByUser = (userId, startDate = null, endDate = null) => { + let url = ''; + + if (null !== startDate && null !== endDate) { + url = `/api/1.0/calendar/calendar-range-available.json?user=${userId}&start=${startDate}&end=${endDate}`; + } else { + url = `/api/1.0/calendar/calendar-range-available.json?user=${userId}`; + } + return fetch(url) .then(response => { if (response.ok) { return response.json(); }