first work on front events
This commit is contained in:
@@ -1,13 +1,113 @@
|
||||
<template>
|
||||
$END$
|
||||
<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"
|
||||
required />
|
||||
</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"
|
||||
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
|
||||
console.log(this.form)
|
||||
|
||||
// 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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
136
resources/js/views/Event/EventEdit.vue
Normal file
136
resources/js/views/Event/EventEdit.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<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 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"
|
||||
: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"
|
||||
label="Catégorie"
|
||||
:options="categories"
|
||||
class="mr-4"
|
||||
required
|
||||
:selected="String(form.category_id)"
|
||||
@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"
|
||||
required />
|
||||
</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
|
||||
console.log(this.form)
|
||||
// this.loading = false
|
||||
})
|
||||
.catch(errors => {
|
||||
this.errors = errors.response.data.errors
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
submitForm: function () {
|
||||
this.form.private = this.checked
|
||||
console.log(this.form)
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.patch('/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>
|
||||
|
||||
@@ -1,13 +1,58 @@
|
||||
<template>
|
||||
$END$
|
||||
<div class="mx-2 p-2">
|
||||
<div class="flex justify-between items-center flex-wrap flex-center mb-4">
|
||||
<a href="#" class="btn" @click="$router.back()">Back</a>
|
||||
<router-link :to="'/events/create'" class="btn-primary">Add New Event</router-link>
|
||||
</div>
|
||||
<Loader v-if="loading" />
|
||||
<div v-else class="flex flex-wrap -m-2">
|
||||
<div v-if="events === []">
|
||||
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
|
||||
</div>
|
||||
<router-link v-for="event in events" :key="event.data.event_id" :to="'/events/' + event.data.event_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
|
||||
<div class="card sm:max-w-124">
|
||||
<div class="h-full flex flex-col justify-between">
|
||||
<div class="flex justify-between flex-wrap">
|
||||
<h1 class="text-xl text-marine">{{ event.data.attributes.data.name }}</h1>
|
||||
<h2 class="text-sm text-marine">{{ event.data.attributes.data.location }}</h2>
|
||||
</div>
|
||||
<div v-if="event.data.attributes.data.description">{{ event.data.attributes.data.description }}</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.category.data.attributes.data.name }}</span>
|
||||
<span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.start_date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loader from '../../components/Loader'
|
||||
|
||||
export default {
|
||||
name: "EventIndex"
|
||||
name: 'EventIndex',
|
||||
components: {
|
||||
Loader
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
loading: true,
|
||||
events: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.get('/api/events')
|
||||
.then(response => {
|
||||
this.events = response.data.data
|
||||
this.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
console.log('Unable to fetch events.')
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
75
resources/js/views/Event/EventShow.vue
Normal file
75
resources/js/views/Event/EventShow.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="mx-2 p-2">
|
||||
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
|
||||
<div v-if="modal" class="modal">
|
||||
<p class="m-2 text-center">Are you sure you want to delete this record ?</p>
|
||||
<div class="flex justify-center mx-2 my-4">
|
||||
<button class="btn mr-2" @click="modal = ! modal">Cancel</button>
|
||||
<button class="btn-alert" @click="destroy"> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center flex-wrap flex-center mb-4">
|
||||
<a href="#" class="btn" @click="$router.back()">Back</a>
|
||||
<div>
|
||||
<router-link :to="'/events/' + $route.params.id + '/edit'" class="btn-primary">Update Event</router-link>
|
||||
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
<Loader v-if="loading" />
|
||||
<div v-else class="box">
|
||||
<div class="flex justify-between flex-wrap">
|
||||
<h1 class="text-xl text-marine">{{ event.data.attributes.data.name }}</h1>
|
||||
<h2 class="text-sm text-marine">{{ event.data.attributes.data.location }}</h2>
|
||||
</div>
|
||||
|
||||
<div v-if="event.data.attributes.data.description">{{ event.data.attributes.data.description }}</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.category.data.attributes.data.name }}</span>
|
||||
<span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.start_date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loader from '../../components/Loader'
|
||||
|
||||
export default {
|
||||
name: 'EventShow',
|
||||
components: {
|
||||
Loader
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
loading: true,
|
||||
modal: false,
|
||||
event: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.get('/api/events/' + this.$route.params.id)
|
||||
.then(response => {
|
||||
this.event = response.data
|
||||
this.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
console.log('Unable to fetch events.')
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
destroy: function () {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.delete('/api/events/' + this.$route.params.id)
|
||||
.then(() => {
|
||||
this.$router.push('/events')
|
||||
})
|
||||
.catch(errorRes => {
|
||||
console.log('Internal Error, Unable to delete event.' + errorRes)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user