Usage of english DisplayName (if available) instead of idShort in SM …

…Plugins (#211) * Usage of english DisplayName (if available) instead of idShort in SM Plugins * Move nameToDisplay() to mixin SubmodelElementHandling * Adapt import of SubmodelElementHandling mixin
eclipse-basyx · Jul 24, 2024 · b628683 · b628683
1 parent cbbac59
commit b628683
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 39 deletions.
diff --git a/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/ContactInformation.vue b/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/ContactInformation.vue
@@ -14,7 +14,7 @@
                         <template v-slot:prepend>
                             <v-icon size="small">mdi-card-account-phone</v-icon>
                         </template>
-                        <v-list-item-title>{{ contact.idShort }}</v-list-item-title>
+                        <v-list-item-title>{{ nameToDisplay(contact) }}</v-list-item-title>
                     </v-list-item>
                 </v-expansion-panel-title>
                 <v-divider v-if="panel === index"></v-divider>
@@ -25,7 +25,7 @@
                             <tr v-for="(generalProperty, index) in contact.generalProperties" :key="generalProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                                 <td>
                                     <div class="text-subtitleText text-caption">
-                                        <span>{{ generalProperty.idShort }}</span>
+                                        <span>{{ nameToDisplay(generalProperty) }}</span>
                                         <v-tooltip v-if="generalProperty.description && generalProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                             <div v-for="(description, i) in generalProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                         </v-tooltip>

diff --git a/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/DigitalNameplate.vue b/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/DigitalNameplate.vue
@@ -17,7 +17,7 @@
                         <tr v-for="(productProperty, index) in productProperties" :key="productProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                             <td>
                                 <div class="text-subtitleText text-caption">
-                                    <span>{{ productProperty.idShort }}</span>
+                                    <span>{{ nameToDisplay(productProperty) }}</span>
                                     <v-tooltip v-if="productProperty.description && productProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                         <div v-for="(description, i) in productProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                     </v-tooltip>
@@ -58,7 +58,7 @@
                         <tr v-for="(manufacturerProperty, index) in manufacturerProperties" :key="manufacturerProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                             <td>
                                 <div class="text-subtitleText text-caption">
-                                    <span>{{ manufacturerProperty.idShort }}</span>
+                                    <span>{{ nameToDisplay(manufacturerProperty) }}</span>
                                     <v-tooltip v-if="manufacturerProperty.description && manufacturerProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                         <div v-for="(description, i) in manufacturerProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                     </v-tooltip>

diff --git a/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/TechnicalData.vue b/aas-gui/Frontend/aas-web-gui/src/components/SubmodelPlugins/TechnicalData.vue
@@ -25,7 +25,7 @@
                             <tr v-for="(generalProperty, index) in generalProperties" :key="generalProperty.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                                 <td>
                                     <div class="text-subtitleText text-caption">
-                                        <span>{{ generalProperty.idShort }}</span>
+                                        <span>{{ nameToDisplay(generalProperty) }}</span>
                                         <v-tooltip v-if="generalProperty.description && generalProperty.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                             <div v-for="(description, i) in generalProperty.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                         </v-tooltip>
@@ -67,7 +67,7 @@
                                 <tr v-if="productClassifications.length > 0">
                                     <th v-for="classificationProperty in productClassifications[0].value" :key="classificationProperty.idShort">
                                         <v-list-item class="pl-0">
-                                            <v-list-item-title class="text-caption">{{ classificationProperty.idShort }}</v-list-item-title>
+                                            <v-list-item-title class="text-caption">{{ nameToDisplay(classificationProperty) }}</v-list-item-title>
                                         </v-list-item>
                                     </th>
                                 </tr>
@@ -122,7 +122,7 @@
                             <tr v-for="(furtherInfo, index) in furtherInformation" :key="furtherInfo.idShort" :class="index % 2 === 0 ? 'tableEven' : 'bg-tableOdd'">
                                 <td>
                                     <div class="text-subtitleText text-caption">
-                                        <span>{{ furtherInfo.idShort }}</span>
+                                        <span>{{ nameToDisplay(furtherInfo) }}</span>
                                         <v-tooltip v-if="furtherInfo.description && furtherInfo.description.length > 0" activator="parent" open-delay="600" transition="slide-y-transition" max-width="360px" location="bottom">
                                             <div v-for="(description, i) in furtherInfo.description" :key="i" class="text-caption"><span class="font-weight-bold">{{ description.language + ': ' }}</span>{{ description.text }}</div>
                                         </v-tooltip>

diff --git a/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/GenericDataVisu.vue b/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/GenericDataVisu.vue
@@ -3,7 +3,7 @@
         <v-expansion-panels multiple class="mt-3">
             <v-expansion-panel v-for="(submodelElement, index) in localSubmodelElementData" :key="submodelElement.id">
                 <v-expansion-panel-title color="elevatedCard">
-                    <span v-if="submodelElement.idShort">{{ submodelElement.idShort }}</span>
+                    <span v-if="submodelElement.idShort">{{ nameToDisplay(submodelElement) }}</span>
                     <span v-else>{{ 'Element ' + (index + 1) }}</span>
                 </v-expansion-panel-title>
                 <v-expansion-panel-text>
@@ -121,7 +121,6 @@ export default defineComponent({
             // console.log('SubmodelElementData: ', submodelElementData);
             this.localSubmodelElementData = submodelElementData;
         },
-        
     },
 });
 </script>
diff --git a/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/IdentificationElement.vue b/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/IdentificationElement.vue
@@ -9,7 +9,7 @@
                 </v-tooltip>
                 <!-- idShort -->
                 <template v-slot:title>
-                    <div class="text-primary text-subtitle-1">{{ nameToDisplay }}</div>
+                    <div class="text-primary text-subtitle-1">{{ nameToDisplay(identificationObject) }}</div>
                     <div v-if="identificationObject.id">{{ idType + ':' }}</div>
                 </template>
                 <!-- identification id -->
@@ -31,9 +31,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useNavigationStore } from '@/store/NavigationStore';
+import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
 
 export default defineComponent({
     name: 'IdentificationElement',
+    mixins: [SubmodelElementHandling],
     props: ['identificationObject', 'modelType', 'idType', 'nameType'],
 
     setup() {
@@ -50,17 +52,6 @@ export default defineComponent({
         }
     },
 
-    computed: {
-        // Name of the identificationObject to be displayed
-        nameToDisplay() {
-            if (this.identificationObject.displayName) {
-                let displayNameEn = this.identificationObject.displayName.find((displayName: any) => { return (displayName.language === 'en' && displayName.text !== ''); });
-                if (displayNameEn && displayNameEn.text) return displayNameEn.text;
-            }
-            return (this.identificationObject.idShort ? this.identificationObject.idShort : '');
-        },
-    },
-
     methods: {
         // Function to copy the id to the clipboard
         copyToClipboard() {

diff --git a/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/SubmodelElementGroup.vue b/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/SubmodelElementGroup.vue
@@ -183,15 +183,6 @@ export default defineComponent({
     },
 
     methods: {
-        // Name to be displayed
-        nameToDisplay(submodelElement: any) {
-            if (submodelElement.displayName) {
-                let displayNameEn = submodelElement.displayName.find((displayName: any) => { return (displayName.language === 'en' && displayName.text !== ''); });
-                if (displayNameEn && displayNameEn.text) return displayNameEn.text;
-            }
-            return (submodelElement.idShort ? submodelElement.idShort : '');
-        },
-
         referenceKeyTypeToDisplay(keys: any): string {
             if (keys?.length > 0) {
                 return keys[keys.length - 1].type;

diff --git a/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/VTreeview.vue b/aas-gui/Frontend/aas-web-gui/src/components/UIComponents/VTreeview.vue
@@ -3,7 +3,7 @@
         <!-- List Item with a Submodel / SubmodelelementCollection / submodelElement (like Property) -->
         <!-- TODO: Fix weird Ripple effect on isActive change to false -->
         <v-list-item @click="toggleNode()" :style="{ 'padding-left': depth * 22 + 'px' }" density="compact" class="py-0" nav color="primary" :active="item.isActive">
-            <v-list-item-title>{{ nameToDisplay }}</v-list-item-title>
+            <v-list-item-title>{{ (nameToDisplay(item)) }}</v-list-item-title>
             <template v-slot:prepend>
                 <!-- Button to show/hide children -->
                 <v-btn v-if="item.children" size="small" variant="plain" @click.stop="toggleChildren()" :icon="showChildren ? 'mdi-menu-down' : 'mdi-menu-right'" :ripple="false"></v-btn>
@@ -49,9 +49,11 @@ import { defineComponent } from 'vue';
 import { useNavigationStore } from '@/store/NavigationStore';
 import { useAASStore } from '@/store/AASDataStore';
 import { useTheme } from 'vuetify';
+import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
 
 export default defineComponent({
     name: 'VTreeview',
+    mixins: [SubmodelElementHandling],
     props: ['item', 'depth'],
 
     setup() {
@@ -100,14 +102,6 @@ export default defineComponent({
         SelectedAAS() {
             return this.aasStore.getSelectedAAS;
         },
-        // Name of the item to be displayed
-        nameToDisplay() {
-            if (this.item.displayName) {
-                let displayNameEn = this.item.displayName.find((displayName: any) => { return (displayName.language === 'en' && displayName.text !== ''); });
-                if (displayNameEn && displayNameEn.text) return displayNameEn.text;
-            }
-            return (this.item.idShort ? this.item.idShort : '');
-        },
     },
 
     methods: {

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