chore: implements year selector

src/components/Calendar/components/DateSelectorComposer/components/MonthSelector/index.js

@@ -21,7 +21,7 @@ export default function MonthSelector(monthArray) {
   this.$currentMonth = this.selected.get('current-month');
   this.$nextMonths = this.selected.get('next-months');
 
-  for (let i = 0; i < monthArray.length; i += 1) {
+  for (let i = 0; i < this.monthArray.length; i += 1) {
     if (i < 3) {
       const selectorItem = new SelectorItem(this.monthArray[i]);
       selectorItem.mount(this.$previousMonths);

src/components/Calendar/components/DateSelectorComposer/components/SelectorModal/index.js

@@ -1,8 +1,10 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
+import { MONTHS } from '../../../../utils/months';
 import ModalItem from './components/ModalItem';
+import { scrollModal } from './utils/scrollModal';
 
-const events = [];
+const events = ['month:change', 'year:change'];
 
 const html = `
     <ul class="selector-modal" data-select="selector-modal"></ul>
@@ -13,16 +15,58 @@ export default function SelectorModal(dateArray) {
 
   this.dateArray = dateArray.slice(1, -1);
   this.selectorModal = this.selected.get('selector-modal');
+  this.isYear = typeof dateArray[0] === 'number';
 
   for (let i = 0; i < this.dateArray.length; i += 1) {
     const modalItem = new ModalItem(this.dateArray[i]);
     modalItem.mount(this.selectorModal);
     if (i === 2) modalItem.active();
   }
+
+  this.items = this.selectorModal.children;
+
+  scrollModal(this);
 }
 
 SelectorModal.prototype = Object.assign(
   SelectorModal.prototype,
   Component.prototype,
-  {},
+  {
+    changeMonth(month) {
+      for (let i = 0; i < this.dateArray.length; i += 1) {
+        const index = (month - (2 - i) + 12) % 12;
+        this.dateArray[i] = MONTHS[index];
+      }
+
+      this.dateArray.forEach((item, index) => {
+        this.items[index].innerText = item;
+      });
+
+      this.items[2].scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'center',
+      });
+
+      this.emit('month:change', month);
+    },
+
+    changeYear(year) {
+      for (let i = 0; i < this.dateArray.length; i += 1) {
+        this.dateArray[i] = year - (2 - i);
+      }
+
+      this.dateArray.forEach((item, index) => {
+        this.items[index].innerText = item;
+      });
+
+      this.items[2].scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'center',
+      });
+
+      this.emit('year:change', year);
+    },
+  },
 );

src/components/Calendar/components/DateSelectorComposer/components/SelectorModal/utils/scrollModal.js

@@ -0,0 +1,24 @@
+import { MONTHS } from '../../../../../utils/months';
+
+export function scrollModal(selector) {
+  const { selectorModal } = selector;
+
+  const handleScroll = (event) => {
+    event.preventDefault();
+    const isScrollNext = event.deltaY > 0;
+
+    if (selector.isYear) {
+      const nextYear = +selector.items[3].innerText;
+      const prevYear = +selector.items[1].innerText;
+      const newYear = isScrollNext ? nextYear : prevYear;
+      selector.changeYear(newYear);
+    } else {
+      const nextMonth = MONTHS.indexOf(selector.items[3].innerText);
+      const prevMonth = MONTHS.indexOf(selector.items[1].innerText);
+      const newMonth = isScrollNext ? nextMonth : prevMonth;
+      selector.changeMonth(newMonth);
+    }
+  };
+
+  selectorModal.addEventListener('wheel', handleScroll);
+}

src/components/Calendar/components/DateSelectorComposer/components/YearSelector/index.js

@@ -1,27 +1,47 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
+import SelectorItem from '../SelectorItem';
 
-const events = [];
+const events = ['selector:click'];
 
 const html = `
-    <div class="year-selector" data-select="year-selector"></div>
+     <div class="year-selector" data-select="year-selector">
+        <ul class="year-selector__previous-years" data-select="previous-years"></ul>
+        <span class="year-selector__current-year" data-select="current-year"></span>
+        <ul class="year-selector__next-years" data-select="next-years"></ul>
+    </div>
 `;
 
-export default function YearSelector(year) {
+export default function YearSelector(yearArray) {
   Component.call(this, { html, events });
 
-  this.year = year;
-  this.$yearSelector = this.selected.get('year-selector');
-  this.setYear(year);
+  this.yearArray = yearArray;
+  this.$monthSelector = this.selected.get('year-selector');
+  this.$previousYears = this.selected.get('previous-years');
+  this.$currentYear = this.selected.get('current-year');
+  this.$nextYears = this.selected.get('next-years');
+
+  for (let i = 0; i < this.yearArray.length; i += 1) {
+    if (i < 3) {
+      const selectorItem = new SelectorItem(this.yearArray[i]);
+      selectorItem.mount(this.$previousYears);
+    }
+    if (i === 3) {
+      this.$currentYear.innerText = this.yearArray[i];
+    }
+    if (i > 3) {
+      const selectorItem = new SelectorItem(this.yearArray[i]);
+      selectorItem.mount(this.$nextYears);
+    }
+  }
+
+  this.$currentYear.addEventListener('click', () =>
+    this.emit('selector:click'),
+  );
 }
 
 YearSelector.prototype = Object.assign(
   YearSelector.prototype,
   Component.prototype,
-  {
-    setYear(year) {
-      this.year = year;
-      this.$yearSelector.innerText = this.year;
-    },
-  },
+  {},
 );

src/components/Calendar/components/DateSelectorComposer/components/YearSelector/index.scss

@@ -0,0 +1,71 @@
+@use '~styles/base.scss';
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.year-selector {
+  width: 100%;
+
+  display: flex;
+  gap: 2.4rem;
+
+  align-items: center;
+  justify-content: center;
+
+  margin-bottom: 2.4rem;
+
+  padding-bottom: 2.4rem;
+
+  border-bottom: 0.1rem solid colors.$gray150;
+
+  &__previous-years,
+  &__next-years {
+    display: flex;
+    gap: 1.6rem;
+
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__current-year {
+    align-self: center;
+
+    font-family: fonts.$primaryFont;
+    color: colors.$primary200;
+    font-size: fonts.$lg;
+    font-weight: fonts.$semiBold;
+
+    padding: 0.6rem 1.2rem;
+    border: 0.1rem solid colors.$blue100;
+
+    background-color: colors.$blue150;
+    border-radius: 1.4rem;
+  }
+}
+
+@include breakpoints.from667 {
+  .year-selector {
+    width: max-content;
+
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: 0;
+
+    &__previous-years,
+    &__next-years {
+      display: none;
+    }
+
+    &__current-year {
+      color: colors.$gray800;
+      font-weight: fonts.$regular;
+
+      padding: 0;
+      border: 0;
+
+      background-color: colors.$secondary100;
+
+      cursor: pointer;
+    }
+  }
+}

src/components/Calendar/components/DateSelectorComposer/index.js

@@ -1,13 +1,20 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
 import MonthSelector from './components/MonthSelector';
-import { monthArrayGenerator } from './utils/monthArray';
 import { ModalController } from './utils/ModalController';
+import {
+  yearArrayGenerator,
+  monthArrayGenerator,
+} from './utils/arraysGenerators';
+import YearSelector from './components/YearSelector';
 
-const events = [];
+const events = ['month:change'];
 
 const html = `
-    <div class="date-selector" data-select="date-selector"></div>
+    <div class="date-selector" data-select="date-selector">
+      <div class="date-selector__year" data-select="year-selector"></div>
+      <div class="date-selector__month" data-select="month-selector"></div>
+    </div>
 `;
 
 export default function DateSelectorComposer(month, year) {
@@ -16,14 +23,34 @@ export default function DateSelectorComposer(month, year) {
   this.month = month;
   this.year = year;
   this.$dateSelector = this.selected.get('date-selector');
+  this.$monthSelector = this.selected.get('month-selector');
+  this.$yearSelector = this.selected.get('year-selector');
   this.modalControl = new ModalController(this);
 
-  this.monthArray = monthArrayGenerator(month - 1);
-  this.monthSelector = new MonthSelector(this.monthArray);
-  this.monthSelector.mount(this.$dateSelector);
-  this.monthSelector.listen('selector:click', () =>
-    this.modalControl.Open(this.monthArray),
-  );
+  this.mountYearSelector = () => {
+    if (this.yearSelector) this.yearSelector.unmount();
+
+    this.yearArray = yearArrayGenerator(this.year);
+    this.yearSelector = new YearSelector(this.yearArray);
+    this.yearSelector.mount(this.$yearSelector);
+    this.yearSelector.listen('selector:click', () =>
+      this.modalControl.Open(this.yearArray),
+    );
+  };
+
+  this.mountMonthSelector = () => {
+    if (this.monthSelector) this.monthSelector.unmount();
+
+    this.monthArray = monthArrayGenerator(this.month);
+    this.monthSelector = new MonthSelector(this.monthArray);
+    this.monthSelector.mount(this.$monthSelector);
+    this.monthSelector.listen('selector:click', () =>
+      this.modalControl.Open(this.monthArray),
+    );
+  };
+
+  this.mountYearSelector();
+  this.mountMonthSelector();
 
   window.addEventListener('click', (event) =>
     this.modalControl.CloseOnClickOutside(event),
@@ -33,5 +60,17 @@ export default function DateSelectorComposer(month, year) {
 DateSelectorComposer.prototype = Object.assign(
   DateSelectorComposer.prototype,
   Component.prototype,
-  {},
+  {
+    setMonth(month) {
+      this.month = month;
+      this.mountMonthSelector();
+      this.emit('month:change', month);
+    },
+
+    setYear(year) {
+      this.year = year;
+      this.mountYearSelector();
+      this.emit('year:change', year);
+    },
+  },
 );

src/components/Calendar/components/DateSelectorComposer/index.scss

@@ -4,7 +4,27 @@
 @use '~styles/breakpoints.scss' as breakpoints;
 
 .date-selector {
-  width: 300px;
+  width: 100%;
+}
+
+@include breakpoints.from667 {
+  .date-selector {
+    width: 10%;
+    min-width: 23.1rem;
+
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 1rem;
+
+    position: relative;
+
+    &::before {
+      width: 1.6rem;
+      height: 2.3rem;
+
+      background-image: url('../../images/arrows.svg');
 
-  position: relative;
+      content: '';
+    }
+  }
 }

src/components/Calendar/components/DateSelectorComposer/utils/ModalController.js

@@ -10,6 +10,8 @@ export class ModalController {
 
     this.modal = new SelectorModal(dateArray);
     this.modal.mount(this.selector.$dateSelector);
+    this.modal.listen('month:change', (month) => this.selector.setMonth(month));
+    this.modal.listen('year:change', (year) => this.selector.setYear(year));
   }
 
   CloseOnClickOutside(event) {

src/components/Calendar/components/DateSelectorComposer/utils/monthArray.js → src/components/Calendar/components/DateSelectorComposer/utils/arraysGenerators.js

@@ -8,3 +8,11 @@ export function monthArrayGenerator(month) {
   }
   return monthArray;
 }
+
+export function yearArrayGenerator(year) {
+  const yearArray = new Array(7);
+  for (let i = 0; i < yearArray.length; i += 1) {
+    yearArray[i] = year - (3 - i);
+  }
+  return yearArray;
+}