Visualization titles: Usage of nameToDisplay() and add description (#105

) * Visualization titles: Usage of nameToDisplay() and add description * Fix nameplate; remove ":" from titles * VisualizationTitle as computed value * Adapt nameToDisplay()
eclipse-basyx · Dec 6, 2024 · ef2c7e5 · ef2c7e5
1 parent 2e68ff8
commit ef2c7e5
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 58 deletions.
diff --git a/aas-web-ui/src/components/SubmodelPlugins/BillsOfMaterial.vue b/aas-web-ui/src/components/SubmodelPlugins/BillsOfMaterial.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Bills of Material:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Bills of Material') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- BoM Graph -->
         <v-card>

diff --git a/aas-web-ui/src/components/SubmodelPlugins/ContactInformation.vue b/aas-web-ui/src/components/SubmodelPlugins/ContactInformation.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Contact Information:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Contact Information') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Documents -->
         <v-card v-if="loading">

diff --git a/aas-web-ui/src/components/SubmodelPlugins/DigitalNameplate.vue b/aas-web-ui/src/components/SubmodelPlugins/DigitalNameplate.vue
diff --git a/aas-web-ui/src/components/SubmodelPlugins/HandoverDocumentation.vue b/aas-web-ui/src/components/SubmodelPlugins/HandoverDocumentation.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Handover Documentation:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Handover Documentation') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Documents -->
         <v-card v-if="loading">

diff --git a/aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue b/aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Technical Data:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Technical Data') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Technical Data Collections -->
         <v-card v-if="loading">

diff --git a/aas-web-ui/src/components/SubmodelPlugins/TimeSeriesData.vue b/aas-web-ui/src/components/SubmodelPlugins/TimeSeriesData.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card v-if="!hideSettings" class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Time Series Data:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Time Series Data') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Data Preview Config -->
         <v-card v-if="!hideSettings || editDialog" class="mb-4">

diff --git a/aas-web-ui/src/mixins/SubmodelElementHandling.ts b/aas-web-ui/src/mixins/SubmodelElementHandling.ts
@@ -664,14 +664,14 @@ export default defineComponent({
         },
 
         // Name to be displayed
-        nameToDisplay(sme: any) {
+        nameToDisplay(sme: any, defaultNameToDisplay = '') {
             if (sme.displayName) {
                 const displayNameEn = sme.displayName.find((displayName: any) => {
                     return displayName.language === 'en' && displayName.text !== '';
                 });
                 if (displayNameEn && displayNameEn.text) return displayNameEn.text;
             }
-            return sme.idShort ? sme.idShort : '';
+            return !defaultNameToDisplay && sme.idShort ? sme.idShort : defaultNameToDisplay;
         },
 
         descriptionToDisplay(referable: any) {