127 lines
4.0 KiB
Vue
127 lines
4.0 KiB
Vue
<template>
|
|
<v-container fluid grid-list-md>
|
|
<h3>Update event {{ event.title }}</h3>
|
|
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
|
|
<v-form v-if="!loading">
|
|
<v-stepper v-model="e1" vertical>
|
|
<v-stepper-step step="1" :complete="e1 > 1">Basic Informations
|
|
<small>Title and description</small>
|
|
</v-stepper-step>
|
|
<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-text-field
|
|
label="Description"
|
|
v-model="event.description"
|
|
multiLine
|
|
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="name"
|
|
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-step step="2" :complete="e1 > 2">Date and place</v-stepper-step>
|
|
<v-stepper-content step="2">
|
|
Event starts at:
|
|
<v-text-field type="datetime-local" v-model="event.startDate"></v-text-field>
|
|
Event ends at:
|
|
<v-text-field type="datetime-local" v-model="event.endDate"></v-text-field>
|
|
|
|
<vuetify-google-autocomplete
|
|
id="map"
|
|
append-icon="search"
|
|
placeholder="Start typing"
|
|
label="Location"
|
|
enable-geolocation
|
|
v-on:placechanged="getAddressData"
|
|
>
|
|
</vuetify-google-autocomplete>
|
|
<v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
|
|
</v-stepper-content>
|
|
<v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
|
|
<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>
|
|
</v-form>
|
|
<v-btn color="primary" @click="create">Create event</v-btn>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import eventFetch from '@/api/eventFetch';
|
|
|
|
export default {
|
|
props: ['id'],
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
event: null,
|
|
};
|
|
},
|
|
created() {
|
|
this.fetchData();
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
eventFetch(`/events/${this.id}`, this.$store)
|
|
.then(response => response.json())
|
|
.then((data) => {
|
|
this.loading = false;
|
|
this.event = data;
|
|
console.log(this.event);
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|