rdv: edit calendar ranges: add delete + doc swagger

This commit is contained in:
nobohan 2021-08-31 14:16:42 +02:00
parent bcb36ddc11
commit 25b85fcc68
8 changed files with 137 additions and 28 deletions

View File

@ -38,4 +38,10 @@ class CalendarRangeAPIController extends ApiController
//TODO use also the paginator, eg return $this->serializeCollection('get', $request, $_format, $paginator, $results);
}
// public function calendarRangeApi($id, Request $request, string $_format): Response
// {
// return $this->addRemoveSomething('calendarRange', $id, $request, $_format, 'calendarRange', CalendarRange::class, [ 'groups' => [ 'read' ] ]);
// }
}

View File

@ -66,7 +66,7 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf
'_index' => [
'methods' => [
Request::METHOD_GET => true,
Request::METHOD_HEAD => true
Request::METHOD_HEAD => true,
],
],
'_entity' => [

View File

@ -8,3 +8,13 @@ div#calendarControls {
div#fullCalendar{
}
span.calendarRangeItems {
display: flex;
flex-direction: row;
justify-content: space-between;
a {
text-decoration: none;
padding: 3px;
}
}

View File

@ -2,14 +2,19 @@
<div>
<h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
<FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg'>
<template v-slot:eventContent='arg' >
<span class='calendarRangeItems'>
<b>{{ arg.timeText }}</b>
<i>&nbsp;{{ arg.event.title }}</i>
<i>&nbsp;{{ arg.event.title }}</i>
<a class="fa fa-fw fa-times"
@click.prevent="onDelete(arg.event)">
</a>
</span>
</template>
</FullCalendar>
<button class="btn btn-save"
@click.prevent="onClickSave">
{{ $t('action.save')}}
@click.prevent="onClickSave">
{{ $t('action.save')}}
</button>
</div>
</template>
@ -52,7 +57,6 @@ export default {
eventChange: this.onEventChange,
eventDrop: this.onEventDropOrResize,
eventResize: this.onEventDropOrResize,
// eventClick: this.onEventClick,
selectMirror: true,
editable: true,
weekends: false,
@ -69,8 +73,6 @@ export default {
this.fetchData()
},
fetchData() {
console.log(this.userId);
fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
let events = calendarRanges.results.map(i =>
({
@ -123,7 +125,6 @@ export default {
this.calendarOptions.weekends = !this.calendarOptions.weekends;
},
onDateSelect(payload) {
console.log(payload)
let events = this.calendarEvents.new.events;
events.push({
start: payload.startStr,
@ -137,18 +138,17 @@ export default {
this.$store.dispatch('createRange', payload);
},
onEventChange(payload) {
console.log(payload)
this.$store.dispatch('updateRange', payload);
},
onEventDropOrResize(payload) {
payload.event.setProp('color', '#3788d8');
this.$store.dispatch('updateRange', payload);
},
// onEventClick(payload) {
// console.log(payload)
// //TODO update the eventsSource with payload, or use the store for updating the eventsSource
// },
onClickSave(payload){
this.$store.dispatch('saveRanges', payload);
},
onDelete(payload){
payload.setProp('color', '#dddddd');
this.$store.dispatch('deleteRange', payload);
}
},
mounted() {
@ -156,4 +156,3 @@ export default {
}
}
</script>

View File

@ -1,6 +1,6 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
import { postCalendarRange, patchCalendarRange } from '../_api/api';
import { postCalendarRange, patchCalendarRange, deleteCalendarRange } from '../_api/api';
const debug = process.env.NODE_ENV !== 'production';
@ -20,7 +20,17 @@ const store = createStore({
});
},
addRange(state, payload) {
state.newCalendarRanges.push({start: payload.start, end: payload.end});
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 = [];
@ -41,10 +51,13 @@ const store = createStore({
console.log('### action updateRange', payload);
commit('updateRange', payload);
},
deleteRange({ commit }, payload) {
console.log('### action deleteRange', payload);
commit('deleteRange', payload);
},
saveRanges({ commit }, payload) {
console.log('### action saveRange', payload);
console.log(this.state)
//TODO: if smthg new in newCalendarRange, postRange(), if smthg to update in updateCalendarRanges, update...
if (this.state.newCalendarRanges.length > 0){
this.state.newCalendarRanges.map(cr => {
postCalendarRange({
@ -58,13 +71,12 @@ const store = createStore({
endDate: {
datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
},
}, 'POST');
});
})
commit('clearNewCalendarRanges');
}
if (this.state.updateCalendarRanges.length > 0){
this.state.updateCalendarRanges.map(cr => {
console.log(cr)
patchCalendarRange(cr.id,
{
startDate: {
@ -79,9 +91,7 @@ const store = createStore({
}
if (this.state.deleteCalendarRanges.length > 0){
this.state.deleteCalendarRanges.map(cr => {
postCalendarRange({
id: cr.id //TODO check functionning
}, 'DELETE');
deleteCalendarRange(cr.id);
})
commit('deleteUpdateCalendarRanges');
}

View File

@ -38,12 +38,12 @@ const fetchCalendar = (mainUserId) => {
/*
* Endpoint chill_api_single_calendar_range__entity_create
* method POST or DELETE, post CalendarRange entity
* method POST, post CalendarRange entity
*/
const postCalendarRange = (body, method) => {
const postCalendarRange = (body) => {
const url = `/api/1.0/calendar/calendar-range.json?`;
return fetch(url, {
method: method,
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
@ -73,11 +73,44 @@ const patchCalendarRange = (id, body) => {
});
};
/*
* Endpoint chill_api_single_calendar_range__entity
* method DELETE, delete CalendarRange entity
*/
const deleteCalendarRange = (id) => {
const url = `/api/1.0/calendar/calendar-range/${id}.json`;
return fetch(url, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
}).then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};
// const deleteCalendarRange = (id) => {
// const url = `/api/1.0/calendar/calendar-range.json`;
// return fetch(url, {
// method: 'DELETE',
// headers: {
// 'Content-Type': 'application/json;charset=utf-8'
// },
// body: JSON.stringify({
// id: id
// })
// }).then(response => {
// if (response.ok) { return response.json(); }
// throw Error('Error with request resource response');
// });
// };
export {
fetchCalendarRanges,
fetchCalendar,
fetchCalendarRangesByUser,
postCalendarRange,
patchCalendarRange
patchCalendarRange,
deleteCalendarRange
};

View File

@ -19,4 +19,5 @@
{% block css %}
{{ parent() }}
{{ encore_entry_link_tags('vue_calendar') }}
{{ encore_entry_link_tags('page_calendar') }}
{% endblock %}

View File

@ -120,6 +120,56 @@ paths:
description: "not found"
401:
description: "Unauthorized"
patch:
tags:
- calendar
summary: update a calendar range
requestBody:
required: true
content:
application/json:
schema:
type: object
properties:
user:
$ref: '#/components/schemas/User'
startDate:
$ref: '#/components/schemas/Date'
endDate:
$ref: '#/components/schemas/Date'
responses:
401:
description: "Unauthorized"
404:
description: "Not found"
200:
description: "OK"
422:
description: "Unprocessable entity (validation errors)"
400:
description: "transition cannot be applyed"
delete:
tags:
- calendar
summary: "Remove a calendar range"
parameters:
- name: id
in: path
required: true
description: The calendar range id
schema:
type: integer
format: integer
minimum: 1
responses:
401:
description: "Unauthorized"
404:
description: "Not found"
200:
description: "OK"
422:
description: "object with validation errors"
/1.0/calendar/calendar-range-available.json:
get: