Improved event form creation date & timepickers

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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 {

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>

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;