feature(uiComponents) ergonode#70 Updated logic and layout for DatePi…

…cker

components/Inputs/Date/DatePicker.vue

@@ -0,0 +1,164 @@
+/*
+ * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+ * See LICENSE for license details.
+ */
+<template>
+    <div class="date-picker">
+        <DatePickerNavigationHeader
+            :header="calendarHeader"
+            @changeCalendarType="onChangeCalendarType"
+            @previousDate="onPreviousDate"
+            @nextDate="onNextDate" />
+        <DatePickerCalendarContent
+            :date="value"
+            :month="month"
+            :current-month="currentMonth"
+            :year="year"
+            :years="years"
+            :current-year="currentYear"
+            :calendar-type="selectedCalendarType"
+            @input="onDateChange"
+            @month="onMonthChange"
+            @year="onYearChange"
+            @calendarType="onCalendarTypeChange"
+            @calendarHeader="onCalendarHeaderChange" />
+    </div>
+</template>
+
+<script>
+import DatePickerNavigationHeader from '~/components/Inputs/Date/DatePickerNavigationHeader';
+import DatePickerCalendarContent from '~/components/Inputs/Date/DatePickerCalendarContent';
+import {
+    getNextYear,
+    getPreviousYear,
+    getNextMonth,
+    getPreviousMonth,
+    getNextYearsRange,
+    getPreviousYearsRange,
+    getYearsWithinRange,
+    getHeaderForCalendarDaysType,
+    getHeaderForCalendarYearsType,
+} from '~/model/calendar/calendar';
+import { CalendarType } from '~/model/calendar/CalendarType';
+
+export default {
+    name: 'DatePicker',
+    components: {
+        DatePickerNavigationHeader,
+        DatePickerCalendarContent,
+    },
+    props: {
+        value: {
+            type: Date,
+            default: null,
+        },
+    },
+    data() {
+        const currentDate = new Date();
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth() + 1;
+
+        return {
+            years: getYearsWithinRange([], year),
+            currentYear: year,
+            currentMonth: month,
+            month,
+            year,
+            selectedCalendarType: CalendarType.DAY,
+            calendarHeader: getHeaderForCalendarDaysType(month, year),
+        };
+    },
+    methods: {
+        onDateChange(value) {
+            this.$emit('input', value);
+        },
+        onMonthChange(month) {
+            this.month = month;
+        },
+        onYearChange(year) {
+            this.year = year;
+        },
+        onCalendarTypeChange(type) {
+            this.selectedCalendarType = type;
+        },
+        onCalendarHeaderChange(header) {
+            this.calendarHeader = header;
+        },
+        onPreviousDate() {
+            switch (this.selectedCalendarType) {
+            case CalendarType.DAY: {
+                const { month, year } = getPreviousMonth(this.month, this.year);
+
+                this.month = month;
+                this.year = year;
+                this.calendarHeader = getHeaderForCalendarDaysType(month, year);
+
+                break;
+            }
+            case CalendarType.MONTH:
+                this.year = getPreviousYear(this.year);
+                this.calendarHeader = this.year;
+
+                break;
+            case CalendarType.YEAR:
+                this.years = getPreviousYearsRange(this.years);
+                this.calendarHeader = getHeaderForCalendarYearsType(this.years);
+
+                break;
+            default:
+                break;
+            }
+        },
+        onNextDate() {
+            switch (this.selectedCalendarType) {
+            case CalendarType.DAY: {
+                const { month, year } = getNextMonth(this.month, this.year);
+
+                this.month = month;
+                this.year = year;
+                this.calendarHeader = getHeaderForCalendarDaysType(month, year);
+
+                break;
+            }
+            case CalendarType.MONTH: {
+                this.year = getNextYear(this.year);
+                this.calendarHeader = this.year;
+
+                break;
+            }
+            case CalendarType.YEAR:
+                this.years = getNextYearsRange(this.years);
+                this.calendarHeader = getHeaderForCalendarYearsType(this.years);
+
+                break;
+            default:
+                break;
+            }
+        },
+        onChangeCalendarType() {
+            switch (this.selectedCalendarType) {
+            case CalendarType.DAY:
+                this.selectedCalendarType = CalendarType.MONTH;
+                this.calendarHeader = this.year;
+                break;
+            case CalendarType.MONTH:
+                this.selectedCalendarType = CalendarType.YEAR;
+                this.calendarHeader = getHeaderForCalendarYearsType(this.years);
+                break;
+            case CalendarType.YEAR:
+                this.selectedCalendarType = CalendarType.DAY;
+                this.calendarHeader = getHeaderForCalendarDaysType(this.month, this.year);
+                break;
+            default: break;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    .date-picker {
+        width: 224px;
+        padding: 16px;
+    }
+</style>

components/Inputs/Date/DatePickerCalendarContent.vue

@@ -0,0 +1,161 @@
+/*
+ * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+ * See LICENSE for license details.
+ */
+<template>
+    <div>
+        <template v-if="isCalendarDayType">
+            <DatePickerContentHeader :headers="weekDays" />
+            <DatePickerMonthDays
+                :dates="calendarDates"
+                :selected-dates="parsedDate"
+                @select="onDateSelect" />
+        </template>
+        <template v-if="isCalendarMonthType">
+            <DatePickerContentHeader :headers="['Months']" />
+            <DatePickerMonths
+                :months="months"
+                :selected-month="parsedSelectedMonth"
+                :current-month="parsedCurrentMonth"
+                @monthSelected="onMonthSelect" />
+        </template>
+        <template v-if="isCalendarYearType">
+            <DatePickerContentHeader :headers="['Years']" />
+            <DatePickerYears
+                :years="years"
+                :selected-year="parsedSelectedYear"
+                :current-year="currentYear"
+                @yearSelected="onYearSelect" />
+        </template>
+    </div>
+</template>
+
+<script>
+import DatePickerMonthDays from '~/components/Inputs/Date/DatePickerMonthDays';
+import DatePickerContentHeader from '~/components/Inputs/Date/DatePickerContentHeader';
+import DatePickerMonths from '~/components/Inputs/Date/DatePickerMonths';
+import DatePickerYears from '~/components/Inputs/Date/DatePickerYears';
+import calendar, {
+    getHeaderForCalendarDaysType,
+    getMonthIndex,
+    WEEK_DAYS,
+    CALENDAR_MONTHS,
+} from '~/model/calendar/calendar';
+import { CalendarType } from '~/model/calendar/CalendarType';
+
+export default {
+    name: 'DatePickerCalendarContent',
+    components: {
+        DatePickerMonthDays,
+        DatePickerContentHeader,
+        DatePickerMonths,
+        DatePickerYears,
+    },
+    props: {
+        date: {
+            type: Date,
+            default: null,
+        },
+        year: {
+            type: Number,
+            required: true,
+        },
+        years: {
+            type: Array,
+            required: true,
+        },
+        currentYear: {
+            type: Number,
+            required: true,
+        },
+        month: {
+            type: Number,
+            required: true,
+        },
+        currentMonth: {
+            type: Number,
+            required: true,
+        },
+        calendarType: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            months: Object.values(CALENDAR_MONTHS),
+        };
+    },
+    computed: {
+        parsedDate() {
+            if (this.date) {
+                return [
+                    new Date(this.date),
+                ];
+            }
+
+            return [];
+        },
+        parsedCurrentMonth() {
+            if (this.year === this.currentYear) {
+                return Object.values(CALENDAR_MONTHS)[this.currentMonth];
+            }
+
+            return '';
+        },
+        parsedSelectedMonth() {
+            if (this.parsedDate.length) {
+                const [date] = this.parsedDate;
+
+                if (date.getFullYear() === this.year) {
+                    return this.months[date.getMonth()];
+                }
+
+                return '';
+            }
+
+            return '';
+        },
+        parsedSelectedYear() {
+            if (this.parsedDate.length) {
+                const [date] = this.parsedDate;
+
+                return date.getFullYear();
+            }
+
+            return null;
+        },
+        weekDays() {
+            return Object.values(WEEK_DAYS);
+        },
+        calendarDates() {
+            return calendar(this.month, this.year);
+        },
+        isCalendarDayType() {
+            return this.calendarType === CalendarType.DAY;
+        },
+        isCalendarMonthType() {
+            return this.calendarType === CalendarType.MONTH;
+        },
+        isCalendarYearType() {
+            return this.calendarType === CalendarType.YEAR;
+        },
+    },
+    methods: {
+        onDateSelect(date) {
+            this.$emit('input', new Date(date.year, date.month - 1, date.day));
+        },
+        onMonthSelect(month) {
+            const monthIndex = getMonthIndex(month) + 1;
+            this.$emit('month', monthIndex);
+            this.$emit('calendarType', CalendarType.DAY);
+            this.$emit('calendarHeader', getHeaderForCalendarDaysType(monthIndex, this.year));
+        },
+        onYearSelect(year) {
+            this.$emit('year', year);
+            this.$emit('calendarType', CalendarType.MONTH);
+            this.$emit('calendarHeader', year);
+        },
+    },
+};
+</script>