From a8b7de025c5a321c33a4f59372c667a7f3c3ddb6 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 19 Jun 2023 13:50:06 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D1=87=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D0=BB=D0=B5=D0=BD=D0=B4=D0=B0=D1=80=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseCalendar.vue          | 44 +++++++++++++++++--
 .../newCalendar/components/CalendarHeader.vue | 36 ++++++++++-----
 2 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/src/components/base/BaseCalendar.vue b/src/components/base/BaseCalendar.vue
index 13c1f18..40bb814 100644
--- a/src/components/base/BaseCalendar.vue
+++ b/src/components/base/BaseCalendar.vue
@@ -1,7 +1,14 @@
 <template lang="pug">
   .calendar-wrapper.bg-white
-    .header.px-6.pt-5.pb-18px.flex.items-center.justify-between
-      .text-smm.font-semibold {{ internalMonth }}
+    .header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-between
+      q-btn(
+        size="14px"
+        color="dark"
+        flat,
+        :label="internalMonth"
+        no-caps,
+        padding="10px 12px"
+      )
       .arrows.flex.items-center.justify-center.gap-x-6
         q-btn(
           flat,
@@ -23,7 +30,7 @@
         )
     .week.py-4.px-5.grid.grid-rows-1.grid-cols-7
       .flex.items-center.justify-center.week-item.text-xsx.py-1(v-for="day of week", :key="day") {{ day }}
-    .body.pb-7.px-5
+    .body.pb-3.px-5
       .flex.items-center.justify-center.cursor-pointer.w-full.h-full(
         v-for="date of internalDatesList",
         @click="selectDate(date)",
@@ -33,6 +40,25 @@
         .flex.items-center.justify-center.rounded-full.w-full.h-full(
           :class="calculateCellClasses(date)",
         ) {{ date.format("D") }}
+    .footer.flex.justify-end.items-center.px-5.py-4
+      q-btn(
+        color="dark"
+        flat,
+        no-caps,
+        label="Отменить",
+        size="14px",
+        padding="6px 12px",
+        @click="cancel"
+      )
+      q-btn(
+        color="primary",
+        flat,
+        no-caps,
+        label="Сохранить",
+        size="14px",
+        padding="6px 12px",
+        @click="save"
+      )
 </template>
 
 <script>
@@ -44,6 +70,14 @@ export default {
     modelValue: Object,
     range: Boolean,
     rangeCount: Number,
+    save: {
+      type: Function,
+      default: () => {},
+    },
+    cancel: {
+      type: Function,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -218,4 +252,8 @@ export default {
   row-gap: 4px
   justify-content: center
   align-items: center
+.month:hover
+  background-color: var(--bg-light-grey)
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
 </style>
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 1f082ce..8e676f6 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -39,9 +39,15 @@
               transition-show="scale",
               transition-hide="scale"
               self="top middle",
-              :offset="[118, 14]"
+              :offset="[122, 14]"
             )
-              base-calendar(v-model="date", range, :range-count="7")
+              base-calendar(
+                v-model="date",
+                range,
+                :range-count="7",
+                :save="saveNewDate",
+                :cancel="cancelDateChanges"
+              )
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
@@ -111,17 +117,25 @@ export default {
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
     }),
+    saveNewDate() {
+      this.calendarVisibility = false;
+      if (
+        !this.date?.from.isSame(this.selectedDates?.from) &&
+        !this.date?.to.isSame(this.selectedDates?.to)
+      )
+        this.changeSelectedDates(this.date);
+    },
+    cancelDateChanges() {
+      this.calendarVisibility = false;
+    },
   },
   watch: {
-    date: {
-      deep: true,
-      handler(val) {
-        if (
-          !this.date?.from.isSame(this.selectedDates?.from) &&
-          !this.date?.to.isSame(this.selectedDates?.to)
-        )
-          this.changeSelectedDates(val);
-      },
+    calendarVisibility(val) {
+      if (val === false)
+        this.date = {
+          from: this.selectedDates.from.clone(),
+          to: this.selectedDates.to.clone(),
+        };
     },
   },
   mounted() {