mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 01:42:31 +00:00
Merge pull request #2633 from nasa/pane-persistence
[Navigation Tree] save current state of navigation tree
This commit is contained in:
commit
0a9d23d86f
@ -2,7 +2,7 @@
|
||||
<li class="c-tree__item-h">
|
||||
<div
|
||||
class="c-tree__item"
|
||||
:class="{ 'is-alias': isAlias, 'is-navigated-object': isNavigated }"
|
||||
:class="{ 'is-alias': isAlias, 'is-navigated-object': navigated }"
|
||||
>
|
||||
<view-control
|
||||
v-model="expanded"
|
||||
@ -40,6 +40,8 @@
|
||||
import viewControl from '../components/viewControl.vue';
|
||||
import ObjectLabel from '../components/ObjectLabel.vue';
|
||||
|
||||
const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
|
||||
|
||||
export default {
|
||||
name: 'TreeItem',
|
||||
inject: ['openmct'],
|
||||
@ -54,12 +56,12 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
this.navigateToPath = this.buildPathString(this.node.navigateToParent)
|
||||
this.navigateToPath = this.buildPathString(this.node.navigateToParent);
|
||||
return {
|
||||
hasChildren: false,
|
||||
isLoading: false,
|
||||
loaded: false,
|
||||
isNavigated: this.navigateToPath === this.openmct.router.currentLocation.path,
|
||||
navigated: this.navigateToPath === this.openmct.router.currentLocation.path,
|
||||
children: [],
|
||||
expanded: false
|
||||
}
|
||||
@ -75,7 +77,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
expanded(isExpanded) {
|
||||
expanded() {
|
||||
if (!this.hasChildren) {
|
||||
return;
|
||||
}
|
||||
@ -86,6 +88,7 @@ export default {
|
||||
this.composition.load().then(this.finishLoading);
|
||||
this.isLoading = true;
|
||||
}
|
||||
this.setLocalStorageExpanded(this.navigateToPath);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -107,6 +110,17 @@ export default {
|
||||
}
|
||||
|
||||
this.openmct.router.on('change:path', this.highlightIfNavigated);
|
||||
|
||||
this.getLocalStorageExpanded();
|
||||
},
|
||||
beforeDestroy() {
|
||||
/****
|
||||
* calling this.setLocalStorageExpanded explicitly here because for whatever reason,
|
||||
* the watcher on this.expanded is not triggering this.setLocalStorageExpanded(),
|
||||
* even though Vue documentation states, "At this stage the instance is still fully functional."
|
||||
*****/
|
||||
this.expanded = false;
|
||||
this.setLocalStorageExpanded();
|
||||
},
|
||||
destroyed() {
|
||||
this.openmct.router.off('change:path', this.highlightIfNavigated);
|
||||
@ -139,10 +153,40 @@ export default {
|
||||
},
|
||||
highlightIfNavigated(newPath, oldPath) {
|
||||
if (newPath === this.navigateToPath) {
|
||||
this.isNavigated = true;
|
||||
this.navigated = true;
|
||||
} else if (oldPath === this.navigateToPath) {
|
||||
this.isNavigated = false;
|
||||
this.navigated = false;
|
||||
}
|
||||
},
|
||||
getLocalStorageExpanded() {
|
||||
let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
|
||||
|
||||
if (expandedPaths) {
|
||||
expandedPaths = JSON.parse(expandedPaths);
|
||||
this.expanded = expandedPaths.includes(this.navigateToPath);
|
||||
}
|
||||
},
|
||||
// expanded nodes/paths are stored in local storage as an array
|
||||
setLocalStorageExpanded() {
|
||||
let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
|
||||
expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
|
||||
|
||||
if (this.expanded) {
|
||||
if (!expandedPaths.includes(this.navigateToPath)) {
|
||||
expandedPaths.push(this.navigateToPath);
|
||||
}
|
||||
} else {
|
||||
// remove this node path and all children paths from stored expanded paths
|
||||
expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
|
||||
}
|
||||
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
|
||||
},
|
||||
removeLocalStorageExpanded() {
|
||||
let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
|
||||
expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
|
||||
expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user