From 6cd518e2fbe3e7fbc7dceb7692dc233152f51f7e Mon Sep 17 00:00:00 2001
From: Sebastian Eicke <sebastian.eicke@HARTING.com>
Date: Thu, 31 Oct 2024 14:46:04 +0100
Subject: [PATCH 1/4] Disable form inputs/buttons within GenericDataVisu

---
 .../src/components/SubmodelElements/Blob.vue  | 14 ++++++--
 .../components/SubmodelElements/Entity.vue    | 11 +++++-
 .../src/components/SubmodelElements/File.vue  | 14 ++++++--
 .../MultiLanguageProperty.vue                 | 12 ++++++-
 .../components/SubmodelElements/Operation.vue | 13 ++++++-
 .../components/SubmodelElements/Property.vue  | 23 ++++++++++++-
 .../src/components/SubmodelElements/Range.vue | 12 ++++++-
 .../SubmodelElements/ReferenceElement.vue     | 22 ++++++++++--
 .../SubmodelElements/RelationshipElement.vue  | 11 +++++-
 .../ValueTypes/BooleanType.vue                | 21 +++++++++++-
 .../ValueTypes/DateTimeStampType.vue          | 20 ++++++++++-
 .../ValueTypes/NumberType.vue                 | 22 ++++++++++--
 .../ValueTypes/StringType.vue                 | 20 ++++++++++-
 .../UIComponents/GenericDataVisu.vue          | 34 +++++++++++++------
 14 files changed, 222 insertions(+), 27 deletions(-)

diff --git a/aas-web-ui/src/components/SubmodelElements/Blob.vue b/aas-web-ui/src/components/SubmodelElements/Blob.vue
index a9c6aee..722d091 100644
--- a/aas-web-ui/src/components/SubmodelElements/Blob.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Blob.vue
@@ -35,6 +35,7 @@
                             density="compact"
                             :hide-details="isTruncated ? false : true"
                             clearable
+                            :disabled="!isEditable"
                             :hint="isTruncated ? 'Blob string is truncated!' : ''"
                             persistent-hint
                             @keydown.enter="updateBlob()"
@@ -59,7 +60,7 @@
             </v-list>
             <v-divider></v-divider>
             <!-- Action Button to upload a File as Blob -->
-            <v-list nav class="bg-elevatedCard pa-0">
+            <v-list v-if="isEditable" nav class="bg-elevatedCard pa-0">
                 <v-list-item>
                     <template #title>
                         <!-- Upload-Button -->
@@ -99,7 +100,16 @@
     export default defineComponent({
         name: 'Blob',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['blobObject'],
+        props: {
+            blobObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Entity.vue b/aas-web-ui/src/components/SubmodelElements/Entity.vue
index 287522f..a8b9692 100644
--- a/aas-web-ui/src/components/SubmodelElements/Entity.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Entity.vue
@@ -77,7 +77,16 @@
             SubmodelElementGroup,
         },
         mixins: [SubmodelElementHandling],
-        props: ['entityObject'],
+        props: {
+            entityObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/File.vue b/aas-web-ui/src/components/SubmodelElements/File.vue
index 3b20841..36a3ded 100644
--- a/aas-web-ui/src/components/SubmodelElements/File.vue
+++ b/aas-web-ui/src/components/SubmodelElements/File.vue
@@ -36,6 +36,7 @@
                             density="compact"
                             hide-details
                             clearable
+                            :disabled="!isEditable"
                             @keydown.enter="updatePath()"
                             @click:clear="clearPath()"
                             @update:focused="setFocus">
@@ -69,7 +70,7 @@
             </v-list>
             <v-divider></v-divider>
             <!-- Action Button to upload a File -->
-            <v-list nav class="bg-elevatedCard pa-0">
+            <v-list v-if="isEditable" nav class="bg-elevatedCard pa-0">
                 <v-list-item>
                     <template #title>
                         <!-- Upload-Button -->
@@ -109,7 +110,16 @@
     export default defineComponent({
         name: 'File',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['fileObject'],
+        props: {
+            fileObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
index 5305900..523eaa5 100644
--- a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
+++ b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
@@ -15,6 +15,7 @@
                             density="compact"
                             hide-details
                             clearable
+                            :disabled="!isEditable"
                             append-icon="mdi-delete"
                             @click:append="removeEntry(i)"
                             @update:focused="setFocus($event, value)"
@@ -95,7 +96,16 @@
     export default defineComponent({
         name: 'MultiLanguageProperty',
         mixins: [RequestHandling],
-        props: ['multiLanguagePropertyObject'],
+        props: {
+            multiLanguagePropertyObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Operation.vue b/aas-web-ui/src/components/SubmodelElements/Operation.vue
index aa96e13..ebda06c 100644
--- a/aas-web-ui/src/components/SubmodelElements/Operation.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Operation.vue
@@ -39,12 +39,14 @@
                                         :property-object="variable.value"
                                         :is-operation-variable="true"
                                         :variable-type="variableType.type"
+                                        :is-editable="isEditable"
                                         @update-value="updateOperationVariable($event, variable.value)"></Property>
                                     <ReferenceElement
                                         v-else-if="variable.value.modelType === 'ReferenceElement'"
                                         :reference-element-object="variable.value"
                                         :is-operation-variable="true"
                                         :variable-type="variableType.type"
+                                        :is-editable="isEditable"
                                         @update-value="
                                             updateOperationVariable($event, variable.value)
                                         "></ReferenceElement>
@@ -120,7 +122,16 @@
             InvalidElement,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['operationObject'],
+        props: {
+            operationObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const navigationStore = useNavigationStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Property.vue b/aas-web-ui/src/components/SubmodelElements/Property.vue
index 7d09eb8..3c46b27 100644
--- a/aas-web-ui/src/components/SubmodelElements/Property.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Property.vue
@@ -46,24 +46,28 @@
                     :number-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></NumberType>
                 <BooleanType
                     v-else-if="propertyObject.valueType == 'xs:boolean'"
                     :boolean-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></BooleanType>
                 <DateTimeStampType
                     v-else-if="propertyObject.valueType == 'xs:dateTime'"
                     :date-time-stamp-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></DateTimeStampType>
                 <StringType
                     v-else
                     :string-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></StringType>
             </v-list>
         </v-card>
@@ -90,7 +94,24 @@
             DateTimeStampType,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['propertyObject', 'isOperationVariable', 'variableType'],
+        props: {
+            propertyObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'string',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Range.vue b/aas-web-ui/src/components/SubmodelElements/Range.vue
index 724a9f8..b548e64 100644
--- a/aas-web-ui/src/components/SubmodelElements/Range.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Range.vue
@@ -11,6 +11,7 @@
                 hide-details
                 class="align-center"
                 readonly
+                :disabled="!isEditable"
                 color="primary"
                 thumb-label="always">
                 <!-- <template v-slot:prepend>
@@ -36,7 +37,16 @@
     export default defineComponent({
         name: 'Range',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['rangeObject'],
+        props: {
+            rangeObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
index 1e2beea..d8b7507 100644
--- a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
@@ -39,6 +39,7 @@
                                 density="compact"
                                 hide-details
                                 clearable
+                                :disabled="!isEditable"
                                 append-icon="mdi-delete"
                                 @click:append="removeReferenceEntry(i)"
                                 @update:focused="setFocus($event)"
@@ -100,7 +101,7 @@
                         >
                         <!-- Add new Reference Entry -->
                         <v-btn
-                            v-if="IsOperationVariable && !IsOutputVariable"
+                            v-if="!isEditable && IsOperationVariable && !IsOutputVariable"
                             size="small"
                             class="text-buttonText"
                             color="primary"
@@ -126,7 +127,24 @@
     export default defineComponent({
         name: 'ReferenceElement',
         mixins: [SubmodelElementHandling],
-        props: ['referenceElementObject', 'isOperationVariable', 'variableType'],
+        props: {
+            referenceElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
index 845e34d..1a870d6 100644
--- a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
@@ -73,7 +73,16 @@
     export default defineComponent({
         name: 'RelationshipElement',
         mixins: [SubmodelElementHandling],
-        props: ['relationshipElementObject'],
+        props: {
+            relationshipElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
index ea8f15b..646a322 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
@@ -5,6 +5,7 @@
                 v-model="newBooleanValue"
                 inset
                 density="compact"
+                :disabled="isEditable"
                 :readonly="IsOutputVariable"
                 color="primary"
                 :messages="
@@ -17,6 +18,7 @@
                 </template>
             </v-switch>
         </template>
+        <!-- Update Value Button -->
         <template #append>
             <v-btn
                 v-if="!IsOperationVariable"
@@ -40,7 +42,24 @@
     export default defineComponent({
         name: 'BooleanType',
         mixins: [RequestHandling],
-        props: ['booleanValue', 'isOperationVariable', 'variableType'],
+        props: {
+            booleanValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
index 22d1df1..edbe08b 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
@@ -7,6 +7,7 @@
                 variant="outlined"
                 density="compact"
                 clearable
+                :disabled="!isEditable"
                 :color="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'warning'"
                 :persistent-hint="!IsOperationVariable"
                 :hint="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'Current Value not yet saved.'"
@@ -54,7 +55,24 @@
     export default defineComponent({
         name: 'DateTimeStampType',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['dateTimeStampValue', 'isOperationVariable', 'variableType'],
+        props: {
+            dateTimeStampValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
index 6e438b5..1834479 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
@@ -7,7 +7,8 @@
                 variant="outlined"
                 density="compact"
                 clearable
-                :readonly="IsOutputVariable"
+                :disabled="!isEditable"
+                :readonly="IsOutputVariable || !isEditable"
                 :hint="isOperationVariable ? '' : 'greyed out value on the left shows the current value in the AAS'"
                 :label="isOperationVariable ? numberValue.idShort : ''"
                 :hide-details="IsOperationVariable ? true : false"
@@ -60,7 +61,24 @@
     export default defineComponent({
         name: 'NumberType',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['numberValue', 'isOperationVariable', 'variableType'],
+        props: {
+            numberValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
index 9716cbd..c3c4d63 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
@@ -6,6 +6,7 @@
                 variant="outlined"
                 density="compact"
                 clearable
+                :disabled="!isEditable"
                 :readonly="IsOutputVariable"
                 auto-grow
                 :rows="1"
@@ -38,7 +39,24 @@
     export default defineComponent({
         name: 'StringType',
         mixins: [RequestHandling],
-        props: ['stringValue', 'isOperationVariable', 'variableType'],
+        props: {
+            stringValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
index c1cccf7..4022c1f 100644
--- a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
+++ b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
@@ -14,30 +14,44 @@
                         <!-- SubmodelELement Representation for different modelTypes -->
                         <Property
                             v-if="submodelElement.modelType === 'Property'"
-                            :property-object="submodelElement"></Property>
+                            :property-object="submodelElement"
+                            :is-editable="false"></Property>
                         <MultyLanguageProperty
                             v-else-if="submodelElement.modelType === 'MultiLanguageProperty'"
-                            :multi-language-property-object="submodelElement"></MultyLanguageProperty>
+                            :multi-language-property-object="submodelElement"
+                            :is-editable="false"></MultyLanguageProperty>
                         <Operation
                             v-else-if="submodelElement.modelType === 'Operation'"
-                            :operation-object="submodelElement"></Operation>
-                        <File v-else-if="submodelElement.modelType === 'File'" :file-object="submodelElement"></File>
-                        <Blob v-else-if="submodelElement.modelType === 'Blob'" :blob-object="submodelElement"></Blob>
+                            :operation-object="submodelElement"
+                            :is-editable="false"></Operation>
+                        <File
+                            v-else-if="submodelElement.modelType === 'File'"
+                            :file-object="submodelElement"
+                            :is-editable="false"></File>
+                        <Blob
+                            v-else-if="submodelElement.modelType === 'Blob'"
+                            :blob-object="submodelElement"
+                            :is-editable="false"></Blob>
                         <ReferenceElement
                             v-else-if="submodelElement.modelType === 'ReferenceElement'"
-                            :reference-element-object="submodelElement"></ReferenceElement>
+                            :reference-element-object="submodelElement"
+                            :is-editable="false"></ReferenceElement>
                         <Range
                             v-else-if="submodelElement.modelType === 'Range'"
-                            :range-object="submodelElement"></Range>
+                            :range-object="submodelElement"
+                            :is-editable="false"></Range>
                         <Entity
                             v-else-if="submodelElement.modelType === 'Entity'"
-                            :entity-object="submodelElement"></Entity>
+                            :entity-object="submodelElement"
+                            :is-editable="false"></Entity>
                         <RelationshipElement
                             v-else-if="submodelElement.modelType === 'RelationshipElement'"
-                            :relationship-element-object="submodelElement"></RelationshipElement>
+                            :relationship-element-object="submodelElement"
+                            :is-editable="false"></RelationshipElement>
                         <AnnotatedRelationshipElement
                             v-else-if="submodelElement.modelType === 'AnnotatedRelationshipElement'"
-                            :annotated-relationship-element-object="submodelElement"></AnnotatedRelationshipElement>
+                            :annotated-relationship-element-object="submodelElement"
+                            :is-editable="false"></AnnotatedRelationshipElement>
                         <InvalidElement v-else :invalid-element-object="submodelElement"></InvalidElement>
                     </v-list>
                 </v-expansion-panel-text>

From f76eb722cbcac1b6007f2bb36e24be0015d87517 Mon Sep 17 00:00:00 2001
From: Aaron Zielstorff <aaron.zi@web.de>
Date: Fri, 1 Nov 2024 09:05:01 +0100
Subject: [PATCH 2/4] changes from disabled to readonly, minor fixes

---
 .../AnnotatedRelationshipElement.vue          | 16 +++++-
 .../src/components/SubmodelElements/Blob.vue  |  6 +-
 .../components/SubmodelElements/Entity.vue    |  4 --
 .../src/components/SubmodelElements/File.vue  |  6 +-
 .../MultiLanguageProperty.vue                 |  8 +--
 .../src/components/SubmodelElements/Range.vue |  5 --
 .../SubmodelElements/ReferenceElement.vue     | 10 ++--
 .../SubmodelElements/RelationshipElement.vue  |  8 +--
 .../ValueTypes/BooleanType.vue                |  5 +-
 .../ValueTypes/DateTimeStampType.vue          |  6 +-
 .../ValueTypes/NumberType.vue                 |  5 +-
 .../ValueTypes/StringType.vue                 |  7 +--
 .../UIComponents/GenericDataVisu.vue          |  9 +--
 .../UIComponents/SubmodelElementWrapper.vue   | 55 +++++++++++++------
 14 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue b/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
index a254498..7a8ebc3 100644
--- a/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
@@ -15,8 +15,9 @@
             <component
                 :is="SubmodelElementWrapper"
                 v-if="SubmodelElementWrapper"
-                :SubmodelElementObject="SubmodelElement"
-                :card-style="'outlined'"></component>
+                :submodel-element-object="SubmodelElement"
+                :card-style="'outlined'"
+                :is-editable="isEditable"></component>
         </div>
     </v-container>
 </template>
@@ -32,7 +33,16 @@
             RelationshipElement,
             // SubmodelElementWrapper,
         },
-        props: ['annotatedRelationshipElementObject'],
+        props: {
+            annotatedRelationshipElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const SubmodelElementWrapper = shallowRef(null) as any;
diff --git a/aas-web-ui/src/components/SubmodelElements/Blob.vue b/aas-web-ui/src/components/SubmodelElements/Blob.vue
index 722d091..1fe4e73 100644
--- a/aas-web-ui/src/components/SubmodelElements/Blob.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Blob.vue
@@ -34,8 +34,8 @@
                             variant="outlined"
                             density="compact"
                             :hide-details="isTruncated ? false : true"
-                            clearable
-                            :disabled="!isEditable"
+                            :clearable="isEditable"
+                            :readonly="!isEditable"
                             :hint="isTruncated ? 'Blob string is truncated!' : ''"
                             persistent-hint
                             @keydown.enter="updateBlob()"
@@ -44,7 +44,7 @@
                             <!-- Update Blob Button -->
                             <template #append-inner="{ isFocused }">
                                 <v-btn
-                                    v-if="isFocused"
+                                    v-if="isFocused && isEditable"
                                     size="small"
                                     variant="elevated"
                                     color="primary"
diff --git a/aas-web-ui/src/components/SubmodelElements/Entity.vue b/aas-web-ui/src/components/SubmodelElements/Entity.vue
index a8b9692..8922023 100644
--- a/aas-web-ui/src/components/SubmodelElements/Entity.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Entity.vue
@@ -82,10 +82,6 @@
                 type: Object,
                 default: () => ({}),
             },
-            isEditable: {
-                type: Boolean,
-                default: true,
-            },
         },
 
         setup() {
diff --git a/aas-web-ui/src/components/SubmodelElements/File.vue b/aas-web-ui/src/components/SubmodelElements/File.vue
index 36a3ded..ae87048 100644
--- a/aas-web-ui/src/components/SubmodelElements/File.vue
+++ b/aas-web-ui/src/components/SubmodelElements/File.vue
@@ -35,15 +35,15 @@
                             variant="outlined"
                             density="compact"
                             hide-details
-                            clearable
-                            :disabled="!isEditable"
+                            :clearable="isEditable"
+                            :readonly="!isEditable"
                             @keydown.enter="updatePath()"
                             @click:clear="clearPath()"
                             @update:focused="setFocus">
                             <!-- Update Path Button -->
                             <template #append-inner="{ isFocused }">
                                 <v-btn
-                                    v-if="isFocused"
+                                    v-if="isFocused && isEditable"
                                     size="small"
                                     variant="elevated"
                                     color="primary"
diff --git a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
index 523eaa5..fdf7b81 100644
--- a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
+++ b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
@@ -14,8 +14,8 @@
                             variant="outlined"
                             density="compact"
                             hide-details
-                            clearable
-                            :disabled="!isEditable"
+                            :clearable="isEditable"
+                            :readonly="!isEditable"
                             append-icon="mdi-delete"
                             @click:append="removeEntry(i)"
                             @update:focused="setFocus($event, value)"
@@ -26,7 +26,7 @@
                                     <span>{{ value.language ? value.language : 'no-lang' }}</span>
                                     <v-icon site="x-small" style="margin-right: -3px">mdi-chevron-down</v-icon>
                                     <!-- Menu to select the Language -->
-                                    <v-menu activator="parent">
+                                    <v-menu v-if="isEditable" activator="parent">
                                         <v-list density="compact" class="pa-0">
                                             <v-list-item
                                                 v-for="language in languages"
@@ -41,7 +41,7 @@
                             <!-- Update Value Button -->
                             <template #append-inner>
                                 <v-btn
-                                    v-if="value.isFocused"
+                                    v-if="value.isFocused && isEditable"
                                     size="small"
                                     variant="elevated"
                                     color="primary"
diff --git a/aas-web-ui/src/components/SubmodelElements/Range.vue b/aas-web-ui/src/components/SubmodelElements/Range.vue
index b548e64..9a66e06 100644
--- a/aas-web-ui/src/components/SubmodelElements/Range.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Range.vue
@@ -11,7 +11,6 @@
                 hide-details
                 class="align-center"
                 readonly
-                :disabled="!isEditable"
                 color="primary"
                 thumb-label="always">
                 <!-- <template v-slot:prepend>
@@ -42,10 +41,6 @@
                 type: Object,
                 default: () => ({}),
             },
-            isEditable: {
-                type: Boolean,
-                default: true,
-            },
         },
 
         setup() {
diff --git a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
index d8b7507..613fb44 100644
--- a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
@@ -38,8 +38,8 @@
                                 variant="outlined"
                                 density="compact"
                                 hide-details
-                                clearable
-                                :disabled="!isEditable"
+                                :clearable="isEditable"
+                                :readonly="!isEditable"
                                 append-icon="mdi-delete"
                                 @click:append="removeReferenceEntry(i)"
                                 @update:focused="setFocus($event)"
@@ -50,7 +50,7 @@
                                         <span>{{ value.type ? value.type : 'no-selection' }}</span>
                                         <v-icon site="x-small" style="margin-right: -3px">mdi-chevron-down</v-icon>
                                         <!-- Menu to select the Type of Element -->
-                                        <v-menu activator="parent">
+                                        <v-menu v-if="isEditable" activator="parent">
                                             <v-list density="compact" class="pa-0">
                                                 <v-list-item
                                                     v-for="elementType in elementTypes"
@@ -67,7 +67,7 @@
                                 <!-- Update Value Button -->
                                 <template #append-inner>
                                     <v-btn
-                                        v-if="value.isFocused"
+                                        v-if="value.isFocused && isEditable"
                                         size="small"
                                         variant="elevated"
                                         color="primary"
@@ -101,7 +101,7 @@
                         >
                         <!-- Add new Reference Entry -->
                         <v-btn
-                            v-if="!isEditable && IsOperationVariable && !IsOutputVariable"
+                            v-if="isEditable && IsOperationVariable && !IsOutputVariable"
                             size="small"
                             class="text-buttonText"
                             color="primary"
diff --git a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
index 1a870d6..8efc9d4 100644
--- a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
@@ -20,13 +20,13 @@
                             </v-tooltip>
                             <!-- Reference Title -->
                             <template #title>
-                                <div class="text-subtitle-2 mt-2" v-html="'Description:'"></div>
+                                <div class="text-subtitle-2 mt-2">Description:</div>
                             </template>
                             <!-- Reference Representation -->
                             <template #subtitle>
                                 <div class="pt-2">
                                     <v-chip label size="x-small" border class="mr-2">{{ value.type }}</v-chip>
-                                    <span v-html="value.value"></span>
+                                    <span>{{ value.value }}</span>
                                 </div>
                             </template>
                         </v-list-item>
@@ -78,10 +78,6 @@
                 type: Object,
                 default: () => ({}),
             },
-            isEditable: {
-                type: Boolean,
-                default: true,
-            },
         },
 
         setup() {
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
index 646a322..d1f02ca 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
@@ -5,8 +5,7 @@
                 v-model="newBooleanValue"
                 inset
                 density="compact"
-                :disabled="isEditable"
-                :readonly="IsOutputVariable"
+                :readonly="IsOutputVariable || !isEditable"
                 color="primary"
                 :messages="
                     isOperationVariable ? '' : 'greyed out value on the right shows the current value in the AAS'
@@ -21,7 +20,7 @@
         <!-- Update Value Button -->
         <template #append>
             <v-btn
-                v-if="!IsOperationVariable"
+                v-if="!IsOperationVariable && isEditable"
                 size="small"
                 variant="elevated"
                 color="primary"
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
index edbe08b..f7c1a25 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
@@ -6,8 +6,8 @@
                 type="text"
                 variant="outlined"
                 density="compact"
-                clearable
-                :disabled="!isEditable"
+                :clearable="isEditable"
+                :readonly="!isEditable"
                 :color="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'warning'"
                 :persistent-hint="!IsOperationVariable"
                 :hint="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'Current Value not yet saved.'"
@@ -19,7 +19,7 @@
                 <template #append-inner>
                     <span class="text-subtitleText">{{ unitSuffix(dateTimeStampValue) }}</span>
                     <v-btn
-                        v-if="!IsOperationVariable"
+                        v-if="!IsOperationVariable && isEditable"
                         size="small"
                         variant="elevated"
                         color="primary"
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
index 1834479..6cf413a 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
@@ -6,8 +6,7 @@
                 type="number"
                 variant="outlined"
                 density="compact"
-                clearable
-                :disabled="!isEditable"
+                :clearable="isEditable"
                 :readonly="IsOutputVariable || !isEditable"
                 :hint="isOperationVariable ? '' : 'greyed out value on the left shows the current value in the AAS'"
                 :label="isOperationVariable ? numberValue.idShort : ''"
@@ -37,7 +36,7 @@
                 <template #append-inner>
                     <span class="text-subtitleText">{{ unitSuffix(numberValue) }}</span>
                     <v-btn
-                        v-if="isFocused && !IsOperationVariable"
+                        v-if="isFocused && !IsOperationVariable && isEditable"
                         size="small"
                         variant="elevated"
                         color="primary"
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
index c3c4d63..1c3f47c 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
@@ -5,9 +5,8 @@
                 v-model="newStringValue"
                 variant="outlined"
                 density="compact"
-                clearable
-                :disabled="!isEditable"
-                :readonly="IsOutputVariable"
+                :clearable="isEditable"
+                :readonly="IsOutputVariable || !isEditable"
                 auto-grow
                 :rows="1"
                 :label="isOperationVariable ? stringValue.idShort : ''"
@@ -16,7 +15,7 @@
                 <!-- Update Value Button -->
                 <template #append-inner>
                     <v-btn
-                        v-if="!IsOperationVariable"
+                        v-if="!IsOperationVariable && isEditable"
                         size="small"
                         variant="elevated"
                         color="primary"
diff --git a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
index 4022c1f..2fdd88c 100644
--- a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
+++ b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
@@ -38,16 +38,13 @@
                             :is-editable="false"></ReferenceElement>
                         <Range
                             v-else-if="submodelElement.modelType === 'Range'"
-                            :range-object="submodelElement"
-                            :is-editable="false"></Range>
+                            :range-object="submodelElement"></Range>
                         <Entity
                             v-else-if="submodelElement.modelType === 'Entity'"
-                            :entity-object="submodelElement"
-                            :is-editable="false"></Entity>
+                            :entity-object="submodelElement"></Entity>
                         <RelationshipElement
                             v-else-if="submodelElement.modelType === 'RelationshipElement'"
-                            :relationship-element-object="submodelElement"
-                            :is-editable="false"></RelationshipElement>
+                            :relationship-element-object="submodelElement"></RelationshipElement>
                         <AnnotatedRelationshipElement
                             v-else-if="submodelElement.modelType === 'AnnotatedRelationshipElement'"
                             :annotated-relationship-element-object="submodelElement"
diff --git a/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue b/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
index b516440..455a391 100644
--- a/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
+++ b/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
@@ -3,27 +3,35 @@
         <v-card :variant="cardStyle ? cardStyle : 'elevated'">
             <v-list nav class="pt-0">
                 <MultiLanguageProperty
-                    v-if="SubmodelElementObject.modelType == 'MultiLanguageProperty'"
-                    :multi-language-property-object="SubmodelElementObject"></MultiLanguageProperty>
+                    v-if="submodelElementObject.modelType == 'MultiLanguageProperty'"
+                    :multi-language-property-object="submodelElementObject"
+                    :is-editable="isEditable"></MultiLanguageProperty>
                 <Property
-                    v-if="SubmodelElementObject.modelType == 'Property'"
-                    :property-object="SubmodelElementObject"
+                    v-if="submodelElementObject.modelType == 'Property'"
+                    :property-object="submodelElementObject"
+                    :is-editable="isEditable"
                     @update-value="updatePropertyValue"></Property>
-                <File v-if="SubmodelElementObject.modelType == 'File'" :file-object="SubmodelElementObject"></File>
-                <Blob v-if="SubmodelElementObject.modelType == 'Blob'" :blob-object="SubmodelElementObject"></Blob>
+                <File
+                    v-if="submodelElementObject.modelType == 'File'"
+                    :file-object="submodelElementObject"
+                    :is-editable="isEditable"></File>
+                <Blob v-if="submodelElementObject.modelType == 'Blob'" :blob-object="submodelElementObject"></Blob>
                 <Operation
-                    v-if="SubmodelElementObject.modelType == 'Operation'"
-                    :operation-object="SubmodelElementObject"></Operation>
+                    v-if="submodelElementObject.modelType == 'Operation'"
+                    :operation-object="submodelElementObject"
+                    :is-editable="isEditable"></Operation>
                 <ReferenceElement
-                    v-if="SubmodelElementObject.modelType == 'ReferenceElement'"
-                    :reference-element-object="SubmodelElementObject"></ReferenceElement>
-                <Range v-if="SubmodelElementObject.modelType == 'Range'" :range-object="SubmodelElementObject"></Range>
+                    v-if="submodelElementObject.modelType == 'ReferenceElement'"
+                    :reference-element-object="submodelElementObject"
+                    :is-editable="isEditable"></ReferenceElement>
+                <Range v-if="submodelElementObject.modelType == 'Range'" :range-object="submodelElementObject"></Range>
                 <RelationshipElement
-                    v-if="SubmodelElementObject.modelType == 'RelationshipElement'"
-                    :relationship-element-object="SubmodelElementObject"></RelationshipElement>
+                    v-if="submodelElementObject.modelType == 'RelationshipElement'"
+                    :relationship-element-object="submodelElementObject"></RelationshipElement>
                 <AnnotatedRelationshipElement
-                    v-if="SubmodelElementObject.modelType == 'AnnotatedRelationshipElement'"
-                    :annotated-relationship-element-object="SubmodelElementObject"></AnnotatedRelationshipElement>
+                    v-if="submodelElementObject.modelType == 'AnnotatedRelationshipElement'"
+                    :annotated-relationship-element-object="submodelElementObject"
+                    :is-editable="isEditable"></AnnotatedRelationshipElement>
             </v-list>
         </v-card>
     </v-container>
@@ -41,6 +49,8 @@
     import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
     import RelationshipElement from '@/components/SubmodelElements/RelationshipElement.vue';
 
+    type Variant = 'elevated' | 'outlined' | 'flat' | 'text' | 'tonal' | 'plain' | undefined;
+
     export default defineComponent({
         name: 'SubmodelELementWrapper',
         components: {
@@ -55,7 +65,20 @@
             RelationshipElement,
             AnnotatedRelationshipElement,
         },
-        props: ['SubmodelElementObject', 'cardStyle'],
+        props: {
+            submodelElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            cardStyle: {
+                type: String as () => Variant,
+                default: 'elevated',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         methods: {
             // Function to update the value of a property

From 91a6feade27015f8948e13c32c18389f94d8798d Mon Sep 17 00:00:00 2001
From: Aaron Zielstorff <aaron.zi@web.de>
Date: Fri, 1 Nov 2024 09:19:44 +0100
Subject: [PATCH 3/4] Remove clear button in operation when not editable

---
 aas-web-ui/src/components/SubmodelElements/Operation.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/aas-web-ui/src/components/SubmodelElements/Operation.vue b/aas-web-ui/src/components/SubmodelElements/Operation.vue
index ebda06c..075bbdf 100644
--- a/aas-web-ui/src/components/SubmodelElements/Operation.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Operation.vue
@@ -82,7 +82,13 @@
                 <v-list-item>
                     <template #append>
                         <!-- Clear-Button -->
-                        <v-btn size="small" variant="outlined" color="primary" class="mr-3" @click="clearFields()"
+                        <v-btn
+                            v-if="isEditable"
+                            size="small"
+                            variant="outlined"
+                            color="primary"
+                            class="mr-3"
+                            @click="clearFields()"
                             >clear</v-btn
                         >
                         <!-- Execute-Button -->

From 359737825488429e63ae3e8c3a0e105197acaf09 Mon Sep 17 00:00:00 2001
From: Aaron Zielstorff <aaron.zi@web.de>
Date: Fri, 1 Nov 2024 09:26:29 +0100
Subject: [PATCH 4/4] fixes multiLanguageProperty in GenericDataVisu

---
 .../components/SubmodelElements/MultiLanguageProperty.vue | 8 +++++---
 .../src/components/UIComponents/GenericDataVisu.vue       | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
index fdf7b81..1265b72 100644
--- a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
+++ b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
@@ -16,7 +16,7 @@
                             hide-details
                             :clearable="isEditable"
                             :readonly="!isEditable"
-                            append-icon="mdi-delete"
+                            :append-icon="isEditable ? 'mdi-delete' : undefined"
                             @click:append="removeEntry(i)"
                             @update:focused="setFocus($event, value)"
                             @keydown.enter="updateValue()">
@@ -24,7 +24,9 @@
                                 <!-- language -->
                                 <v-chip label size="x-small" border>
                                     <span>{{ value.language ? value.language : 'no-lang' }}</span>
-                                    <v-icon site="x-small" style="margin-right: -3px">mdi-chevron-down</v-icon>
+                                    <v-icon v-if="isEditable" site="x-small" style="margin-right: -3px">
+                                        mdi-chevron-down
+                                    </v-icon>
                                     <!-- Menu to select the Language -->
                                     <v-menu v-if="isEditable" activator="parent">
                                         <v-list density="compact" class="pa-0">
@@ -69,7 +71,7 @@
             </v-list>
             <v-divider></v-divider>
             <!-- Edit the MultiLanguageProperty -->
-            <v-list nav class="bg-elevatedCard py-0">
+            <v-list v-if="isEditable" nav class="bg-elevatedCard py-0">
                 <v-list-item>
                     <template #append>
                         <v-btn
diff --git a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
index 2fdd88c..e3cedf9 100644
--- a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
+++ b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
@@ -8,7 +8,11 @@
                 </v-expansion-panel-title>
                 <v-expansion-panel-text>
                     <GenericDataVisu
-                        v-if="Array.isArray(submodelElement.value) && submodelElement.value.length > 0"
+                        v-if="
+                            Array.isArray(submodelElement.value) &&
+                            submodelElement.value.length > 0 &&
+                            submodelElement.modelType !== 'MultiLanguageProperty'
+                        "
                         :submodel-element-data="submodelElement.value"></GenericDataVisu>
                     <v-list v-else nav class="px-4 pt-0 pb-0">
                         <!-- SubmodelELement Representation for different modelTypes -->