mamweb/vue_frontend/src/components/TextNode.vue

<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">

			<div v-if="plainEditShow">
				<textarea id="textarea" v-model="currentText" rows="8" cols="50"></textarea>
			</div>

			<div v-else>
				<component v-bind:is="editorComponent" :editor="editor" v-model="currentText" :config="editorConfig"></component>
			<div>

			<button v-on:click="plainEditShow=!plainEditShow">Editovat HTML</button>
			<button v-on:click="saveText">Uložit</button>
			<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button>
			
		</div>

		<div v-else v-bind:class="changedObject">
			<p v-html="currentText"></p>
			<button v-on:click="editorShow=!editorShow">Upravit</button>
		</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,
		plainEditShow: Boolean,
		create: Boolean,
		where: String,
		refnode: Object
	},
	mounted: function() {
		//console.log("mounted");
		if (this.create){
			this.currentText = "";
			this.originalText = "";
			this.editorShow = true;
			this.plainEditShow = false;
		} 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);
				})
		},
		
		saveText: 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;
					this.loading = false;
					this.$root.$emit('updateData',"textNode create update");
					})
				.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)
				});
				
			}
			this.editorShow = false;
		},
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.changed {
	background-color: 'yellow';
}
</style>