From 20893fdc6168dd17b594574b518541642c3f94b9 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 30 May 2023 18:11:49 +0300
Subject: [PATCH 1/2] =?UTF-8?q?WIP=20=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D1=85=20=D0=B4=D0=B0=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseCalendar.vue          | 145 ++++++++++++++----
 .../newCalendar/components/CalendarHeader.vue |   7 +-
 2 files changed, 121 insertions(+), 31 deletions(-)

diff --git a/src/components/base/BaseCalendar.vue b/src/components/base/BaseCalendar.vue
index fcdbe2d..c9c10ef 100644
--- a/src/components/base/BaseCalendar.vue
+++ b/src/components/base/BaseCalendar.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   .calendar-wrapper.bg-white
     .header.px-6.pt-5.pb-18px.flex.items-center.justify-between
-      .text-smm.font-semibold {{ month }}
+      .text-smm.font-semibold {{ internalMonth }}
       .arrows.flex.items-center.justify-center.gap-x-6
         q-btn(
           flat,
@@ -21,14 +21,15 @@
           round,
           @click="nextMonth"
         )
-    .week.py-4.px-18px.grid.grid-rows-1.grid-cols-7.gap-x-1
-      .flex.items-center.justify-center.week-item.text-xsx.py-1.px-2(v-for="day of week", :key="day") {{ day }}
-    .body.pb-6.px-6.grid.grid-rows-6.grid-cols-7.gap-x-1.gap-y-2
-      .flex.items-center.justify-center.h-8.w-8.rounded-full(
-        v-for="date of dates",
-        :style="calculateCurrentMonth(date)",
+    .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(
+        v-for="date of internalDatesList",
+        :class="calculateInternalMonth(date)",
+        @click="selectDate(date)",
         :key="date",
-      ) {{ date.format("DD") }}
+      ) {{ date.format("D") }}
 </template>
 
 <script>
@@ -39,11 +40,14 @@ export default {
   props: {
     modelValue: Object,
     range: Boolean,
+    rangeCount: Number,
   },
   data() {
     return {
       week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
-      currentDate: moment(),
+      internalDate: moment(),
+      selectedDate: null,
+      datesRange: [],
     };
   },
   computed: {
@@ -58,50 +62,108 @@ export default {
     ...mapState({
       today: (state) => state.calendar.currentDate,
     }),
-    month() {
-      let formattedMonth = this.currentDate.format("MMMM");
+    internalMonth() {
+      let formattedMonth = this.internalDate.format("MMMM");
       return `${
         formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
-      } ${this.currentDate.format("YYYY")}`;
+      } ${this.internalDate.format("YYYY")}`;
     },
-    startDate() {
-      return this.currentDate
+    internalStartDate() {
+      return this.internalDate
         .clone()
         .startOf("month")
         .startOf("week")
         .subtract(1, "day");
     },
-    dates() {
-      return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
+    internalDatesList() {
+      return [...Array(42)].map(() =>
+        this.internalStartDate.add(1, "day").clone()
+      );
     },
   },
   methods: {
     previousMonth() {
-      this.currentDate = this.currentDate.clone().subtract(1, "month");
+      this.internalDate = this.internalDate.clone().subtract(1, "month");
     },
     nextMonth() {
-      this.currentDate = this.currentDate.clone().add(1, "month");
+      this.internalDate = this.internalDate.clone().add(1, "month");
     },
-    calculateCurrentMonth(date) {
-      if (
-        date.isSame(this.today, "day") ||
-        date.isSame(this.currentDate, "day")
-      )
+    calculateInternalMonth(date) {
+      if (date.isSame(this.today, "day"))
         return {
-          color: "var(--default-white)",
-          "background-color": "var(--btn-blue-color)",
+          "date-today": true,
         };
-      if (date.isSame(this.currentDate, "month"))
+      if (this.defineDateRange(date))
         return {
-          color: "var(--font-black-color)",
+          "date-active": true,
+        };
+      if (date.isSame(this.internalDate, "month"))
+        return {
+          "date-month": true,
         };
       return {
-        color: "var(--font-grey-color)",
+        "date-other": true,
       };
     },
+    selectDate(date) {
+      if (!this.range) {
+        this.value = date;
+        return;
+      }
+      if (this.rangeCount) {
+        this.value.from = date;
+        this.value.to = this.value.from.clone().add(this.rangeCount - 1, "day");
+        return;
+      }
+      if (this.value?.to) {
+        this.value.from = date;
+        this.value.to = null;
+        return;
+      }
+      if (date.isAfter(this.value?.from)) {
+        this.value.to = date;
+        return;
+      }
+      this.value.to = this.value.from;
+      this.value.from = date;
+      return;
+    },
+    defineDateRange(date) {
+      if (!this.range) {
+        return date.isSame(this.value?.format("YYYY-MM-DD"));
+      }
+      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))
+      );
+    },
+    calculateRange(start, end, count) {
+      let internalCount = count ? count : end.diff(start, "days");
+      return [...Array(internalCount - 2)].map(() =>
+        start.add(1, "day").clone()
+      );
+    },
   },
+  // watch: {
+  //   modelValue: {
+  //     deep: true,
+  //     handler(value) {
+  //       console.log(value);
+  //     },
+  //   },
+  // },
   mounted() {
-    if (this.value) this.currentDate = this.value.clone();
+    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();
+    }
   },
 };
 </script>
@@ -115,4 +177,29 @@ export default {
   color: var(--font-grey-color)
 .week-item:nth-last-child(-n+2)
   color: var(--border-red-color)
+.date-active
+  color: var(--default-white),
+  background-color: var(--btn-blue-color)
+.date-active:hover
+  opacity: 0.5
+.date-other
+  color: var(--font-grey-color)
+.date-month
+  color: var(--font-black-color)
+.date-other:hover, .date-month:hover, .date-today:hover
+  background-color: var(--border-light-grey-color)
+.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)
+  grid-template-rows: repeat(6, 35px)
+  row-gap: 4px
+  justify-content: center
+  align-items: center
 </style>
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index 0f0b16a..7c19fad 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")
+          base-calendar(v-model="date", range, :range-count="5")
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
@@ -90,7 +90,10 @@ export default {
           value: "expanded",
         },
       ],
-      date: moment().clone().add(1, "month").add(15, "day"),
+      date: {
+        from: moment().clone().add(1, "month"),
+        to: moment().clone().add(2, "month"),
+      },
       calendarVisibility: false,
     };
   },

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 2/2] =?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",