tree.vue 2.32 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
      :expanded.sync="expanded"
dindigala's avatar
dindigala committed
8
      :icon="fasCaretRight"
9
      :nodes="tree"
10
      :selected-color="$q.dark.isActive ? 'grey' : ''"
11
12
      :selected.sync="selected"
      >
dindigala's avatar
dindigala committed
13
      <template v-slot:default-body="{node}">
14
        <div v-if="!node.children" :id="`selectedItem-${node['label']}`"></div>
15
      </template>
schneider210's avatar
schneider210 committed
16
17
18
19
20
    </q-tree>
  </div>
</template>

<script>
dindigala's avatar
dindigala committed
21
22
import { fasCaretRight } from '@quasar/extras/fontawesome-v5';
import treestore from '@/stores/treestore.js';
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
      expanded: [],
dindigala's avatar
dindigala committed
33
      selected: null,
34
      sequenceindex: 0,
schneider210's avatar
schneider210 committed
35
36
37
    };
  },
  created() {
dindigala's avatar
dindigala committed
38
    this.fasCaretRight = fasCaretRight;
schneider210's avatar
schneider210 committed
39
40
  },
  mounted() {
dindigala's avatar
dindigala committed
41
42
    // select tree node
    this.selected = treestore.state.selectedItemTree || this.manifests[0].sequence[0].id;
43

dindigala's avatar
dindigala committed
44
45
46
47
48
49
50
51
    // 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) => {
52
      this.selected = item;
dindigala's avatar
dindigala committed
53
54
      treestore.updateselectedtreeitem(item);
      treestore.updatetreesequence(seqIdx);
55
    });
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

    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
78
79
80
  },
};
</script>
81
82
83
84
85
86
87
88
89
90

<style lang="scss" scoped>
@import './src/css/helper';

.view-tree {
  @include make-responsive-height();
  -ms-overflow-style: none;
  overflow-y: scroll;
  scrollbar-width: none;

dindigala's avatar
dindigala committed
91
92
  .q-tree__node-header-content.col.row.no-wrap.items-center {
    z-index: 99;
93
94
  }

dindigala's avatar
dindigala committed
95
96
97
  .q-tree__children {
    cursor: pointer;
  }
98
99
100
101
102
103
}

.view-tree::-webkit-scrollbar {
  display: none;
}
</style>