From 29235e6b1f671203e7fb44798e81e4f2f167cd80 Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Tue, 12 Nov 2024 14:21:56 +0100
Subject: [PATCH 1/6] Showing name of the AAS at the top of the submodel list

---
 aas-web-ui/src/components/AASTreeview.vue             | 11 ++++++++++-
 aas-web-ui/src/components/ComponentVisualization.vue  |  4 ++--
 .../src/components/Dashboard/DashboardElement.vue     |  4 ++--
 aas-web-ui/src/components/SubmodelList.vue            |  4 ++--
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/aas-web-ui/src/components/AASTreeview.vue b/aas-web-ui/src/components/AASTreeview.vue
index 7062e2c..9a0afbd 100644
--- 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">
+                        <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)">
diff --git a/aas-web-ui/src/components/ComponentVisualization.vue b/aas-web-ui/src/components/ComponentVisualization.vue
index b08f120..145f2e6 100644
--- 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
index 01f426c..ef8d92b 100644
--- 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
index 3062daf..05c02aa 100644
--- a/aas-web-ui/src/components/SubmodelList.vue
+++ b/aas-web-ui/src/components/SubmodelList.vue
@@ -10,9 +10,9 @@
                     <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">
                         <v-chip size="x-small" color="primary" label border>{{
-                            'AAS: ' + SelectedAAS?.idShort
+                            'AAS: ' + nameToDisplay(SelectedAAS)
                         }}</v-chip>
                     </v-col>
                 </v-row>

From 067da6afcd38596fb26e6be529ab43572f27ce10 Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Wed, 13 Nov 2024 09:50:46 +0100
Subject: [PATCH 2/6] Fix for SubmodelList

---
 aas-web-ui/src/components/SubmodelList.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/aas-web-ui/src/components/SubmodelList.vue b/aas-web-ui/src/components/SubmodelList.vue
index 05c02aa..27404df 100644
--- a/aas-web-ui/src/components/SubmodelList.vue
+++ b/aas-web-ui/src/components/SubmodelList.vue
@@ -1,10 +1,9 @@
 <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">

From 8b40285446449e31745340e70e4b377fe360686b Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Wed, 13 Nov 2024 10:41:48 +0100
Subject: [PATCH 3/6] Fix

---
 .../src/components/AppNavigation/AASList.vue  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
index 9b755c9..e99f2e9 100644
--- a/aas-web-ui/src/components/AppNavigation/AASList.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -358,6 +358,25 @@
                         // execute if the AAS Registry is found
                         // sort data by identification id (ascending) and store it in the AASData variable
                         let registeredAAS = response.data.result;
+
+                        // check if the aas Query is set in the URL and if so load the AAS
+                        const searchParams = new URL(window.location.href).searchParams;
+                        const aasEndpoint = searchParams.get('aas');
+                        if (aasEndpoint) {
+                            registeredAAS.forEach((AAS: any) => {
+                                if (
+                                    AAS['endpoints'].find((endpoint: any) => {
+                                        return endpoint.protocolInformation.href === aasEndpoint;
+                                    })
+                                ) {
+                                    // dispatch AAS to the Store
+                                    this.aasStore.dispatchSelectedAAS(AAS);
+                                    // trigger the AAS Selected Event
+                                    this.navigationStore.dispatchTriggerAASSelected();
+                                }
+                            });
+                        }
+
                         let sortedData = registeredAAS.sort((a: { [x: string]: number }, b: { [x: string]: number }) =>
                             a['id'] > b['id'] ? 1 : -1
                         );

From 2c3e218cdc21d5bf9de94becf6da514a9c51e14a Mon Sep 17 00:00:00 2001
From: aaron Zielstorff <aaron.zielstorff@iese.fraunhofer.de>
Date: Wed, 13 Nov 2024 11:58:38 +0100
Subject: [PATCH 4/6] Adds fix for mobile

---
 aas-web-ui/src/components/AASTreeview.vue     | 11 +++++++----
 .../src/components/AppNavigation/AASList.vue  | 19 -------------------
 aas-web-ui/src/components/SubmodelList.vue    | 11 +++++++----
 3 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/aas-web-ui/src/components/AASTreeview.vue b/aas-web-ui/src/components/AASTreeview.vue
index 9a0afbd..cc9c3cd 100644
--- a/aas-web-ui/src/components/AASTreeview.vue
+++ b/aas-web-ui/src/components/AASTreeview.vue
@@ -7,7 +7,7 @@
                     <v-col cols="auto">
                         <span>AAS Treeview</span>
                     </v-col>
-                    <v-col v-if="nameToDisplay(SelectedAAS)" 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: ' + nameToDisplay(SelectedAAS)
                         }}</v-chip>
@@ -169,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
index e99f2e9..9b755c9 100644
--- a/aas-web-ui/src/components/AppNavigation/AASList.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -358,25 +358,6 @@
                         // execute if the AAS Registry is found
                         // sort data by identification id (ascending) and store it in the AASData variable
                         let registeredAAS = response.data.result;
-
-                        // check if the aas Query is set in the URL and if so load the AAS
-                        const searchParams = new URL(window.location.href).searchParams;
-                        const aasEndpoint = searchParams.get('aas');
-                        if (aasEndpoint) {
-                            registeredAAS.forEach((AAS: any) => {
-                                if (
-                                    AAS['endpoints'].find((endpoint: any) => {
-                                        return endpoint.protocolInformation.href === aasEndpoint;
-                                    })
-                                ) {
-                                    // dispatch AAS to the Store
-                                    this.aasStore.dispatchSelectedAAS(AAS);
-                                    // trigger the AAS Selected Event
-                                    this.navigationStore.dispatchTriggerAASSelected();
-                                }
-                            });
-                        }
-
                         let sortedData = registeredAAS.sort((a: { [x: string]: number }, b: { [x: string]: number }) =>
                             a['id'] > b['id'] ? 1 : -1
                         );
diff --git a/aas-web-ui/src/components/SubmodelList.vue b/aas-web-ui/src/components/SubmodelList.vue
index 27404df..2118caa 100644
--- a/aas-web-ui/src/components/SubmodelList.vue
+++ b/aas-web-ui/src/components/SubmodelList.vue
@@ -9,7 +9,7 @@
                     <v-col cols="auto">
                         <span>Submodel List</span>
                     </v-col>
-                    <v-col v-if="nameToDisplay(SelectedAAS)" 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: ' + nameToDisplay(SelectedAAS)
                         }}</v-chip>
@@ -175,16 +175,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) => {

From c72e8abbdda45107d68502bc849dddd279387775 Mon Sep 17 00:00:00 2001
From: aaron Zielstorff <aaron.zielstorff@iese.fraunhofer.de>
Date: Wed, 13 Nov 2024 15:14:09 +0100
Subject: [PATCH 5/6] Adds auto-scrolling to AASList

---
 .../src/components/AppNavigation/AASList.vue  | 30 ++++++++++++++++++-
 .../src/mixins/SubmodelElementHandling.ts     |  2 ++
 aas-web-ui/src/store/NavigationStore.ts       |  5 ++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
index 9b755c9..f9dbcfc 100644
--- 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 }">
@@ -266,6 +267,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;
@@ -299,6 +305,11 @@
                     this.navigationStore.dispatchTriggerAASListReload(false);
                 }
             },
+
+            // watch for changes in the trigger for AAS List scroll
+            triggerAASListScroll() {
+                this.scrollToSelectedAAS();
+            },
         },
 
         mounted() {
@@ -368,6 +379,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
                         }
@@ -646,6 +658,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/mixins/SubmodelElementHandling.ts b/aas-web-ui/src/mixins/SubmodelElementHandling.ts
index 47759b2..27a3b6c 100644
--- a/aas-web-ui/src/mixins/SubmodelElementHandling.ts
+++ b/aas-web-ui/src/mixins/SubmodelElementHandling.ts
@@ -371,6 +371,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';
@@ -419,6 +420,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
index 9482a42..a9ce91d 100644
--- 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;
         },

From b7820a599b8d6ec9eba67aee8b6bf6ef41ae9afb Mon Sep 17 00:00:00 2001
From: aaron Zielstorff <aaron.zielstorff@iese.fraunhofer.de>
Date: Wed, 13 Nov 2024 15:38:48 +0100
Subject: [PATCH 6/6] Small fix for mobile scroll

---
 aas-web-ui/src/components/AppNavigation/AASList.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
index f9dbcfc..64429e0 100644
--- a/aas-web-ui/src/components/AppNavigation/AASList.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -339,6 +339,10 @@
             }
         },
 
+        activated() {
+            this.scrollToSelectedAAS();
+        },
+
         methods: {
             // Function to determine the name of the aas to be displayed
             aasNameToDisplay(AAS: any) {