From 8691790a534f8bb8477f2f8b1f5dcd426a56ffc2 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 16 Aug 2023 23:00:36 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B2=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=82=20=D0=B2=20=D0=BF=D0=B0=D1=80=D0=B0=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=82=D1=80=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/newCalendar/TheCalendar.vue         | 59 +++++++++++++++++++
 .../newCalendar/components/CalendarHeader.vue | 25 +++++---
 .../components/CalendarWrapper.vue            |  1 -
 src/store/modules/calendar.js                 |  4 +-
 4 files changed, 79 insertions(+), 10 deletions(-)

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 = {};
   },
 };
 </script>
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();
+      },
+    },
   },
 };
 </script>
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);