mobilizon/js/src/views/Event/Create.vue

185 lines
5.1 KiB
Vue
Raw Normal View History

<template>
<section class="container">
<h1 class="title">
<translate>Create a new event</translate>
</h1>
<div v-if="$apollo.loading">Loading...</div>
<div class="columns is-centered" v-else>
<form class="column is-two-thirds-desktop" @submit="createEvent">
<picture-upload v-model="pictureFile" />
<b-field :label="$gettext('Title')">
<b-input aria-required="true" required v-model="event.title" maxlength="64" />
</b-field>
<tag-input v-model="event.tags" :data="tags" path="title" />
<address-auto-complete v-model="event.physicalAddress" />
<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>
<editor v-model="event.description" />
</div>
<b-field :label="$gettext('Category')">
<b-select placeholder="Select a category" v-model="event.category">
<option
v-for="category in categories"
:value="category"
:key="category"
>{{ $gettext(category) }}</option>
</b-select>
</b-field>
<button class="button is-primary">
<translate>Create my event</translate>
</button>
</form>
</div>
</section>
</template>
<script lang="ts">
// import Location from '@/components/Location';
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
import { Component, Prop, Vue } from 'vue-property-decorator';
import {
Category,
IEvent,
EventModel,
} from '@/types/event.model';
import { LOGGED_PERSON } from '@/graphql/actor';
2019-04-26 15:22:16 +02:00
import { IPerson, Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue';
import Editor from '@/components/Editor.vue';
import DateTimePicker from '@/components/Event/DateTimePicker.vue';
import TagInput from '@/components/Event/TagInput.vue';
import { TAGS } from '@/graphql/tags';
import { ITag } from '@/types/tag.model';
import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
@Component({
components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor },
apollo: {
loggedPerson: {
query: LOGGED_PERSON,
},
tags: {
query: TAGS,
},
},
})
export default class CreateEvent extends Vue {
@Prop({ required: false, type: String }) uuid!: string;
loggedPerson: IPerson = new Person();
categories: string[] = Object.keys(Category);
event: IEvent = new EventModel();
pictureFile: File | null = null;
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();
if (this.event.uuid === '') {
console.log('event', this.event);
this.$apollo
.mutate({
mutation: CREATE_EVENT,
variables: this.buildVariables(),
})
.then(data => {
console.log('event created', data);
this.$router.push({
name: 'Event',
params: { uuid: data.data.createEvent.uuid },
});
})
.catch(error => {
console.error(error);
});
} else {
this.$apollo
.mutate({
mutation: EDIT_EVENT,
})
.then(data => {
this.$router.push({
name: 'Event',
params: { uuid: data.data.uuid },
});
})
.catch(error => {
console.error(error);
});
}
}
/**
* Build variables for Event GraphQL creation query
*/
private buildVariables() {
/**
* Transform general variables
*/
let pictureObj = {};
const obj = {
organizerActorId: this.loggedPerson.id,
beginsOn: this.event.beginsOn.toISOString(),
2019-08-13 08:43:37 +02:00
tags: this.event.tags.map((tag: ITag) => tag.title),
};
2019-08-13 08:43:37 +02:00
const res = Object.assign({}, this.event, obj);
if (this.event.physicalAddress) {
delete this.event.physicalAddress['__typename'];
}
/**
* Transform picture files
*/
if (this.pictureFile) {
pictureObj = {
picture: {
picture: {
name: this.pictureFile.name,
file: this.pictureFile,
},
},
};
}
return Object.assign({}, res, pictureObj);
}
// getAddressData(addressData) {
// if (addressData !== null) {
// this.event.address = {
// geom: {
// data: {
// latitude: addressData.latitude,
// longitude: addressData.longitude
// },
// type: "point"
// },
// addressCountry: addressData.country,
// addressLocality: addressData.locality,
// addressRegion: addressData.administrative_area_level_1,
// postalCode: addressData.postal_code,
// streetAddress: `${addressData.street_number} ${addressData.route}`
// };
// }
// }
}
</script>