From e5bff9c16c16054e57ef623c6c95590590c35558 Mon Sep 17 00:00:00 2001 From: Aaron Zielstorff Date: Wed, 30 Oct 2024 08:18:21 +0100 Subject: [PATCH] Fixes indefinite loading of AAS Treeview after invalid selection (#72) * Fixes indefinite loading of AAS Treeview after invalid selection * Addresses review remarks --- aas-web-ui/src/components/AASTreeview.vue | 86 ++++++++++++--------- aas-web-ui/src/components/SubmodelList.vue | 90 ++++++++++++---------- 2 files changed, 98 insertions(+), 78 deletions(-) diff --git a/aas-web-ui/src/components/AASTreeview.vue b/aas-web-ui/src/components/AASTreeview.vue index be58877..7527717 100644 --- a/aas-web-ui/src/components/AASTreeview.vue +++ b/aas-web-ui/src/components/AASTreeview.vue @@ -163,43 +163,50 @@ let path = shellHref + '/submodel-refs'; let context = 'retrieving Submodel References'; let disableMessage = false; - this.getRequest(path, context, disableMessage).then(async (response: any) => { - if (response.success) { - // execute if the Request was successful - try { - // request submodels from the retrieved AAS (top layer of the Treeview) - let submodelData = await this.requestSubmodels(response.data.result); - // set the isActive prop of the initialNode if it exists and the initialUpdate flag is set - if (this.initialUpdate && this.initialNode) { - let expandedSubmodelData = this.expandTree(submodelData, this.initialNode); // Update the Treeview to expand until the initially set node is reached - // this.updateNode(this.initialNode); // set the isActive prop of the initialNode to true - this.initialUpdate = false; - this.initialNode = {}; - // console.log('Expanded Treeview Data: ', expandedSubmodelData) - this.submodelData = expandedSubmodelData; // set the Treeview Data - } else { - this.submodelData = submodelData; // set the Treeview Data - // console.log('Treeview Data: ', this.submodelData) + this.getRequest(path, context, disableMessage) + .then(async (response: any) => { + if (response.success) { + // execute if the Request was successful + try { + // request submodels from the retrieved AAS (top layer of the Treeview) + let submodelData = await this.requestSubmodels(response.data.result); + // set the isActive prop of the initialNode if it exists and the initialUpdate flag is set + if (this.initialUpdate && this.initialNode) { + let expandedSubmodelData = this.expandTree(submodelData, this.initialNode); // Update the Treeview to expand until the initially set node is reached + // this.updateNode(this.initialNode); // set the isActive prop of the initialNode to true + this.initialUpdate = false; + this.initialNode = {}; + // console.log('Expanded Treeview Data: ', expandedSubmodelData) + this.submodelData = expandedSubmodelData; // set the Treeview Data + } else { + this.submodelData = submodelData; // set the Treeview Data + // console.log('Treeview Data: ', this.submodelData) + } + } catch (error: any) { + // console.error('Error while parsing the Submodel References: ', error); + const errorMessage = error.message; + const errorStack = error.stack; + const errorLocation = errorStack ? errorStack.split('\n')[1] : ''; + this.navigationStore.dispatchSnackbar({ + status: true, + timeout: 60000, + color: 'error', + btnColor: 'buttonText', + baseError: 'Error while parsing the Submodel References!', + extendedError: `Error: ${errorMessage}\nLocation: ${errorLocation.trim()}`, + }); + } finally { + this.aasStore.dispatchLoadingState(false); } - } catch (error: any) { - // console.error('Error while parsing the Submodel References: ', error); - const errorMessage = error.message; - const errorStack = error.stack; - const errorLocation = errorStack ? errorStack.split('\n')[1] : ''; - this.navigationStore.dispatchSnackbar({ - status: true, - timeout: 60000, - color: 'error', - btnColor: 'buttonText', - baseError: 'Error while parsing the Submodel References!', - extendedError: `Error: ${errorMessage}\nLocation: ${errorLocation.trim()}`, - }); + } else { + // execute if the Request failed + this.submodelData = []; + this.aasStore.dispatchLoadingState(false); } - } else { - // execute if the Request failed - this.submodelData = []; - } - }); + }) + .catch(() => { + this.aasStore.dispatchLoadingState(false); + }); }, // Function to request all Submodels for the selected AAS @@ -252,9 +259,12 @@ } }); }); - let submodels = await Promise.all(submodelPromises); - this.aasStore.dispatchLoadingState(false); // set loading state to false - return submodels; + try { + const submodels = await Promise.all(submodelPromises); + return submodels; + } finally { + this.aasStore.dispatchLoadingState(false); + } }, // Function to prepare the Datastructure for the Treeview diff --git a/aas-web-ui/src/components/SubmodelList.vue b/aas-web-ui/src/components/SubmodelList.vue index 0d8fea6..e7f7b6b 100644 --- a/aas-web-ui/src/components/SubmodelList.vue +++ b/aas-web-ui/src/components/SubmodelList.vue @@ -179,46 +179,53 @@ let path = shellHref + '/submodel-refs'; let context = 'retrieving Submodel References'; let disableMessage = false; - this.getRequest(path, context, disableMessage).then(async (response: any) => { - if (response.success) { - // execute if the Request was successful - try { - // request submodels from the retrieved AAS - let submodelData = await this.requestSubmodels(response.data.result); - if (this.initialUpdate && this.initialNode) { - // set the isActive Property of the initial Node to true and dispatch it to the store - submodelData.forEach((submodel: any) => { - if (submodel.path === this.initialNode.path) { - submodel.isActive = true; - this.aasStore.dispatchNode(submodel); - this.aasStore.dispatchRealTimeObject(submodel); - } + this.getRequest(path, context, disableMessage) + .then(async (response: any) => { + if (response.success) { + // execute if the Request was successful + try { + // request submodels from the retrieved AAS + let submodelData = await this.requestSubmodels(response.data.result); + if (this.initialUpdate && this.initialNode) { + // set the isActive Property of the initial Node to true and dispatch it to the store + submodelData.forEach((submodel: any) => { + if (submodel.path === this.initialNode.path) { + submodel.isActive = true; + this.aasStore.dispatchNode(submodel); + this.aasStore.dispatchRealTimeObject(submodel); + } + }); + this.initialUpdate = false; + this.initialNode = {}; + this.submodelData = submodelData; // set the Submodel Data + } else { + this.submodelData = submodelData; // set the Submodel Data + } + } catch (error: any) { + // console.error('Error while parsing the Submodel References: ', error); + const errorMessage = error.message; + const errorStack = error.stack; + const errorLocation = errorStack ? errorStack.split('\n')[1] : ''; + this.navigationStore.dispatchSnackbar({ + status: true, + timeout: 60000, + color: 'error', + btnColor: 'buttonText', + baseError: 'Error while parsing the Submodel References!', + extendedError: `Error: ${errorMessage}\nLocation: ${errorLocation.trim()}`, }); - this.initialUpdate = false; - this.initialNode = {}; - this.submodelData = submodelData; // set the Submodel Data - } else { - this.submodelData = submodelData; // set the Submodel Data + } finally { + this.aasStore.dispatchLoadingState(false); } - } catch (error: any) { - // console.error('Error while parsing the Submodel References: ', error); - const errorMessage = error.message; - const errorStack = error.stack; - const errorLocation = errorStack ? errorStack.split('\n')[1] : ''; - this.navigationStore.dispatchSnackbar({ - status: true, - timeout: 60000, - color: 'error', - btnColor: 'buttonText', - baseError: 'Error while parsing the Submodel References!', - extendedError: `Error: ${errorMessage}\nLocation: ${errorLocation.trim()}`, - }); + } else { + // execute if the Request failed + this.submodelData = []; + this.aasStore.dispatchLoadingState(false); } - } else { - // execute if the Request failed - this.submodelData = []; - } - }); + }) + .catch(() => { + this.aasStore.dispatchLoadingState(false); + }); }, // Function to request all Submodels for the selected AAS @@ -260,9 +267,12 @@ } }); }); - let submodels = await Promise.all(submodelPromises); - this.aasStore.dispatchLoadingState(false); // set loading state to false - return submodels; + try { + const submodels = await Promise.all(submodelPromises); + return submodels; + } finally { + this.aasStore.dispatchLoadingState(false); + } }, // Function to toggle a Node