Thomas Citharel
@@ -1,204 +1,65 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-sm>
|
||||
<h3>Create a new event</h3>
|
||||
<v-form>
|
||||
<v-stepper v-model="e1">
|
||||
<v-stepper-header>
|
||||
<v-stepper-step step="1" :complete="e1 > 1" editable>Basic Informations
|
||||
<small>Title and description</small>
|
||||
</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step step="2" :complete="e1 > 2" editable>Date and place</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
|
||||
</v-stepper-header>
|
||||
<v-stepper-items>
|
||||
<v-stepper-content step="1">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
label="Title"
|
||||
v-model="event.title"
|
||||
:counter="100"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>Create a new event</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field
|
||||
label="Description"
|
||||
v-model="event.description"
|
||||
multiLine
|
||||
label="Title"
|
||||
v-model="event.title"
|
||||
:counter="100"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<vue-markdown class="markdown-render"
|
||||
:watches="['show','html','breaks','linkify','emoji','typographer','toc']"
|
||||
:source="event.description"
|
||||
:show="true" :html="false" :breaks="true" :linkify="true"
|
||||
:emoji="true" :typographer="true" :toc="false"
|
||||
></vue-markdown>
|
||||
</v-flex>
|
||||
<v-flex md12>
|
||||
<v-select
|
||||
v-bind:items="categories"
|
||||
v-model="event.category"
|
||||
item-text="title"
|
||||
item-value="@id"
|
||||
label="Categories"
|
||||
single-line
|
||||
bottom
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex md12>
|
||||
<!--<v-text-field
|
||||
v-model="tagsToSend"
|
||||
label="Tags"
|
||||
></v-text-field>-->
|
||||
<v-select
|
||||
v-model="tagsToSend"
|
||||
label="Tags"
|
||||
chips
|
||||
tags
|
||||
:items="tagsFetched"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
|
||||
</v-stepper-content>
|
||||
<v-stepper-content step="2">
|
||||
Event starts at:
|
||||
<v-text-field type="datetime-local" v-model="event.begins_on"></v-text-field>
|
||||
<!--<v-layout row wrap>
|
||||
<v-flex md6>
|
||||
<v-dialog
|
||||
persistent
|
||||
v-model="modals.beginning.date"
|
||||
lazy
|
||||
full-width
|
||||
>
|
||||
<v-text-field
|
||||
slot="activator"
|
||||
label="Beginning of the event date"
|
||||
v-model="event.startDate.date"
|
||||
prepend-icon="event"
|
||||
readonly
|
||||
></v-text-field>
|
||||
<v-date-picker v-model="event.startDate.date" scrollable dateFormat="val => new Date(val).">
|
||||
<template scope="{ save, cancel }">
|
||||
<v-card-actions>
|
||||
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
|
||||
<v-btn flat primary @click.native="save()">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</v-date-picker>
|
||||
</v-dialog>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<v-dialog
|
||||
persistent
|
||||
v-model="modals.beginning.time"
|
||||
lazy
|
||||
>
|
||||
<v-text-field
|
||||
slot="activator"
|
||||
label="Beginning of the event time"
|
||||
v-model="event.startDate.time"
|
||||
prepend-icon="access_time"
|
||||
readonly
|
||||
></v-text-field>
|
||||
<v-time-picker v-model="event.startDate.time" actions format="24h">
|
||||
<template scope="{ save, cancel }">
|
||||
<v-card-actions>
|
||||
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
|
||||
<v-btn flat primary @click.native="save()">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</v-time-picker>
|
||||
</v-dialog>
|
||||
</v-flex>
|
||||
</v-layout>-->
|
||||
Event ends at:
|
||||
<v-text-field type="datetime-local" v-model="event.ends_on"></v-text-field>
|
||||
<!--<v-layout row wrap>
|
||||
<v-flex md6>
|
||||
<v-dialog
|
||||
persistent
|
||||
v-model="modals.end.date"
|
||||
lazy
|
||||
full-width
|
||||
>
|
||||
<v-text-field
|
||||
slot="activator"
|
||||
label="End of the event date"
|
||||
v-model="event.endDate.date"
|
||||
prepend-icon="event"
|
||||
readonly
|
||||
></v-text-field>
|
||||
<v-date-picker v-model="event.endDate.date" scrollable >
|
||||
<template scope="{ save, cancel }">
|
||||
<v-card-actions>
|
||||
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
|
||||
<v-btn flat primary @click.native="save()">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</v-date-picker>
|
||||
</v-dialog>
|
||||
</v-flex>
|
||||
<v-flex md6>
|
||||
<v-dialog
|
||||
persistent
|
||||
v-model="modals.end.time"
|
||||
lazy
|
||||
>
|
||||
<v-text-field
|
||||
slot="activator"
|
||||
label="End of the event time"
|
||||
v-model="event.endDate.time"
|
||||
prepend-icon="access_time"
|
||||
readonly
|
||||
></v-text-field>
|
||||
<v-time-picker v-model="event.endDate.time" format="24h" actions >
|
||||
<template scope="{ save, cancel }">
|
||||
<v-card-actions>
|
||||
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
|
||||
<v-btn flat primary @click.native="save()">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</v-time-picker>
|
||||
</v-dialog>
|
||||
</v-flex>
|
||||
</v-layout>-->
|
||||
|
||||
<vuetify-google-autocomplete
|
||||
id="map"
|
||||
append-icon="search"
|
||||
classname="form-control"
|
||||
placeholder="Start typing"
|
||||
label="Location"
|
||||
enable-geolocation
|
||||
types="geocode"
|
||||
v-on:placechanged="getAddressData"
|
||||
>
|
||||
</vuetify-google-autocomplete>
|
||||
<v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
|
||||
</v-stepper-content>
|
||||
<v-stepper-content step="3">
|
||||
<v-text-field
|
||||
label="Number of seats"
|
||||
v-model="event.seats"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="Price"
|
||||
prefix="$"
|
||||
type="float"
|
||||
v-model="event.price"
|
||||
></v-text-field>
|
||||
</v-stepper-content>
|
||||
</v-stepper-items>
|
||||
</v-stepper>
|
||||
</v-form>
|
||||
<v-btn color="primary" @click="create">Create event</v-btn>
|
||||
<v-radio-group v-model="event.location_type" row>
|
||||
<v-radio label="Address" value="physical" off-icon="place"></v-radio>
|
||||
<v-radio label="Online" value="online" off-icon="link"></v-radio>
|
||||
<v-radio label="Phone" value="phone" off-icon="phone"></v-radio>
|
||||
<v-radio label="Other" value="other"></v-radio>
|
||||
</v-radio-group>
|
||||
<vuetify-google-autocomplete
|
||||
v-if="event.location_type === 'physical'"
|
||||
id="map"
|
||||
append-icon="search"
|
||||
classname="form-control"
|
||||
placeholder="Start typing"
|
||||
label="Location"
|
||||
enable-geolocation
|
||||
types="geocode"
|
||||
v-on:placechanged="getAddressData"
|
||||
>
|
||||
</vuetify-google-autocomplete>
|
||||
<v-text-field
|
||||
v-if="event.location_type === 'online'"
|
||||
label="Meeting adress"
|
||||
type="url"
|
||||
v-model="event.url"
|
||||
:required="event.location_type === 'online'"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-if="event.location_type === 'phone'"
|
||||
label="Phone number"
|
||||
type="tel"
|
||||
v-model="event.phone"
|
||||
:required="event.location_type === 'phone'"
|
||||
></v-text-field>
|
||||
<v-autocomplete
|
||||
:items="categories"
|
||||
v-model="event.category"
|
||||
item-text="title"
|
||||
item-value="id"
|
||||
label="Categories"
|
||||
>
|
||||
</v-autocomplete>
|
||||
<v-btn color="primary" @click="create">Create event</v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -219,29 +80,18 @@
|
||||
return {
|
||||
e1: 0,
|
||||
event: {
|
||||
title: '',
|
||||
description: '',
|
||||
title: null,
|
||||
description: null,
|
||||
begins_on: new Date(),
|
||||
ends_on: new Date(),
|
||||
seats: 0,
|
||||
address: {
|
||||
description: null,
|
||||
floor: null,
|
||||
geo: {
|
||||
type: null,
|
||||
data: {
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
},
|
||||
},
|
||||
addressCountry: null,
|
||||
addressLocality: null,
|
||||
addressRegion: null,
|
||||
postalCode: null,
|
||||
streetAddress: null,
|
||||
},
|
||||
price: 0,
|
||||
seats: null,
|
||||
physical_address: null,
|
||||
location_type: 'physical',
|
||||
online_address: null,
|
||||
tel_num: null,
|
||||
price: null,
|
||||
category: null,
|
||||
category_id: null,
|
||||
tags: [],
|
||||
participants: [],
|
||||
},
|
||||
@@ -262,31 +112,35 @@
|
||||
},
|
||||
methods: {
|
||||
create() {
|
||||
this.event.seats = parseInt(this.event.seats, 10);
|
||||
this.tagsToSend.forEach((tag) => {
|
||||
this.event.tags.push({
|
||||
title: tag,
|
||||
// '@type': 'Tag',
|
||||
});
|
||||
});
|
||||
this.event.category_id = this.event.category.id;
|
||||
// this.event.seats = parseInt(this.event.seats, 10);
|
||||
// this.tagsToSend.forEach((tag) => {
|
||||
// this.event.tags.push({
|
||||
// title: tag,
|
||||
// // '@type': 'Tag',
|
||||
// });
|
||||
// });
|
||||
this.event.category_id = this.event.category;
|
||||
this.event.organizer_actor_id = this.$store.state.user.actor.id;
|
||||
this.event.participants = [this.$store.state.user.actor.id];
|
||||
this.event.price = parseFloat(this.event.price);
|
||||
// this.event.price = parseFloat(this.event.price);
|
||||
|
||||
if (this.id === undefined) {
|
||||
eventFetch('/events', this.$store, {method: 'POST', body: JSON.stringify({ event: this.event })})
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
this.loading = false;
|
||||
this.$router.push({name: 'Event', params: {id: data.id}});
|
||||
this.$router.push({name: 'Event', params: {uuid: data.uuid}});
|
||||
}).catch((err) => {
|
||||
Promise.resolve(err).then((err) => {
|
||||
console.log('err creation', err);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
eventFetch(`/events/${this.id}`, this.$store, {method: 'PUT', body: JSON.stringify(this.event)})
|
||||
eventFetch(`/events/${this.uuid}`, this.$store, {method: 'PUT', body: JSON.stringify(this.event)})
|
||||
.then(response => response.json())
|
||||
.then((data) => {
|
||||
this.loading = false;
|
||||
this.$router.push({name: 'Event', params: {id: data.id}});
|
||||
this.$router.push({name: 'Event', params: {uuid: data.uuid}});
|
||||
});
|
||||
}
|
||||
this.event.tags = [];
|
||||
|
||||
@@ -48,10 +48,10 @@
|
||||
>
|
||||
</v-avatar>
|
||||
</router-link>
|
||||
<span v-if="event.organizer">Organisé par {{ event.organizer.display_name }}</span>
|
||||
<span v-if="event.organizer">Organisé par {{ event.organizer.display_name ? event.organizer.display_name : event.organizer.username }}</span>
|
||||
</div>
|
||||
<p>
|
||||
<vue-markdown :source="event.description" />
|
||||
<vue-markdown :source="event.description" v-if="event.description" />
|
||||
</p>
|
||||
<!--<p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey--text">{{ event.organizer.username }}</span></router-link> organises {{ event.title }} <span v-if="event.address.addressLocality">in {{ event.address.addressLocality }}</span> on the {{ event.startDate | formatDate }}.</p>
|
||||
<v-card-text v-if="event.description"><vue-markdown :source="event.description"></vue-markdown></v-card-text>-->
|
||||
|
||||
Reference in New Issue
Block a user