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

rework local storage mechanisms

Browse Source 
* use one navigated local storage item instead one per node

* use one expanded local storage item instead of one per node

* fix navigated

* collapse children when node collapsed
This commit is contained in:
David Tsay 2020-01-27 01:06:40 -08:00
parent fa21911287
commit 0fd0da8331
1 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/ui/layout/tree-item.vue
View File

@ -40,11 +40,8 @@
import viewControl from '../components/viewControl.vue'; import viewControl from '../components/viewControl.vue';
import ObjectLabel from '../components/ObjectLabel.vue'; import ObjectLabel from '../components/ObjectLabel.vue';
const LOCAL_STORAGE__TREE_STATE_ID = 'mct-tree--'; const LOCAL_STORAGE_KEY__TREE_NAVIGATED = 'mct-tree-navigated';
const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
function makeLocalStorageStateKey(id) {
return `${LOCAL_STORAGE__TREE_STATE_ID}${id}`;
}
export default { export default {
name: 'TreeItem', name: 'TreeItem',
@ -92,15 +89,9 @@ export default {
this.composition.load().then(this.finishLoading); this.composition.load().then(this.finishLoading);
this.isLoading = true; this.isLoading = true;
} }
this.setLocalStorageState(); this.setLocalStorageExpanded(this.navigateToPath);
},
navigated() {
this.setLocalStorageState();
} }
}, },
beforeMount() {
this.initLocalStorageState();
},
mounted() { mounted() {
// TODO: should update on mutation. // TODO: should update on mutation.
// TODO: click navigation should not fubar hash quite so much. // TODO: click navigation should not fubar hash quite so much.
@ -120,7 +111,18 @@ export default {
} }
this.openmct.router.on('change:path', this.highlightIfNavigated); this.openmct.router.on('change:path', this.highlightIfNavigated);
this.getLocalStorageState();
this.getLocalStorageExpanded();
this.getLocalStorageNavigated();
},
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() { destroyed() {
this.openmct.router.off('change:path', this.highlightIfNavigated); this.openmct.router.off('change:path', this.highlightIfNavigated);
@ -143,7 +145,6 @@ export default {
let removeId = this.openmct.objects.makeKeyString(identifier); let removeId = this.openmct.objects.makeKeyString(identifier);
this.children = this.children this.children = this.children
.filter(c => c.id !== removeId); .filter(c => c.id !== removeId);
this.removeLocalStorageState(makeLocalStorageStateKey(removeId));
}, },
finishLoading() { finishLoading() {
this.isLoading = false; this.isLoading = false;
@ -158,41 +159,43 @@ export default {
} else if (oldPath === this.navigateToPath) { } else if (oldPath === this.navigateToPath) {
this.navigated = false; this.navigated = false;
} }
this.setLocalStorageNavigated(newPath);
}, },
initLocalStorageState() { getLocalStorageNavigated() {
this.key = makeLocalStorageStateKey(this.openmct.objects.makeKeyString(this.node.object.identifier)) const navigated = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_NAVIGATED);
this.state = { this.navigated = navigated && JSON.parse(navigated) === this.navigateToPath;
expanded: [],
navigated: ''
};
}, },
getLocalStorageState() { setLocalStorageNavigated(path) {
const state = localStorage.getItem(this.key); localStorage.setItem(LOCAL_STORAGE_KEY__TREE_NAVIGATED, JSON.stringify(path));
},
getLocalStorageExpanded() {
let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
if (state) { if (expandedPaths) {
this.state = JSON.parse(state); expandedPaths = JSON.parse(expandedPaths);
console.log(this.state.navigated) this.expanded = expandedPaths.includes(this.navigateToPath);
console.log(this.navigateToPath)
this.expanded = this.state.expanded.includes(this.navigateToPath);
this.navigated = this.state.navigated === this.navigateToPath;
} else {
this.setLocalStorageState();
} }
}, },
setLocalStorageState() { setLocalStorageExpanded() {
this.state.expanded = this.expanded let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
? [...new Set([this.navigateToPath, ...this.state.expanded])] expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
: this.state.expanded.filter(path => path !== this.navigateToPath);
this.state.navigated = this.navigated ? this.navigateToPath : '';
if ((this.state.expanded && this.state.expanded.length) || this.state.navigated) { if (this.expanded) {
localStorage.setItem(this.key, JSON.stringify(this.state)); if (!expandedPaths.includes(this.navigateToPath)) {
expandedPaths.push(this.navigateToPath);
}
} else { } else {
this.removeLocalStorageState(this.key); // 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));
}, },
removeLocalStorageState(key) { removeLocalStorageExpanded() {
localStorage.removeItem(key); 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));
} }
} }
} }