138 lines
5.3 KiB
Vue
138 lines
5.3 KiB
Vue
<template>
|
|
<div class="mx-2 p-2">
|
|
<Loader v-if="loading" />
|
|
<form v-else @submit.prevent="submitForm">
|
|
<div class="flex justify-between flex-center mb-4">
|
|
<router-link to="/memos/" class="btn">Back</router-link>
|
|
<button type="submit" class="btn-primary">Update Event</button>
|
|
</div>
|
|
<div class="box">
|
|
<InputField name="name"
|
|
label="Nom de l'événement"
|
|
placeholder="Nom de l'événement"
|
|
:data="form.name"
|
|
required
|
|
@update:field="form.name = $event" :errors="errors" />
|
|
<CheckBoxField :check-it="!!(checked)"
|
|
label="Privé"
|
|
@update:field="checked = $event"
|
|
class="block mb-2" />
|
|
<div class="flex">
|
|
<InputField name="location"
|
|
label="Lieu"
|
|
placeholder="Lieu"
|
|
class="w-64 mr-4"
|
|
:data="form.location"
|
|
required
|
|
@update:field="form.location = $event" :errors="errors" />
|
|
<SelectorField name="category_id"
|
|
v-if="form.category_id"
|
|
label="Catégorie"
|
|
:options="categories"
|
|
class="mr-4"
|
|
required
|
|
:selected="form.category_id"
|
|
@update:field="form.category_id = $event" :errors="errors" />
|
|
<DateTimeField
|
|
class="mr-4"
|
|
label="Date de début"
|
|
name="start_date"
|
|
:selected="form.start_date"
|
|
required
|
|
@update:field="form.start_date = $event" :errors="errors" />
|
|
<DateTimeField
|
|
label="Date de fin"
|
|
name="end_date"
|
|
@update:field="form.end_date = $event" :errors="errors" />
|
|
</div>
|
|
<TextAreaField name="description"
|
|
label="Description"
|
|
placeholder="Your Description"
|
|
:data="form.description"
|
|
@update:field="form.description = $event" :errors="errors" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import InputField from '../../components/Form/InputField'
|
|
import TextAreaField from '../../components/Form/TextAreaField'
|
|
import CheckBoxField from '../../components/Form/CheckBoxField'
|
|
import DateTimeField from '../../components/Form/DateTimeField'
|
|
import SelectorField from '../../components/Form/SelectorField'
|
|
import Loader from '../../components/Loader'
|
|
|
|
export default {
|
|
name: 'EventEdit',
|
|
components: {
|
|
InputField, TextAreaField, CheckBoxField, DateTimeField, SelectorField, Loader
|
|
},
|
|
data: function () {
|
|
return {
|
|
loading: false,
|
|
checked: true,
|
|
event: null,
|
|
categories: [],
|
|
form: {
|
|
'category_id': '',
|
|
'name': '',
|
|
'private': '',
|
|
'description': '',
|
|
'start_date': '',
|
|
'end_date': '',
|
|
'location': '',
|
|
},
|
|
errors: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.form.private = this.checked
|
|
|
|
// eslint-disable-next-line no-undef
|
|
axios.get('/api/events/categories')
|
|
.then(response => {
|
|
response.data.data.forEach(item => this.categories.push({value: item.data.event_category_id, label: item.data.attributes.data.name}))
|
|
})
|
|
.catch(errors => {
|
|
this.errors = errors.response.data.errors
|
|
})
|
|
|
|
// eslint-disable-next-line no-undef
|
|
axios.get('/api/events/' + this.$route.params.id)
|
|
.then(response => {
|
|
this.event = response.data
|
|
this.form = this.event.data.attributes.data
|
|
this.form.description = this.event.data.attributes.data.description
|
|
this.form.category_id = this.event.data.attributes.data.category.data.event_category_id
|
|
})
|
|
.catch(errors => {
|
|
this.errors = errors.response.data.errors
|
|
})
|
|
},
|
|
methods: {
|
|
submitForm: function () {
|
|
this.form.private = this.checked
|
|
delete this.form.category
|
|
delete this.form.invitations
|
|
delete this.form['invitations-with-email']
|
|
|
|
// eslint-disable-next-line no-undef
|
|
axios.patch('/api/events/' + this.event.data.event_id, this.form)
|
|
.then(response => {
|
|
this.$router.push(response.data.links.self)
|
|
})
|
|
.catch(errors => {
|
|
this.errors = errors.response.data.errors
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
checked: function () {
|
|
this.form.private = this.checked
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|