From 3358da34f913208f5a0ccb5f238ce91b26ffc369 Mon Sep 17 00:00:00 2001
From: Leo Mouyna <mouynaleo@gmail.com>
Date: Tue, 10 Dec 2019 00:10:12 +0100
Subject: [PATCH] fix: end datetime can't be before begin datetime.

Add a min-datetime to endsOn.
Add maxDatetime and minDatetime props to or custom datetime-picker component.
Use those new props inside date-picker and time-picker components to set
a correct range of date for both endsOn and beginsOn event elements.

See issue: #308.
---
 js/src/components/Event/DateTimePicker.vue | 29 +++++++++++-----------
 js/src/views/Event/Edit.vue                |  6 ++---
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/js/src/components/Event/DateTimePicker.vue b/js/src/components/Event/DateTimePicker.vue
index cc6f89dcd..6b4dc2358 100644
--- a/js/src/components/Event/DateTimePicker.vue
+++ b/js/src/components/Event/DateTimePicker.vue
@@ -22,8 +22,9 @@
                         :day-names="localeShortWeekDayNamesProxy"
                         :month-names="localeMonthNamesProxy"
                         :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
-                        :min-date="minDate"
-                        v-model="dateWithoutTime"
+                        :min-date="minDatetime"
+                        :max-date="maxDatetime"
+                        v-model="dateWithTime"
                         :placeholder="$t('Click to select')"
                         :years-range="[-2,10]"
                         icon="calendar"
@@ -33,6 +34,8 @@
                         placeholder="Type or select a time..."
                         icon="clock"
                         v-model="dateWithTime"
+                        :min-time="minDatetime"
+                        :max-time="maxDatetime"
                         size="is-small"
                         inline>
                 </b-timepicker>
@@ -65,23 +68,21 @@ export default class DateTimePicker extends Vue {
     /**
      * Earliest date available for selection
      */
-  @Prop({ required: false, type: Date, default: null }) minDate!: Date;
+  @Prop({ required: false, type: Date, default: null }) minDatetime!: Date;
 
-  dateWithoutTime: Date = this.value;
-  dateWithTime: Date = this.dateWithoutTime;
+      /**
+     * Latest date available for selection
+     */
+  @Prop({ required: false, type: Date, default: null }) maxDatetime!: Date;
+
+  dateWithTime: Date = this.value;
 
   localeShortWeekDayNamesProxy = localeShortWeekDayNames();
   localeMonthNamesProxy = localeMonthNames();
 
   @Watch('value')
   updateValue() {
-    this.dateWithoutTime = this.value;
-    this.dateWithTime = this.dateWithoutTime;
-  }
-
-  @Watch('dateWithoutTime')
-  updateDateWithoutTimeWatcher() {
-    this.updateDateTime();
+    this.dateWithTime = this.value;
   }
 
   @Watch('dateWithTime')
@@ -95,9 +96,7 @@ export default class DateTimePicker extends Vue {
      *
      * @type {Date}
      */
-    this.dateWithoutTime.setHours(this.dateWithTime.getHours());
-    this.dateWithoutTime.setMinutes(this.dateWithTime.getMinutes());
-    this.$emit('input', this.dateWithoutTime);
+    this.$emit('input', this.dateWithTime);
   }
 }
 </script>
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 209091676..990d5a3b4 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -22,7 +22,7 @@
           <tag-input v-model="event.tags" :data="tags" path="title" />
 
           <date-time-picker v-model="event.beginsOn" :label="$t('Starts on…')" />
-          <date-time-picker :min-date="minDateForEndsOn" v-model="event.endsOn" :label="$t('Ends on…')" />
+          <date-time-picker :min-datetime="event.beginsOn" v-model="event.endsOn" :label="$t('Ends on…')" />
 <!--          <b-switch v-model="endsOnNull">{{ $t('No end date') }}</b-switch>-->
           <b-button type="is-text" @click="dateSettingsIsOpen = true">{{ $t('Date parameters')}}</b-button>
 
@@ -625,7 +625,7 @@ export default class EditEvent extends Vue {
     return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent);
   }
 
-  get beginsOn() { return this.event.beginsOn; }
+  get beginsOn(): Date { return this.event.beginsOn; }
 
   @Watch('beginsOn', { deep: true })
   onBeginsOnChanged(beginsOn) {
@@ -634,7 +634,7 @@ export default class EditEvent extends Vue {
     const dateEndsOn = new Date(this.event.endsOn);
     if (dateEndsOn < dateBeginsOn) {
       this.event.endsOn = dateBeginsOn;
-      this.event.endsOn.setHours(dateEndsOn.getHours());
+      this.event.endsOn.setHours(dateBeginsOn.getHours() + 1);
     }
     if (dateEndsOn === dateBeginsOn) {
       this.event.endsOn.setHours(dateEndsOn.getHours() + 1);