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

…cker

components/Inputs/Date/DatePicker.vue

@@ -4,6 +4,9 @@
  */
 <template>
     <div class="date-picker">
+        <slot name="header">
+            <DatePickerHeader :header="header" />
+        </slot>
         <DatePickerNavigationHeader
             :header="calendarHeader"
             @changeCalendarType="onChangeCalendarType"
@@ -26,6 +29,7 @@
 </template>
 
 <script>
+import DatePickerHeader from '~/components/Inputs/Date/DatePickerHeader';
 import DatePickerNavigationHeader from '~/components/Inputs/Date/DatePickerNavigationHeader';
 import DatePickerCalendarContent from '~/components/Inputs/Date/DatePickerCalendarContent';
 import {
@@ -38,12 +42,15 @@ import {
     getYearsWithinRange,
     getHeaderForCalendarDaysType,
     getHeaderForCalendarYearsType,
+    zeroPad,
+    CALENDAR_MONTHS,
 } from '~/model/calendar/calendar';
 import { CalendarType } from '~/model/calendar/CalendarType';
 
 export default {
     name: 'DatePicker',
     components: {
+        DatePickerHeader,
         DatePickerNavigationHeader,
         DatePickerCalendarContent,
     },
@@ -52,22 +59,50 @@ export default {
             type: Date,
             default: null,
         },
+        calendarDate: {
+            type: Date,
+            default() {
+                return new Date();
+            },
+        },
     },
     data() {
-        const currentDate = new Date();
-        const year = currentDate.getFullYear();
-        const month = currentDate.getMonth() + 1;
+        const today = new Date();
+        const year = this.calendarDate.getFullYear();
+        const month = this.calendarDate.getMonth() + 1;
 
         return {
             years: getYearsWithinRange([], year),
-            currentYear: year,
-            currentMonth: month,
+            currentYear: today.getFullYear(),
+            currentMonth: today.getMonth() + 1,
             month,
             year,
             selectedCalendarType: CalendarType.DAY,
             calendarHeader: getHeaderForCalendarDaysType(month, year),
         };
     },
+    computed: {
+        header() {
+            if (!this.value) return 'Pick a date';
+
+            const day = this.value.getDate();
+            const month = this.value.getMonth();
+            const year = this.value.getFullYear();
+
+            switch (this.selectedCalendarType) {
+            case CalendarType.DAY:
+                return `${day}.${zeroPad(month, 2)}.${year}`;
+            case CalendarType.MONTH: {
+                const monthDesc = Object.values(CALENDAR_MONTHS)[month];
+                return `${monthDesc} ${year}`;
+            }
+            case CalendarType.YEAR:
+                return year;
+            default:
+                return '';
+            }
+        },
+    },
     methods: {
         onDateChange(value) {
             this.$emit('input', value);

components/Inputs/Date/DatePickerHeader.vue

@@ -0,0 +1,36 @@
+/*
+ * Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+ * See LICENSE for license details.
+ */
+/*
+* Copyright © Bold Brand Commerce Sp. z o.o. All rights reserved.
+* See LICENSE for license details.
+*/
+<template>
+    <div class="header">
+        <span v-text="header" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DatePickerHeader',
+    props: {
+        header: {
+            type: [String, Number],
+            required: true,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    .header {
+        @include setFont(medium, small, regular, $graphite);
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 32px;
+    }
+</style>

components/Inputs/Date/DatePickerNavigationHeader.vue

@@ -4,24 +4,26 @@
  */
 <template>
     <div class="date-picker-header">
-        <Button
-            slot="previous"
-            icon="arrow-single trans-quarter"
-            fab
-            color="transparent"
-            ripple-color="rgba(235, 235, 236, 1)"
-            @click.native="onPrevious" />
+        <slot name="previous">
+            <Button
+                icon="arrow-single trans-quarter"
+                fab
+                color="transparent"
+                ripple-color="rgba(235, 235, 236, 1)"
+                @click.native="onPrevious" />
+        </slot>
         <span
             class="header"
             @click="onClick"
             v-text="header" />
-        <Button
-            slot="next"
-            icon="arrow-single trans-three-fourth"
-            fab
-            color="transparent"
-            ripple-color="rgba(235, 235, 236, 1)"
-            @click.native="onNext" />
+        <slot name="next">
+            <Button
+                icon="arrow-single trans-three-fourth"
+                fab
+                color="transparent"
+                ripple-color="rgba(235, 235, 236, 1)"
+                @click.native="onNext" />
+        </slot>
     </div>
 </template>