From 4cdb56b36539d07863c89a1841cc9320a663ff97 Mon Sep 17 00:00:00 2001
From: ck-c8y <christof.strack@cumulocity.com>
Date: Tue, 29 Oct 2024 22:37:11 +0100
Subject: [PATCH] Fix for #279

---
 .../mapping-type/mapping-type.component.html  | 34 +++++++++++--------
 .../mapping-properties.component.ts           | 10 ++----
 .../mapping-stepper.component.html            |  2 +-
 .../mapping-stepper.component.ts              | 16 +++++++--
 4 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html b/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html
index db16b10ed..ff29ed93c 100644
--- a/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html
+++ b/dynamic-mapping-ui/src/mapping/mapping-type/mapping-type.component.html
@@ -32,9 +32,7 @@ <h4>Add Mapping</h4>
   #addMappingRef
 >
   <div>
-    <p
-      class="text-center text-medium text-16 sticky-top bg-white"
-    >
+    <p class="text-center text-medium text-16 sticky-top bg-white">
       {{
         'Select mapping type for ' +
           (direction === Direction.INBOUND ? 'source ' : 'target') | translate
@@ -42,19 +40,22 @@ <h4>Add Mapping</h4>
     </p>
     <div class="p-24 modal-inner-scroll animated fadeIn">
       <c8y-list-group class="separator-top">
-        <c8y-li *ngFor="let q of MappingType | keyvalue">
-          <c8y-li-radio
+        <ng-container *ngFor="let q of MappingType | keyvalue">
+          <c8y-li
             *ngIf="
               MAPPING_TYPE_DESCRIPTION[q.key].properties[direction]
                 .directionSupported
             "
-            #liRadioOption1
-            name="mapping_type_group"
-            title="{{ q.value }}"
-            (click)="onSelectMappingType(q.value)"
-          ></c8y-li-radio>
-          <span>{{ q.value | humanize }}</span>
-        </c8y-li>
+          >
+            <c8y-li-radio
+              #liRadioOption1
+              name="mapping_type_group"
+              title="{{ q.value }}"
+              (click)="onSelectMappingType(q.value)"
+            ></c8y-li-radio>
+            <span>{{ q.value | humanize }}</span>
+          </c8y-li>
+        </ng-container>
       </c8y-list-group>
       <!-- <div
         #mappingTypes
@@ -105,9 +106,12 @@ <h4>Add Mapping</h4>
         </c8y-form-group>
         <!-- <label>Mapping type description</label> -->
         <c8y-form-group>
-          <textarea readonly c8y-textarea-autoresize class="form-control fit-w">{{
-            mappingTypeDescription
-          }}</textarea>
+          <textarea
+            readonly
+            c8y-textarea-autoresize
+            class="form-control fit-w"
+            >{{ mappingTypeDescription }}</textarea
+          >
         </c8y-form-group>
       </div>
     </div>
diff --git a/dynamic-mapping-ui/src/mapping/step-property/mapping-properties.component.ts b/dynamic-mapping-ui/src/mapping/step-property/mapping-properties.component.ts
index 6b7ec8a68..4ecbb9f34 100644
--- a/dynamic-mapping-ui/src/mapping/step-property/mapping-properties.component.ts
+++ b/dynamic-mapping-ui/src/mapping/step-property/mapping-properties.component.ts
@@ -70,7 +70,7 @@ export class MappingStepPropertiesComponent implements OnInit, OnDestroy {
   @Input() stepperConfiguration: StepperConfiguration;
   @Input() propertyFormly: FormGroup;
 
-  @Output() targetTemplateChanged = new EventEmitter<any>();
+  @Output() targetAPIChanged = new EventEmitter<any>();
   @Output() snoopStatusChanged = new EventEmitter<SnoopStatus>();
 
   ValidationError = ValidationError;
@@ -462,13 +462,7 @@ export class MappingStepPropertiesComponent implements OnInit, OnDestroy {
 
   onTargetAPIChanged(targetAPI) {
     this.mapping.targetAPI = targetAPI;
-    if (this.stepperConfiguration.direction == Direction.INBOUND) {
-      this.targetTemplateChanged.emit(
-        SAMPLE_TEMPLATES_C8Y[this.mapping.targetAPI]
-      );
-    } else {
-      this.targetTemplateChanged.emit(getExternalTemplate(this.mapping));
-    }
+    this.targetAPIChanged.emit(targetAPI);
   }
 
   ngOnDestroy() {
diff --git a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html
index 76cdfc427..f9e3a28ad 100644
--- a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html
+++ b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.html
@@ -87,7 +87,7 @@ <h4 class="text-medium">
           [deploymentMapEntry]="deploymentMapEntry"
           [stepperConfiguration]="stepperConfiguration"
           [propertyFormly]="propertyFormly"
-          (targetTemplateChanged)="onTemplateChanged($event)"
+          (targetAPIChanged)="onTargetAPIChanged($event)"
         >
         </d11r-mapping-properties>
       </div>
diff --git a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts
index 927f65d45..c63bbb193 100644
--- a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts
+++ b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts
@@ -900,8 +900,20 @@ export class MappingStepperComponent implements OnInit, OnDestroy {
     this.mapping.snoopStatus = SnoopStatus.STOPPED;
   }
 
-  async onTargetTemplateChanged(templateTarget) {
-    this.templateTarget = templateTarget;
+  async onTargetAPIChanged(changedTargetAPI) {
+    if (this.stepperConfiguration.direction == Direction.INBOUND) {
+      this.mapping.target = SAMPLE_TEMPLATES_C8Y[changedTargetAPI];
+      this.mapping.source = getExternalTemplate(this.mapping);
+      this.schemaUpdateTarget.emit(
+        getSchema(this.mapping.targetAPI, this.mapping.direction, true)
+      );
+    } else {
+      this.mapping.source = SAMPLE_TEMPLATES_C8Y[changedTargetAPI];
+      this.mapping.target = getExternalTemplate(this.mapping);
+      this.schemaUpdateSource.emit(
+        getSchema(this.mapping.targetAPI, this.mapping.direction, false)
+      );
+    }
   }
 
   async updateTestResult(result) {