rdv: edit calendar ranges: add delete + doc swagger

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