From ca7438d4802d513edd06607fb52b7f4bdb75a937 Mon Sep 17 00:00:00 2001
From: Maciej Kaczorowski <kaczorowski46@gmail.com>
Date: Wed, 29 Jul 2020 08:35:27 +0200
Subject: [PATCH 1/6] feature(core): improve logic of DateRangePicker (#70)

---
 .../Calendar/DatePickerCalendar.vue           | 148 +++++--------
 .../Inputs/DatePicker/DatePickerContent.vue   |  18 +-
 .../Inputs/DatePicker/DatePickerDays.vue      |  88 --------
 .../Inputs/DatePicker/DatePickerMonth.vue     | 117 +++++++++++
 .../Inputs/DatePicker/DatePickerMonths.vue    | 122 ++++++++---
 .../DatePicker/DatePickerNavigationHeader.vue |   3 +-
 .../Inputs/DatePicker/DatePickerYears.vue     |  86 ++++++--
 .../DatePicker/DateRangePickerContent.vue     | 194 ++++--------------
 .../Inputs/DatePicker/Node/DatePickerNode.vue |  54 ++++-
 .../core/src/models/calendar/calendar.js      |  18 ++
 10 files changed, 449 insertions(+), 399 deletions(-)
 delete mode 100644 modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerDays.vue
 create mode 100644 modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue

diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue
index 1f9e474f3..e17b8acad 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue
@@ -3,43 +3,20 @@
  * See LICENSE for license details.
  */
 <template>
-    <div>
-        <template v-if="isCalendarDayType">
-            <DatePickerContentHeader :headers="weekDays" />
-            <DatePickerDays
-                :dates="calendarDates"
-                :selected-dates="parsedDate"
-                @select="onDaySelect" />
-        </template>
-        <template v-if="isCalendarMonthType">
-            <DatePickerContentHeader :headers="['Months']" />
-            <DatePickerMonths
-                :months="months"
-                :selected-month="parsedSelectedMonth"
-                :current-month="parsedCurrentMonth"
-                @select="onMonthSelect" />
-        </template>
-        <template v-if="isCalendarYearType">
-            <DatePickerContentHeader :headers="['Years']" />
-            <DatePickerYears
-                :years="years"
-                :selected-year="parsedSelectedYear"
-                :current-year="currentYear"
-                @select="onYearSelect" />
-        </template>
-    </div>
+    <Component
+        :is="nodesComponent.component"
+        v-bind="nodesComponent.props"
+        v-on="nodesComponent.listeners" />
 </template>
 
 <script>
 import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
-import DatePickerDays from '@Core/components/Inputs/DatePicker/DatePickerDays';
+import DatePickerMonth from '@Core/components/Inputs/DatePicker/DatePickerMonth';
 import DatePickerMonths from '@Core/components/Inputs/DatePicker/DatePickerMonths';
 import DatePickerYears from '@Core/components/Inputs/DatePicker/DatePickerYears';
-import calendar, {
-    CALENDAR_MONTHS,
+import {
     getHeaderForCalendarDaysType,
     getMonthIndex,
-    WEEK_DAYS,
 } from '@Core/models/calendar/calendar';
 import {
     CALENDAR_TYPE,
@@ -48,13 +25,17 @@ import {
 export default {
     name: 'DatePickerCalendar',
     components: {
-        DatePickerDays,
+        DatePickerMonth,
         DatePickerContentHeader,
         DatePickerMonths,
         DatePickerYears,
     },
     props: {
-        date: {
+        value: {
+            type: Date,
+            default: null,
+        },
+        rangeValue: {
             type: Date,
             default: null,
         },
@@ -66,83 +47,56 @@ export default {
             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];
+        nodesComponent() {
+            switch (this.calendarType) {
+            case CALENDAR_TYPE.DAY:
+                return {
+                    component: DatePickerMonth,
+                    props: {
+                        value: this.value,
+                        rangeValue: this.rangeValue,
+                        month: this.month,
+                        year: this.year,
+                    },
+                    listeners: {
+                        select: this.onDaySelect,
+                    },
+                };
+            case CALENDAR_TYPE.MONTH:
+                return {
+                    component: DatePickerMonths,
+                    props: {
+                        value: this.value,
+                        rangeValue: this.rangeValue,
+                        year: this.year,
+                    },
+                    listeners: {
+                        select: this.onMonthSelect,
+                    },
+                };
+            default: return {
+                component: DatePickerYears,
+                props: {
+                    value: this.value,
+                    rangeValue: this.rangeValue,
+                    nodes: this.years,
+                    year: this.year,
+                },
+                listeners: {
+                    select: this.onYearSelect,
+                },
+            };
             }
-
-            return '';
-        },
-        parsedSelectedMonth() {
-            if (this.parsedDate.length) {
-                const [
-                    date,
-                ] = this.parsedDate;
-
-                if (date.getFullYear() === this.year) {
-                    return this.months[date.getMonth()];
-                }
-            }
-
-            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 === CALENDAR_TYPE.DAY;
-        },
-        isCalendarMonthType() {
-            return this.calendarType === CALENDAR_TYPE.MONTH;
-        },
-        isCalendarYearType() {
-            return this.calendarType === CALENDAR_TYPE.YEAR;
         },
     },
     methods: {
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue
index 5b9f9a0cf..2ea2a6a22 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerContent.vue
@@ -4,19 +4,20 @@
  */
 <template>
     <div class="date-picker">
-        <DatePickerHeader :header="header" />
+        <slot name="header">
+            <DatePickerHeader :header="header" />
+        </slot>
         <DatePickerNavigationHeader
             :header="calendarHeader"
             @changeCalendarType="onChangeCalendarType"
             @previousDate="onPreviousDate"
             @nextDate="onNextDate" />
         <DatePickerCalendar
-            :date="value"
+            :value="value"
+            :range-value="rangeValue"
             :month="month"
-            :current-month="currentMonth"
             :year="year"
             :years="years"
-            :current-year="currentYear"
             :calendar-type="selectedCalendarType"
             @input="onDateChange"
             @month="onMonthChange"
@@ -59,16 +60,19 @@ export default {
             type: Date,
             default: null,
         },
+        rangeValue: {
+            type: Date,
+            default: null,
+        },
     },
     data() {
-        const today = this.value || new Date();
+        const now = new Date();
+        const today = this.value || now;
         const year = today.getFullYear();
         const month = today.getMonth() + 1;
 
         return {
             years: getYearsWithinRange([], year),
-            currentYear: today.getFullYear(),
-            currentMonth: today.getMonth() + 1,
             month,
             year,
             selectedCalendarType: CALENDAR_TYPE.DAY,
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerDays.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerDays.vue
deleted file mode 100644
index d35dca073..000000000
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerDays.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
- * See LICENSE for license details.
- */
-<template>
-    <div class="month">
-        <DatePickerNode
-            v-for="date in dates"
-            :key="`${date.year}|${date.month}|${date.day}`"
-            :selected="isSelectedDate(date)"
-            :disabled="date.disabled"
-            :current="isToday(date)"
-            :title="date.day"
-            @click.native="onSelectDate(date)" />
-    </div>
-</template>
-
-<script>
-import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
-import {
-    isSameDay,
-} from '@Core/models/calendar/calendar';
-
-export default {
-    name: 'DatePickerDays',
-    components: {
-        DatePickerNode,
-    },
-    props: {
-        dates: {
-            type: Array,
-            required: true,
-        },
-        selectedDates: {
-            type: Array,
-            default: () => [],
-        },
-    },
-    data() {
-        return {
-            currentDate: new Date(),
-        };
-    },
-    methods: {
-        onSelectDate(date) {
-            this.$emit('select', {
-                ...date,
-            });
-        },
-        isSelectedDate(date) {
-            const {
-                length,
-            } = this.selectedDates;
-            const parsedDate = new Date(date.year, date.month - 1, date.day);
-
-            if (!length || date.disabled) return null;
-            const {
-                0: firstDate,
-            } = this.selectedDates;
-
-            if (length === 1) {
-                return isSameDay(parsedDate, firstDate);
-            }
-
-            const {
-                [length - 1]: lastDate,
-            } = this.selectedDates;
-
-            return +parsedDate >= firstDate && +parsedDate <= lastDate;
-        },
-        isToday(date) {
-            const parsedDate = new Date(date.year, date.month - 1, date.day);
-
-            return isSameDay(parsedDate, this.currentDate);
-        },
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-    .month {
-        display: grid;
-        grid-template-columns: repeat(7, 32px);
-        grid-template-rows: repeat(6, 32px);
-        justify-items: center;
-        align-items: center;
-    }
-</style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue
new file mode 100644
index 000000000..1fa9cde6f
--- /dev/null
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue
@@ -0,0 +1,117 @@
+/*
+ * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+ * See LICENSE for license details.
+ */
+<template>
+    <div class="date-picker-month">
+        <DatePickerContentHeader :headers="weekDays" />
+        <div class="date-picker-month__nodes">
+            <DatePickerNode
+                v-for="date in nodes"
+                :key="`${date.year}|${date.month}|${date.day}`"
+                :selected="isSelectedDate(date)"
+                :disabled="date.disabled"
+                :within-range="isWithinRange(date)"
+                :current="isCurrentDate(date)"
+                :title="date.day"
+                @click.native="onSelectDate(date)" />
+        </div>
+    </div>
+</template>
+
+<script>
+import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
+import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
+import calendar, {
+    getParsedDate,
+    isEqual,
+    WEEK_DAYS,
+} from '@Core/models/calendar/calendar';
+import {
+    isWithinInterval,
+} from 'date-fns';
+
+export default {
+    name: 'DatePickerMonth',
+    components: {
+        DatePickerNode,
+        DatePickerContentHeader,
+    },
+    props: {
+        value: {
+            type: Date,
+            default: null,
+        },
+        rangeValue: {
+            type: Date,
+            default: null,
+        },
+        month: {
+            type: Number,
+            required: true,
+        },
+        year: {
+            type: Number,
+            required: true,
+        },
+    },
+    computed: {
+        nodes() {
+            return calendar(this.month, this.year);
+        },
+        parsedValue() {
+            return getParsedDate(this.value);
+        },
+        parsedRangeValue() {
+            return getParsedDate(this.rangeValue);
+        },
+        today() {
+            return getParsedDate(new Date());
+        },
+        weekDays() {
+            return Object.values(WEEK_DAYS);
+        },
+    },
+    methods: {
+        onSelectDate(date) {
+            this.$emit('select', date);
+        },
+        isSelectedDate(date) {
+            if (!this.parsedValue) {
+                return false;
+            }
+
+            return isEqual(this.parsedValue, date)
+                || (this.parsedRangeValue && isEqual(this.parsedRangeValue, date));
+        },
+        isCurrentDate(date) {
+            return isEqual(this.today, date);
+        },
+        isWithinRange(date) {
+            if (!(this.parsedRangeValue && this.parsedValue)) {
+                return false;
+            }
+
+            return isWithinInterval(new Date(date.year, date.month - 1, date.day), {
+                start: this.value,
+                end: this.rangeValue,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    .date-picker-month {
+        display: flex;
+        flex-direction: column;
+
+        &__nodes {
+            display: grid;
+            grid-template-columns: repeat(7, 32px);
+            grid-template-rows: repeat(6, 32px);
+            justify-items: center;
+            align-items: center;
+        }
+    }
+</style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
index 98835bd0e..ef2f9a395 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
@@ -3,59 +3,133 @@
  * See LICENSE for license details.
  */
 <template>
-    <div class="months">
-        <DatePickerNode
-            v-for="month in months"
-            :key="month"
-            :selected="isSelectedMonth(month)"
-            :current="isCurrentMonth(month)"
-            :title="month"
-            @click.native="onClick(month)" />
+    <div class="date-picker-months">
+        <DatePickerContentHeader :headers="['Months']" />
+        <div class="date-picker-months__nodes">
+            <DatePickerNode
+                v-for="(month, index) in months"
+                :key="month"
+                :selected="isSelectedMonth(month)"
+                :current="isCurrentDate(month)"
+                :within-range="isWithinRange(month, index)"
+                :title="month"
+                @click.native="onClick(month)" />
+        </div>
     </div>
 </template>
 
 <script>
+import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
 import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
+import {
+    CALENDAR_MONTHS,
+    getParsedDate,
+} from '@Core/models/calendar/calendar';
 
 export default {
     name: 'DatePickerMonths',
     components: {
+        DatePickerContentHeader,
         DatePickerNode,
     },
     props: {
-        months: {
-            type: Array,
-            required: true,
+        value: {
+            type: Date,
+            default: null,
         },
-        selectedMonth: {
-            type: String,
-            default: '',
+        rangeValue: {
+            type: Date,
+            default: null,
         },
-        currentMonth: {
-            type: String,
+        year: {
+            type: Number,
             required: true,
         },
     },
+    computed: {
+        today() {
+            return new Date();
+        },
+        parsedValue() {
+            return getParsedDate(this.value);
+        },
+        parsedRangeValue() {
+            return getParsedDate(this.rangeValue);
+        },
+        currentMonth() {
+            return this.today.toLocaleString('default', {
+                month: 'short',
+            });
+        },
+        parsedYear() {
+            if (this.value) {
+                return this.value.getFullYear();
+            }
+
+            return null;
+        },
+        months() {
+            return Object.values(CALENDAR_MONTHS);
+        },
+        parsedMonth() {
+            if (!this.value || this.year !== this.parsedYear) {
+                return '';
+            }
+
+            return this.value.toLocaleString('default', {
+                month: 'short',
+            });
+        },
+        parsedRangeMonth() {
+            if (!this.rangeValue) {
+                return '';
+            }
+
+            return this.rangeValue.toLocaleString('default', {
+                month: 'short',
+            });
+        },
+    },
     methods: {
         onClick(month) {
             this.$emit('select', month);
         },
         isSelectedMonth(month) {
-            return this.selectedMonth === month;
+            if (this.rangeValue) {
+                return (this.year === this.parsedRangeValue.year && this.parsedRangeMonth === month)
+                    || (this.year === this.parsedValue.year && this.parsedMonth === month);
+            }
+
+            return this.parsedMonth === month;
         },
-        isCurrentMonth(month) {
+        isCurrentDate(month) {
             return this.currentMonth === month;
         },
+        isWithinRange(month, index) {
+            if (!(this.parsedRangeValue && this.parsedValue)) {
+                return false;
+            }
+
+            return (this.year < this.parsedRangeValue.year
+                || (this.year === this.parsedRangeValue.year && this.parsedRangeValue.month >= index + 1))
+                && (this.year > this.parsedValue.year
+                || (this.year === this.parsedValue.year && this.parsedValue.month <= index + 1));
+        },
     },
 };
 </script>
 
 <style lang="scss" scoped>
-    .months {
-        display: grid;
-        grid-template-columns: repeat(3, 75px);
-        grid-auto-rows: 40px;
-        align-items: center;
-        justify-items: center;
+    .date-picker-months {
+        display: flex;
+        flex-direction: column;
+
+        &__nodes {
+            display: grid;
+            grid-template-columns: repeat(3, 75px);
+            grid-auto-rows: 40px;
+            align-items: center;
+            justify-items: center;
+        }
     }
 </style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
index 59eff2667..525b9df47 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
@@ -97,9 +97,10 @@ export default {
             color: $GRAPHITE_DARK;
             font: $FONT_MEDIUM_14_20;
             cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
             &:hover {
-                box-shadow: $ELEVATOR_2_DP;
+                box-shadow: $ELEVATOR_HOVER_FOCUS;
             }
         }
     }
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
index cb554c1b4..07074a15f 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
@@ -3,59 +3,101 @@
  * See LICENSE for license details.
  */
 <template>
-    <div class="years">
-        <DatePickerNode
-            v-for="year in years"
-            :key="year"
-            :selected="isSelectedYear(year)"
-            :current="isCurrentYear(year)"
-            :title="year"
-            @click.native="onClick(year)" />
+    <div class="date-picker-years">
+        <DatePickerContentHeader :headers="['Years']" />
+        <div class="date-picker-years__nodes">
+            <DatePickerNode
+                v-for="year in nodes"
+                :key="year"
+                :selected="isSelectedYear(year)"
+                :current="isCurrentDate(year)"
+                :within-range="isWithinRange(year)"
+                :title="year"
+                @click.native="onClick(year)" />
+        </div>
     </div>
 </template>
 
 <script>
+import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
 import DatePickerNode from '@Core/components/Inputs/DatePicker/Node/DatePickerNode';
 
 export default {
     name: 'DatePickerYears',
     components: {
+        DatePickerContentHeader,
         DatePickerNode,
     },
     props: {
-        years: {
-            type: Array,
-            required: true,
+        value: {
+            type: Date,
+            default: null,
         },
-        selectedYear: {
-            type: Number,
+        rangeValue: {
+            type: Date,
             default: null,
         },
-        currentYear: {
+        nodes: {
+            type: Array,
+            required: true,
+        },
+        year: {
             type: Number,
             required: true,
         },
     },
+    computed: {
+        currentYear() {
+            return new Date().getFullYear();
+        },
+        parsedYear() {
+            if (this.value) {
+                return this.value.getFullYear();
+            }
+
+            return null;
+        },
+        parsedRangeYear() {
+            if (this.rangeValue) {
+                return this.rangeValue.getFullYear();
+            }
+
+            return null;
+        },
+    },
     methods: {
         onClick(year) {
             this.$emit('select', year);
         },
         isSelectedYear(year) {
-            return this.selectedYear === year;
+            return this.parsedYear === year || this.parsedRangeYear === year;
         },
-        isCurrentYear(year) {
+        isCurrentDate(year) {
             return this.currentYear === year;
         },
+        isWithinRange(year) {
+            if (!(this.rangeValue && this.value)) {
+                return false;
+            }
+
+            return this.parsedRangeYear >= year
+                && this.parsedYear <= year;
+        },
     },
 };
 </script>
 
 <style lang="scss" scoped>
-    .years {
-        display: grid;
-        grid-template-columns: repeat(5, 45px);
-        grid-auto-rows: 40px;
-        align-items: center;
-        justify-items: center;
+    .date-picker-years {
+        display: flex;
+        flex-direction: column;
+
+        &__nodes {
+            display: grid;
+            grid-template-columns: repeat(5, 45px);
+            grid-auto-rows: 40px;
+            align-items: center;
+            justify-items: center;
+        }
     }
 </style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
index 9aaba8cd3..ec2bfd46e 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
@@ -4,75 +4,23 @@
  */
 <template>
     <div class="date-range-picker">
-        <div class="date-range-picker__left">
-            <DatePickerInputHeader
-                v-if="inputHeader"
-                header="From"
-                :value="headerFromValue"
-                @input="onFromHeaderValueChange" />
-            <DatePickerHeader
-                v-else
-                :header="fromHeader" />
-            <DatePickerNavigationHeader
-                :header="getDisplayingMonthAndYear(
-                    lowerBoundMonth, lowerBoundYear
-                )">
-                <template #previous>
-                    <Fab
-                        :theme="secondaryTheme"
-                        @click.native="previousMonth">
-                        <template #icon="{ color }">
-                            <IconArrowSingle
-                                :fill-color="color"
-                                :state="leftArrow" />
-                        </template>
-                    </Fab>
-                </template>
-                <template #next>
-                    <div class="expander" />
-                </template>
-            </DatePickerNavigationHeader>
-            <DatePickerContentHeader :headers="weekDays" />
-            <DatePickerDays
-                :dates="lowerBoundCalendarDates"
-                :selected-dates="parsedRange"
-                @select="onSelectRange" />
-        </div>
+        <DatePickerContent
+            :value="value.from"
+            :range-value="value.to"
+            @input="onSelectRange">
+            <template #header>
+                <DatePickerHeader :header="fromHeader" />
+            </template>
+        </DatePickerContent>
         <Divider vertical />
-        <div class="date-range-picker__right">
-            <DatePickerInputHeader
-                v-if="inputHeader"
-                header="To"
-                :value="headerToValue"
-                @input="onToHeaderValueChange" />
-            <DatePickerHeader
-                v-else
-                :header="toHeader" />
-            <DatePickerNavigationHeader
-                :header="getDisplayingMonthAndYear(
-                    upperBoundMonth, upperBoundYear
-                )">
-                <template #previous>
-                    <div class="expander" />
-                </template>
-                <template #next>
-                    <Fab
-                        :theme="secondaryTheme"
-                        @click.native="nextMonth">
-                        <template #icon="{ color }">
-                            <IconArrowSingle
-                                :fill-color="color"
-                                :state="rightArrow" />
-                        </template>
-                    </Fab>
-                </template>
-            </DatePickerNavigationHeader>
-            <DatePickerContentHeader :headers="weekDays" />
-            <DatePickerDays
-                :dates="upperBoundCalendarDates"
-                :selected-dates="parsedRange"
-                @select="onSelectRange" />
-        </div>
+        <DatePickerContent
+            :value="value.from"
+            :range-value="value.to"
+            @input="onSelectRange">
+            <template #header>
+                <DatePickerHeader :header="toHeader" />
+            </template>
+        </DatePickerContent>
     </div>
 </template>
 
@@ -80,10 +28,11 @@
 import Fab from '@Core/components/Buttons/Fab';
 import Divider from '@Core/components/Dividers/Divider';
 import IconArrowSingle from '@Core/components/Icons/Arrows/IconArrowSingle';
+import DatePickerContent from '@Core/components/Inputs/DatePicker/DatePickerContent';
 import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
-import DatePickerDays from '@Core/components/Inputs/DatePicker/DatePickerDays';
 import DatePickerHeader from '@Core/components/Inputs/DatePicker/DatePickerHeader';
 import DatePickerInputHeader from '@Core/components/Inputs/DatePicker/DatePickerInputHeader';
+import DatePickerMonth from '@Core/components/Inputs/DatePicker/DatePickerMonth';
 import DatePickerNavigationHeader from '@Core/components/Inputs/DatePicker/DatePickerNavigationHeader';
 import {
     ARROW,
@@ -105,8 +54,9 @@ import {
 export default {
     name: 'DateRangePickerContent',
     components: {
+        DatePickerContent,
         Fab,
-        DatePickerDays,
+        DatePickerMonth,
         DatePickerContentHeader,
         DatePickerNavigationHeader,
         IconArrowSingle,
@@ -155,21 +105,6 @@ export default {
         weekDays() {
             return Object.values(WEEK_DAYS);
         },
-        lowerBoundCalendarDates() {
-            return calendar(this.lowerBoundMonth, this.lowerBoundYear);
-        },
-        upperBoundCalendarDates() {
-            return calendar(this.upperBoundMonth, this.upperBoundYear);
-        },
-        parsedRange() {
-            return Object.keys(this.value).reduce((previous, current) => {
-                if (this.value[current]) {
-                    previous.push(new Date(this.value[current]));
-                }
-
-                return previous;
-            }, []);
-        },
         fromHeader() {
             if (this.value.from) {
                 return `From ${formatDate(this.value.from, this.format)}`;
@@ -186,77 +121,32 @@ export default {
         },
     },
     methods: {
-        onFromHeaderValueChange(value) {
-            this.headerFromValue = value;
-        },
-        onToHeaderValueChange(value) {
-            this.headerToValue = value;
-        },
-        getDisplayingMonthAndYear(month, year) {
-            return `${this.getDisplayingMonth(month)} ${year}`;
-        },
-        getDisplayingMonth(month) {
-            return Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
-        },
-        previousMonth() {
-            const {
-                month: previousMonth, year: previousYear,
-            } = getPreviousMonth(this.lowerBoundMonth, this.lowerBoundYear);
-
-            this.lowerBoundMonth = previousMonth;
-            this.lowerBoundYear = previousYear;
-            this.upperBoundMonth = this.upperBoundMonth > 1
-                ? this.upperBoundMonth - 1
-                : 12;
-            this.upperBoundYear = this.upperBoundMonth === 12
-                ? this.upperBoundYear - 1
-                : this.upperBoundYear;
-        },
-        nextMonth() {
-            const {
-                month: nextMonth, year: nextYear,
-            } = getNextMonth(this.upperBoundMonth, this.upperBoundYear);
-
-            this.upperBoundMonth = nextMonth;
-            this.upperBoundYear = nextYear;
-            this.lowerBoundMonth = this.lowerBoundMonth < 12
-                ? this.lowerBoundMonth + 1
-                : 1;
-            this.lowerBoundYear = this.lowerBoundMonth === 1
-                ? this.lowerBoundYear + 1
-                : this.lowerBoundYear;
-        },
         onSelectRange(date) {
-            const to = this.value.to
-                ? new Date(this.value.to)
-                : null;
-
-            const from = this.value.from
-                ? new Date(this.value.from)
-                : null;
-
-            const dateToInsert = new Date(date.year, date.month - 1, date.day);
+            const {
+                from, to,
+            } = this.value;
 
-            if (from) {
-                if (+from > +dateToInsert) {
-                    this.$emit('input', {
-                        from: dateToInsert,
-                        to,
-                    });
-                    return;
-                }
-            } else {
+            if (from && to) {
+                this.$emit('input', {
+                    from: date,
+                    to: null,
+                });
+            } else if (from && date < from) {
+                this.$emit('input', {
+                    from: date,
+                    to: null,
+                });
+            } else if (from === null) {
                 this.$emit('input', {
-                    from: dateToInsert,
+                    from: date,
                     to,
                 });
-                return;
+            } else {
+                this.$emit('input', {
+                    from,
+                    to: date,
+                });
             }
-
-            this.$emit('input', {
-                from,
-                to: dateToInsert,
-            });
         },
     },
 };
@@ -267,10 +157,6 @@ export default {
         display: grid;
         grid-auto-flow: column;
 
-        &__left, &__right {
-            padding: 16px;
-        }
-
         .interactive-header {
             margin-bottom: 8px;
         }
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
index 7e8de86e6..1c500683e 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
@@ -5,7 +5,9 @@
 <template>
     <span
         :class="classes"
-        v-text="title" />
+        v-text="title"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave" />
 </template>
 
 <script>
@@ -20,6 +22,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        withinRange: {
+            type: Boolean,
+            default: false,
+        },
         current: {
             type: Boolean,
             default: false,
@@ -32,23 +38,38 @@ export default {
             required: true,
         },
     },
+    data() {
+        return {
+            isHovered: false,
+        };
+    },
     computed: {
         classes() {
             return [
-                'node',
+                'date-picker-node',
                 {
-                    'node--selected': this.selected,
-                    'node--disabled': this.disabled,
-                    'node--current': this.current,
+                    'date-picker-node--selected': this.selected,
+                    'date-picker-node--within-range': this.withinRange && !this.selected,
+                    'date-picker-node--disabled': this.disabled,
+                    'date-picker-node--current': this.current,
+                    'date-picker-node--hovered': this.isHovered,
                 },
             ];
         },
     },
+    methods: {
+        onMouseEnter() {
+            this.isHovered = true;
+        },
+        onMouseLeave() {
+            this.isHovered = false;
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
-    .node {
+    .date-picker-node {
         position: relative;
         display: flex;
         justify-content: center;
@@ -58,6 +79,21 @@ export default {
         font: $FONT_MEDIUM_12_16;
         cursor: pointer;
 
+        &::before {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            box-shadow: $ELEVATOR_HOVER_FOCUS;
+            opacity: 0;
+            content: "";
+            transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+        }
+
+        &--within-range {
+            background-color: $GREEN_LIGHT;
+        }
+
         &:not(&--selected):not(&--disabled) {
             color: $GRAPHITE_DARK;
         }
@@ -86,8 +122,14 @@ export default {
             }
         }
 
+        &--hovered::before {
+            opacity: 1;
+        }
+
         &--disabled {
             color: $GRAPHITE_LIGHT;
+            pointer-events: none;
+            cursor: not-allowed;
         }
     }
 </style>
diff --git a/modules/@ergonode/core/src/models/calendar/calendar.js b/modules/@ergonode/core/src/models/calendar/calendar.js
index b16976d80..acb444600 100644
--- a/modules/@ergonode/core/src/models/calendar/calendar.js
+++ b/modules/@ergonode/core/src/models/calendar/calendar.js
@@ -69,6 +69,24 @@ export const isDate = (date) => {
     return isDateObject && isValidDate;
 };
 
+export const getParsedDate = (date) => {
+    if (!date) return null;
+
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+
+    return {
+        day,
+        month,
+        year,
+    };
+};
+
+export const isEqual = (date, withDate) => date.day === withDate.day
+        && date.month === withDate.month
+        && date.year === withDate.year;
+
 export const getMonthIndex = (monthDesc) => {
     const monthDescriptions = Object.values(CALENDAR_MONTHS);
 

From ff728e9dae3722a1118cd2f17c46e8e2820ef6c5 Mon Sep 17 00:00:00 2001
From: Maciej Kaczorowski <kaczorowski46@gmail.com>
Date: Wed, 29 Jul 2020 09:18:30 +0200
Subject: [PATCH 2/6] feature(core): clean code (#70)

---
 .../Content/GridAdvancedFilterDateContent.vue | 30 ++---------
 .../Type/GridDateTypeAdvancedFilter.vue       | 54 +++++++++++++++----
 .../DatePicker/DateRangePickerContent.vue     |  6 +--
 3 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue
index 9e5f25d78..b271c7eb2 100644
--- a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue
+++ b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue
@@ -23,7 +23,6 @@ import {
     DEFAULT_FORMAT,
 } from '@Core/models/calendar/calendar';
 import {
-    format as formatDate,
     parse as parseDate,
 } from 'date-fns';
 
@@ -54,35 +53,14 @@ export default {
             const valueTo = this.value[FILTER_OPERATOR.SMALLER_OR_EQUAL];
 
             return {
-                from: valueFrom
-                    ? parseDate(valueFrom, this.dateFormat, new Date())
-                    : null,
-                to: valueTo
-                    ? parseDate(valueTo, this.dateFormat, new Date())
-                    : null,
+                from: valueFrom,
+                to: valueTo,
             };
         },
     },
     methods: {
-        onValueChange({
-            from, to,
-        }) {
-            const dateFrom = from ? formatDate(from, this.dateFormat) : null;
-            const dateTo = to ? formatDate(to, this.dateFormat) : null;
-
-            if (this.value[FILTER_OPERATOR.GREATER_OR_EQUAL] !== dateFrom
-                && dateFrom) {
-                this.$emit('input', {
-                    key: FILTER_OPERATOR.GREATER_OR_EQUAL,
-                    value: dateFrom,
-                });
-            } else if (this.value[FILTER_OPERATOR.SMALLER_OR_EQUAL] !== dateTo
-                && dateTo) {
-                this.$emit('input', {
-                    key: FILTER_OPERATOR.SMALLER_OR_EQUAL,
-                    value: dateTo,
-                });
-            }
+        onValueChange(payload) {
+            this.$emit('input', payload);
         },
         onEmptyRecordChange(value) {
             this.$emit('input', {
diff --git a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue
index 993ff1f9d..e8c961573 100644
--- a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue
+++ b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue
@@ -8,7 +8,6 @@
         :value="filterValue"
         :hint="hint"
         :title="title"
-        :parameters="parameters"
         :filter-id="filter.id"
         @remove="onRemove"
         @swap="onSwap"
@@ -34,9 +33,15 @@ import SelectDropdownApplyFooter from '@Core/components/Inputs/Select/DropDown/F
 import {
     FILTER_OPERATOR,
 } from '@Core/defaults/operators';
+import {
+    DEFAULT_FORMAT,
+} from '@Core/models/calendar/calendar';
 import {
     getParsedFilter,
 } from '@Core/models/mappers/gridDataMapper';
+import {
+    format as formatDate,
+} from 'date-fns';
 
 export default {
     name: 'GridDateTypeAdvancedFilter',
@@ -59,8 +64,8 @@ export default {
         return {
             value: {
                 isEmptyRecord: false,
-                [FILTER_OPERATOR.GREATER_OR_EQUAL]: '',
-                [FILTER_OPERATOR.SMALLER_OR_EQUAL]: '',
+                [FILTER_OPERATOR.GREATER_OR_EQUAL]: null,
+                [FILTER_OPERATOR.SMALLER_OR_EQUAL]: null,
             },
         };
     },
@@ -91,15 +96,32 @@ export default {
             return [
                 this.value[FILTER_OPERATOR.GREATER_OR_EQUAL],
                 this.value[FILTER_OPERATOR.SMALLER_OR_EQUAL],
-            ].filter(value => value !== '')
+            ].filter(value => value)
+                .map(value => formatDate(value, this.parameters))
                 .join(' - ');
         },
     },
     methods: {
         onValueChange({
-            key, value,
+            from, to,
         }) {
-            this.value[key] = value;
+            const value = {
+                [FILTER_OPERATOR.GREATER_OR_EQUAL]: null,
+                [FILTER_OPERATOR.SMALLER_OR_EQUAL]: null,
+            };
+
+            if (from) {
+                value[FILTER_OPERATOR.GREATER_OR_EQUAL] = from;
+            }
+
+            if (to) {
+                value[FILTER_OPERATOR.SMALLER_OR_EQUAL] = to;
+            }
+
+            this.value = {
+                ...this.value,
+                ...value,
+            };
         },
         onRemove(index) {
             this.$emit('remove', index);
@@ -110,16 +132,30 @@ export default {
         onClear() {
             this.value = {
                 isEmptyRecord: false,
-                [FILTER_OPERATOR.GREATER_OR_EQUAL]: '',
-                [FILTER_OPERATOR.SMALLER_OR_EQUAL]: '',
+                [FILTER_OPERATOR.GREATER_OR_EQUAL]: null,
+                [FILTER_OPERATOR.SMALLER_OR_EQUAL]: null,
             };
         },
         onApplyValue() {
+            const filterValue = {
+                ...this.value,
+            };
+
+            if (filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL]) {
+                const fromValue = formatDate(filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL], DEFAULT_FORMAT);
+                filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL] = fromValue;
+            }
+
+            if (filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL]) {
+                const toValue = formatDate(filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL], DEFAULT_FORMAT);
+                filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL] = toValue;
+            }
+
             this.$emit('apply', {
                 key: this.filter.id,
                 value: getParsedFilter({
                     id: this.filter.id,
-                    filter: this.value,
+                    filter: filterValue,
                 }),
             });
         },
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
index ec2bfd46e..e86060640 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
@@ -40,11 +40,8 @@ import {
 import {
     THEME,
 } from '@Core/defaults/theme';
-import calendar, {
-    CALENDAR_MONTHS,
+import {
     DEFAULT_FORMAT,
-    getNextMonth,
-    getPreviousMonth,
     WEEK_DAYS,
 } from '@Core/models/calendar/calendar';
 import {
@@ -106,6 +103,7 @@ export default {
             return Object.values(WEEK_DAYS);
         },
         fromHeader() {
+            console.log(this.value.from);
             if (this.value.from) {
                 return `From ${formatDate(this.value.from, this.format)}`;
             }

From 39e8b6162bbd93800c3037c7c832cf23b2f4682d Mon Sep 17 00:00:00 2001
From: Maciej Kaczorowski <kaczorowski46@gmail.com>
Date: Wed, 29 Jul 2020 09:56:33 +0200
Subject: [PATCH 3/6] bugfix(core): sidebar style, date picker style, advanced
 filters style

---
 .../Content/GridAdvancedFilterDateContent.vue |  3 --
 .../Type/GridDateTypeAdvancedFilter.vue       | 12 ++++++--
 .../Inputs/DatePicker/DatePickerMonth.vue     | 16 +++++------
 .../Inputs/DatePicker/DatePickerMonths.vue    | 20 +++++++------
 .../DatePicker/DatePickerNavigationHeader.vue |  2 +-
 .../Inputs/DatePicker/DatePickerYears.vue     | 14 +++++-----
 .../DatePicker/DateRangePickerContent.vue     | 28 ++-----------------
 .../Inputs/DatePicker/Node/DatePickerNode.vue |  2 +-
 .../core/src/components/SideBar/SideBar.vue   |  2 --
 .../components/SideBar/SideBarListGroup.vue   |  1 +
 10 files changed, 42 insertions(+), 58 deletions(-)

diff --git a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue
index b271c7eb2..463324f8d 100644
--- a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue
+++ b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue
@@ -22,9 +22,6 @@ import {
 import {
     DEFAULT_FORMAT,
 } from '@Core/models/calendar/calendar';
-import {
-    parse as parseDate,
-} from 'date-fns';
 
 export default {
     name: 'GridAdvancedFilterDateContent',
diff --git a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue
index e8c961573..f23093fb3 100644
--- a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue
+++ b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue
@@ -142,12 +142,20 @@ export default {
             };
 
             if (filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL]) {
-                const fromValue = formatDate(filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL], DEFAULT_FORMAT);
+                const fromValue = formatDate(
+                    filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL],
+                    DEFAULT_FORMAT,
+                );
+
                 filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL] = fromValue;
             }
 
             if (filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL]) {
-                const toValue = formatDate(filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL], DEFAULT_FORMAT);
+                const toValue = formatDate(
+                    filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL],
+                    DEFAULT_FORMAT,
+                );
+
                 filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL] = toValue;
             }
 
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue
index 1fa9cde6f..b8aaecc0e 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonth.vue
@@ -7,14 +7,14 @@
         <DatePickerContentHeader :headers="weekDays" />
         <div class="date-picker-month__nodes">
             <DatePickerNode
-                v-for="date in nodes"
-                :key="`${date.year}|${date.month}|${date.day}`"
-                :selected="isSelectedDate(date)"
-                :disabled="date.disabled"
-                :within-range="isWithinRange(date)"
-                :current="isCurrentDate(date)"
-                :title="date.day"
-                @click.native="onSelectDate(date)" />
+                v-for="node in nodes"
+                :key="`${node.year}|${node.month}|${node.day}`"
+                :selected="isSelectedDate(node)"
+                :disabled="node.disabled"
+                :within-range="isWithinRange(node)"
+                :current="isCurrentDate(node)"
+                :title="node.day"
+                @click.native="onSelectDate(node)" />
         </div>
     </div>
 </template>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
index ef2f9a395..d2a42f01d 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerMonths.vue
@@ -7,13 +7,13 @@
         <DatePickerContentHeader :headers="['Months']" />
         <div class="date-picker-months__nodes">
             <DatePickerNode
-                v-for="(month, index) in months"
-                :key="month"
-                :selected="isSelectedMonth(month)"
-                :current="isCurrentDate(month)"
-                :within-range="isWithinRange(month, index)"
-                :title="month"
-                @click.native="onClick(month)" />
+                v-for="(node, index) in months"
+                :key="node"
+                :selected="isSelectedMonth(node)"
+                :current="isCurrentDate(node)"
+                :within-range="isWithinRange(node, index)"
+                :title="node"
+                @click.native="onClick(node)" />
         </div>
     </div>
 </template>
@@ -111,9 +111,11 @@ export default {
             }
 
             return (this.year < this.parsedRangeValue.year
-                || (this.year === this.parsedRangeValue.year && this.parsedRangeValue.month >= index + 1))
+                || (this.year === this.parsedRangeValue.year
+                    && this.parsedRangeValue.month >= index + 1))
                 && (this.year > this.parsedValue.year
-                || (this.year === this.parsedValue.year && this.parsedValue.month <= index + 1));
+                    || (this.year === this.parsedValue.year
+                        && this.parsedValue.month <= index + 1));
         },
     },
 };
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
index 525b9df47..073ef3784 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerNavigationHeader.vue
@@ -94,10 +94,10 @@ export default {
             justify-content: center;
             align-items: center;
             height: 32px;
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
             color: $GRAPHITE_DARK;
             font: $FONT_MEDIUM_14_20;
             cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
             &:hover {
                 box-shadow: $ELEVATOR_HOVER_FOCUS;
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
index 07074a15f..2d8172fae 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DatePickerYears.vue
@@ -7,13 +7,13 @@
         <DatePickerContentHeader :headers="['Years']" />
         <div class="date-picker-years__nodes">
             <DatePickerNode
-                v-for="year in nodes"
-                :key="year"
-                :selected="isSelectedYear(year)"
-                :current="isCurrentDate(year)"
-                :within-range="isWithinRange(year)"
-                :title="year"
-                @click.native="onClick(year)" />
+                v-for="node in nodes"
+                :key="node"
+                :selected="isSelectedYear(node)"
+                :current="isCurrentDate(node)"
+                :within-range="isWithinRange(node)"
+                :title="node"
+                @click.native="onClick(node)" />
         </div>
     </div>
 </template>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
index e86060640..dc28cf94a 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
@@ -3,7 +3,7 @@
  * See LICENSE for license details.
  */
 <template>
-    <div class="date-range-picker">
+    <div class="date-range-picker-content">
         <DatePickerContent
             :value="value.from"
             :range-value="value.to"
@@ -25,15 +25,9 @@
 </template>
 
 <script>
-import Fab from '@Core/components/Buttons/Fab';
 import Divider from '@Core/components/Dividers/Divider';
-import IconArrowSingle from '@Core/components/Icons/Arrows/IconArrowSingle';
 import DatePickerContent from '@Core/components/Inputs/DatePicker/DatePickerContent';
-import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
 import DatePickerHeader from '@Core/components/Inputs/DatePicker/DatePickerHeader';
-import DatePickerInputHeader from '@Core/components/Inputs/DatePicker/DatePickerInputHeader';
-import DatePickerMonth from '@Core/components/Inputs/DatePicker/DatePickerMonth';
-import DatePickerNavigationHeader from '@Core/components/Inputs/DatePicker/DatePickerNavigationHeader';
 import {
     ARROW,
 } from '@Core/defaults/icons';
@@ -52,14 +46,8 @@ export default {
     name: 'DateRangePickerContent',
     components: {
         DatePickerContent,
-        Fab,
-        DatePickerMonth,
-        DatePickerContentHeader,
-        DatePickerNavigationHeader,
-        IconArrowSingle,
         Divider,
         DatePickerHeader,
-        DatePickerInputHeader,
     },
     props: {
         value: {
@@ -103,7 +91,6 @@ export default {
             return Object.values(WEEK_DAYS);
         },
         fromHeader() {
-            console.log(this.value.from);
             if (this.value.from) {
                 return `From ${formatDate(this.value.from, this.format)}`;
             }
@@ -151,16 +138,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .date-range-picker {
-        display: grid;
-        grid-auto-flow: column;
-
-        .interactive-header {
-            margin-bottom: 8px;
-        }
-    }
-
-    .expander {
-        flex-basis: 32px;
+    .date-range-picker-content {
+        display: flex;
     }
 </style>
diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
index 1c500683e..b01077a83 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/Node/DatePickerNode.vue
@@ -85,9 +85,9 @@ export default {
             width: 100%;
             height: 100%;
             box-shadow: $ELEVATOR_HOVER_FOCUS;
+            transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
             opacity: 0;
             content: "";
-            transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
         }
 
         &--within-range {
diff --git a/modules/@ergonode/core/src/components/SideBar/SideBar.vue b/modules/@ergonode/core/src/components/SideBar/SideBar.vue
index eebdcad04..3e84f5f71 100644
--- a/modules/@ergonode/core/src/components/SideBar/SideBar.vue
+++ b/modules/@ergonode/core/src/components/SideBar/SideBar.vue
@@ -182,8 +182,6 @@ export default {
         background-color: $GRAPHITE_DARK;
         box-shadow: $ELEVATOR_2_DP;
         transition: width 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-        overflow-x: hidden;
-        overflow-y: auto;
         will-change: width;
         transform: translateZ(0);
         backface-visibility: hidden;
diff --git a/modules/@ergonode/core/src/components/SideBar/SideBarListGroup.vue b/modules/@ergonode/core/src/components/SideBar/SideBarListGroup.vue
index 7f7e34de6..729fdeef0 100644
--- a/modules/@ergonode/core/src/components/SideBar/SideBarListGroup.vue
+++ b/modules/@ergonode/core/src/components/SideBar/SideBarListGroup.vue
@@ -41,6 +41,7 @@
                     <SideBarListGroupElement
                         v-for="(child, index) in route.routes"
                         :key="index"
+                        :is-expanded="!isExpanded && isHovered"
                         :route="child" />
                 </ul>
             </AutoHeightTransition>

From 68bfcb060e1bf40db3c233b1c9107778ae7f5148 Mon Sep 17 00:00:00 2001
From: Maciej Kaczorowski <kaczorowski46@gmail.com>
Date: Wed, 29 Jul 2020 10:17:38 +0200
Subject: [PATCH 4/6] bugfix(core): clean code

---
 .../Inputs/DatePicker/DateRangePickerContent.vue           | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
index dc28cf94a..19b915aa9 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
@@ -111,12 +111,7 @@ export default {
                 from, to,
             } = this.value;
 
-            if (from && to) {
-                this.$emit('input', {
-                    from: date,
-                    to: null,
-                });
-            } else if (from && date < from) {
+            if (from && to || from && date < from) {
                 this.$emit('input', {
                     from: date,
                     to: null,

From 609a5fefba3049ae37aa4813470fec789bfc4817 Mon Sep 17 00:00:00 2001
From: Maciej Kaczorowski <kaczorowski46@gmail.com>
Date: Wed, 29 Jul 2020 10:23:08 +0200
Subject: [PATCH 5/6] bugfix(core): clean code

---
 .../src/components/Inputs/DatePicker/DateRangePickerContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
index 19b915aa9..a6c687e41 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
@@ -111,7 +111,7 @@ export default {
                 from, to,
             } = this.value;
 
-            if (from && to || from && date < from) {
+            if (from && to || (from && date < from)) {
                 this.$emit('input', {
                     from: date,
                     to: null,

From 9dd1ff754609002b0c1b602a92256c05b827073f Mon Sep 17 00:00:00 2001
From: Maciej Kaczorowski <kaczorowski46@gmail.com>
Date: Wed, 29 Jul 2020 10:32:09 +0200
Subject: [PATCH 6/6] bugfix(core): clean code

---
 .../src/components/Inputs/DatePicker/DateRangePickerContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
index a6c687e41..6eb0af10c 100644
--- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
+++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue
@@ -111,7 +111,7 @@ export default {
                 from, to,
             } = this.value;
 
-            if (from && to || (from && date < from)) {
+            if ((from && to) || (from && date < from)) {
                 this.$emit('input', {
                     from: date,
                     to: null,