tree.vue 1.6 KB
Newer Older
schneider210's avatar
schneider210 committed
1
2
<template>
  <div class="q-pa-md q-gutter-sm">
3
4
    <q-tree
      class="view-tree"
5
      label-key="label-key"
schneider210's avatar
schneider210 committed
6
      node-key="label"
7
8
      :expanded.sync="expanded"
      :nodes="tree"
9
10
      :selected.sync="selected"
      >
11
12
13
14
15
16
      <template v-slot:default-body={node}>
        <div
          v-if="!node.children"
          :id="`selectedItem-${node['label']}`">
        </div>
      </template>
schneider210's avatar
schneider210 committed
17
18
19
20
21
    </q-tree>
  </div>
</template>

<script>
22
import matIcons from 'quasar/icon-set/material-icons';
schneider210's avatar
schneider210 committed
23
24
25
26
27
28
29
30
31

export default {
  name: 'Treeview',
  props: {
    manifests: Array,
    tree: Array,
  },
  data() {
    return {
32
33
34
      expanded: [],
      selected: this.manifests[0].sequence[0].id,
      sequenceindex: 0,
schneider210's avatar
schneider210 committed
35
36
37
    };
  },
  created() {
38
    this.$q.iconSet.set(matIcons);
schneider210's avatar
schneider210 committed
39
40
  },
  mounted() {
41
    this.$root.$on('update-item', (item) => {
42
43
      this.selected = item;
    });
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

    // expand the root node as well as the first knot which contains the actual item selected
    this.expanded.push(this.tree[0].label, this.manifests[0].label);

    this.$root.$on('update-sequence-index', (index) => {
      if (index !== this.sequenceindex) {
        this.sequenceindex = index;

        if (!this.expanded.includes(this.manifests[index].label)) {
          this.expanded.push(this.manifests[index].label);
        }
      }
    });

    this.$root.$on('update-tree-knots', (label) => {
      if (this.expanded.includes(label)) {
        const index = this.expanded.indexOf(label);

        if (index > -1) {
          this.expanded.splice(index, 1);
        }
      } else {
        this.expanded.push(label);
      }
    });
schneider210's avatar
schneider210 committed
69
70
71
  },
};
</script>