rdv: edit calendar ranges: add delete + doc swagger

src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss

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

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue

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

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js

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

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js

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