79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<div v-frag>
|
|
<span class="row" v-for="(row, index) in rows" :key="index">
|
|
<tree-node v-for="(node, nodeIndex) in row" :key="nodeIndex" :id="node" @show-modal="openModal" :append="append" />
|
|
</span>
|
|
<span class="side-nodes" v-if="rows.side">
|
|
<tree-node v-for="(node, nodeIndex) in rows.side" :key="nodeIndex" :id="node" @show-modal="openModal" :append="append" small />
|
|
</span>
|
|
<modal :show="showModal" @close="closeModal">
|
|
<div slot="header"><h2 v-if="modalHeader">{{ modalHeader }}</h2></div>
|
|
<layer-tab slot="body" v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true" />
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { layers } from '../../store/layers';
|
|
import '../features/table.css';
|
|
|
|
export default {
|
|
name: 'tree',
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
modal: null
|
|
};
|
|
},
|
|
props: {
|
|
nodes: Array,
|
|
append: Boolean
|
|
},
|
|
inject: [ 'tab' ],
|
|
computed: {
|
|
modalHeader() {
|
|
if (this.modal == null) {
|
|
return null;
|
|
}
|
|
return layers[this.modal].name;
|
|
},
|
|
rows() {
|
|
if (this.nodes != undefined) {
|
|
return this.nodes;
|
|
}
|
|
return Object.keys(layers).reduce((acc, curr) => {
|
|
if (!(layers[curr].displayRow in acc)) {
|
|
acc[layers[curr].displayRow] = [];
|
|
}
|
|
if (layers[curr].position != undefined) {
|
|
acc[layers[curr].displayRow][layers[curr].position] = curr;
|
|
} else {
|
|
acc[layers[curr].displayRow].push(curr);
|
|
}
|
|
return acc;
|
|
}, []);
|
|
}
|
|
},
|
|
methods: {
|
|
openModal(id) {
|
|
this.showModal = true;
|
|
this.modal = id;
|
|
},
|
|
closeModal() {
|
|
this.showModal = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.row {
|
|
margin: 50px auto;
|
|
}
|
|
|
|
.side-nodes {
|
|
position: absolute;
|
|
right: 55px;
|
|
top: 65px;
|
|
}
|
|
</style>
|