From 55f854f3bc24511c8c8335244cdc6e1e420d82b2 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 7 Jun 2019 17:19:30 +0200
Subject: [PATCH] Improved event form creation date & timepickers

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Editor.vue               |  1 -
 js/src/components/Event/DateTimePicker.vue | 33 ++++++++++++++++++++++
 js/src/views/Event/Create.vue              | 18 +++++++++---
 3 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 js/src/components/Event/DateTimePicker.vue

diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index afb05a604..77ed7cbec 100644
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -495,7 +495,6 @@ export default class CreateEvent extends Vue {
 
     .editor {
         position: relative;
-        max-width: 30rem;
         margin: 0 0 1rem;
 
         p.is-empty:first-child::before {
diff --git a/js/src/components/Event/DateTimePicker.vue b/js/src/components/Event/DateTimePicker.vue
new file mode 100644
index 000000000..3862876ad
--- /dev/null
+++ b/js/src/components/Event/DateTimePicker.vue
@@ -0,0 +1,33 @@
+<template>
+    <b-field grouped horizontal :label="label">
+        <b-datepicker expanded v-model="date" :placeholder="$gettext('Click to select')" icon="calendar"></b-datepicker>
+        <b-input expanded type="time" required v-model="time" />
+    </b-field>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+@Component({})
+export default class DateTimePicker extends Vue {
+  @Prop({ required: true, type: Date }) value!: Date;
+  @Prop({ required: false, type: String, default: 'Datetime' }) label!: string;
+  @Prop({ required: false, type: Number, default: 1 }) step!: number;
+
+  date: Date = this.value;
+  time: string = '00:00';
+
+  created() {
+    let minutes = this.value.getHours() * 60 + this.value.getMinutes();
+    minutes = Math.ceil(minutes / this.step) * this.step;
+
+    this.time = [Math.floor(minutes / 60), minutes % 60].map((v) => { return v < 10 ? `0${v}` : v; }).join(':');
+  }
+
+  @Watch('time')
+  updateDateTime(time) {
+    const [hours, minutes] = time.split(':', 2);
+    this.value.setHours(hours);
+    this.value.setMinutes(minutes);
+    this.$emit('input', this.value);
+  }
+}
+</script>
diff --git a/js/src/views/Event/Create.vue b/js/src/views/Event/Create.vue
index 4e3a8d08f..bdbb1b302 100644
--- a/js/src/views/Event/Create.vue
+++ b/js/src/views/Event/Create.vue
@@ -5,12 +5,13 @@
     </h1>
     <div v-if="$apollo.loading">Loading...</div>
     <div class="columns is-centered" v-else>
-      <form class="column is-half" @submit="createEvent">
+      <form class="column is-two-thirds-desktop" @submit="createEvent">
         <b-field :label="$gettext('Title')">
-          <b-input aria-required="true" required v-model="event.title"/>
+          <b-input aria-required="true" required v-model="event.title" maxlength="64" />
         </b-field>
 
-        <b-datepicker v-model="event.beginsOn" inline></b-datepicker>
+        <date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/>
+        <date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" />
 
         <div class="field">
           <label class="label">{{ $gettext('Description') }}</label>
@@ -51,9 +52,10 @@ import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
 import { IPictureUpload } from '@/types/picture.model';
 import Editor from '@/components/Editor.vue';
+import DateTimePicker from '@/components/Event/DateTimePicker.vue';
 
 @Component({
-  components: { PictureUpload, Editor },
+  components: { DateTimePicker, PictureUpload, Editor },
   apollo: {
     loggedPerson: {
       query: LOGGED_PERSON,
@@ -69,6 +71,14 @@ export default class CreateEvent extends Vue {
   pictureFile?: File;
   pictureName?: String;
 
+  created() {
+    const now = new Date();
+    const end = new Date();
+    end.setUTCHours(now.getUTCHours() + 3);
+    this.event.beginsOn = now;
+    this.event.endsOn = end;
+  }
+
   createEvent(e: Event) {
     e.preventDefault();
     this.event.organizerActor = this.loggedPerson;