Improved event form creation date & timepickers
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
0549b02b3e
commit
55f854f3bc
|
@ -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 {
|
||||
|
|
33
js/src/components/Event/DateTimePicker.vue
Normal file
33
js/src/components/Event/DateTimePicker.vue
Normal 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>
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue