tree.vue 2.24 KB
Newer Older
schneider210's avatar
schneider210 committed
1
<template>
2
  <div class="item">
3
    <q-tree
4
      class="item-content"
5
      label-key="label-key"
schneider210's avatar
schneider210 committed
6
      node-key="label"
7
      :expanded.sync="expanded"
dindigala's avatar
dindigala committed
8
      :icon="fasCaretRight"
9
      :nodes="tree"
10
      :selected-color="$q.dark.isActive ? 'grey' : ''"
11
      :selected.sync="selected"
nwindis's avatar
nwindis committed
12
13
    >
      <template
schneider210's avatar
schneider210 committed
14
        #default-body="{node}"
15
      >
nwindis's avatar
nwindis committed
16
17
18
19
        <div
          v-if="!node.children"
          :id="`selectedItem-${node['label']}`"
        />
20
      </template>
schneider210's avatar
schneider210 committed
21
22
23
24
25
    </q-tree>
  </div>
</template>

<script>
dindigala's avatar
dindigala committed
26
27
import { fasCaretRight } from '@quasar/extras/fontawesome-v5';
import treestore from '@/stores/treestore.js';
schneider210's avatar
schneider210 committed
28
29
30
31

export default {
  name: 'Treeview',
  props: {
schneider210's avatar
schneider210 committed
32
33
34
35
36
37
38
39
    manifests: {
      type: Array,
      default: () => [],
    },
    tree: {
      type: Array,
      default: () => [],
    },
schneider210's avatar
schneider210 committed
40
41
42
  },
  data() {
    return {
43
      expanded: [],
dindigala's avatar
dindigala committed
44
      selected: null,
45
      sequenceindex: 0,
schneider210's avatar
schneider210 committed
46
47
48
    };
  },
  created() {
dindigala's avatar
dindigala committed
49
    this.fasCaretRight = fasCaretRight;
schneider210's avatar
schneider210 committed
50
51
  },
  mounted() {
dindigala's avatar
dindigala committed
52
53
    // select tree node
    this.selected = treestore.state.selectedItemTree || this.manifests[0].sequence[0].id;
54

dindigala's avatar
dindigala committed
55
56
57
58
59
60
61
62
    // expand the first level
    this.expanded.push(this.tree[0].label);
    // expand second label - dynamic
    const finalSeqIdx = treestore.state.seqTree || 0;

    this.expanded.push(this.manifests[finalSeqIdx].label);

    this.$root.$on('update-item', (item, seqIdx) => {
63
      this.selected = item;
dindigala's avatar
dindigala committed
64
65
      treestore.updateselectedtreeitem(item);
      treestore.updatetreesequence(seqIdx);
66
    });
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

    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
89
90
91
  },
};
</script>
92
93
94
95
96
97
98
99
100
101

<style scoped>
.item {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.item-content {
  display: flex;
102
  flex: 0 0 auto;
103
  flex-direction: column;
104
  overflow: auto;
105
106
}
</style>