mamweb/vue_frontend/src/components/TreeNode.vue

<template>

	<div :class="editorMode ? 'treenode-org' : 'treenode'">
	<!--b v-if="v_tematu">v tematu</b>
	<b v-if="visible">visible</b>
	Force visible: {{String(force_visible)}}-->
	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'
								:editorMode="editorMode"
								:debugMode="debugMode"></component>


	<button v-if="debugMode" 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="editorMode ? 'org' : 'schovat'">
			<b>Vložit jako syna: </b>
			<addnewnode :types="item.appendable_children" :refnode="item.node" where="syn" />
		</div>
	</div>

	<div v-else :class="editorMode ? 'children-org' : 'children'"> <!-- bude tu nějaký if na class="children" -->
		<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0" :class="editorMode ? 'org' : 'schovat'">
			<b>Vložit před: </b>
			<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> 
		</div>
			<div v-if="item.node.polymorphic_ctype.model==='temavcislenode'">
				<!--Children: {{String(showChildren)}}-->
				<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
					<!--Hide: {{hideNode(chld)}}, v tematu: {{v_tematu}}, force_visible: {{force_visible}}-->
					<div v-if="!hideNode(chld)">
						<div v-if="chld.node.polymorphic_ctype.model==='ulohazadaninode'">
							<button v-on:click="showChildren=!showChildren"> Tady možná něco je </button>
							<TreeNode :item="chld" :v_tematu="true"
									:force_visible="showChildren"
									:editorMode="editorMode"
									:debugMode="debugMode">
							</TreeNode>
						</div>
						<div v-else>
							<TreeNode :item="chld" :v_tematu="true"
									:force_visible="showChildren"
									:editorMode="editorMode"
									:debugMode="debugMode">
							</TreeNode>
						</div>
						<div v-if="chld.appendable_siblings.length > 0" :class="editorMode ? 'org' : 'schovat'" >
							<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>
				<button v-on:click="showChildren=!showChildren"> Tady možná něco je </button>
			</div>
			<div v-else>
				<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
					<div v-if="v_tematu && chld.node.polymorphic_ctype.model==='ulohazadaninode'">
						<div> Tady možná něco je </div>
						<TreeNode :item="chld" :v_tematu="v_tematu"
								:force_visible="force_visible"
								:editorMode="editorMode"
								:debugMode="debugMode">
						</TreeNode>
					</div>
					<div v-else>
						<TreeNode :item="chld" :v_tematu="v_tematu"
								:force_visible="force_visible"
								:editorMode="editorMode"
								:debugMode="debugMode">
						</TreeNode>
					</div>
					<div v-if="chld.appendable_siblings.length > 0" :class="editorMode ? 'org' : 'schovat'" >
						<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>

	</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,
		showChildren: false,
		editorMode: false
	}),
	computed: {
	},
	props: {
		item: Object,
		force_visible: Boolean,
		v_tematu: Boolean,
		editorMode: Boolean,
		debugMode: Boolean,
	},
	methods: {
		hideNode: function(chld){
			if (this.showChildren || this.force_visible){
				return false;
			}
			if (chld.node.polymorphic_ctype.model === 'ulohazadaninode'){
				return false;
			}
			return true;
		}
	}
}
</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; */
}

.schovat {
	display: none
}

</style>