diff --git a/src/pages/newCalendar/TheCalendar.vue b/src/pages/newCalendar/TheCalendar.vue index 849a295..7437a6a 100644 --- a/src/pages/newCalendar/TheCalendar.vue +++ b/src/pages/newCalendar/TheCalendar.vue @@ -39,6 +39,7 @@ export default { computed: { ...mapState({ selectedRecordId: (state) => state.calendar.selectedRecordId, + selectedDates: (state) => state.calendar.selectedDates, }), }, methods: { @@ -53,7 +54,12 @@ export default { }, ...mapActions({ changeSelectedRecordId: "changeSelectedRecordId", + changeSelectedDates: "changeSelectedDates", + getEvents: "getEvents", }), + convertDate(date) { + return moment(date?.split(".")?.reverse()?.join("-")); + }, }, watch: { selectedRecordId(value) { @@ -62,6 +68,59 @@ export default { previewVisibility(value) { if (!value) this.changeSelectedRecordId(null); }, + "$route.query": { + immediate: true, + deep: true, + handler(value) { + if (this.$route.path === "/calendar") { + if (!value?.start || !value?.end) { + this.changeSelectedDates({ + from: moment().clone().startOf("week"), + to: moment().clone().endOf("week"), + }); + this.$router.replace({ + query: { + start: this.selectedDates?.from?.format("DD.MM.YYYY"), + end: this.selectedDates?.to?.format("DD.MM.YYYY"), + }, + }); + } else if ( + value?.start !== this.selectedDates?.from?.format("DD.MM.YYYY") || + value?.end !== this.selectedDates?.to?.format("DD.MM.YYYY") + ) + this.changeSelectedDates({ + from: this.convertDate(value?.start), + to: this.convertDate(value?.end), + }); + } + }, + }, + selectedDates: { + deep: true, + immediate: true, + handler(newVal, oldVal) { + if ( + !newVal?.from?.isSame(oldVal?.from) || + !newVal?.to?.isSame(oldVal?.to) + ) { + this.getEvents(); + if ( + this.$route.query?.start !== newVal?.from?.format("DD.MM.YYYY") && + this.$route.query?.end !== newVal?.to?.format("DD.MM.YYYY") + ) { + this.$router.replace({ + query: { + start: newVal?.from?.format("DD.MM.YYYY"), + end: newVal?.to?.format("DD.MM.YYYY"), + }, + }); + } + } + }, + }, + }, + beforeUnmount() { + this.$route.query = {}; }, }; diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue index 04a2b62..ab3004d 100644 --- a/src/pages/newCalendar/components/CalendarHeader.vue +++ b/src/pages/newCalendar/components/CalendarHeader.vue @@ -111,15 +111,18 @@ export default { }, methods: { previousWeek() { - this.dates.from = this.dates.from.clone().subtract(1, "week"); - this.dates.to = this.dates.to.clone().subtract(1, "week"); + const diff = this.dates?.to?.diff(this.dates?.from, "days") + 1; + this.dates.from = this.dates.from.clone().subtract(diff, "day"); + this.dates.to = this.dates.to.clone().subtract(diff, "day"); }, nextWeek() { - this.dates.from = this.dates.from.clone().add(1, "week"); - this.dates.to = this.dates.to.clone().add(1, "week"); + const diff = this.dates?.to?.diff(this.dates?.from, "days") + 1; + this.dates.from = this.dates.from.clone().add(diff, "day"); + this.dates.to = this.dates.to.clone().add(diff, "day"); }, ...mapActions({ changeSelectedDates: "changeSelectedDates", + getEvents: "getEvents", }), saveDatesChange() { this.calendarVisibility = false; @@ -142,9 +145,17 @@ export default { this.changeSelectedDates(val); }, }, - }, - mounted() { - this.initializeDates(); + selectedDates: { + deep: true, + immediate: true, + handler(val) { + if ( + !val?.from.isSame(this.dates?.from) || + !val?.to.isSame(this.dates?.to) + ) + this.initializeDates(); + }, + }, }, }; diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue index 3adffc8..7a56847 100644 --- a/src/pages/newCalendar/components/CalendarWrapper.vue +++ b/src/pages/newCalendar/components/CalendarWrapper.vue @@ -239,7 +239,6 @@ export default { this.changeCurrentTime(); this.timeCoilInitialization(); this.startTimer(); - this.getEvents(); }, beforeUnmount() { this.stopTimer(); diff --git a/src/store/modules/calendar.js b/src/store/modules/calendar.js index e022760..6d0b922 100644 --- a/src/store/modules/calendar.js +++ b/src/store/modules/calendar.js @@ -25,8 +25,8 @@ const actions = { commit("setSelectedRecordId", id); }, getEvents({ commit, state }) { - const start = state.selectedDates.from.toISOString(); - const end = state.selectedDates.to.toISOString(); + const start = state.selectedDates.from.format("YYYY-MM-DDTHH:mm:ss"); + const end = state.selectedDates.to.format("YYYY-MM-DDTHH:mm:ss"); fetchWrapper.get(`events?start=${start}&end=${end}`).then((data) => { if (Array.isArray(data)) { commit("setEvents", data);