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">
			<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
	},
	mounted: function() {
		console.log("mounted");
		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);
			// FIXME really save!
			this.editorShow = false;
		}
	}
}
</script>

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