concept-to-clinic/interface/frontend/src/components/open-image/TreeView.vue at 0663ae38714a1a410cf9d7cf77f5ffc3a0e629b4 · drivendataorg/concept-to-clinic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<template>
  <ul>
    <li>
      <span @click="toggle(model)" v-if="isOpenable">
        [{{open ? '-' : '+'}}] <span :style="selectedStyle">{{ model.name }}</span>
      </span>
      <span v-else>
        {{ model.name }}
      </span>
      <span class="badge badge-default" v-if="hasFiles">
        {{ model.files.length }}
      </span>
      <ul v-show="isOpen" v-if="isFolder">
        <tree-view class="item"
                   v-for="child in model.children"
                   v-if="child.children"
                   :key="child.name"
                   :model="child"
                   :selectedSeries="selectedSeries"
                   :parent="parent + '/' + model.name"
                   v-on:childSelected="selectSeries"
        ></tree-view>
        <li @click="select(file)" v-for="file in model.files" class="text-muted" :key="file.name">{{ file.name }}</li>
      </ul>
    </li>
  </ul>
</template>

<script>
  import TreeView from './TreeView'
  import { EventBus } from '../../main.js'

  export default {
    name: 'tree-view',
    props: {
      parent: '',
      selectedSeries: null,
      model: {
        type: Object,
        default: {
          'name': 'root',
          'children': [],
          'files': [],
          'type': 'folder'
        }
      }
    },
    components: {
      TreeView
    },
    data () {
      return {
        open: false
      }
    },
    computed: {
      isFolder () {
        return this.model.type === 'folder'
      },
      hasContents () {
        return this.hasFiles || this.hasFolders
      },
      hasFolders () {
        if (this.model.children) return this.model.children.length > 0
        return false
      },
      hasFiles () {
        if (this.model.files) return this.model.files.length > 0
        return false
      },
      isOpenable () {
        return this.isFolder && this.hasContents
      },
      isOpen () {
        return this.open
      },
      selectedStyle () {
        if (this.selectedSeries && this.selectedSeries.indexOf(this.model.name) !== -1) {
          return { 'text-decoration': 'underline' }
        }
        //   return {}
        // }
        return {}
      },
      fullPath () {
        return this.parent + '/' + this.model.name
      }
    },
    methods: {
      toggle: function (model) {
        this.$set(this, 'open', !this.open)
      },
      selectSeries: function (seriesId) {
        this.$store.dispatch('loadImagery', {'id': seriesId})
      },
      select: function (file) {
        // file selected should tell parent series
        this.$emit('childSelected', this.fullPath)

        EventBus.$emit('dicom-selection',
          {
            paths: this.model.files.map((file) => { return file.path }),
            state: file.path
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    cursor: pointer;
  }

  .bold {
    font-weight: bold;
  }

  ul {
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
  }
</style>