ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-15 21:58:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

tree loads composition

Browse Source 
Expose legacy types in new API

tree navigation
This commit is contained in:
Pete Richards
2018-08-20 13:20:58 -07:00
parent 80a185440b
commit 703abe36c9
8 changed files with 128 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/ui/components/layout/tree-item.vue
View File

@ -2,16 +2,18 @@
<li class="c-tree__item-h">
<div class="c-tree__item">
<view-control class="c-tree__item__view-control"
v-if="hasChildren"
:expanded="expanded"
@click="toggleChildren">
</view-control>
<span class="c-tree__item__name c-object-name icon-folder"
:class="node.cssClass">
<span class="c-object-name__name">{{ node.name }}</span>
</span>
<a class="c-tree__item__name c-object-name"
:class="cssClass"
:href="href">
<span class="c-object-name__name">{{ node.object.name }}</span>
</a>
</div>
<ul v-if="expanded" class="c-tree">
<tree-item v-for="child in node.children"
<tree-item v-for="child in children"
:key="child.id"
:node="child"
>
@ -24,18 +26,63 @@
import viewControl from '../controls/viewControl.vue'
export default {
name: 'tree-item',
inject: ['openmct'],
props: {
node: Object
},
data() {
return {
expanded: false
hasChildren: false,
loaded: false,
children: [],
expanded: false,
cssClass: 'icon-folder'
}
},
computed: {
href: function () {
return '#/browse/' + this.node.path
.map(o => this.openmct.objects.makeKeyString(o))
.join('/');
}
},
mounted() {
// TODO: should update on mutation.
// TODO: click navigation should not fubar hash quite so much.
// TODO: should highlight if navigated to.
// TODO: should have context menu.
// TODO: should support drag/drop composition
let type = this.openmct.types.get(this.node.object.type);
if (type) {
this.cssClass = type.definition.cssClass;
} else {
console.log("Failed to get typeDef for object", this.node.object.name, this.node.object.type);
}
let composition = this.openmct.composition.get(this.node.object);
if (!composition) {
return;
}
this.hasChildren = true;
},
methods: {
toggleChildren: function () {
this.expanded = !this.expanded;
}
if (this.expanded && !this.loaded && this.hasChildren) {
this.openmct.composition.get(this.node.object).load()
.then(children => {
this.children = children.map((c) => {
return {
id: this.openmct.objects.makeKeyString(c.identifier),
object: c,
path: this.node.path.concat([c.identifier])
};
});
})
.then(() => this.loaded = true);
}
},
},
components: {
viewControl