mamweb/vue_frontend/src/components/TreeNode.vue

<template>
<details>
	<!-- následující řádek nefunguje, protože summary musí být první tag v details -->
	<!-- <div class="treenode-org"> bude tu nějaký if na class="treenode" -->

<summary>
	<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'></component>
</summary>

	<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">
		<b>Vložit jako syna: </b>
		<addnewnode :types="item.appendable_siblings" :refnode="item.node" where="syn" /> 
	</div>
	</div>
	<div 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">
				</TreeNode>
				<div v-if="chld.appendable_siblings.length > 0" class="mam-org-only"  id="org-only-treenode" >
					<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>

</details>
</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>

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

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

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

.nodebug {
	display: none;
}

/* jsou potřeba obě verze, jedna funguje pro chrome a druhá pro firefox */
details > summary:first-of-type {
    list-style-type: none;
}
details summary::-webkit-details-marker {
  display:none;
}

details summary {
	cursor: pointer;
}

</style>