WIP Начала делать выборку года

src/components/base/Calendar/BaseCalendar.vue

@@ -0,0 +1,116 @@
+<template lang="pug">
+  .calendar-wrapper.bg-white
+    component(
+      v-bind:is="currentForm",
+      v-model:internal-date="internalDate",
+      v-model:external-date="externalDate",
+      :range="range",
+      :range-count="rangeCount",
+      :next-form="nextForm",
+      :previous-form="previousForm"
+    )
+    .footer.flex.justify-end.items-center.px-5.py-3
+      q-btn(
+        color="dark"
+        flat,
+        no-caps,
+        label="Отменить",
+        size="14px",
+        padding="10px 12px",
+        @click="cancelChanges"
+      )
+      q-btn(
+        color="primary",
+        flat,
+        no-caps,
+        label="Сохранить",
+        size="14px",
+        padding="10px 12px",
+        @click="saveChanges"
+      )
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import CalendarDates from "@/components/base/Calendar/CalendarDates.vue";
+import CalendarMonths from "@/components/base/Calendar/CalendarMonths.vue";
+export default {
+  name: "BaseCalendar",
+  components: { CalendarDates, CalendarMonths },
+  props: {
+    modelValue: Object,
+    range: Boolean,
+    rangeCount: Number,
+    save: {
+      type: Function,
+      default: () => {},
+    },
+    cancel: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      internalDate: moment(),
+      externalDate: null,
+      currentFormIndex: 0,
+      forms: ["CalendarDates", "CalendarMonths"],
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+    currentForm() {
+      return this.forms[this.currentFormIndex];
+    },
+  },
+  methods: {
+    nextForm() {
+      this.currentFormIndex += 1;
+    },
+    previousForm() {
+      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 = {
+          from: this.value?.from?.clone(),
+          to: this.value?.to?.clone(),
+        };
+      } else {
+        this.internalDate = this.value?.clone();
+        this.externalDate = this.value?.clone();
+      }
+    }
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.calendar-wrapper
+  width: 286px
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
+</style>

src/components/base/Calendar/CalendarDates.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-wrapper.bg-white
+  .w-full
     .header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-between
       q-btn(
         size="14px"
@@ -8,6 +8,7 @@
         :label="internalMonth"
         no-caps,
         padding="10px 12px"
+        @click="nextForm"
       )
       .arrows.flex.items-center.justify-center.gap-x-6
         q-btn(
@@ -40,41 +41,18 @@
         .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>
-import * as moment from "moment/moment";
 import { mapState } from "vuex";
 export default {
-  name: "BaseCalendar",
+  name: "CalendarDates",
   props: {
-    modelValue: Object,
+    internalDate: Object,
+    externalDate: Object,
     range: Boolean,
     rangeCount: Number,
-    save: {
+    nextForm: {
-      type: Function,
-      default: () => {},
-    },
-    cancel: {
       type: Function,
       default: () => {},
     },
@@ -82,31 +60,36 @@ export default {
   data() {
     return {
       week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
-      internalDate: moment(),
-      selectedDate: null,
-      datesRange: [],
     };
   },
   computed: {
-    value: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
     ...mapState({
       today: (state) => state.calendar.currentDate,
     }),
+    internalValue: {
+      get() {
+        return this.internalDate;
+      },
+      set(value) {
+        this.$emit("update:internalDate", value);
+      },
+    },
+    externalValue: {
+      get() {
+        return this.externalDate;
+      },
+      set(value) {
+        this.$emit("update:externalDate", value);
+      },
+    },
     internalMonth() {
-      let formattedMonth = this.internalDate.format("MMMM");
+      let formattedMonth = this.internalValue.format("MMMM");
       return `${
         formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
-      } ${this.internalDate.format("YYYY")}`;
+      } ${this.internalValue.format("YYYY")}`;
     },
     internalStartDate() {
-      return this.internalDate
+      return this.internalValue
         .clone()
         .startOf("month")
         .startOf("week")
@@ -120,10 +103,10 @@ export default {
   },
   methods: {
     previousMonth() {
-      this.internalDate = this.internalDate.clone().subtract(1, "month");
+      this.internalValue = this.internalValue.clone().subtract(1, "month");
     },
     nextMonth() {
-      this.internalDate = this.internalDate.clone().add(1, "month");
+      this.internalValue = this.internalValue.clone().add(1, "month");
     },
     calculateCellClasses(date) {
       if (this.defineDateRange(date))
@@ -153,23 +136,28 @@ export default {
     calculateRangeStyle(date) {
       if (
         this.range &&
-        this.value?.from &&
+        this.externalValue?.from &&
-        this.value?.to &&
+        this.externalValue?.to &&
-        !this.value?.from.isSame(this.value?.to?.format("YYYY-MM-DD"))
+        !this.externalValue?.from.isSame(
+          this.externalValue?.to?.format("YYYY-MM-DD")
+        )
       ) {
-        if (date.isSame(this.value?.from?.format("YYYY-MM-DD")))
+        if (date.isSame(this.externalValue?.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")))
+        if (date.isSame(this.externalValue?.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))
+        if (
+          date.isAfter(this.externalValue?.from) &&
+          date.isBefore(this.externalValue?.to)
+        )
           return {
             "background-color": "var(--btn-blue-color-5)",
           };
@@ -177,50 +165,43 @@ export default {
     },
     selectDate(date) {
       if (!this.range) {
-        this.value = date;
+        this.externalValue = date;
         return;
       }
       if (this.rangeCount) {
-        this.value.from = date;
+        this.externalValue.from = date;
-        this.value.to = this.value.from.clone().add(this.rangeCount - 1, "day");
+        this.externalValue.to = this.externalValue.from
+          .clone()
+          .add(this.rangeCount - 1, "day");
         return;
       }
-      if (this.value?.to) {
+      if (this.externalValue?.to) {
-        this.value.from = date;
+        this.externalValue.from = date;
-        this.value.to = null;
+        this.externalValue.to = null;
         return;
       }
-      if (date.isAfter(this.value?.from)) {
+      if (date.isAfter(this.externalValue?.from)) {
-        this.value.to = date;
+        this.externalValue.to = date;
         return;
       }
-      this.value.to = this.value.from;
+      this.externalValue.to = this.externalValue.from;
-      this.value.from = date;
+      this.externalValue.from = date;
       return;
     },
     defineDateRange(date) {
       if (!this.range) {
-        return date.isSame(this.value?.format("YYYY-MM-DD"));
+        return date.isSame(this.externalValue?.format("YYYY-MM-DD"));
       }
       return (
-        date.isSame(this.value?.from?.format("YYYY-MM-DD")) ||
+        date.isSame(this.externalValue?.from?.format("YYYY-MM-DD")) ||
-        date.isSame(this.value?.to?.format("YYYY-MM-DD"))
+        date.isSame(this.externalValue?.to?.format("YYYY-MM-DD"))
       );
     },
   },
-  mounted() {
-    if (this.value) {
-      if (this.range) {
-        this.internalDate = this.value?.from?.clone();
-      } else this.internalDate = this.value?.clone();
-    }
-  },
 };
 </script>
 
 <style scoped lang="sass">
-.calendar-wrapper
-  width: 286px
 .header
   border-bottom: 1px solid var(--border-light-grey-color)
 .week-item
@@ -250,10 +231,6 @@ export default {
   grid-template-columns: repeat(7, 35px)
   grid-template-rows: repeat(6, 35px)
   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>

src/components/base/Calendar/CalendarMonths.vue

@@ -0,0 +1,44 @@
+<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="Июнь 2023"
+        no-caps,
+        padding="10px 12px"
+      )
+    .body.py-5.px-6
+      .item.flex.items-center.justify-center.cursor-pointer.py-3.rounded(v-for="num in 31") {{ num }}
+</template>
+
+<script>
+export default {
+  name: "CalendarMonths",
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<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
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
+.item
+  background-color:  var(--bg-light-grey)
+  &:hover
+    background-color: var(--border-light-grey-color)
+</style>

src/components/base/Calendar/CalendarYears.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  
+</template>
+
+<script>
+export default {
+  name: "CalendarYears",
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="sass"></style>

src/pages/newCalendar/components/CalendarHeader.vue

@@ -69,7 +69,7 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-import BaseCalendar from "@/components/base/BaseCalendar";
+import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import { mapState, mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 export default {
@@ -119,23 +119,21 @@ export default {
     }),
     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: {
-    calendarVisibility(val) {
+    date: {
-      if (val === false)
+      deep: true,
-        this.date = {
+      handler(val) {
-          from: this.selectedDates.from.clone(),
+        if (
-          to: this.selectedDates.to.clone(),
+          !this.val?.from.isSame(this.selectedDates?.from) &&
-        };
+          !this.val?.to.isSame(this.selectedDates?.to)
+        )
+          this.changeSelectedDates(val);
+      },
     },
   },
   mounted() {

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -83,8 +83,8 @@ import FormCreateAttachments from "@/pages/clients/components/FormCreateAttachme
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
 import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
-import BaseCalendar from "@/components/base/BaseCalendar.vue";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
+import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 
 export default {
   name: "RecordCreationForm",