81 lines
2.6 KiB
Vue
Executable File
81 lines
2.6 KiB
Vue
Executable File
<template>
|
|
<div class="memo-edit">
|
|
<div class="relative">
|
|
<UploadableImage
|
|
v-if="!loading"
|
|
:image-width=1500
|
|
:image-height=500
|
|
location="cover"
|
|
:image="form.attributes.cover_image"
|
|
:author="form.attributes.posted_by"
|
|
:id="form.memo_id"
|
|
:model="form.type"
|
|
classes="cover"
|
|
:alt="form.name"/>
|
|
</div>
|
|
<div class="mx-2 p-2">
|
|
<form @submit.prevent="submitForm">
|
|
<div class="flex justify-between mb-4">
|
|
<router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
|
|
<button class="btn-primary">Save</button>
|
|
</div>
|
|
<div class="box">
|
|
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
|
|
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import InputField from '../../components/Form/InputField'
|
|
import TextAreaField from '../../components/Form/TextAreaField'
|
|
import UploadableImage from '../../components/Form/UploadableImage'
|
|
|
|
export default {
|
|
name: 'MemoEdit',
|
|
components: {
|
|
InputField, TextAreaField, UploadableImage
|
|
},
|
|
data: function () {
|
|
return {
|
|
form: {
|
|
'name': '',
|
|
'memo': '',
|
|
'attributes': {}
|
|
},
|
|
errors: null,
|
|
loading: true,
|
|
}
|
|
},
|
|
methods: {
|
|
submitForm: function () {
|
|
// eslint-disable-next-line no-undef
|
|
axios.patch('/api/memos/' + this.$route.params.id, this.form)
|
|
.then(response => {
|
|
this.$router.push(response.data.links.self)
|
|
})
|
|
.catch(errors => {
|
|
this.errors = errors.response.data.errors
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
// eslint-disable-next-line no-undef
|
|
axios.get('/api/memos/' + this.$route.params.id)
|
|
.then(response => {
|
|
this.form = response.data.data
|
|
this.loading = false
|
|
})
|
|
.catch(error => {
|
|
this.loading = false
|
|
if (error.response.status === 404) {
|
|
this.$router.back()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|