feature(core): improve logic of DateRangePicker (ergonode#70)

derpdead · Jul 29, 2020 · ca7438d · ca7438d
1 parent f7412d4
commit ca7438d
Show file tree

Hide file tree

Showing 10 changed files with 449 additions and 399 deletions.
diff --git 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
@@ -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