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

Allow users to lazy load Tabs (#2958)

Browse Source 
* lazy load tabs

* remove listener on destroy

* fix lint error

* Store current tab position on domainObject

* remove lodash dependency and use keystring
This commit is contained in:
Deep Tailor 2020-05-08 10:36:13 -07:00 committed by GitHub
parent 0679b246b8
commit 421c09ec2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/plugins/tabs/components/tabs.vue
View File

@ -27,7 +27,7 @@
{'is-current': isCurrent(tab)}, {'is-current': isCurrent(tab)},
tab.type.definition.cssClass tab.type.definition.cssClass
]" ]"
@click="showTab(tab)" @click="showTab(tab, index)"
> >
<span class="c-button__label">{{ tab.domainObject.name }}</span> <span class="c-button__label">{{ tab.domainObject.name }}</span>
</button> </button>
@ -48,6 +48,7 @@
</div> </div>
</div> </div>
<object-view <object-view
v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
class="c-tabs-view__object" class="c-tabs-view__object"
:object="tab.domainObject" :object="tab.domainObject"
/> />
@ -57,7 +58,6 @@
<script> <script>
import ObjectView from '../../../ui/components/ObjectView.vue'; import ObjectView from '../../../ui/components/ObjectView.vue';
import _ from 'lodash';
var unknownObjectType = { var unknownObjectType = {
definition: { definition: {
@ -73,6 +73,7 @@ export default {
}, },
data: function () { data: function () {
return { return {
internalDomainObject: this.domainObject,
currentTab: {}, currentTab: {},
tabsList: [], tabsList: [],
setCurrentTab: true, setCurrentTab: true,
@ -85,9 +86,17 @@ export default {
this.composition.on('add', this.addItem); this.composition.on('add', this.addItem);
this.composition.on('remove', this.removeItem); this.composition.on('remove', this.removeItem);
this.composition.on('reorder', this.onReorder); this.composition.on('reorder', this.onReorder);
this.composition.load(); this.composition.load().then(() => {
let currentTabIndex = this.domainObject.currentTabIndex;
if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
this.currentTab = this.tabsList[currentTabIndex];
}
});
} }
this.unsubscribe = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
document.addEventListener('dragstart', this.dragstart); document.addEventListener('dragstart', this.dragstart);
document.addEventListener('dragend', this.dragend); document.addEventListener('dragend', this.dragend);
}, },
@ -96,18 +105,25 @@ export default {
this.composition.off('remove', this.removeItem); this.composition.off('remove', this.removeItem);
this.composition.off('reorder', this.onReorder); this.composition.off('reorder', this.onReorder);
this.unsubscribe();
document.removeEventListener('dragstart', this.dragstart); document.removeEventListener('dragstart', this.dragstart);
document.removeEventListener('dragend', this.dragend); document.removeEventListener('dragend', this.dragend);
}, },
methods:{ methods:{
showTab(tab) { showTab(tab, index) {
if (index !== undefined) {
this.storeCurrentTabIndex(index);
}
this.currentTab = tab; this.currentTab = tab;
}, },
addItem(domainObject) { addItem(domainObject) {
let type = this.openmct.types.get(domainObject.type) || unknownObjectType, let type = this.openmct.types.get(domainObject.type) || unknownObjectType,
tabItem = { tabItem = {
domainObject, domainObject,
type: type type: type,
key: this.openmct.objects.makeKeyString(domainObject.identifier)
}; };
this.tabsList.push(tabItem); this.tabsList.push(tabItem);
@ -126,7 +142,7 @@ export default {
this.tabsList.splice(pos, 1); this.tabsList.splice(pos, 1);
if (this.isCurrent(tabToBeRemoved)) { if (this.isCurrent(tabToBeRemoved)) {
this.showTab(this.tabsList[this.tabsList.length - 1]); this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
} }
}, },
onReorder(reorderPlan) { onReorder(reorderPlan) {
@ -138,6 +154,7 @@ export default {
}, },
onDrop(e) { onDrop(e) {
this.setCurrentTab = true; this.setCurrentTab = true;
this.storeCurrentTabIndex(this.tabsList.length);
}, },
dragstart(e) { dragstart(e) {
if (e.dataTransfer.types.includes('openmct/domain-object-path')) { if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
@ -155,7 +172,13 @@ export default {
this.allowDrop = false; this.allowDrop = false;
}, },
isCurrent(tab) { isCurrent(tab) {
return _.isEqual(this.currentTab, tab) return this.currentTab.key === tab.key;
},
updateInternalDomainObject(domainObject) {
this.internalDomainObject = domainObject;
},
storeCurrentTabIndex(index) {
this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
} }
} }
} }

22
src/plugins/tabs/plugin.js
View File

@ -36,7 +36,27 @@ define([
cssClass: 'icon-tabs-view', cssClass: 'icon-tabs-view',
initialize(domainObject) { initialize(domainObject) {
domainObject.composition = []; domainObject.composition = [];
} domainObject.keep_alive = true;
},
form: [
{
"key": "keep_alive",
"name": "Keep Tabs Alive",
"control": "select",
"options": [
{
'name': 'True',
'value': true
},
{
'name': 'False',
'value': false
}
],
"required": true,
"cssClass": "l-input"
}
]
}); });
}; };
}; };