Merge branch 'ASTRA-98' into 'master'

WIP Добавила выделение диапазона

See merge request andrusyakka/urban-couscous!397

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

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,18 @@
           round,
           @click="nextMonth"
         )
-    .week.py-4.px-18px.grid.grid-rows-1.grid-cols-7.gap-x-1
+    .week.py-4.px-5.grid.grid-rows-1.grid-cols-7
-      .flex.items-center.justify-center.week-item.text-xsx.py-1.px-2(v-for="day of week", :key="day") {{ day }}
+      .flex.items-center.justify-center.week-item.text-xsx.py-1(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
+    .body.pb-5.px-5
-      .flex.items-center.justify-center.h-8.w-8.rounded-full(
+      .flex.items-center.justify-center.cursor-pointer.w-full.h-full(
-        v-for="date of dates",
+        v-for="date of internalDatesList",
-        :style="calculateCurrentMonth(date)",
+        @click="selectDate(date)",
         :key="date",
-      ) {{ date.format("DD") }}
+        :style="calculateRangeStyle(date)"
+      )
+        .flex.items-center.justify-center.rounded-full.w-full.h-full(
+          :class="calculateCellClasses(date)",
+        ) {{ date.format("D") }}
 </template>
 
 <script>
@@ -39,11 +43,14 @@ export default {
   props: {
     modelValue: Object,
     range: Boolean,
+    rangeCount: Number,
   },
   data() {
     return {
       week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
-      currentDate: moment(),
+      internalDate: moment(),
+      selectedDate: null,
+      datesRange: [],
     };
   },
   computed: {
@@ -58,50 +65,129 @@ export default {
     ...mapState({
       today: (state) => state.calendar.currentDate,
     }),
-    month() {
+    internalMonth() {
-      let formattedMonth = this.currentDate.format("MMMM");
+      let formattedMonth = this.internalDate.format("MMMM");
       return `${
         formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
-      } ${this.currentDate.format("YYYY")}`;
+      } ${this.internalDate.format("YYYY")}`;
     },
-    startDate() {
+    internalStartDate() {
-      return this.currentDate
+      return this.internalDate
         .clone()
         .startOf("month")
         .startOf("week")
         .subtract(1, "day");
     },
-    dates() {
+    internalDatesList() {
-      return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
+      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) {
+    calculateCellClasses(date) {
+      if (date.isSame(this.today, "day"))
+        return {
+          "date-today": true,
+        };
+      if (this.defineDateRange(date))
+        return {
+          "date-active": true,
+        };
       if (
-        date.isSame(this.today, "day") ||
+        this.calculateRangeStyle(date) &&
-        date.isSame(this.currentDate, "day")
+        Object.keys(this.calculateRangeStyle(date) === 1)
       )
         return {
-          color: "var(--default-white)",
+          "text-white": true,
-          "background-color": "var(--btn-blue-color)",
         };
-      if (date.isSame(this.currentDate, "month"))
+      if (date.isSame(this.internalDate, "month"))
         return {
-          color: "var(--font-black-color)",
+          "date-month": true,
         };
       return {
-        color: "var(--font-grey-color)",
+        "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;
+        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"))
+      );
+    },
+    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();
+      } else this.internalDate = this.value?.clone();
+    }
   },
 };
 </script>
@@ -115,4 +201,25 @@ 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)
+.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>

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)
       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,
     };
   },