85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<b-card class="mt-3" header="Create a note">
|
|
<b-form @submit.prevent="createNote">
|
|
|
|
<b-form-group id="title-group" label="Title:" label-for="title">
|
|
<b-form-input
|
|
id="title"
|
|
size="lg"
|
|
v-model="form.title"
|
|
required
|
|
placeholder="Enter a title"
|
|
add-on-change
|
|
></b-form-input>
|
|
</b-form-group>
|
|
|
|
<b-form-group id="tags-group" label="Tags:" label-for="tags">
|
|
<b-form-tags
|
|
input-id="tags"
|
|
v-model="form.tags"
|
|
tag-variant="primary"
|
|
separator=" ,;"
|
|
remove-on-delete
|
|
class="mb-2"
|
|
></b-form-tags>
|
|
</b-form-group>
|
|
|
|
<b-form-group id="content-group" label="Note:" label-for="content">
|
|
<b-form-textarea
|
|
id="content"
|
|
v-model="form.content"
|
|
placeholder="Enter something..."
|
|
rows="3"
|
|
max-rows="50"
|
|
required
|
|
></b-form-textarea>
|
|
</b-form-group>
|
|
|
|
<b-button type="submit" variant="primary">Submit</b-button>
|
|
</b-form>
|
|
|
|
<b-alert :show="error" variant="danger" dismissible class="mt-3">
|
|
An error occurred while creating note
|
|
</b-alert>
|
|
|
|
</b-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Api from '@/api'
|
|
|
|
export default {
|
|
name: "NoteCreationForm",
|
|
data() {
|
|
return {
|
|
form: {
|
|
title: '',
|
|
content: '',
|
|
tags: []
|
|
},
|
|
error: false,
|
|
}
|
|
},
|
|
methods: {
|
|
createNote() {
|
|
this.error = false
|
|
|
|
Api.post('/notes', {
|
|
title: this.form.title,
|
|
content: this.form.content,
|
|
tags: this.form.tags
|
|
})
|
|
.then(response => {
|
|
console.log(response)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
this.error = true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|