85 lines
1.6 KiB
Vue
85 lines
1.6 KiB
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'></component>
|
||
|
|
<div v-if="item.children.length === 0">
|
||
|
|
<div v-if="item.appendable_children.length > 0">
|
||
|
|
<h1>Vložit jako syna</h1>
|
||
|
|
<ul>
|
||
|
|
<li v-for="chld in item.appendable_children" :key="chld[0]">
|
||
|
|
<a href="">{{chld[1]}}</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<h1>Vložit před</h1>
|
||
|
|
<ul>
|
||
|
|
<li v-for="chld in item.appendable_children" :key="chld[0]">
|
||
|
|
<a href="">{{chld[1]}}</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li v-for="chld in item.children" v-bind:key="chld.nazev" >
|
||
|
|
<TreeNode :item="chld">
|
||
|
|
</TreeNode>
|
||
|
|
</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'
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'TreeNode',
|
||
|
|
components: {
|
||
|
|
rocniknode,
|
||
|
|
cislonode,
|
||
|
|
temavcislenode,
|
||
|
|
castnode,
|
||
|
|
textnode,
|
||
|
|
ulohazadaninode,
|
||
|
|
ulohavzoraknode,
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
</style>
|