|
|
@ -1,7 +1,6 @@ |
|
|
|
<template> |
|
|
|
<editor |
|
|
|
v-if="current" |
|
|
|
v-model="editorText" |
|
|
|
v-model="project.guideline" |
|
|
|
preview-style="vertical" |
|
|
|
height="inherit" |
|
|
|
:options="editorOptions" |
|
|
@ -9,52 +8,48 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import _ from 'lodash' |
|
|
|
import 'tui-editor/dist/tui-editor.css' |
|
|
|
import 'tui-editor/dist/tui-editor-contents.css' |
|
|
|
import 'codemirror/lib/codemirror.css' |
|
|
|
import { Editor } from '@toast-ui/vue-editor' |
|
|
|
import { mapState, mapActions } from 'vuex' |
|
|
|
import '@/assets/style/editor.css' |
|
|
|
|
|
|
|
export default { |
|
|
|
layout: 'project', |
|
|
|
|
|
|
|
components: { |
|
|
|
Editor |
|
|
|
}, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
editorOptions: { |
|
|
|
language: this.$t('toastui.localeCode') |
|
|
|
} |
|
|
|
}, |
|
|
|
project: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
validate({ params }) { |
|
|
|
return /^\d+$/.test(params.id) |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
...mapState('projects', ['current']), |
|
|
|
|
|
|
|
editorText: { |
|
|
|
get() { |
|
|
|
return this.current.guideline |
|
|
|
}, |
|
|
|
set(value) { |
|
|
|
const data = { |
|
|
|
projectId: this.$route.params.id, |
|
|
|
guideline: value |
|
|
|
} |
|
|
|
this.updateCurrentProject(data) |
|
|
|
} |
|
|
|
watch: { |
|
|
|
'project.guideline'() { |
|
|
|
this.updateProject() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
async created() { |
|
|
|
await this.setCurrentProject(this.$route.params.id) |
|
|
|
const projectId = this.$route.params.id |
|
|
|
this.project = await this.$services.project.findById(projectId) |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
...mapActions('projects', ['setCurrentProject', 'updateCurrentProject']) |
|
|
|
updateProject: _.debounce(function() { |
|
|
|
this.$services.project.update(this.project) |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
|
|
|
|
validate({ params }) { |
|
|
|
return /^\d+$/.test(params.id) |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|