From 61d1a576417ed91819d09f748ebfdfcde2b4f490 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 20 Jun 2023 16:22:03 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=80=D0=B0=D1=81=D1=87=D0=B5=D1=82=20=D0=BB=D0=B5?=
 =?UTF-8?q?=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/Calendar/BaseCalendar.vue |  24 +++-
 .../base/Calendar/CalendarDates.vue           |   7 +-
 .../base/Calendar/CalendarMonths.vue          |  31 +-----
 .../base/Calendar/CalendarYears.vue           | 104 ++++++++++++++++--
 .../newCalendar/components/CalendarHeader.vue |   2 +-
 5 files changed, 122 insertions(+), 46 deletions(-)

diff --git a/src/components/base/Calendar/BaseCalendar.vue b/src/components/base/Calendar/BaseCalendar.vue
index 38a4e1d..43da3ce 100644
--- a/src/components/base/Calendar/BaseCalendar.vue
+++ b/src/components/base/Calendar/BaseCalendar.vue
@@ -5,9 +5,12 @@
       v-model:internal-date="internalDate",
       v-model:external-date="externalDate",
       :range="range",
+      :start-year="startYear",
+      :end-year="endYear",
       :range-count="rangeCount",
       :next-form="nextForm",
-      :previous-form="previousForm"
+      :previous-form="previousForm",
+      :internal-month="internalMonth",
     )
     .footer.flex.justify-end.items-center.px-5.py-3
       q-btn(
@@ -33,14 +36,23 @@
 <script>
 import * as moment from "moment/moment";
 import CalendarDates from "@/components/base/Calendar/CalendarDates.vue";
+import CalendarYears from "@/components/base/Calendar/CalendarYears.vue";
 import CalendarMonths from "@/components/base/Calendar/CalendarMonths.vue";
 export default {
   name: "BaseCalendar",
-  components: { CalendarDates, CalendarMonths },
+  components: { CalendarDates, CalendarMonths, CalendarYears },
   props: {
     modelValue: Object,
     range: Boolean,
     rangeCount: Number,
+    startYear: {
+      type: Number,
+      default: 1970,
+    },
+    endYear: {
+      type: Number,
+      default: parseInt(moment().clone().add(1, "year").format("YYYY"), 10),
+    },
     save: {
       type: Function,
       default: () => {},
@@ -55,7 +67,7 @@ export default {
       internalDate: moment(),
       externalDate: null,
       currentFormIndex: 0,
-      forms: ["CalendarDates", "CalendarMonths"],
+      forms: ["CalendarDates", "CalendarYears", "CalendarMonths"],
     };
   },
   computed: {
@@ -70,6 +82,12 @@ export default {
     currentForm() {
       return this.forms[this.currentFormIndex];
     },
+    internalMonth() {
+      let formattedMonth = this.internalDate.format("MMMM");
+      return `${
+        formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
+      } ${this.internalDate.format("YYYY")}`;
+    },
   },
   methods: {
     nextForm() {
diff --git a/src/components/base/Calendar/CalendarDates.vue b/src/components/base/Calendar/CalendarDates.vue
index c883b7a..2262142 100644
--- a/src/components/base/Calendar/CalendarDates.vue
+++ b/src/components/base/Calendar/CalendarDates.vue
@@ -52,6 +52,7 @@ export default {
     externalDate: Object,
     range: Boolean,
     rangeCount: Number,
+    internalMonth: String,
     nextForm: {
       type: Function,
       default: () => {},
@@ -82,12 +83,6 @@ export default {
         this.$emit("update:externalDate", value);
       },
     },
-    internalMonth() {
-      let formattedMonth = this.internalValue.format("MMMM");
-      return `${
-        formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
-      } ${this.internalValue.format("YYYY")}`;
-    },
     internalStartDate() {
       return this.internalValue
         .clone()
diff --git a/src/components/base/Calendar/CalendarMonths.vue b/src/components/base/Calendar/CalendarMonths.vue
index b632e86..3a843c8 100644
--- a/src/components/base/Calendar/CalendarMonths.vue
+++ b/src/components/base/Calendar/CalendarMonths.vue
@@ -1,16 +1,5 @@
 <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>
@@ -25,20 +14,4 @@ export default {
 };
 </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>
+<style scoped lang="sass"></style>
diff --git a/src/components/base/Calendar/CalendarYears.vue b/src/components/base/Calendar/CalendarYears.vue
index 5a6afae..d2fea67 100644
--- a/src/components/base/Calendar/CalendarYears.vue
+++ b/src/components/base/Calendar/CalendarYears.vue
@@ -1,17 +1,107 @@
 <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.py-3.rounded(
+        v-for="year in internalYearsList",
+        :key="year",
+        :id="year",
+        :class="activeCellClass(year), cellsClass",
+        @click="selectYear(year)",
+      ) {{ year }}
 </template>
 
 <script>
 export default {
   name: "CalendarYears",
-  props: {},
-  data() {
-    return {};
+  props: {
+    internalDate: Object,
+    startYear: Number,
+    endYear: Number,
+    internalMonth: String,
+  },
+  data() {
+    return {
+      previousDate: null,
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.internalDate;
+      },
+      set(value) {
+        this.$emit("update:internalDate", value);
+      },
+    },
+    cellsClass() {
+      let remains = this.internalYearsList.length % 3;
+      if (remains === 2)
+        return {
+          "cell-col-2": true,
+        };
+      if (remains === 1)
+        return {
+          "cell-col-3": true,
+        };
+      return {};
+    },
+    internalYearsList() {
+      let diff = this.endYear - this.startYear,
+        start = this.startYear;
+      return [...Array(diff + 1)].map(() => start++);
+    },
+  },
+  methods: {
+    activeCellClass(year) {
+      return {
+        "active-cell": parseInt(this.internalValue.format("YYYY"), 10) === year,
+      };
+    },
+    selectYear(year) {
+      this.internalValue = this.internalValue.clone().year(year);
+    },
+  },
+  mounted() {
+    this.previousDate = this.internalValue.clone();
   },
-  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
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
+.cell
+  background-color:  var(--bg-light-grey)
+  color: var(--font-dark-blue-color)
+  &:hover
+    background-color: var(--border-light-grey-color)
+.cell-col-2:first-child
+  grid-column: 2
+.cell-col-2:nth-child(2)
+  grid-column: 3
+.cell-col-3:first-child
+  grid-column: 3
+.active-cell
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+  &:hover
+    background-color: var(--btn-blue-color)
+</style>
diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue
index b58a25a..d81579d 100644
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -46,7 +46,7 @@
                 range,
                 :range-count="7",
                 :save="saveNewDate",
-                :cancel="cancelDateChanges"
+                :cancel="cancelDateChanges",
               )
       q-btn(
         color="secondary",