5472 task after enriching a model should show the descriptions

packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue

@@ -3,12 +3,12 @@
 		<span class="flex align-items-center gap-3">
 			<h6>{{ symbol }}</h6>
 			<span class="name">
-				<template v-if="featureConfig.isPreview">{{ item.name }}</template>
+				<template v-if="featureConfig.isPreview">{{ nameText }}</template>
 				<tera-input-text
 					v-else
 					placeholder="Add a name"
-					v-model="name"
-					@change="$emit('update-item', { key: 'name', value: name })"
+					v-model="nameText"
+					@change="$emit('update-item', { key: 'name', value: nameText })"
 				/>
 			</span>
 			<span class="unit">
@@ -18,7 +18,7 @@
 				</template>
 				<!--amr_to_mmt doesn't like unit expressions with spaces, removing them here before they are saved to the amr-->
 				<template v-else-if="showUnit">
-					<template v-if="featureConfig.isPreview"><label>Unit</label>{{ item.unitExpression }}</template>
+					<template v-if="featureConfig.isPreview"><label>Unit</label>{{ unitExpression }}</template>
 					<!-- we use a dropdown for units with time semantic-->
 					<Dropdown
 						v-else-if="isTimePart"
@@ -47,7 +47,7 @@
 			<span v-if="!featureConfig.isPreview" class="flex ml-auto gap-3">
 				<!-- Three states of description buttons: Hide / Show / Add description -->
 				<Button
-					v-if="(item.description && showDescription) || (!item.description && showDescription)"
+					v-if="(descriptionText && showDescription) || (!descriptionText && showDescription)"
 					text
 					size="small"
 					label="Hide description"
@@ -57,7 +57,7 @@
 					v-else-if="!showDescription"
 					text
 					size="small"
-					:label="item.description ? 'Show description' : 'Add description'"
+					:label="descriptionText ? 'Show description' : 'Add description'"
 					@click="showDescription = true"
 				/>
 				<span v-if="showConcept" class="concept">
@@ -85,12 +85,12 @@
 			:throw-on-error="false"
 		/>
 		<span class="description">
-			<template v-if="featureConfig.isPreview">{{ item.description }}</template>
+			<template v-if="featureConfig.isPreview">{{ descriptionText }}</template>
 			<tera-input-text
 				v-if="showDescription"
 				placeholder="Add a description"
-				v-model="description"
-				@change="$emit('update-item', { key: 'description', value: description })"
+				v-model="descriptionText"
+				@change="$emit('update-item', { key: 'description', value: descriptionText })"
 			/>
 		</span>
 	</section>
@@ -111,22 +111,27 @@ import { CalendarDateType } from '@/types/common';
 
 const props = defineProps<{
 	item: ModelPartItem;
+	description?: string;
+	name?: string;
+	unitExpression?: string;
+	templateId?: string;
+	id?: string;
 	featureConfig: FeatureConfig;
 	isTimePart?: boolean;
 }>();
 
 const emit = defineEmits(['update-item']);
 
-const name = ref(props.item.name);
-const unitExpression = ref(props.item.unitExpression);
-const description = ref(props.item.description);
+const nameText = ref(props.name);
+const unitExpression = ref(props.unitExpression);
+const descriptionText = ref(props.description);
 const query = ref('');
 const results = ref<DKG[]>([]);
 
-const symbol = computed(() => (props.item.templateId ? `${props.item.templateId}, ${props.item.id}` : props.item.id));
+const symbol = computed(() => (props.templateId ? `${props.templateId}, ${props.id}` : props.id));
 
 // If we are in preview mode and there is no content, show nothing
-const showUnit = computed(() => !(props.featureConfig.isPreview && !props.item.unitExpression));
+const showUnit = computed(() => !(props.featureConfig.isPreview && !unitExpression.value));
 const showConcept = computed(() => !(props.featureConfig.isPreview && !query.value));
 
 // Used if an option isn't selected from the Autocomplete suggestions but is typed in regularly
@@ -152,8 +157,15 @@ watch(
 	{ immediate: true }
 );
 
-const showDescription = ref(false);
-if (props.item.description) showDescription.value = true;
+watch(
+	() => props.item.description,
+	(newDescription) => {
+		showDescription.value = !!newDescription;
+		descriptionText.value = newDescription;
+	},
+	{ deep: true }
+);
+const showDescription = ref(!!descriptionText.value);
 </script>
 
 <style scoped>

packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue

@@ -120,6 +120,11 @@
 						>
 							<tera-model-part-entry
 								:item="child"
+								:description="child.description"
+								:name="child.name"
+								:id="child.id"
+								:templateId="child.templateId"
+								:unitExpression="child.unitExpression"
 								:feature-config="featureConfig"
 								@update-item="$emit('update-item', { id: child.id, ...$event })"
 							/>
@@ -141,6 +146,11 @@
 				v-else
 				:is-time-part="!!isTimePart"
 				:item="base"
+				:description="base.description"
+				:name="base.name"
+				:id="base.id"
+				:templateId="base.templateId"
+				:unitExpression="base.unitExpression"
 				:feature-config="featureConfig"
 				@update-item="$emit('update-item', { id: base.id, ...$event })"
 			/>
@@ -172,7 +182,7 @@ import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import Paginator from 'primevue/paginator';
 
 const props = defineProps<{
-	items: { base: ModelPartItem; children: ModelPartItem[]; isParent: boolean }[];
+	items: any[];
 	featureConfig: FeatureConfig;
 	collapsedItems?: Map<string, string[]>;
 	showMatrix?: boolean;