Tree search implementation (#2280)

Re-implements search UI using legacy existing search service.
This commit is contained in:
Deep Tailor 2019-02-19 15:34:47 -08:00 committed by Andrew Henry
parent 1c77ef142c
commit 0e30fba72d
4 changed files with 84 additions and 35 deletions

View File

@ -169,15 +169,17 @@ function (
}
function saveAfterClone(clonedObject) {
return domainObject.getCapability("editor").save()
.then(resolveWith(clonedObject));
return this.openmct.editor.save().then(() => {
// Force mutation for search indexing
clonedObject.useCapability('mutation', (model) => {
return model;
});
return clonedObject;
})
}
function finishEditing(clonedObject) {
return domainObject.getCapability("editor").finish()
.then(function () {
return fetchObject(clonedObject.getId());
});
return fetchObject(clonedObject.getId())
}
function onSuccess(object) {

View File

@ -65,11 +65,10 @@ define(
CreateAction.prototype.perform = function () {
var newModel = this.type.getInitialModel(),
openmct = this.openmct,
newObject,
editAction;
newObject;
function onSave() {
openmct.editor.save();
// openmct.editor.save();
}
function onCancel() {
@ -81,7 +80,6 @@ define(
newObject = this.parent.useCapability('instantiation', newModel);
openmct.editor.edit();
editAction = newObject.getCapability("action").getActions("edit")[0];
newObject.getCapability("action").perform("save-as").then(onSave, onCancel);
// TODO: support editing object without saving object first.
// Which means we have to toggle createwizard afterwards. For now,

View File

@ -22,9 +22,6 @@
handle="after"
label="Browse"
collapsable>
<div class="l-shell__search">
<search class="c-search--major" ref="shell-search"></search>
</div>
<mct-tree class="l-shell__tree"></mct-tree>
</pane>
<pane class="l-shell__pane-main">
@ -250,7 +247,6 @@
import ObjectView from '../components/ObjectView.vue';
import MctTemplate from '../legacy/mct-template.vue';
import CreateButton from './CreateButton.vue';
import search from '../components/search.vue';
import multipane from './multipane.vue';
import pane from './pane.vue';
import BrowseBar from './BrowseBar.vue';
@ -293,7 +289,6 @@
ObjectView,
'mct-template': MctTemplate,
CreateButton,
search,
multipane,
pane,
BrowseBar,
@ -328,7 +323,6 @@
},
methods: {
fullScreenToggle() {
if (this.fullScreen) {
this.fullScreen = false;
exitFullScreen();

View File

@ -1,9 +1,20 @@
<template>
<div class="c-tree__wrapper">
<div class="l-shell__search">
<search class="c-search--major" ref="shell-search"
:value="searchValue"
@input="searchTree"
@clear="searchTree">
</search>
</div>
<div
v-if="treeItems.length === 0">
No results found
</div>
<ul class="c-tree">
<tree-item v-for="child in children"
:key="child.id"
:node="child">
<tree-item v-for="treeItem in treeItems"
:key="treeItem.id"
:node="treeItem">
</tree-item>
</ul>
</div>
@ -125,28 +136,72 @@
<script>
import treeItem from './tree-item.vue'
import search from '../components/search.vue';
export default {
data() {
return {
children: []
};
},
inject: ['openmct'],
mounted: function () {
this.openmct.objects.get('ROOT')
.then(root => this.openmct.composition.get(root).load())
.then(children => this.children = children.map((c) => {
return {
id: this.openmct.objects.makeKeyString(c.identifier),
object: c,
objectPath: [c]
};
}))
},
name: 'mct-tree',
components: {
search,
treeItem
},
data() {
return {
searchValue: '',
allTreeItems: [],
filteredTreeItems: []
}
},
computed: {
treeItems() {
if (this.searchValue === '') {
return this.allTreeItems;
} else {
return this.filteredTreeItems;
}
}
},
methods: {
getAllChildren() {
this.openmct.objects.get('ROOT')
.then(root => this.openmct.composition.get(root).load())
.then(children => {
this.allTreeItems = children.map(c => {
return {
id: this.openmct.objects.makeKeyString(c.identifier),
object: c,
objectPath: [c]
};
});
});
},
getFilteredChildren() {
this.searchService.query(this.searchValue).then(children => {
this.filteredTreeItems = children.hits.map(child => {
let objectPath = child.object.getCapability('context')
.getPath().slice(1).map(oldObject => oldObject.useCapability('adapter'))
.reverse(),
object = child.object.useCapability('adapter');
return {
id: this.openmct.objects.makeKeyString(object.identifier),
object,
objectPath
}
});
});
},
searchTree(value) {
this.searchValue = value;
if (this.searchValue !== '') {
this.getFilteredChildren();
}
}
},
mounted() {
this.searchService = this.openmct.$injector.get('searchService');
this.getAllChildren();
}
}
</script>