mamweb/vue_frontend/src/components/TreeNode.vue

<template>
	<div class="treenode">
	<button v-on:click="debugShow = !debugShow">Ladící data</button>
	<div v-if="debugShow">
		<pre>{{ item.node.polymorphic_ctype.model }}</pre>
		<pre>{{ item }}</pre>
	</div>
	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'></component>
	<div v-if="item.children.length === 0">
	<div v-if="item.appendable_children.length > 0">
		<b>Vložit jako syna</b>
		<addnewnode :types="item.appendable_siblings" :refnode="item.node" where="syn" /> 
	</div>
	</div>
	<div class="children">
		<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0">
			<b>Vložit před</b>
			<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> 
		</div>

		<ul>
			<li v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
				<TreeNode :item="chld">
				</TreeNode>
				<div v-if="chld.appendable_siblings.length > 0">
					<b v-if="index < (item.children.length - 1)">Vložit mezi</b>
					<b v-else>Vložit za</b>
					<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" /> 
				</div>
			</li>
		</ul>
	</div>
	</div>
</template>

<script>

import rocniknode from './RocnikNode.vue'
import cislonode from './CisloNode.vue'
import temavcislenode from './TemaVCisleNode.vue'
import castnode from './CastNode.vue'
import textnode from './TextNode.vue'
import ulohazadaninode from './UlohaZadaniNode.vue'
import ulohavzoraknode from './UlohaVzorakNode.vue'
import addnewnode from './AddNewNode.vue'

export default {
	name: 'TreeNode',
	components: {
		rocniknode,
		cislonode,
		temavcislenode,
		castnode,
		textnode,
		ulohazadaninode,
		ulohavzoraknode,
		addnewnode
	},
	data: () => ({
		debugShow: false,
	}),
	props: {
		item: Object
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
	margin: 40px 0 0;
}
ul {
/*	list-style-type: none;*/
	padding: 0;
}
li {
	/*display: inline-block;*/
	margin: 0 10px;
}
a {
	color: #42b983;
}

.treenode {
	border: 1px solid;
	border-color: "black";
	margin: 5px;
}
.children {
	border: 1px solid;
	border-color: #ff0000;
	margin: 5px;
}
</style>