WIP Промежуточные изменения

src/pages/newCalendar/components/CalendarHeader.vue

@@ -31,7 +31,7 @@
       )
         .h-5.w-5.flex.items-center.justify-center
           q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
-            :size="calendarVisibility ? '10px' : '16px'"
+            :size="calendarVisibility ? '10px' : '16px'",
           )
             q-menu(
               :style="{'margin-top': '4px !important'}"
@@ -42,11 +42,10 @@
               :offset="[122, 14]"
             )
               base-calendar(
-                v-model="date",
+                v-model="dates",
                 range,
                 :range-count="7",
-                :save="saveNewDate",
-                :cancel="cancelDateChanges",
+                :save="saveDatesChange",
               )
       q-btn(
         color="secondary",
@@ -88,7 +87,7 @@ export default {
           value: "collapsed",
         },
       ],
-      date: {
+      dates: {
         from: null,
         to: null,
       },
@@ -97,9 +96,9 @@ export default {
   },
   computed: {
     currentWeek() {
-      return `${this.date?.from?.format(
+      return `${this.dates?.from?.format(
         "D MMMM YYYY"
-      )} - ${this.date?.to?.format("D MMMM YYYY")}`;
+      )} - ${this.dates?.to?.format("D MMMM YYYY")}`;
     },
     ...mapState({
       selectedDates: (state) => state.calendar.selectedDates,
@@ -107,40 +106,53 @@ export default {
   },
   methods: {
     previousWeek() {
-      this.date.from = this.date.from.clone().subtract(1, "week");
-      this.date.to = this.date.to.clone().subtract(1, "week");
+      this.dates.from = this.dates.from.clone().subtract(1, "week");
+      this.dates.to = this.dates.to.clone().subtract(1, "week");
+      this.changeSelectedDates(this.dates);
     },
     nextWeek() {
-      this.date.from = this.date.from.clone().add(1, "week");
-      this.date.to = this.date.to.clone().add(1, "week");
+      this.dates.from = this.dates.from.clone().add(1, "week");
+      this.dates.to = this.dates.to.clone().add(1, "week");
+      this.changeSelectedDates(this.dates);
     },
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
     }),
-    saveNewDate() {
+    saveDatesChange() {
+      this.calendarVisibility = false;
+      if (
+        !this.dates?.from.isSame(this.selectedDates?.from) &&
+        !this.dates?.to.isSame(this.selectedDates?.to)
+      )
+        this.changeSelectedDates(this.dates);
+    },
+    cancelDatesChange() {
       this.calendarVisibility = false;
     },
-    cancelDateChanges() {
-      this.calendarVisibility = false;
+    initializeDates() {
+      this.dates = {
+        from: this.selectedDates.from.clone(),
+        to: this.selectedDates.to.clone(),
+      };
     },
   },
   watch: {
-    date: {
-      deep: true,
-      handler(val) {
-        if (
-          !this.val?.from.isSame(this.selectedDates?.from) &&
-          !this.val?.to.isSame(this.selectedDates?.to)
-        )
-          this.changeSelectedDates(val);
-      },
-    },
+    // dates: {
+    //   deep: true,
+    //   handler(val) {
+    //     if (
+    //       !this.val?.from.isSame(this.selectedDates?.from) &&
+    //       !this.val?.to.isSame(this.selectedDates?.to)
+    //     )
+    //       this.changeSelectedDates(val);
+    //   },
+    // },
+    // calendarVisibility(val) {
+    //   if (val === false) this.initializeDates();
+    // }
   },
   mounted() {
-    this.date = {
-      from: this.selectedDates.from.clone(),
-      to: this.selectedDates.to.clone(),
-    };
+    this.initializeDates();
   },
 };
 </script>