rdv: plages de disponibilités: various UX/UI improvements

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

@@ -1,6 +1,16 @@
 <template>
   <div>
     <h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
+
+    <div class="form-check">
+      <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
+      <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
+    </div>
+    <div class="form-check">
+      <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
+      <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+    </div>
+
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
@@ -12,24 +22,52 @@
         </span>
       </template>
     </FullCalendar>
-    <button class="btn btn-save"
-      @click.prevent="onClickSave">
-      {{ $t('action.save')}}
-    </button>
-    <div class="form-check">
-      <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
-      <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
-    </div>
-    <div class="form-check">
-      <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
-      <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+    <div>
+      <button class="btn btn-save" :disabled="!dirty"
+        @click.prevent="onClickSave">
+        {{ $t('action.save')}}
+      </button>
+      <span v-if="flag.loading" class="loading">
+        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+        <span class="sr-only">{{ $t('loading') }}</span>
+      </span>
     </div>
     <div>
-    <button class="btn btn-action" 
-      @click.prevent="copyDay">
-      {{ $t('copy_range_to_next_day')}}
-    </button>
-    <p>{{ $t('copy_range_how_to')}}</p>
+      <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
+        {{ $t('copy_range_to_next_day')}}
+      </button>
+      <button v-if="!disableCopyDayButton" class="btn btn-action" 
+        @click.prevent="copyDay">
+        {{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
+      </button>
+      <p>{{ $t('copy_range_how_to')}}</p>
+    </div>
+
+    <div>
+      <div v-if="newCalendarRanges.length > 0">
+        <h4>{{ $t('new_range_to_save') }}</h4>
+        <ul>
+          <li v-for="i in newCalendarRanges" :key="i.start">
+            {{ i.start.toLocaleString() }} - {{ i.end.toLocaleString() }}
+          </li>
+        </ul>
+      </div>
+      <div v-if="updateCalendarRanges.length > 0">
+        <h4>{{ $t('update_range_to_save') }}</h4>
+        <ul>
+          <li v-for="i in updateCalendarRanges" :key="i.start">
+            {{ i.start.toLocaleString() }} - {{ i.end.toLocaleString() }}
+          </li>
+        </ul>
+      </div>
+      <div v-if="deleteCalendarRanges.length > 0">
+        <h4>{{ $t('delete_range_to_save') }}</h4>
+        <ul>
+          <li v-for="i in deleteCalendarRanges" :key="i.start">
+            {{ i.start.toLocaleString() }} - {{ i.end.toLocaleString() }}
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -42,6 +80,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
+import { mapState } from 'vuex';
 
 export default {
   name: "App",
@@ -51,6 +90,9 @@ export default {
   data() {
     return {
       errorMsg: [],
+      flag: {
+        loading: false
+      },
       userId: window.userId,
       showMyCalendar: true,
       calendarEvents: {
@@ -61,6 +103,8 @@ export default {
            color: "#3788d8"
          }
       },
+      lastNewDate: null,
+      disableCopyDayButton: true,
       calendarOptions: {
         locale: frLocale,
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
@@ -85,6 +129,12 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      newCalendarRanges: state => state.newCalendarRanges,
+      updateCalendarRanges: state => state.updateCalendarRanges,
+      deleteCalendarRanges: state => state.deleteCalendarRanges,
+      dirty: state => state.newCalendarRanges.length > 0 || state.updateCalendarRanges.length > 0 || state.deleteCalendarRanges.length > 0 
+    }),
     showMyCalendarWidget: {
       set(value) {
         this.toggleMyCalendar(value);
@@ -108,6 +158,7 @@ export default {
       this.updateEventsSource();
     },
     fetchData() {
+      this.flag.loading = true;
       fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
         let events = calendarRanges.results.map(i =>
           ({
@@ -138,6 +189,7 @@ export default {
           };
           this.calendarEvents.userCalendar = calendarEventsCurrentUser;
           this.updateEventsSource();
+          this.flag.loading = false;
           resolve();
         }));
 
@@ -169,6 +221,7 @@ export default {
         events: events,
         color: "#3788d8"
       };
+      this.disableCopyDayButton = false;
       this.lastNewDate = new Date(payload.startStr);
       this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
@@ -179,7 +232,8 @@ export default {
       payload.event.setProp('color', '#3788d8');
       this.$store.dispatch('updateRange', payload);
     },
-    onClickSave(payload) { 
+    onClickSave(payload) {
+      this.flag.loading = true;
       if (this.$store.state.newCalendarRanges.length > 0){
         this.$store.state.newCalendarRanges.map(cr => {
             postCalendarRange({
@@ -231,9 +285,6 @@ export default {
     isFriday(date) {
       return date.getDay() === 5
     },
-    // disableCopyDayButton() { //TODO does not update!
-    //   return this.calendarEvents.new.events.length === 0
-    // },
     copyDay(_payload) {
       console.log(this.calendarEvents.new);
       if (this.calendarEvents.new.events.length > 0) {

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

@@ -4,8 +4,13 @@ const appMessages = {
       show_my_calendar: "Afficher mon calendrier",
       show_weekends: "Afficher les week-ends",
       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",
       copy_range_to_next_week: "Copier les plages de la semaine à la semaine suivante",
-      copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi."
+      copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
+      new_range_to_save: "Nouvelles plages à enregistrer",
+      update_range_to_save: "Plages à modifier",
+      delete_range_to_save: "Plages à supprimer"
    }
 }
 

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

@@ -90,22 +90,6 @@ const deleteCalendarRange = (id) => {
    });
 };
 
-// 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,