mamweb/vue_frontend/src/components/TreeNode.vue

<template>

	<div class="treenode-org">
	<b v-if="v_tematku">v tematu</b>
	<b v-if="visible">visible</b>
	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'></component>


	<button v-on:click="debugShow = !debugShow" class="nodebug">Ladící data</button> <!-- bude tu nějaký if na class="nodebug", v debug módu bude tlačítko vidět, jinak ne -->
	<div v-if="debugShow">
		<pre>{{ item.node.polymorphic_ctype.model }}</pre>
		<pre>{{ item }}</pre>
	</div>

	<div v-if="item.children.length === 0">
		<div v-if="item.appendable_children.length > 0"  class="mam-org-only">
			<b>Vložit jako syna: </b>
			<addnewnode :types="item.appendable_children" :refnode="item.node" where="syn" />
		</div>
	</div>

	<div v-else class="children-org"> <!-- bude tu nějaký if na class="children" -->
		<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0" class="mam-org-only">
			<b>Vložit před: </b>
			<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> 
		</div>

			<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
				<TreeNode :item="chld" :v_tematku="item.node.polymorphic_ctype.model==='temavcislenode'||v_tematku"
							:visible="!v_tematku||item.node.polymorphic_ctype.model==='ulohazadaninode'">
				</TreeNode>
				<div v-if="chld.appendable_siblings.length > 0" class="mam-org-only" >
					<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>
			</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,
		visible: Boolean,
		v_tematku: Boolean
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


.treenode-org {
  padding: 5px;
  margin: 5px;
  border: #6a0043 2px solid;
}


.children-org {
  padding: 10px;
  margin: 5px;
  border: #6a0043 2px dashed;
}

.mam-org-only {
	margin: 4px;
}

.nodebug {
	/* display: none; */
}

</style>