113 lines
4.2 KiB
Vue
113 lines
4.2 KiB
Vue
<template>
|
|
<div class="mx-2 p-2">
|
|
<form @submit.prevent="submitForm">
|
|
<div class="flex justify-between flex-center mb-4">
|
|
<router-link to="/memos/" class="btn">Back</router-link>
|
|
<button class="btn-primary">Add New Memo</button>
|
|
</div>
|
|
<div class="box">
|
|
<InputField name="name"
|
|
label="Nom de l'événement"
|
|
placeholder="Nom de l'événement"
|
|
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"
|
|
required
|
|
@update:field="form.location = $event" :errors="errors" />
|
|
<SelectorField name="category_id"
|
|
label="Catégorie"
|
|
:options="categories"
|
|
class="mr-4"
|
|
required
|
|
@update:field="form.category_id = $event" :errors="errors" />
|
|
<DateTimeField
|
|
class="mr-4"
|
|
label="Date de début"
|
|
name="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"
|
|
@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'
|
|
|
|
export default {
|
|
name: 'EventCreate',
|
|
components: {
|
|
InputField, TextAreaField, CheckBoxField, DateTimeField, SelectorField
|
|
},
|
|
data: function () {
|
|
return {
|
|
checked: true,
|
|
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
|
|
})
|
|
},
|
|
methods: {
|
|
submitForm: function () {
|
|
this.form.private = this.checked
|
|
|
|
// eslint-disable-next-line no-undef
|
|
axios.post('/api/events', this.form)
|
|
.then(response => {
|
|
this.$router.push(response.data.links.self)
|
|
})
|
|
.catch(errors => {
|
|
this.errors = errors.response.data.errors
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
checked: function () {
|
|
console.log(this.checked, this.form)
|
|
this.form.private = this.checked
|
|
}
|
|
}
|
|
}
|
|
</script>
|