From 131279b1202cd1d24972fb93e49f83f93884d687 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Fri, 14 Sep 2018 07:48:51 +0200
Subject: [PATCH] Migrate to flatpicker

---
 package-lock.json                             |  5 ---
 package.json                                  |  1 -
 .../Assets/js/components/Configurator.vue     |  1 -
 .../Assets/js/components/DateInput.vue        | 35 +++++++++----------
 .../Assets/js/components/DateRangeInput.vue   |  8 ++---
 .../Assets/js/components/InquiryForm.vue      |  1 -
 .../Assets/js/components/StepInput.vue        |  1 -
 .../Resources/Private/Assets/js/main.js       |  1 +
 .../Private/Assets/scss/_configurator.scss    |  2 --
 .../Private/Assets/scss/_datepicker.scss      |  3 ++
 .../Resources/Private/Assets/scss/main.scss   |  1 +
 11 files changed, 25 insertions(+), 34 deletions(-)
 create mode 100644 web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_datepicker.scss

diff --git a/package-lock.json b/package-lock.json
index a88ea6fd..f76d2702 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,6 @@
       "resolved": "https://registry.npmjs.org/@fancyapps/fancybox/-/fancybox-3.3.5.tgz",
       "integrity": "sha512-/sO9o/zeQhWN1OMRlVOWpElN56Ww/aSNks5a7PZ7JKM6I5jeih6CxaCeeOp8jgJXVfElbWOO2KTAMT/7tICNcQ=="
     },
-    "@fengyuanchen/datepicker": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@fengyuanchen/datepicker/-/datepicker-0.6.5.tgz",
-      "integrity": "sha512-+HwjRUBilmoG+SnhQbbInsBSyvRMRUBZMX2hbHuqonYmp+zY70U9HrHU1TAqrMFjZ0JwoAiGQbQ65H4zKtmLvQ=="
-    },
     "@symfony/webpack-encore": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-0.19.0.tgz",
diff --git a/package.json b/package.json
index 80a77645..e7999da0 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@fancyapps/fancybox": "^3.2.5",
-    "@fengyuanchen/datepicker": "^0.6.5",
     "bootstrap-sass": "^3.3.7",
     "bourbon": "^4.3.2",
     "cookieconsent": "^3.1.0",
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/Configurator.vue b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/Configurator.vue
index 1c32dae3..5735728e 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/Configurator.vue
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/Configurator.vue
@@ -1,5 +1,4 @@
 <script>
-    import Vue from 'vue'
     import $ from 'jquery'
 
     import StepInput from './StepInput.vue'
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateInput.vue b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateInput.vue
index 3bf05aa6..72c6be40 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateInput.vue
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateInput.vue
@@ -6,7 +6,9 @@
 <script>
     import $ from 'jquery'
     import Vue from 'vue'
-    import datepicker from '@fengyuanchen/datepicker'
+    import dayjs from 'dayjs'
+    import flatpickr from 'flatpickr'
+    import { German } from 'flatpickr/dist/l10n/de'
 
     export default {
         props: {
@@ -24,28 +26,26 @@
         },
         data () {
             return {
+                picker: null,
                 date: null
             }
         },
         methods: {
             initPicker () {
-                let $field = $(this.$refs.field);
                 Vue.nextTick(() => {
-                    $field.datepicker({
-                        autoHide: true,
-                        language: 'de-DE',
-                        format: 'dd.mm.yy',
-                        weekStart: 1,
-                        days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-                        daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-                        daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-                        months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
-                            'Oktober', 'November', 'Dezember'],
-                        monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov',
-                            'Dez'],
-                    }).on('pick.datepicker', (event) => {
-                        this.date = $field.datepicker('formatDate', event.date);
+                    this.picker = $(this.$refs.field).flatpickr({
+                        dateFormat: 'd.m.Y',
+                        locale: German,
+                        onChange: (selectedDates) => {
+                            if (selectedDates.length) {
+                                this.date = selectedDates[0];
+                                this.$emit('picked', { field: this.name, value: dayjs(this.date).format('DD.MM.YYYY') });
+                            }
+                        }
                     });
+                    if (this.defaultDate) {
+                        this.picker.setDate(new Date(this.defaultDate));
+                    }
                 });
             }
         },
@@ -54,9 +54,6 @@
                 if (value) {
                     this.date = value;
                 }
-            },
-            date (value) {
-                this.$emit('picked', { field: this.name, value: value });
             }
         },
         mounted () {
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateRangeInput.vue b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateRangeInput.vue
index e5a39ef0..40983d2c 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateRangeInput.vue
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateRangeInput.vue
@@ -2,13 +2,13 @@
     <div class="daterange-input">
         <date-input class="daterange-input__field"
                     name="from" placeholder="von"
-                    v-bind:default-date="defaultDateFrom"
-                    v-on:picked="updateRange"></date-input>
+                    :default-date="defaultDateFrom"
+                    @picked="updateRange"></date-input>
         <span class="daterange-input__divider">-</span>
         <date-input class="daterange-input__field"
                     name="to" placeholder="bis"
-                    v-bind:default-date="defaultDateTo"
-                    v-on:picked="updateRange"></date-input>
+                    :default-date="defaultDateTo"
+                    @picked="updateRange"></date-input>
     </div>
 </template>
 <script>
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/InquiryForm.vue b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/InquiryForm.vue
index 85487bba..5b3338fc 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/InquiryForm.vue
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/InquiryForm.vue
@@ -1,6 +1,5 @@
 <script>
     const $ = require('jquery');
-    const Vue = require('vue');
 
     require('../../images/spinner_box.gif');
     require('../../images/spinner_default.gif');
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/StepInput.vue b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/StepInput.vue
index deca477e..38217003 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/StepInput.vue
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/StepInput.vue
@@ -11,7 +11,6 @@
 </template>
 <script>
     const $ = require('jquery');
-    const Vue = require('vue');
 
     export default {
         props: {
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/main.js b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/main.js
index bf2d1033..144555af 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/main.js
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/main.js
@@ -7,6 +7,7 @@ require.context('../images', true, /\.(png|gif|svg|ico)$/);
 require('normalize.css/normalize.css');
 require('slick-carousel/slick/slick.css');
 require('cookieconsent/build/cookieconsent.min.css');
+require('flatpickr/dist/flatpickr.css');
 
 // Require main app
 require('./app');
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_configurator.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_configurator.scss
index 19608942..1187b882 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_configurator.scss
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_configurator.scss
@@ -1,5 +1,3 @@
-@import "~@fengyuanchen/datepicker/dist/datepicker.css";
-
 .configurator {
     background: url(../images/bg_configurator.jpg) no-repeat top left;
     background-size: cover;
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_datepicker.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_datepicker.scss
new file mode 100644
index 00000000..af38947d
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_datepicker.scss
@@ -0,0 +1,3 @@
+.flatpickr-months .flatpickr-month {
+  height: 40px;
+}
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss
index 30a44235..828a5fa9 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss
@@ -37,3 +37,4 @@ $output-bourbon-deprecation-warnings: false;
 @import "search";
 @import "paginator";
 @import "news";
+@import "datepicker";