|
|
|
<template>
|
|
|
|
<div v-if="loading" class="loading">
|
|
|
|
<p>Loading...</p>
|
|
|
|
</div>
|
|
|
|
<div v-else class="textnode">
|
|
|
|
<!--pre>TextNode {{item}} {{typeof(item)}}</pre-->
|
|
|
|
<div v-if="editorShow">
|
|
|
|
<component v-bind:is="editorComponent" :editor="editor" v-model="currentText" :config="editorConfig"></component>
|
|
|
|
<button v-on:click="updateText">Uložit</button>
|
|
|
|
<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
|
|
|
|
</div>
|
|
|
|
<div v-else v-bind:class="changedObject">
|
|
|
|
<button v-on:click="editorShow=!editorShow">Upravit</button>
|
|
|
|
<p v-html="currentText"></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
|
|
|
|
import CKEditor from '@ckeditor/ckeditor5-vue';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'TextNode',
|
|
|
|
data: () => ({
|
|
|
|
loading: false,
|
|
|
|
editor: ClassicEditor,
|
|
|
|
editorData: '<p>Content of the editor.</p>',
|
|
|
|
editorConfig: {
|
|
|
|
// The configuration of the editor.
|
|
|
|
},
|
|
|
|
editorShow: false,
|
|
|
|
editorComponent: CKEditor.component,
|
|
|
|
currentText: "",// this.item.node.text.na_web,
|
|
|
|
originalText: "",// this.item.node.text.na_web,
|
|
|
|
}),
|
|
|
|
computed: {
|
|
|
|
changedObject: function () {
|
|
|
|
//console.log(this.currentText);
|
|
|
|
//console.log(this.originalText);
|
|
|
|
return {
|
|
|
|
changed: this.currentText !== this.originalText,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
item: Object,
|
|
|
|
editorShow: Boolean,
|
|
|
|
create: Boolean,
|
|
|
|
where: String,
|
|
|
|
refnode: Object
|
|
|
|
},
|
|
|
|
mounted: function() {
|
|
|
|
//console.log("mounted");
|
|
|
|
if (this.create){
|
|
|
|
this.currentText = "";
|
|
|
|
this.originalText = "";
|
|
|
|
this.editorShow = true;
|
|
|
|
} else {
|
|
|
|
this.currentText = this.item.node.text.na_web;
|
|
|
|
this.originalText = this.item.node.text.na_web;
|
|
|
|
|
|
|
|
}
|
|
|
|
//this.getText();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getText: function() {
|
|
|
|
this.loading = true;
|
|
|
|
console.log(this.item);
|
|
|
|
console.log(this.item.node.text);
|
|
|
|
axios.get('/treenode/text/'+this.item.node.text)
|
|
|
|
.then((response) => {
|
|
|
|
this.text = response.data.na_web;
|
|
|
|
this.loading = false;
|
|
|
|
})
|
|
|
|
.catch((err) => {
|
|
|
|
this.loading = false;
|
|
|
|
console.log(err);
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
updateText: function() {
|
|
|
|
console.log("Saving text");
|
|
|
|
console.log(this.currentText);
|
|
|
|
if (this.create){
|
|
|
|
console.log(this.refnode);
|
|
|
|
console.log(this.where);
|
|
|
|
axios.post('/api/textnode/',{
|
|
|
|
'text': { 'na_web': this.currentText},
|
|
|
|
'refnode': this.refnode.id,
|
|
|
|
'where': this.where
|
|
|
|
}).then(response => {this.originalText = response.data.text.na_web})
|
|
|
|
.catch(e => {
|
|
|
|
this.errors.push(e)
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
axios.put('/api/textnode/'+this.item.node.id+'/',{
|
|
|
|
'text': { 'na_web': this.currentText},
|
|
|
|
'id': this.item.node.id
|
|
|
|
}).then(response => {this.originalText = response.data.text.na_web})
|
|
|
|
.catch(e => {
|
|
|
|
this.errors.push(e)
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// FIXME really save!
|
|
|
|
this.editorShow = false;
|
|
|
|
},
|
|
|
|
save: function() {
|
|
|
|
console.log(this.item);
|
|
|
|
if (this.create){
|
|
|
|
console.log(this.refnode);
|
|
|
|
console.log(this.where);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
|
<style scoped>
|
|
|
|
.changed {
|
|
|
|
background-color: yellow;
|
|
|
|
}
|
|
|
|
</style>
|