rdv: edit calendar ranges: add delete + doc swagger

src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php

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

src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php

@@ -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' => [

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

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

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

@@ -3,8 +3,13 @@
     <h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
+        <span class='calendarRangeItems'>
         <b>{{ arg.timeText }}</b>
           <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"
@@ -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({
+               deleteCalendarRange(cr.id);
-                  id: cr.id //TODO check functionning
-               }, 'DELETE');
             })
             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
 };

src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig

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

src/Bundle/ChillCalendarBundle/chill.api.specs.yaml

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