Improved event form creation date & timepickers

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-06-07 17:19:30 +02:00
parent 0549b02b3e
commit 55f854f3bc
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 47 additions and 5 deletions

View File

@ -495,7 +495,6 @@ export default class CreateEvent extends Vue {
.editor { .editor {
position: relative; position: relative;
max-width: 30rem;
margin: 0 0 1rem; margin: 0 0 1rem;
p.is-empty:first-child::before { p.is-empty:first-child::before {

View File

@ -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>

View File

@ -5,12 +5,13 @@
</h1> </h1>
<div v-if="$apollo.loading">Loading...</div> <div v-if="$apollo.loading">Loading...</div>
<div class="columns is-centered" v-else> <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-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-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"> <div class="field">
<label class="label">{{ $gettext('Description') }}</label> <label class="label">{{ $gettext('Description') }}</label>
@ -51,9 +52,10 @@ import { IPerson, Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue'; import PictureUpload from '@/components/PictureUpload.vue';
import { IPictureUpload } from '@/types/picture.model'; import { IPictureUpload } from '@/types/picture.model';
import Editor from '@/components/Editor.vue'; import Editor from '@/components/Editor.vue';
import DateTimePicker from '@/components/Event/DateTimePicker.vue';
@Component({ @Component({
components: { PictureUpload, Editor }, components: { DateTimePicker, PictureUpload, Editor },
apollo: { apollo: {
loggedPerson: { loggedPerson: {
query: LOGGED_PERSON, query: LOGGED_PERSON,
@ -69,6 +71,14 @@ export default class CreateEvent extends Vue {
pictureFile?: File; pictureFile?: File;
pictureName?: String; 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) { createEvent(e: Event) {
e.preventDefault(); e.preventDefault();
this.event.organizerActor = this.loggedPerson; this.event.organizerActor = this.loggedPerson;