From 317ed18e5c32c0accdc39c16ae890ff28660f8b4 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 30 May 2023 19:08:19 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=B4=D0=B8=D0=B0=D0=BF=D0=B0=D0=B7=D0=BE=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  1 +
 src/components/base/BaseCalendar.vue          | 50 +++++++++++++------
 .../newCalendar/components/CalendarHeader.vue |  2 +-
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index e013c00..cee65c9 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -17,6 +17,7 @@
   --btn-blue-color-2: rgba(65, 105, 225, 0.5)
   --btn-blue-color-3: rgba(65, 105, 225, 0.2)
   --btn-blue-color-4: rgba(65, 105, 225, 0.8)
+  --btn-blue-color-5: rgba(65, 105, 225, 0.4)
   --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
   --font-grey-color: #9294a7
   --font-grey-color-0: #85858b
diff --git a/src/components/base/BaseCalendar.vue b/src/components/base/BaseCalendar.vue
index c9c10ef..f8bbfff 100644
--- a/src/components/base/BaseCalendar.vue
+++ b/src/components/base/BaseCalendar.vue
@@ -24,12 +24,15 @@
     .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-5.px-5
-      .flex.items-center.justify-center.rounded-full.cursor-pointer.w-full.h-full(
+      .flex.items-center.justify-center.cursor-pointer.w-full.h-full(
         v-for="date of internalDatesList",
-        :class="calculateInternalMonth(date)",
         @click="selectDate(date)",
         :key="date",
-      ) {{ date.format("D") }}
+        :style="calculateRangeStyle(date)"
+      )
+        .flex.items-center.justify-center.rounded-full.w-full.h-full(
+          :class="calculateCellClasses(date)",
+        ) {{ date.format("D") }}
 </template>
 
 <script>
@@ -88,7 +91,7 @@ export default {
     nextMonth() {
       this.internalDate = this.internalDate.clone().add(1, "month");
     },
-    calculateInternalMonth(date) {
+    calculateCellClasses(date) {
       if (date.isSame(this.today, "day"))
         return {
           "date-today": true,
@@ -97,6 +100,13 @@ export default {
         return {
           "date-active": true,
         };
+      if (
+        this.calculateRangeStyle(date) &&
+        Object.keys(this.calculateRangeStyle(date) === 1)
+      )
+        return {
+          "text-white": true,
+        };
       if (date.isSame(this.internalDate, "month"))
         return {
           "date-month": true,
@@ -105,6 +115,26 @@ export default {
         "date-other": true,
       };
     },
+    calculateRangeStyle(date) {
+      if (this.range && this.value?.from && this.value?.to) {
+        if (date.isSame(this.value?.from?.format("YYYY-MM-DD")))
+          return {
+            "border-top-left-radius": "9999px",
+            "border-bottom-left-radius": "9999px",
+            "background-color": "var(--btn-blue-color-5)",
+          };
+        if (date.isSame(this.value?.to?.format("YYYY-MM-DD")))
+          return {
+            "border-top-right-radius": "9999px",
+            "border-bottom-right-radius": "9999px",
+            "background-color": "var(--btn-blue-color-5)",
+          };
+        if (date.isAfter(this.value?.from) && date.isBefore(this.value?.to))
+          return {
+            "background-color": "var(--btn-blue-color-5)",
+          };
+      }
+    },
     selectDate(date) {
       if (!this.range) {
         this.value = date;
@@ -134,8 +164,7 @@ export default {
       }
       return (
         date.isSame(this.value?.from?.format("YYYY-MM-DD")) ||
-        date.isSame(this.value?.to?.format("YYYY-MM-DD")) ||
-        (date.isAfter(this.value?.from) && date.isBefore(this.value?.to))
+        date.isSame(this.value?.to?.format("YYYY-MM-DD"))
       );
     },
     calculateRange(start, end, count) {
@@ -157,11 +186,6 @@ export default {
     if (this.value) {
       if (this.range) {
         this.internalDate = this.value?.from?.clone();
-        /*this.calculateRange(
-          this.value?.from.clone(),
-          this.value?.to.clone(),
-          this.rangeCount
-        );*/
       } else this.internalDate = this.value?.clone();
     }
   },
@@ -191,10 +215,6 @@ export default {
 .date-today
   border: 1px dashed var(--btn-blue-color)
   color: var(--btn-blue-color)
-// .date-range
-//   background-color: var(--btn-blue-color-2)
-//   color: var(--default-white)
-//   border-radius: 0px
 .body
   display: grid
   grid-template-columns: repeat(7, 35px)
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 7c19fad..ded3669 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -51,7 +51,7 @@
           anchor="bottom middle",
           self="top middle"
         )
-          base-calendar(v-model="date", range, :range-count="5")
+          base-calendar(v-model="date", range)
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",