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

only fetch data for view and adapt all callbacks for header buttons

Browse Source
This commit is contained in:
Julie Lenaerts 2022-05-11 14:44:11 +02:00
parent 7c693b7495
commit ce78177ab7
4 changed files with 107 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
View File

@ -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);

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

@ -24,9 +24,25 @@
</span>
</template>
</FullCalendar>
<div>
<div id="copy-widget">
<h4 class="chill-red" style="margin-top: 2rem;">{{ $t('copy_range_from_to') }}</h4>
<div style="display: flex; justify-content: space-between; margin-top: 1rem;">
<label class="col-form-label">{{ $t('dateFrom') }}</label>
<div class="col-sm-3">
<input class="form-control" type="date" />
</div>
<label class="col-form-label">{{ $t('dateTo') }}</label>
<div class="col-sm-3">
<input class="form-control" type="date" />
</div>
<button class="btn btn-action">
{{ $t('copy_range')}}
</button>
</div>
</div>
<!-- <div>
<ul class="record_actions">
<!-- <li>
<li>
<button class="btn btn-save" :disabled="!dirty"
@click.prevent="onClickSave">
{{ $t('action.save')}}
@ -35,7 +51,7 @@
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<span class="sr-only">{{ $t('loading') }}</span>
</span>
</li> -->
</li>
<li>
<button v-if="disableCopyDayButton" class="btn btn-action" disabled>
{{ $t('copy_range_to_next_day')}}
@ -46,8 +62,8 @@
</button>
</li>
</ul>
</div>
<div>
</div> -->
<!-- <div>
<div v-if="newCalendarRanges.length > 0">
<h4>{{ $t('new_range_to_save') }}</h4>
<ul>
@ -72,7 +88,7 @@
</li>
</ul>
</div>
</div>
</div> -->
</div>
<teleport to="body">
@ -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();
}

9
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
View File

@ -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",
}
}

11
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
View File

@ -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(); }