Showing name of AAS in submodel list component and autoscrolling to s…

…elected AAS (#97) * Showing name of the AAS at the top of the submodel list * Fix for SubmodelList * Fix * Adds fix for mobile * Adds auto-scrolling to AASList * Small fix for mobile scroll --------- Co-authored-by: aaron Zielstorff <[email protected]>
eclipse-basyx · Nov 13, 2024 · aa6748c · aa6748c
1 parent fc2665c
commit aa6748c
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 17 deletions.
diff --git a/aas-web-ui/src/components/AASTreeview.vue b/aas-web-ui/src/components/AASTreeview.vue
@@ -3,7 +3,16 @@
         <v-card color="rgba(0,0,0,0)" elevation="0">
             <v-card-title style="padding: 15px 16px 16px">
                 <!-- TODO: Add Searchfield to filter the Treeview -->
-                AAS Treeview
+                <v-row align="center">
+                    <v-col cols="auto">
+                        <span>AAS Treeview</span>
+                    </v-col>
+                    <v-col v-if="nameToDisplay(SelectedAAS)" cols="auto" class="pl-1 pt-2">
+                        <v-chip size="x-small" color="primary" label border>{{
+                            'AAS: ' + nameToDisplay(SelectedAAS)
+                        }}</v-chip>
+                    </v-col>
+                </v-row>
             </v-card-title>
             <v-divider></v-divider>
             <v-card-text style="overflow-y: auto; height: calc(100vh - 170px)">
@@ -160,16 +169,19 @@
                 this.submodelData = []; // reset Treeview Data
                 // retrieve AAS from endpoint
                 const shellHref = this.extractEndpointHref(this.selectedAAS, 'AAS-3.0');
-                let path = shellHref + '/submodel-refs';
-                let context = 'retrieving Submodel References';
+                let path = shellHref;
+                let context = 'retrieving AAS Data';
                 let disableMessage = false;
                 this.getRequest(path, context, disableMessage)
                     .then(async (response: any) => {
                         if (response.success) {
                             // execute if the Request was successful
                             try {
+                                let AAS = response.data;
+                                AAS.endpoints = this.SelectedAAS.endpoints;
+                                this.aasStore.dispatchSelectedAAS(AAS); // dispatch the selected AAS to the Store
                                 // request submodels from the retrieved AAS (top layer of the Treeview)
-                                let submodelData = await this.requestSubmodels(response.data.result);
+                                let submodelData = await this.requestSubmodels(AAS.submodels);
                                 // 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

diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -43,8 +43,9 @@
             <!-- AAS List -->
             <v-list nav class="bg-card card pa-0">
                 <v-virtual-scroll
+                    ref="virtualScroll"
                     :items="AASData"
-                    item-height="48"
+                    :item-height="56"
                     :height="isMobile ? 'calc(100svh - 170px)' : 'calc(100vh - 218px)'"
                     class="pb-2 bg-card">
                     <template #default="{ item }">
@@ -270,6 +271,11 @@
                 return this.navigationStore.getTriggerAASListReload;
             },
 
+            // get trigger signal for AAS List scroll from store
+            triggerAASListScroll() {
+                return this.navigationStore.getTriggerAASListScroll;
+            },
+
             // Get the AAS Repository URL from the Store
             aasRepoURL() {
                 return this.navigationStore.getAASRepoURL;
@@ -303,6 +309,11 @@
                     this.navigationStore.dispatchTriggerAASListReload(false);
                 }
             },
+
+            // watch for changes in the trigger for AAS List scroll
+            triggerAASListScroll() {
+                this.scrollToSelectedAAS();
+            },
         },
 
         mounted() {
@@ -332,6 +343,10 @@
             }
         },
 
+        activated() {
+            this.scrollToSelectedAAS();
+        },
+
         methods: {
             // Function to determine the name of the aas to be displayed
             aasNameToDisplay(AAS: any) {
@@ -372,6 +387,7 @@
                         });
                         this.AASData = Object.freeze(sortedData); // store the sorted data in the AASData variable
                         this.unfilteredAASData = sortedData; // make a copy of the sorted data and store it in the unfilteredAASData variable
+                        this.scrollToSelectedAAS(); // scroll to the selected AAS
                         if (this.statusCheck) {
                             this.checkAASStatus(); // check the AAS Status
                         }
@@ -650,6 +666,22 @@
                 this.deleteDialogShowing = true;
                 this.aasToDelete = AAS;
             },
+
+            async scrollToSelectedAAS() {
+                // Find the index of the selected item
+                const index = this.AASData.findIndex((item: any) => this.isSelected(item));
+                const virtualScrollRef = this.$refs.virtualScroll as any;
+
+                if (index !== -1 && virtualScrollRef) {
+                    const intervalId = setInterval(() => {
+                        if (virtualScrollRef.$el.querySelector('.v-virtual-scroll__container').children.length > 0) {
+                            // Access the scrollable container
+                            virtualScrollRef.scrollToIndex(index);
+                            clearInterval(intervalId);
+                        }
+                    }, 50);
+                }
+            },
         },
     });
 </script>

diff --git a/aas-web-ui/src/components/ComponentVisualization.vue b/aas-web-ui/src/components/ComponentVisualization.vue
@@ -14,9 +14,9 @@
                     <v-col cols="auto">
                         <span>Visualization</span>
                     </v-col>
-                    <v-col v-if="SelectedAAS?.idShort" cols="auto" class="pl-1">
+                    <v-col v-if="nameToDisplay(SelectedAAS)" cols="auto" class="pl-1">
                         <v-chip size="x-small" color="primary" label border>{{
-                            'AAS: ' + SelectedAAS?.idShort
+                            'AAS: ' + nameToDisplay(SelectedAAS)
                         }}</v-chip>
                     </v-col>
                 </v-row>

diff --git a/aas-web-ui/src/components/Dashboard/DashboardElement.vue b/aas-web-ui/src/components/Dashboard/DashboardElement.vue
@@ -4,8 +4,8 @@
             <v-col cols="auto" class="pr-0">
                 <v-card-title>{{ localDashboardData.title }}</v-card-title>
             </v-col>
-            <v-col v-if="AASData?.idShort" cols="auto" class="pl-0">
-                <v-chip size="x-small" color="primary" label border>{{ 'AAS: ' + AASData?.idShort }}</v-chip>
+            <v-col v-if="nameToDisplay(AASData)" cols="auto" class="pl-0">
+                <v-chip size="x-small" color="primary" label border>{{ 'AAS: ' + nameToDisplay(AASData) }}</v-chip>
             </v-col>
             <v-spacer></v-spacer>
             <v-col cols="auto" density="compact" justify="end" class="py-0">

diff --git a/aas-web-ui/src/components/SubmodelList.vue b/aas-web-ui/src/components/SubmodelList.vue
@@ -1,18 +1,17 @@
 <template>
     <v-container fluid class="pa-0">
         <v-card color="card" elevation="0">
-            <v-card-title v-if="!isMobile" style="padding: 15px 16px 16px"> Submodel List </v-card-title>
-            <v-card-title v-else style="padding: 15px 16px 16px">
+            <v-card-title style="padding: 15px 16px 16px">
                 <v-row align="center">
-                    <v-col cols="auto" class="pa-0">
+                    <v-col v-if="isMobile" cols="auto" class="pa-0">
                         <v-btn class="ml-2" variant="plain" icon="mdi-chevron-left" @click="backToAASList()"></v-btn>
                     </v-col>
                     <v-col cols="auto">
                         <span>Submodel List</span>
                     </v-col>
-                    <v-col v-if="SelectedAAS?.idShort" cols="auto" class="pl-1">
+                    <v-col v-if="nameToDisplay(SelectedAAS)" cols="auto" class="pl-1 pt-2">
                         <v-chip size="x-small" color="primary" label border>{{
-                            'AAS: ' + SelectedAAS?.idShort
+                            'AAS: ' + nameToDisplay(SelectedAAS)
                         }}</v-chip>
                     </v-col>
                 </v-row>
@@ -180,16 +179,19 @@
                 this.submodelData = []; // reset Submdoel List Data
                 // retrieve AAS from endpoint
                 const shellHref = this.extractEndpointHref(this.SelectedAAS, 'AAS-3.0');
-                let path = shellHref + '/submodel-refs';
-                let context = 'retrieving Submodel References';
+                let path = shellHref;
+                let context = 'retrieving AAS Data';
                 let disableMessage = false;
                 this.getRequest(path, context, disableMessage)
                     .then(async (response: any) => {
                         if (response.success) {
                             // execute if the Request was successful
                             try {
+                                let AAS = response.data;
+                                AAS.endpoints = this.SelectedAAS.endpoints;
+                                this.aasStore.dispatchSelectedAAS(AAS); // dispatch the selected AAS to the Store
                                 // request submodels from the retrieved AAS
-                                let submodelData = await this.requestSubmodels(response.data.result);
+                                let submodelData = await this.requestSubmodels(AAS.submodels);
                                 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) => {

diff --git a/aas-web-ui/src/mixins/SubmodelElementHandling.ts b/aas-web-ui/src/mixins/SubmodelElementHandling.ts
@@ -393,6 +393,7 @@ export default defineComponent({
                     // dispatch the AAS set by the ReferenceElement to the store
                     this.aasStore.dispatchSelectedAAS(referencedAAS);
                     this.navigationStore.dispatchTriggerAASSelected();
+                    this.navigationStore.dispatchTriggerAASListScroll();
                     // Request the referenced SubmodelElement
                     const elementPath = path;
                     const context = 'retrieving SubmodelElement';
@@ -441,6 +442,7 @@ export default defineComponent({
             // console.log('AAS:', aas, 'Endpoint:', endpoint);
             this.aasStore.dispatchSelectedAAS(aas);
             this.navigationStore.dispatchTriggerAASSelected();
+            this.navigationStore.dispatchTriggerAASListScroll();
             this.aasStore.dispatchNode({});
         },
 

diff --git a/aas-web-ui/src/store/NavigationStore.ts b/aas-web-ui/src/store/NavigationStore.ts
@@ -55,6 +55,7 @@ export const useNavigationStore = defineStore({
         platform: {} as PlatformType,
         plugins: [] as PluginType[],
         triggerAASListReload: false as boolean,
+        triggerAASListScroll: false as boolean,
         triggerAASSelected: false as boolean,
     }),
 
@@ -73,6 +74,7 @@ export const useNavigationStore = defineStore({
         getPlatform: (state) => state.platform,
         getPlugins: (state) => state.plugins,
         getTriggerAASListReload: (state) => state.triggerAASListReload,
+        getTriggerAASListScroll: (state) => state.triggerAASListScroll,
         getTriggerAASSelected: (state) => state.triggerAASSelected,
     },
 
@@ -125,6 +127,9 @@ export const useNavigationStore = defineStore({
         dispatchTriggerAASListReload(triggerAASListReload: boolean) {
             this.triggerAASListReload = triggerAASListReload;
         },
+        dispatchTriggerAASListScroll() {
+            this.triggerAASListScroll = !this.triggerAASListScroll;
+        },
         dispatchTriggerAASSelected() {
             this.triggerAASSelected = !this.triggerAASSelected;
         },