From d0fe415d2e46e1084e2bb1422262efaa7b25f205 Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Mon, 18 Nov 2024 13:01:35 +0100
Subject: [PATCH 1/6] Add administrative information component

---
 .../AppNavigation/AASListDetails.vue          |  23 +-
 .../src/components/SubmodelElementView.vue    |  19 ++
 .../AdministrativeInformationElement.vue      | 217 ++++++++++++++++++
 3 files changed, 257 insertions(+), 2 deletions(-)
 create mode 100644 aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue

diff --git a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
index 97300cb..2d24c6a 100644
--- a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
@@ -50,14 +50,31 @@
                             :model-type="'AAS'"
                             :id-type="'Identification (ID)'"
                             :name-type="'idShort'"></IdentificationElement>
+                        <!-- AAS Administrative Information-->
+                        <v-divider
+                            v-if="
+                                detailsObject.administration &&
+                                (detailsObject.administration.revision != '' ||
+                                    detailsObject.administration.version != '')
+                            "
+                            class="mt-2"></v-divider>
+                        <AdministrativeInformationElement
+                            v-if="
+                                detailsObject.administration &&
+                                (detailsObject.administration.revision != '' ||
+                                    detailsObject.administration.version != '')
+                            "
+                            :administrative-information-object="detailsObject.administration"
+                            :administrative-information-title="'Administrative Information'"
+                            :small="false"></AdministrativeInformationElement>
                         <v-divider
                             v-if="detailsObject.displayName && detailsObject.displayName.length > 0"
                             class="mt-2"></v-divider>
-                        <!-- SubmodelELement DisplayName -->
+                        <!-- AAS DisplayName -->
                         <DisplayNameElement
                             v-if="detailsObject.displayName && detailsObject.displayName.length > 0"
                             :display-name-object="detailsObject.displayName"
-                            :display-name-title="'DisplayName'"
+                            :display-name-title="'Display Name'"
                             :small="false"></DisplayNameElement>
                         <v-divider
                             v-if="detailsObject.description && detailsObject.description.length > 0"
@@ -77,6 +94,7 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
+    import AdministrativeInformationElement from '@/components/UIComponents/AdministrativeInformationElement.vue';
     import AssetInformation from '@/components/UIComponents/AssetInformation.vue';
     import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
     import DisplayNameElement from '@/components/UIComponents/DisplayNameElement.vue';
@@ -89,6 +107,7 @@
         name: 'AASListDetails',
         components: {
             IdentificationElement,
+            AdministrativeInformationElement,
             DisplayNameElement,
             DescriptionElement,
             AssetInformation,
diff --git a/aas-web-ui/src/components/SubmodelElementView.vue b/aas-web-ui/src/components/SubmodelElementView.vue
index 24cc24e..98ecf5c 100644
--- a/aas-web-ui/src/components/SubmodelElementView.vue
+++ b/aas-web-ui/src/components/SubmodelElementView.vue
@@ -13,6 +13,23 @@
                             :model-type="submodelElementData.modelType"
                             :id-type="'Identification (ID)'"
                             :name-type="'idShort'"></IdentificationElement>
+                        <!-- Submodel Administrative Information-->
+                        <v-divider
+                            v-if="
+                                submodelElementData.administration &&
+                                (submodelElementData.administration.revision != '' ||
+                                    submodelElementData.administration.version != '')
+                            "
+                            class="mt-2"></v-divider>
+                        <AdministrativeInformationElement
+                            v-if="
+                                submodelElementData.administration &&
+                                (submodelElementData.administration.revision != '' ||
+                                    submodelElementData.administration.version != '')
+                            "
+                            :administrative-information-object="submodelElementData.administration"
+                            :administrative-information-title="'Administrative Information'"
+                            :small="false"></AdministrativeInformationElement>
                         <v-divider
                             v-if="submodelElementData.displayName && submodelElementData.displayName.length > 0"
                             class="mt-2"></v-divider>
@@ -155,6 +172,7 @@
     import Submodel from '@/components/SubmodelElements/Submodel.vue';
     import SubmodelElementCollection from '@/components/SubmodelElements/SubmodelElementCollection.vue';
     import SubmodelElementList from '@/components/SubmodelElements/SubmodelElementList.vue';
+    import AdministrativeInformationElement from '@/components/UIComponents/AdministrativeInformationElement.vue';
     import ConceptDescription from '@/components/UIComponents/ConceptDescription.vue';
     import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
     import DisplayNameElement from '@/components/UIComponents/DisplayNameElement.vue';
@@ -170,6 +188,7 @@
         name: 'SubmodelElementView',
         components: {
             IdentificationElement,
+            AdministrativeInformationElement,
             DisplayNameElement,
             DescriptionElement,
             SemanticID,
diff --git a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
new file mode 100644
index 0000000..4af44ac
--- /dev/null
+++ b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
@@ -0,0 +1,217 @@
+<template>
+    <v-container fluid class="pa-0">
+        {{ console.log(administrativeInformationObject) }}
+        <v-list-item>
+            <!-- AdministrativeInformation Title -->
+            <template #title>
+                <div class="mt-2" :class="small ? 'text-caption' : 'text-subtitle-2 '">
+                    {{ administrativeInformationTitle + ':' }}
+                </div>
+            </template>
+            <template #subtitle>
+                <v-list nav class="pa-0">
+                    <!-- Creator -->
+                    <v-list-item v-if="administrativeInformationObject?.creator.keys.length > 0" class="ma-0">
+                        <v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
+                            <div
+                                v-for="(creator, i) in administrativeInformationObject.creator.keys"
+                                :key="i"
+                                class="text-caption">
+                                <span class="font-weight-bold">{{ '(' + creator.type + ') ' }}</span
+                                >{{ creator.value }}
+                            </div>
+                        </v-tooltip>
+                        <template #title>
+                            <span class="text-subtitle-2">
+                                {{
+                                    administrativeInformationObject.creator.keys.length === 1 ? 'Creator:' : 'Creators:'
+                                }}
+                            </span>
+                        </template>
+                        <v-list-item-subtitle
+                            v-for="(creator, i) in administrativeInformationObject.creator.keys"
+                            :key="i">
+                            <div class="pt-2">
+                                <v-chip label size="x-small" border class="mr-2">{{ creator.type }}</v-chip>
+                                <span>{{ creator.value }}</span>
+                            </div>
+                        </v-list-item-subtitle>
+                    </v-list-item>
+                    <v-divider
+                        v-if="
+                            administrativeInformationObject.creator &&
+                            administrativeInformationObject.creator.keys &&
+                            administrativeInformationObject.creator.keys.length > 0 &&
+                            ((administrativeInformationObject.version &&
+                                administrativeInformationObject.version !== '') ||
+                                (administrativeInformationObject.revision &&
+                                    administrativeInformationObject.revision !== ''))
+                        "
+                        class="mt-2"></v-divider>
+                    <!-- Version and Revision -->
+                    <v-list-item
+                        v-if="
+                            (administrativeInformationObject.version &&
+                                administrativeInformationObject.version !== '') ||
+                            (administrativeInformationObject.revision &&
+                                administrativeInformationObject.revision !== '')
+                        "
+                        class="ma-0">
+                        <template #title>
+                            <template v-if="administrativeInformationObject.version !== ''">
+                                <span class="text-subtitle-2 mt-2 mr-2">{{ 'Version:' }}</span
+                                ><v-chip label size="x-small" border class="mr-5">{{
+                                    administrativeInformationObject.version
+                                }}</v-chip>
+                            </template>
+                            <template v-if="administrativeInformationObject.revision !== ''">
+                                <span class="text-subtitle-2 mt-2 mr-2">{{ 'Revision:' }}</span
+                                ><v-chip label size="x-small" border class="mr-5">{{
+                                    administrativeInformationObject.revision
+                                }}</v-chip>
+                            </template>
+                        </template>
+                    </v-list-item>
+                </v-list>
+                <v-divider
+                    v-if="
+                        (administrativeInformationObject?.creator.keys.length > 0 ||
+                            (administrativeInformationObject.version &&
+                                administrativeInformationObject.version !== '') ||
+                            (administrativeInformationObject.revision &&
+                                administrativeInformationObject.revision !== '')) &&
+                        administrativeInformationObject.templateId &&
+                        administrativeInformationObject.templateId !== ''
+                    "></v-divider>
+                <v-hover v-slot="{ isHovering, props }">
+                    <v-list-item
+                        v-if="
+                            administrativeInformationObject.templateId &&
+                            administrativeInformationObject.templateId != ''
+                        "
+                        class="ma-0">
+                        <template #title>
+                            <span class="text-subtitle-2">
+                                {{ 'Template ID:' }}
+                            </span>
+                        </template>
+                        <template #subtitle>
+                            <div
+                                v-if="administrativeInformationObject.templateId"
+                                v-bind="props"
+                                :class="isHovering ? 'cursor-pointer' : ''"
+                                @click="copyToClipboard(administrativeInformationObject.templateId, 'Template ID')">
+                                <v-icon v-if="isHovering" color="subtitleText" size="x-small" class="mr-1">{{
+                                    copyIcon
+                                }}</v-icon>
+                                <span>{{ administrativeInformationObject.templateId }}</span>
+                            </div>
+                        </template>
+                    </v-list-item>
+                </v-hover>
+                <v-divider
+                    v-if="
+                        (administrativeInformationObject?.creator.keys.length > 0 ||
+                            (administrativeInformationObject.version &&
+                                administrativeInformationObject.version !== '') ||
+                            (administrativeInformationObject.revision &&
+                                administrativeInformationObject.revision !== '') ||
+                            (administrativeInformationObject.templateId &&
+                                administrativeInformationObject.templateId !== '')) &&
+                        administrativeInformationObject.embeddedDataSpecifications &&
+                        administrativeInformationObject.embeddedDataSpecifications.length > 0
+                    "></v-divider>
+                <!-- Embedded Data Specifications -->
+                <v-list
+                    v-if="
+                        administrativeInformationObject.embeddedDataSpecifications &&
+                        administrativeInformationObject.embeddedDataSpecifications.length > 0
+                    "
+                    nav
+                    class="pa-0">
+                    <v-card
+                        v-for="(
+                            embeddedDataSpecification, i
+                        ) in administrativeInformationObject.embeddedDataSpecifications"
+                        :key="i"
+                        color="elevatedCard"
+                        class="mt-2">
+                        <v-list nav class="bg-elevatedCard pt-0">
+                            <!-- hasDataSpecification -->
+                            <SemanticID
+                                v-if="
+                                    embeddedDataSpecification.dataSpecification &&
+                                    embeddedDataSpecification.dataSpecification.keys &&
+                                    embeddedDataSpecification.dataSpecification.keys.length > 0
+                                "
+                                :semantic-id-object="embeddedDataSpecification.dataSpecification"
+                                :semantic-title="'Data Specification'"
+                                class="mb-2"></SemanticID>
+                            <v-divider v-if="embeddedDataSpecification.dataSpecificationContent"></v-divider>
+                            <!-- dataSpecificationContent -->
+                            <DataSpecificationContent
+                                v-if="embeddedDataSpecification.dataSpecificationContent"
+                                :data-specification-object="
+                                    embeddedDataSpecification.dataSpecificationContent
+                                "></DataSpecificationContent>
+                        </v-list>
+                    </v-card>
+                </v-list>
+            </template>
+        </v-list-item>
+    </v-container>
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import { useNavigationStore } from '@/store/NavigationStore';
+    import DataSpecificationContent from './DataSpecificationContent.vue';
+    import SemanticID from './SemanticID.vue';
+
+    export default defineComponent({
+        name: 'AdministrativeInformationElement',
+        components: {
+            SemanticID,
+            DataSpecificationContent,
+        },
+        props: ['administrativeInformationObject', 'administrativeInformationTitle', 'small'],
+
+        setup() {
+            const navigationStore = useNavigationStore();
+
+            return {
+                navigationStore, // NavigationStore Object
+            };
+        },
+
+        data() {
+            return {
+                copyIcon: 'mdi-clipboard-file-outline',
+            };
+        },
+
+        methods: {
+            // Function to copy the id to the clipboard
+            copyToClipboard(value: string, valueName: string) {
+                if (!value || !value) return;
+                // console.log('Copy ID to Clipboard: ', this.identificationObject.id);
+                // set the icon to checkmark
+                this.copyIcon = 'mdi-check';
+                // copy the path to the clipboard
+                navigator.clipboard.writeText(value);
+                // set the clipboard tooltip to false after 1.5 seconds
+                setTimeout(() => {
+                    this.copyIcon = 'mdi-clipboard-file-outline';
+                }, 2000);
+                // open Snackbar to inform the user that the path was copied to the clipboard
+                this.navigationStore.dispatchSnackbar({
+                    status: true,
+                    timeout: 2000,
+                    color: 'success',
+                    btnColor: 'buttonText',
+                    text: valueName + ' copied to Clipboard.',
+                });
+            },
+        },
+    });
+</script>

From fb6b5b81a90ccba544508e09e2d1c5de604d8199 Mon Sep 17 00:00:00 2001
From: Aaron Zielstorff <aaron.zi@web.de>
Date: Sun, 8 Dec 2024 09:41:28 +0100
Subject: [PATCH 2/6] adds missing check for keys

---
 .../UIComponents/AdministrativeInformationElement.vue      | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
index 4af44ac..9bcdd85 100644
--- a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
+++ b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
@@ -1,6 +1,5 @@
 <template>
     <v-container fluid class="pa-0">
-        {{ console.log(administrativeInformationObject) }}
         <v-list-item>
             <!-- AdministrativeInformation Title -->
             <template #title>
@@ -11,7 +10,7 @@
             <template #subtitle>
                 <v-list nav class="pa-0">
                     <!-- Creator -->
-                    <v-list-item v-if="administrativeInformationObject?.creator.keys.length > 0" class="ma-0">
+                    <v-list-item v-if="administrativeInformationObject?.creator?.keys?.length > 0" class="ma-0">
                         <v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
                             <div
                                 v-for="(creator, i) in administrativeInformationObject.creator.keys"
@@ -75,7 +74,7 @@
                 </v-list>
                 <v-divider
                     v-if="
-                        (administrativeInformationObject?.creator.keys.length > 0 ||
+                        (administrativeInformationObject?.creator?.keys?.length > 0 ||
                             (administrativeInformationObject.version &&
                                 administrativeInformationObject.version !== '') ||
                             (administrativeInformationObject.revision &&
@@ -111,7 +110,7 @@
                 </v-hover>
                 <v-divider
                     v-if="
-                        (administrativeInformationObject?.creator.keys.length > 0 ||
+                        (administrativeInformationObject?.creator?.keys?.length > 0 ||
                             (administrativeInformationObject.version &&
                                 administrativeInformationObject.version !== '') ||
                             (administrativeInformationObject.revision &&

From a87989e1b2c5dea315c110bbd0cea8ec92160fdd Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Mon, 9 Dec 2024 08:47:47 +0100
Subject: [PATCH 3/6] Adds missing checks (optional chaining)

---
 .../AppNavigation/AASListDetails.vue          |   7 +-
 .../src/components/SubmodelElementView.vue    |   6 +-
 .../AdministrativeInformationElement.vue      | 130 ++++++++----------
 3 files changed, 63 insertions(+), 80 deletions(-)

diff --git a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
index 2d24c6a..155addf 100644
--- a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
@@ -58,12 +58,9 @@
                                     detailsObject.administration.version != '')
                             "
                             class="mt-2"></v-divider>
+                        {{ console.log(detailsObject.administration) }}
                         <AdministrativeInformationElement
-                            v-if="
-                                detailsObject.administration &&
-                                (detailsObject.administration.revision != '' ||
-                                    detailsObject.administration.version != '')
-                            "
+                            v-if="detailsObject.administration"
                             :administrative-information-object="detailsObject.administration"
                             :administrative-information-title="'Administrative Information'"
                             :small="false"></AdministrativeInformationElement>
diff --git a/aas-web-ui/src/components/SubmodelElementView.vue b/aas-web-ui/src/components/SubmodelElementView.vue
index 98ecf5c..c0e3643 100644
--- a/aas-web-ui/src/components/SubmodelElementView.vue
+++ b/aas-web-ui/src/components/SubmodelElementView.vue
@@ -22,11 +22,7 @@
                             "
                             class="mt-2"></v-divider>
                         <AdministrativeInformationElement
-                            v-if="
-                                submodelElementData.administration &&
-                                (submodelElementData.administration.revision != '' ||
-                                    submodelElementData.administration.version != '')
-                            "
+                            v-if="submodelElementData.administration"
                             :administrative-information-object="submodelElementData.administration"
                             :administrative-information-title="'Administrative Information'"
                             :small="false"></AdministrativeInformationElement>
diff --git a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
index 9bcdd85..55edff0 100644
--- a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
+++ b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
@@ -10,13 +10,20 @@
             <template #subtitle>
                 <v-list nav class="pa-0">
                     <!-- Creator -->
-                    <v-list-item v-if="administrativeInformationObject?.creator?.keys?.length > 0" class="ma-0">
+                    <v-list-item
+                        v-if="
+                            Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                            administrativeInformationObject?.creator?.keys.length > 0
+                        "
+                        class="ma-0">
                         <v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
                             <div
                                 v-for="(creator, i) in administrativeInformationObject.creator.keys"
                                 :key="i"
                                 class="text-caption">
-                                <span class="font-weight-bold">{{ '(' + creator.type + ') ' }}</span
+                                <span v-if="creator?.type" class="font-weight-bold">{{
+                                    '(' + creator.type + ') '
+                                }}</span
                                 >{{ creator.value }}
                             </div>
                         </v-tooltip>
@@ -30,7 +37,7 @@
                         <v-list-item-subtitle
                             v-for="(creator, i) in administrativeInformationObject.creator.keys"
                             :key="i">
-                            <div class="pt-2">
+                            <div v-if="creator?.type" class="pt-2">
                                 <v-chip label size="x-small" border class="mr-2">{{ creator.type }}</v-chip>
                                 <span>{{ creator.value }}</span>
                             </div>
@@ -38,93 +45,77 @@
                     </v-list-item>
                     <v-divider
                         v-if="
-                            administrativeInformationObject.creator &&
-                            administrativeInformationObject.creator.keys &&
-                            administrativeInformationObject.creator.keys.length > 0 &&
-                            ((administrativeInformationObject.version &&
-                                administrativeInformationObject.version !== '') ||
-                                (administrativeInformationObject.revision &&
-                                    administrativeInformationObject.revision !== ''))
+                            Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                            administrativeInformationObject?.creator?.keys.length > 0 &&
+                            (administrativeInformationObject?.version || administrativeInformationObject?.revision)
                         "
                         class="mt-2"></v-divider>
                     <!-- Version and Revision -->
                     <v-list-item
-                        v-if="
-                            (administrativeInformationObject.version &&
-                                administrativeInformationObject.version !== '') ||
-                            (administrativeInformationObject.revision &&
-                                administrativeInformationObject.revision !== '')
-                        "
+                        v-if="administrativeInformationObject?.version || administrativeInformationObject?.revision"
                         class="ma-0">
-                        <template #title>
-                            <template v-if="administrativeInformationObject.version !== ''">
+                        <v-list-item-title>
+                            <template v-if="administrativeInformationObject?.version">
                                 <span class="text-subtitle-2 mt-2 mr-2">{{ 'Version:' }}</span
                                 ><v-chip label size="x-small" border class="mr-5">{{
                                     administrativeInformationObject.version
                                 }}</v-chip>
                             </template>
-                            <template v-if="administrativeInformationObject.revision !== ''">
+                            <template v-if="administrativeInformationObject?.revision">
                                 <span class="text-subtitle-2 mt-2 mr-2">{{ 'Revision:' }}</span
                                 ><v-chip label size="x-small" border class="mr-5">{{
                                     administrativeInformationObject.revision
                                 }}</v-chip>
                             </template>
-                        </template>
+                        </v-list-item-title>
                     </v-list-item>
                 </v-list>
                 <v-divider
                     v-if="
-                        (administrativeInformationObject?.creator?.keys?.length > 0 ||
-                            (administrativeInformationObject.version &&
-                                administrativeInformationObject.version !== '') ||
-                            (administrativeInformationObject.revision &&
-                                administrativeInformationObject.revision !== '')) &&
-                        administrativeInformationObject.templateId &&
-                        administrativeInformationObject.templateId !== ''
+                        ((Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                            administrativeInformationObject?.creator?.keys.length > 0) ||
+                            administrativeInformationObject?.version ||
+                            administrativeInformationObject?.revision) &&
+                        administrativeInformationObject?.templateId
                     "></v-divider>
-                <v-hover v-slot="{ isHovering, props }">
-                    <v-list-item
-                        v-if="
-                            administrativeInformationObject.templateId &&
-                            administrativeInformationObject.templateId != ''
-                        "
-                        class="ma-0">
-                        <template #title>
-                            <span class="text-subtitle-2">
-                                {{ 'Template ID:' }}
-                            </span>
-                        </template>
-                        <template #subtitle>
-                            <div
-                                v-if="administrativeInformationObject.templateId"
-                                v-bind="props"
-                                :class="isHovering ? 'cursor-pointer' : ''"
-                                @click="copyToClipboard(administrativeInformationObject.templateId, 'Template ID')">
-                                <v-icon v-if="isHovering" color="subtitleText" size="x-small" class="mr-1">{{
-                                    copyIcon
-                                }}</v-icon>
-                                <span>{{ administrativeInformationObject.templateId }}</span>
-                            </div>
-                        </template>
-                    </v-list-item>
-                </v-hover>
+                <v-list nav class="pa-0">
+                    <v-hover v-slot="{ isHovering, props }">
+                        <v-list-item v-if="administrativeInformationObject?.templateId" class="ma-0 py-0">
+                            <template #title>
+                                <span class="text-subtitle-2">
+                                    {{ 'Template ID:' }}
+                                </span>
+                            </template>
+                            <template #subtitle>
+                                <div
+                                    v-if="administrativeInformationObject.templateId"
+                                    v-bind="props"
+                                    :class="isHovering ? 'cursor-pointer' : ''"
+                                    @click="copyToClipboard(administrativeInformationObject.templateId, 'Template ID')">
+                                    <v-icon v-if="isHovering" color="subtitleText" size="x-small" class="mr-1">{{
+                                        copyIcon
+                                    }}</v-icon>
+                                    <span>{{ administrativeInformationObject.templateId }}</span>
+                                </div>
+                            </template>
+                        </v-list-item>
+                    </v-hover>
+                </v-list>
                 <v-divider
                     v-if="
-                        (administrativeInformationObject?.creator?.keys?.length > 0 ||
-                            (administrativeInformationObject.version &&
-                                administrativeInformationObject.version !== '') ||
-                            (administrativeInformationObject.revision &&
-                                administrativeInformationObject.revision !== '') ||
-                            (administrativeInformationObject.templateId &&
-                                administrativeInformationObject.templateId !== '')) &&
-                        administrativeInformationObject.embeddedDataSpecifications &&
-                        administrativeInformationObject.embeddedDataSpecifications.length > 0
+                        ((Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                            administrativeInformationObject?.creator?.keys.length > 0) ||
+                            administrativeInformationObject?.version ||
+                            administrativeInformationObject?.revision ||
+                            administrativeInformationObject?.templateId) &&
+                        Array.isArray(administrativeInformationObject?.embeddedDataSpecifications) &&
+                        administrativeInformationObject?.embeddedDataSpecifications.length > 0
                     "></v-divider>
                 <!-- Embedded Data Specifications -->
                 <v-list
                     v-if="
-                        administrativeInformationObject.embeddedDataSpecifications &&
-                        administrativeInformationObject.embeddedDataSpecifications.length > 0
+                        Array.isArray(administrativeInformationObject?.embeddedDataSpecifications) &&
+                        administrativeInformationObject?.embeddedDataSpecifications.length > 0
                     "
                     nav
                     class="pa-0">
@@ -139,19 +130,18 @@
                             <!-- hasDataSpecification -->
                             <SemanticID
                                 v-if="
-                                    embeddedDataSpecification.dataSpecification &&
-                                    embeddedDataSpecification.dataSpecification.keys &&
-                                    embeddedDataSpecification.dataSpecification.keys.length > 0
+                                    Array.isArray(embeddedDataSpecification?.dataSpecification?.keys) &&
+                                    embeddedDataSpecification?.dataSpecification?.keys.length > 0
                                 "
                                 :semantic-id-object="embeddedDataSpecification.dataSpecification"
                                 :semantic-title="'Data Specification'"
                                 class="mb-2"></SemanticID>
-                            <v-divider v-if="embeddedDataSpecification.dataSpecificationContent"></v-divider>
+                            <v-divider v-if="embeddedDataSpecification?.dataSpecificationContent"></v-divider>
                             <!-- dataSpecificationContent -->
                             <DataSpecificationContent
-                                v-if="embeddedDataSpecification.dataSpecificationContent"
+                                v-if="embeddedDataSpecification?.dataSpecificationContent"
                                 :data-specification-object="
-                                    embeddedDataSpecification.dataSpecificationContent
+                                    embeddedDataSpecification?.dataSpecificationContent
                                 "></DataSpecificationContent>
                         </v-list>
                     </v-card>

From 8e985967917de8a9ec4c259914842c0314b34ed6 Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Mon, 9 Dec 2024 09:16:22 +0100
Subject: [PATCH 4/6] Harmonize v-list-items

---
 .../UIComponents/AdministrativeInformationElement.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
index 55edff0..9d03fd3 100644
--- a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
+++ b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
@@ -80,7 +80,7 @@
                     "></v-divider>
                 <v-list nav class="pa-0">
                     <v-hover v-slot="{ isHovering, props }">
-                        <v-list-item v-if="administrativeInformationObject?.templateId" class="ma-0 py-0">
+                        <v-list-item v-if="administrativeInformationObject?.templateId" class="ma-0">
                             <template #title>
                                 <span class="text-subtitle-2">
                                     {{ 'Template ID:' }}

From a03e83a6bbd74555dd0ed49b5731a9028a586630 Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Mon, 9 Dec 2024 10:39:44 +0100
Subject: [PATCH 5/6] Add expansion panel

---
 .../AppNavigation/AASListDetails.vue          |   9 +-
 .../src/components/SubmodelElementView.vue    |   5 +-
 .../AdministrativeInformationElement.vue      | 319 ++++++++++--------
 3 files changed, 187 insertions(+), 146 deletions(-)

diff --git a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
index 155addf..5ec9dca 100644
--- a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
@@ -40,7 +40,7 @@
                     <AssetInformation
                         v-if="assetInformation && Object.keys(assetInformation).length > 0"
                         :asset-object="assetInformation"></AssetInformation>
-                    <v-divider v-if="assetInformation"></v-divider>
+                    <v-divider v-if="assetInformation" thickness="2"></v-divider>
                     <!-- AAS Details -->
                     <v-list v-if="detailsObject" lines="one" nav class="bg-detailsCard">
                         <!-- AAS Identification -->
@@ -63,10 +63,9 @@
                             v-if="detailsObject.administration"
                             :administrative-information-object="detailsObject.administration"
                             :administrative-information-title="'Administrative Information'"
-                            :small="false"></AdministrativeInformationElement>
-                        <v-divider
-                            v-if="detailsObject.displayName && detailsObject.displayName.length > 0"
-                            class="mt-2"></v-divider>
+                            :small="false"
+                            :background-color="'detailsCard'"></AdministrativeInformationElement>
+                        <v-divider v-if="detailsObject.displayName && detailsObject.displayName.length > 0"></v-divider>
                         <!-- AAS DisplayName -->
                         <DisplayNameElement
                             v-if="detailsObject.displayName && detailsObject.displayName.length > 0"
diff --git a/aas-web-ui/src/components/SubmodelElementView.vue b/aas-web-ui/src/components/SubmodelElementView.vue
index c0e3643..cb34812 100644
--- a/aas-web-ui/src/components/SubmodelElementView.vue
+++ b/aas-web-ui/src/components/SubmodelElementView.vue
@@ -27,8 +27,9 @@
                             :administrative-information-title="'Administrative Information'"
                             :small="false"></AdministrativeInformationElement>
                         <v-divider
-                            v-if="submodelElementData.displayName && submodelElementData.displayName.length > 0"
-                            class="mt-2"></v-divider>
+                            v-if="
+                                submodelElementData.displayName && submodelElementData.displayName.length > 0
+                            "></v-divider>
                         <!-- SubmodelELement DisplayName -->
                         <DisplayNameElement
                             v-if="submodelElementData.displayName && submodelElementData.displayName.length > 0"
diff --git a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
index 9d03fd3..9f6ae39 100644
--- a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
+++ b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
@@ -1,153 +1,167 @@
 <template>
     <v-container fluid class="pa-0">
-        <v-list-item>
-            <!-- AdministrativeInformation Title -->
-            <template #title>
-                <div class="mt-2" :class="small ? 'text-caption' : 'text-subtitle-2 '">
-                    {{ administrativeInformationTitle + ':' }}
-                </div>
-            </template>
-            <template #subtitle>
-                <v-list nav class="pa-0">
-                    <!-- Creator -->
-                    <v-list-item
-                        v-if="
-                            Array.isArray(administrativeInformationObject?.creator?.keys) &&
-                            administrativeInformationObject?.creator?.keys.length > 0
-                        "
-                        class="ma-0">
-                        <v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
-                            <div
-                                v-for="(creator, i) in administrativeInformationObject.creator.keys"
-                                :key="i"
-                                class="text-caption">
-                                <span v-if="creator?.type" class="font-weight-bold">{{
-                                    '(' + creator.type + ') '
-                                }}</span
-                                >{{ creator.value }}
-                            </div>
-                        </v-tooltip>
-                        <template #title>
-                            <span class="text-subtitle-2">
-                                {{
-                                    administrativeInformationObject.creator.keys.length === 1 ? 'Creator:' : 'Creators:'
-                                }}
-                            </span>
-                        </template>
-                        <v-list-item-subtitle
-                            v-for="(creator, i) in administrativeInformationObject.creator.keys"
-                            :key="i">
-                            <div v-if="creator?.type" class="pt-2">
-                                <v-chip label size="x-small" border class="mr-2">{{ creator.type }}</v-chip>
-                                <span>{{ creator.value }}</span>
-                            </div>
-                        </v-list-item-subtitle>
-                    </v-list-item>
+        <v-expansion-panels>
+            <v-expansion-panel elevation="0" tile static :color="backgroundColor">
+                <v-expansion-panel-title class="px-2">
+                    <span :class="small ? 'text-caption' : 'text-subtitle-2 '">
+                        {{ administrativeInformationTitle }}
+                    </span>
+                </v-expansion-panel-title>
+                <v-expansion-panel-text :class="'bg-' + backgroundColor">
                     <v-divider
                         v-if="
                             Array.isArray(administrativeInformationObject?.creator?.keys) &&
-                            administrativeInformationObject?.creator?.keys.length > 0 &&
-                            (administrativeInformationObject?.version || administrativeInformationObject?.revision)
+                            administrativeInformationObject?.creator?.keys.length > 0
                         "
-                        class="mt-2"></v-divider>
-                    <!-- Version and Revision -->
-                    <v-list-item
-                        v-if="administrativeInformationObject?.version || administrativeInformationObject?.revision"
-                        class="ma-0">
-                        <v-list-item-title>
-                            <template v-if="administrativeInformationObject?.version">
-                                <span class="text-subtitle-2 mt-2 mr-2">{{ 'Version:' }}</span
-                                ><v-chip label size="x-small" border class="mr-5">{{
-                                    administrativeInformationObject.version
-                                }}</v-chip>
-                            </template>
-                            <template v-if="administrativeInformationObject?.revision">
-                                <span class="text-subtitle-2 mt-2 mr-2">{{ 'Revision:' }}</span
-                                ><v-chip label size="x-small" border class="mr-5">{{
-                                    administrativeInformationObject.revision
-                                }}</v-chip>
-                            </template>
-                        </v-list-item-title>
-                    </v-list-item>
-                </v-list>
-                <v-divider
-                    v-if="
-                        ((Array.isArray(administrativeInformationObject?.creator?.keys) &&
-                            administrativeInformationObject?.creator?.keys.length > 0) ||
-                            administrativeInformationObject?.version ||
-                            administrativeInformationObject?.revision) &&
-                        administrativeInformationObject?.templateId
-                    "></v-divider>
-                <v-list nav class="pa-0">
-                    <v-hover v-slot="{ isHovering, props }">
-                        <v-list-item v-if="administrativeInformationObject?.templateId" class="ma-0">
+                        opacity="0.05"></v-divider>
+                    <v-list nav class="pa-0">
+                        <!-- Creator -->
+                        <v-list-item
+                            v-if="
+                                Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                                administrativeInformationObject?.creator?.keys.length > 0
+                            "
+                            class="ma-0">
+                            <v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
+                                <div
+                                    v-for="(creator, i) in administrativeInformationObject.creator.keys"
+                                    :key="i"
+                                    class="text-caption">
+                                    <span v-if="creator?.type" class="font-weight-bold">{{
+                                        '(' + creator.type + ') '
+                                    }}</span
+                                    >{{ creator.value }}
+                                </div>
+                            </v-tooltip>
                             <template #title>
                                 <span class="text-subtitle-2">
-                                    {{ 'Template ID:' }}
+                                    {{
+                                        administrativeInformationObject.creator.keys.length === 1
+                                            ? 'Creator:'
+                                            : 'Creators:'
+                                    }}
                                 </span>
                             </template>
-                            <template #subtitle>
-                                <div
-                                    v-if="administrativeInformationObject.templateId"
-                                    v-bind="props"
-                                    :class="isHovering ? 'cursor-pointer' : ''"
-                                    @click="copyToClipboard(administrativeInformationObject.templateId, 'Template ID')">
-                                    <v-icon v-if="isHovering" color="subtitleText" size="x-small" class="mr-1">{{
-                                        copyIcon
-                                    }}</v-icon>
-                                    <span>{{ administrativeInformationObject.templateId }}</span>
+                            <v-list-item-subtitle
+                                v-for="(creator, i) in administrativeInformationObject.creator.keys"
+                                :key="i">
+                                <div v-if="creator?.type" class="pt-2">
+                                    <v-chip label size="x-small" border class="mr-2">{{ creator.type }}</v-chip>
+                                    <span>{{ creator.value }}</span>
                                 </div>
-                            </template>
+                            </v-list-item-subtitle>
+                        </v-list-item>
+                        <v-divider
+                            v-if="
+                                Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                                administrativeInformationObject?.creator?.keys.length > 0 &&
+                                (administrativeInformationObject?.version || administrativeInformationObject?.revision)
+                            "
+                            class="mt-2"
+                            opacity="0.05"></v-divider>
+                        <!-- Version and Revision -->
+                        <v-list-item
+                            v-if="administrativeInformationObject?.version || administrativeInformationObject?.revision"
+                            class="ma-0">
+                            <v-list-item-title>
+                                <template v-if="administrativeInformationObject?.version">
+                                    <span class="text-subtitle-2 mt-2 mr-2">{{ 'Version:' }}</span
+                                    ><v-chip label size="x-small" border class="mr-5">{{
+                                        administrativeInformationObject.version
+                                    }}</v-chip>
+                                </template>
+                                <template v-if="administrativeInformationObject?.revision">
+                                    <span class="text-subtitle-2 mt-2 mr-2">{{ 'Revision:' }}</span
+                                    ><v-chip label size="x-small" border class="mr-5">{{
+                                        administrativeInformationObject.revision
+                                    }}</v-chip>
+                                </template>
+                            </v-list-item-title>
                         </v-list-item>
-                    </v-hover>
-                </v-list>
-                <v-divider
-                    v-if="
-                        ((Array.isArray(administrativeInformationObject?.creator?.keys) &&
-                            administrativeInformationObject?.creator?.keys.length > 0) ||
-                            administrativeInformationObject?.version ||
-                            administrativeInformationObject?.revision ||
-                            administrativeInformationObject?.templateId) &&
-                        Array.isArray(administrativeInformationObject?.embeddedDataSpecifications) &&
-                        administrativeInformationObject?.embeddedDataSpecifications.length > 0
-                    "></v-divider>
-                <!-- Embedded Data Specifications -->
-                <v-list
-                    v-if="
-                        Array.isArray(administrativeInformationObject?.embeddedDataSpecifications) &&
-                        administrativeInformationObject?.embeddedDataSpecifications.length > 0
-                    "
-                    nav
-                    class="pa-0">
-                    <v-card
-                        v-for="(
-                            embeddedDataSpecification, i
-                        ) in administrativeInformationObject.embeddedDataSpecifications"
-                        :key="i"
-                        color="elevatedCard"
-                        class="mt-2">
-                        <v-list nav class="bg-elevatedCard pt-0">
-                            <!-- hasDataSpecification -->
-                            <SemanticID
-                                v-if="
-                                    Array.isArray(embeddedDataSpecification?.dataSpecification?.keys) &&
-                                    embeddedDataSpecification?.dataSpecification?.keys.length > 0
-                                "
-                                :semantic-id-object="embeddedDataSpecification.dataSpecification"
-                                :semantic-title="'Data Specification'"
-                                class="mb-2"></SemanticID>
-                            <v-divider v-if="embeddedDataSpecification?.dataSpecificationContent"></v-divider>
-                            <!-- dataSpecificationContent -->
-                            <DataSpecificationContent
-                                v-if="embeddedDataSpecification?.dataSpecificationContent"
-                                :data-specification-object="
-                                    embeddedDataSpecification?.dataSpecificationContent
-                                "></DataSpecificationContent>
-                        </v-list>
-                    </v-card>
-                </v-list>
-            </template>
-        </v-list-item>
+                    </v-list>
+                    <v-divider
+                        v-if="
+                            ((Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                                administrativeInformationObject?.creator?.keys.length > 0) ||
+                                administrativeInformationObject?.version ||
+                                administrativeInformationObject?.revision) &&
+                            administrativeInformationObject?.templateId
+                        "
+                        opacity="0.05"></v-divider>
+                    <v-list nav class="pa-0">
+                        <v-hover v-slot="{ isHovering, props }">
+                            <v-list-item v-if="administrativeInformationObject?.templateId" class="ma-0">
+                                <template #title>
+                                    <span class="text-subtitle-2">
+                                        {{ 'Template ID:' }}
+                                    </span>
+                                </template>
+                                <template #subtitle>
+                                    <div
+                                        v-if="administrativeInformationObject.templateId"
+                                        v-bind="props"
+                                        :class="isHovering ? 'cursor-pointer' : ''"
+                                        @click="
+                                            copyToClipboard(administrativeInformationObject.templateId, 'Template ID')
+                                        ">
+                                        <v-icon v-if="isHovering" color="subtitleText" size="x-small" class="mr-1">{{
+                                            copyIcon
+                                        }}</v-icon>
+                                        <span>{{ administrativeInformationObject.templateId }}</span>
+                                    </div>
+                                </template>
+                            </v-list-item>
+                        </v-hover>
+                    </v-list>
+                    <v-divider
+                        v-if="
+                            ((Array.isArray(administrativeInformationObject?.creator?.keys) &&
+                                administrativeInformationObject?.creator?.keys.length > 0) ||
+                                administrativeInformationObject?.version ||
+                                administrativeInformationObject?.revision ||
+                                administrativeInformationObject?.templateId) &&
+                            Array.isArray(administrativeInformationObject?.embeddedDataSpecifications) &&
+                            administrativeInformationObject?.embeddedDataSpecifications.length > 0
+                        "
+                        opacity="0.05"></v-divider>
+                    <!-- Embedded Data Specifications -->
+                    <v-list
+                        v-if="
+                            Array.isArray(administrativeInformationObject?.embeddedDataSpecifications) &&
+                            administrativeInformationObject?.embeddedDataSpecifications.length > 0
+                        "
+                        nav
+                        class="pa-0">
+                        <v-card
+                            v-for="(
+                                embeddedDataSpecification, i
+                            ) in administrativeInformationObject.embeddedDataSpecifications"
+                            :key="i"
+                            color="elevatedCard"
+                            class="mt-2">
+                            <v-list nav class="bg-elevatedCard pt-0">
+                                <!-- hasDataSpecification -->
+                                <SemanticID
+                                    v-if="
+                                        Array.isArray(embeddedDataSpecification?.dataSpecification?.keys) &&
+                                        embeddedDataSpecification?.dataSpecification?.keys.length > 0
+                                    "
+                                    :semantic-id-object="embeddedDataSpecification.dataSpecification"
+                                    :semantic-title="'Data Specification'"
+                                    class="mb-2"></SemanticID>
+                                <v-divider v-if="embeddedDataSpecification?.dataSpecificationContent"></v-divider>
+                                <!-- dataSpecificationContent -->
+                                <DataSpecificationContent
+                                    v-if="embeddedDataSpecification?.dataSpecificationContent"
+                                    :data-specification-object="
+                                        embeddedDataSpecification?.dataSpecificationContent
+                                    "></DataSpecificationContent>
+                            </v-list>
+                        </v-card>
+                    </v-list>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+        </v-expansion-panels>
     </v-container>
 </template>
 
@@ -163,7 +177,25 @@
             SemanticID,
             DataSpecificationContent,
         },
-        props: ['administrativeInformationObject', 'administrativeInformationTitle', 'small'],
+        // props: ['administrativeInformationObject', 'administrativeInformationTitle', 'small', 'backgroundColor'],
+        props: {
+            administrativeInformationObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            administrativeInformationTitle: {
+                type: String,
+                default: '',
+            },
+            small: {
+                type: Boolean,
+                default: true,
+            },
+            backgroundColor: {
+                type: String,
+                default: '',
+            },
+        },
 
         setup() {
             const navigationStore = useNavigationStore();
@@ -204,3 +236,12 @@
         },
     });
 </script>
+
+<style lang="css" scoped>
+    .v-expansion-panel-text >>> .v-expansion-panel-text__wrapper {
+        padding-left: 8px !important;
+        padding-right: 8px !important;
+        padding-top: 0px !important;
+        padding-bottom: 12px !important;
+    }
+</style>

From 952577f34c3064d0835bea87bd4a8f9636053337 Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Mon, 9 Dec 2024 13:56:16 +0100
Subject: [PATCH 6/6] Fix margin

---
 aas-web-ui/src/components/AppNavigation/AASListDetails.vue     | 1 -
 .../UIComponents/AdministrativeInformationElement.vue          | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
index 5ec9dca..0ca4f5a 100644
--- a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
@@ -58,7 +58,6 @@
                                     detailsObject.administration.version != '')
                             "
                             class="mt-2"></v-divider>
-                        {{ console.log(detailsObject.administration) }}
                         <AdministrativeInformationElement
                             v-if="detailsObject.administration"
                             :administrative-information-object="detailsObject.administration"
diff --git a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
index 9f6ae39..1eead98 100644
--- a/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
+++ b/aas-web-ui/src/components/UIComponents/AdministrativeInformationElement.vue
@@ -13,6 +13,7 @@
                             Array.isArray(administrativeInformationObject?.creator?.keys) &&
                             administrativeInformationObject?.creator?.keys.length > 0
                         "
+                        class="mb-1"
                         opacity="0.05"></v-divider>
                     <v-list nav class="pa-0">
                         <!-- Creator -->
@@ -238,7 +239,7 @@
 </script>
 
 <style lang="css" scoped>
-    .v-expansion-panel-text >>> .v-expansion-panel-text__wrapper {
+    .v-expansion-panel-text :deep(.v-expansion-panel-text__wrapper) {
         padding-left: 8px !important;
         padding-right: 8px !important;
         padding-top: 0px !important;