113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
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" class="mam-org-only">
|
|
<b>Vložit jako syna: </b>
|
|
<addnewnode :types="item.appendable_siblings" :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">
|
|
</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>
|
|
|
|
</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: 10px;
|
|
margin: 5px;
|
|
border: #6a0043 2px dashed;
|
|
}
|
|
|
|
.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>
|