From 82e76d7d5a208a93df8887d85f22223ef16d76a9 Mon Sep 17 00:00:00 2001 From: nobohan Date: Mon, 6 Sep 2021 14:50:48 +0200 Subject: [PATCH] =?UTF-8?q?rdv:=20plages=20de=20disponibilit=C3=A9s:=20var?= =?UTF-8?q?ious=20UX/UI=20improvements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../public/vuejs/MyCalendarRange/App.vue | 91 +++++++++++++++---- .../public/vuejs/MyCalendarRange/i18n.js | 7 +- .../Resources/public/vuejs/_api/api.js | 16 ---- 3 files changed, 77 insertions(+), 37 deletions(-) diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue index 06dcec898..1c0e7c4b4 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue @@ -1,6 +1,16 @@ @@ -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) { diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js index 8353a0a1f..96eca1d6a 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js +++ b/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" } } diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js index aa3d12f8d..7aad8ace2 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js +++ b/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,