From 3fbfaac86c40ecb1a9a383c83610d96ae1879cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 17 Apr 2020 13:53:12 +0200
Subject: [PATCH] Replace calendar browse buttons with dropdown

---
 .../Private/Assets/js/components/Calendar.vue | 55 ++++++++++---------
 .../Private/Assets/scss/remix/_calendar.scss  | 14 ++++-
 .../Private/Templates/AjaxCalendar/Range.html |  1 -
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
index bdc91a15..d72edf40 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
@@ -6,21 +6,14 @@
         <div class="calendar__loading" v-show="loading">
             <img :src="loaderUri" alt="Loading" title="Loading">
         </div>
-        <div class="calendar__inner" v-cloak v-html="calendarHtml"></div>
-        <div class="calendar__buttons" v-cloak>
-            <div class="col-xs-6">
-                <a v-show="showPrev" @click.prevent="prev()" href="#"
-                   class="calendar__browse calendar__browse--prev btn btn-warning">
-                    <i class="fa fa-chevron-left"></i> früher
-                </a>
-            </div>
-            <div class="col-xs-6 text-right">
-                <a @click.prevent="next()" href="#"
-                   class="calendar__browse calendar__browse--next btn btn-warning">
-                    später <i class="fa fa-chevron-right"></i>
-                </a>
-            </div>
+        <div class="col-xs-12">
+            <select class="form-control calendar__select" v-model="selectedMonth" @change="loadCalendar">
+                <option v-for="option in selectableMonths" :value="option" :key="option.format('YYYY')+option.format('M')">
+                    {{ option.format('MMMM YYYY') }}
+                </option>
+            </select>
         </div>
+        <div class="calendar__inner" v-cloak v-html="calendarHtml"></div>
     </div>
 </template>
 <script>
@@ -28,6 +21,7 @@
     import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
+    dayjs.locale('de');
 
     export default {
         props: {
@@ -65,8 +59,8 @@
         },
         data () {
             return {
-                showPrev: false,
                 startDate: dayjs().startOf('month'),
+                selectedMonth: dayjs().startOf('month'),
                 calendarHtml: '',
                 loading: false
             }
@@ -74,40 +68,47 @@
         computed: {
             isSingleCalendar () {
                 return parseInt(this.months) === 1;
+            },
+            selectableMonths() {
+                const months = [];
+                let month = this.startDate.month();
+                let year = this.startDate.year();
+                for (let i = 1; i <= 12; i++) {
+                    months.push(dayjs().set('year', year).set('month', month));
+                    if (month < 12) {
+                        month++;
+                    } else {
+                        month = 1;
+                        year++;
+                    }
+                }
+                return months;
             }
         },
         methods: {
             loadCalendar () {
                 let query = {};
                 query[this.argumentPrefix + '[hotel]'] = this.hotelUid;
-                query[this.argumentPrefix + '[month]'] = this.startDate.month() + 1;
-                query[this.argumentPrefix + '[year]'] = this.startDate.year();
+                query[this.argumentPrefix + '[month]'] = this.selectedMonth.month() + 1;
+                query[this.argumentPrefix + '[year]'] = this.selectedMonth.year();
                 query[this.argumentPrefix + '[months]'] = this.months;
                 this.loading = true;
-                this.showPrev = this.startDate.isAfter(dayjs());
                 axios({
                     url: this.uri,
                     responseType: 'text',
                     params: query
                 }).then((response) => {
                     this.calendarHtml = response.data;
-                    this.loading = false;
                 }).catch(() => {
+                }).finally(() => {
                     this.loading = false;
                 });
-            },
-            next () {
-                this.startDate = this.startDate.add(this.step, 'month');
-                this.loadCalendar();
-            },
-            prev () {
-                this.startDate = this.startDate.subtract(this.step, 'month');
-                this.loadCalendar();
             }
         },
         mounted () {
             Vue.nextTick(() => {
                 this.loadCalendar();
+                this.selectedMonth = this.selectableMonths[0];
             });
         }
     }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss
index 26302041..6f9a81b3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_calendar.scss
@@ -16,6 +16,14 @@
   }
 }
 
+.calendar__select {
+    margin-bottom: 20px;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+}
+
 .calendar__loading {
   position: absolute;
   @include size(100%);
@@ -33,7 +41,11 @@
 }
 
 .calendar__days {
-  min-height: 275px;
+
+  table {
+      margin-bottom: 0;
+  }
+
 }
 
 .label-success-danger {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html
index a1ff061d..f9063135 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxCalendar/Range.html
@@ -18,7 +18,6 @@
         <f:for each="{year}" as="month">
             <ep:calendar.includes range="{range}" period="{month}">
                 <div class="calendar__month col-xs-12{f:if(condition: '{months} > 1', then: ' col-md-6 col-lg-4')}">
-                    <h3 class="calendar__month{f:if(condition: '{months} == 1', then: ' calendar__month--single')}">{month.begin -> f:format.date(format: '%B')} {month.begin -> f:format.date(format: '%Y')}</h3>
                     <div class="calendar__days">
                         <table class="table table-bordered">
                             <tr>