83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
|
<v-col cols="12">
|
|
<v-card color="secondary">
|
|
<v-card-title class="text-center justify-center py-6">
|
|
<h1 class="font-weight-bold headline white--text">
|
|
Create a note
|
|
</h1>
|
|
<v-spacer />
|
|
<v-switch v-model="preview"></v-switch>
|
|
</v-card-title>
|
|
<v-card flat>
|
|
<v-card-text>
|
|
<v-textarea
|
|
v-if="!preview"
|
|
v-model="text"
|
|
autocapitalize="off"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
autocorrect="off"
|
|
label="Text"
|
|
auto-grow
|
|
></v-textarea>
|
|
<client-only v-else>
|
|
<!-- html is sanitized -->
|
|
<!-- eslint-disable-next-line -->
|
|
<div class="html" v-html="html" />
|
|
</client-only>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-card>
|
|
</v-col>
|
|
</template>
|
|
|
|
<script>
|
|
import markdown from '~/utils/markdown'
|
|
|
|
export default {
|
|
name: 'Create',
|
|
data: () => ({
|
|
delimiters: [' ', ','],
|
|
form: {
|
|
title: '',
|
|
tags: [],
|
|
},
|
|
text: '',
|
|
possibleTags: [],
|
|
conflict: false,
|
|
preview: false,
|
|
}),
|
|
computed: {
|
|
html() {
|
|
return markdown(this.text)
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$axios.get('/tags').then((e) => (this.possibleTags = e.data))
|
|
},
|
|
methods: {
|
|
createNote() {
|
|
this.conflict = false
|
|
this.$axios
|
|
.post(`/notes/${this.form.title}`, {
|
|
tags: this.form.tags,
|
|
})
|
|
.then((_) => {
|
|
this.$router.push('/notes')
|
|
})
|
|
.catch((e) => {
|
|
if (e.response && e.response.status === 409) {
|
|
this.conflict = true
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.html h1 {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
</style>
|