Merge branch 'ASTRA-114' into 'master'

Сделала BaseCalendar

See merge request andrusyakka/urban-couscous!436

src/components/base/Calendar/BaseCalendar.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
   .calendar-wrapper.bg-white
     component(
-      v-bind:is="currentForm",
+      v-bind:is="currentForm?.component",
       v-model:internal-date="internalDate",
-      v-model:external-date="externalDate",
+      v-model:external-date="externalValue",
       :range="range",
       :start-year="startYear",
       :end-year="endYear",
       :range-count="rangeCount",
-      :next-form="nextForm",
+      :change-form="changeForm",
-      :previous-form="previousForm",
       :internal-month="internalMonth",
     )
     .footer.flex.justify-end.items-center.px-5.py-3
@@ -26,10 +25,10 @@
         color="primary",
         flat,
         no-caps,
-        label="Сохранить",
+        :label="currentForm?.saveBtnLabel",
         size="14px",
         padding="10px 12px",
-        @click="saveChanges"
+        @click="currentForm?.saveFunction"
       )
 </template>
 
@@ -57,17 +56,29 @@ export default {
       type: Function,
       default: () => {},
     },
-    cancel: {
-      type: Function,
-      default: () => {},
-    },
   },
   data() {
     return {
       internalDate: moment(),
-      externalDate: null,
+      currentForm: null,
-      currentFormIndex: 0,
+      forms: [
-      forms: ["CalendarDates", "CalendarYears", "CalendarMonths"],
+        {
+          component: "CalendarDates",
+          saveBtnLabel: "Сохранить",
+          saveFunction: this.saveExternalChanges,
+        },
+        {
+          component: "CalendarYears",
+          saveBtnLabel: "Применить",
+          saveFunction: this.applyInternalChanges,
+        },
+        {
+          component: "CalendarMonths",
+          saveBtnLabel: "Применить",
+          saveFunction: this.applyInternalChanges,
+        },
+      ],
+      externalValue: null,
     };
   },
   computed: {
@@ -79,9 +90,6 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
-    currentForm() {
-      return this.forms[this.currentFormIndex];
-    },
     internalMonth() {
       let formattedMonth = this.internalDate.format("MMMM");
       return `${
@@ -90,38 +98,48 @@ export default {
     },
   },
   methods: {
-    nextForm() {
+    changeForm(form) {
-      this.currentFormIndex += 1;
+      this.currentForm = this.forms.find((elem) => elem.component === form);
     },
-    previousForm() {
+    changeDate() {
-      this.currentFormIndex -= 1;
-    },
-    cancelChanges() {
-      this.cancel();
-    },
-    saveChanges() {
-      this.value = this.externalDate?.from
-        ? {
-            from: this.externalDate?.from?.clone(),
-            to: this.externalDate?.to?.clone(),
-          }
-        : this.externalDate.clone();
-      this.save();
-    },
-  },
-  mounted() {
-    if (this.value) {
       if (this.range) {
         this.internalDate = this.value?.from?.clone();
-        this.externalDate = {
+        this.externalValue = {
           from: this.value?.from?.clone(),
           to: this.value?.to?.clone(),
         };
       } else {
         this.internalDate = this.value?.clone();
-        this.externalDate = this.value?.clone();
+        this.externalValue = this.value?.clone();
       }
-    }
+    },
+    cancelChanges() {
+      this.changeDate();
+      this.changeForm("CalendarDates");
+    },
+    saveExternalChanges() {
+      if (this.range)
+        this.value = {
+          from: this.externalValue?.from?.clone(),
+          to: this.externalValue?.to?.clone(),
+        };
+      else this.value = this.externalValue?.clone();
+      this.save();
+    },
+    applyInternalChanges() {
+      switch (this.currentForm.component) {
+        case "CalendarYears":
+          this.changeForm("CalendarMonths");
+          break;
+        case "CalendarMonths":
+          this.changeForm("CalendarDates");
+          break;
+      }
+    },
+  },
+  mounted() {
+    if (this.value) this.changeDate();
+    this.currentForm = this.forms[0];
   },
 };
 </script>

src/components/base/Calendar/CalendarDates.vue

@@ -8,7 +8,7 @@
         :label="internalMonth"
         no-caps,
         padding="10px 12px"
-        @click="nextForm"
+        @click="switchForm"
       )
       .arrows.flex.items-center.justify-center.gap-x-6
         q-btn(
@@ -53,7 +53,7 @@ export default {
     range: Boolean,
     rangeCount: Number,
     internalMonth: String,
-    nextForm: {
+    changeForm: {
       type: Function,
       default: () => {},
     },
@@ -97,6 +97,9 @@ export default {
     },
   },
   methods: {
+    switchForm() {
+      this.changeForm("CalendarYears");
+    },
     previousMonth() {
       this.internalValue = this.internalValue.clone().subtract(1, "month");
     },

src/components/base/Calendar/CalendarMonths.vue

@@ -1,17 +1,82 @@
 <template lang="pug">
-  
+  .w-full
+    .header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-center
+      q-btn(
+        size="14px"
+        color="dark"
+        flat,
+        :label="internalMonth",
+        no-caps,
+        padding="10px 12px"
+      )
+    .body.py-5.px-6
+      .cell.flex.items-center.justify-center.cursor-pointer.rounded.text-sm(
+        v-for="month in internalMonthsList",
+        :key="month",
+        :id="month",
+        :class="calculateActiveCell(month)",
+        @click="selectMonth(month)",
+      ) {{ month[0].toUpperCase() + month.slice(1) }}
 </template>
 
 <script>
+import * as moment from "moment/moment";
 export default {
   name: "CalendarMonths",
-  props: {},
+  props: {
-  data() {
+    internalDate: Object,
-    return {};
+    internalMonth: String,
+  },
+  data() {
+    return {
+      internalMonthsList: null,
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.internalDate;
+      },
+      set(value) {
+        this.$emit("update:internalDate", value);
+      },
+    },
+  },
+  methods: {
+    calculateActiveCell(month) {
+      return {
+        "active-cell": this.internalValue.format("MMMM") === month,
+      };
+    },
+    selectMonth(month) {
+      this.internalValue = this.internalValue.clone().month(month);
+    },
+  },
+  mounted() {
+    this.internalMonthsList = [...Array(12)].map((_, index) =>
+      moment().month(index).format("MMMM")
+    );
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+.header
+  border-bottom: 1px solid var(--border-light-grey-color)
+.body
+  height: 298px
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  row-gap: 4px
+  column-gap: 4px
+.cell
+  background-color:  var(--bg-light-grey)
+  color: var(--font-dark-blue-color)
+  &:hover
+    background-color: var(--border-light-grey-color)
+.active-cell
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+  &:hover
+    background-color: var(--btn-blue-color)
+</style>

src/components/base/Calendar/CalendarYears.vue

@@ -14,7 +14,7 @@
         v-for="year in internalYearsList",
         :key="year",
         :id="year",
-        :class="activeCellClass(year), cellsClass",
+        :class="calculateActiveCell(year), cellsClass",
         @click="selectYear(year)",
       ) {{ year }}
 </template>
@@ -28,11 +28,6 @@ export default {
     endYear: Number,
     internalMonth: String,
   },
-  data() {
-    return {
-      previousDate: null,
-    };
-  },
   computed: {
     internalValue: {
       get() {
@@ -61,7 +56,7 @@ export default {
     },
   },
   methods: {
-    activeCellClass(year) {
+    calculateActiveCell(year) {
       return {
         "active-cell": parseInt(this.internalValue.format("YYYY"), 10) === year,
       };
@@ -69,9 +64,14 @@ export default {
     selectYear(year) {
       this.internalValue = this.internalValue.clone().year(year);
     },
+    scrollToCurrentYear() {
+      document
+        .getElementById(parseInt(this.internalValue.format("YYYY"), 10))
+        .scrollIntoView({ block: "center", behavior: "smooth" });
+    },
   },
   mounted() {
-    this.previousDate = this.internalValue.clone();
+    this.scrollToCurrentYear();
   },
 };
 </script>

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,11 @@
               :offset="[122, 14]"
             )
               base-calendar(
-                v-model="date",
+                v-model="dates",
                 range,
                 :range-count="7",
-                :save="saveNewDate",
+                :save="saveDatesChange",
-                :cancel="cancelDateChanges",
+                :start-year="2000"
               )
       q-btn(
         color="secondary",
@@ -88,7 +88,7 @@ export default {
           value: "collapsed",
         },
       ],
-      date: {
+      dates: {
         from: null,
         to: null,
       },
@@ -97,9 +97,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,25 +107,28 @@ export default {
   },
   methods: {
     previousWeek() {
-      this.date.from = this.date.from.clone().subtract(1, "week");
+      this.dates.from = this.dates.from.clone().subtract(1, "week");
-      this.date.to = this.date.to.clone().subtract(1, "week");
+      this.dates.to = this.dates.to.clone().subtract(1, "week");
     },
     nextWeek() {
-      this.date.from = this.date.from.clone().add(1, "week");
+      this.dates.from = this.dates.from.clone().add(1, "week");
-      this.date.to = this.date.to.clone().add(1, "week");
+      this.dates.to = this.dates.to.clone().add(1, "week");
     },
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
     }),
-    saveNewDate() {
+    saveDatesChange() {
       this.calendarVisibility = false;
     },
-    cancelDateChanges() {
+    initializeDates() {
-      this.calendarVisibility = false;
+      this.dates = {
+        from: this.selectedDates.from.clone(),
+        to: this.selectedDates.to.clone(),
+      };
     },
   },
   watch: {
-    date: {
+    dates: {
       deep: true,
       handler(val) {
         if (
@@ -137,10 +140,7 @@ export default {
     },
   },
   mounted() {
-    this.date = {
+    this.initializeDates();
-      from: this.selectedDates.from.clone(),
-      to: this.selectedDates.to.clone(),
-    };
   },
 };
 </script>