From 98f6fbc132ab9ceafd63dd0e9fff776a13db450f Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Thu, 15 Feb 2024 13:28:49 +0200
Subject: [PATCH] RED-8342 - Component Editor not showing all values for a
 multi-value-component

---
 ...component-management-dialog.component.html | 45 ++++++++++---------
 ...d-component-management-dialog.component.ts | 20 ++++++---
 libs/common-ui                                |  2 +-
 3 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.html
index fd8552a97..6610898a8 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.html
@@ -13,24 +13,27 @@
                 <div class="bold">{{ entry.name }}</div>
                 <div [id]="getValueCellId(index)">
                     <iqser-editable-input
+                        *ngFor="let componentValue of entry.componentValues; let componentValueIndex = index"
                         (save)="saveEdit($event, entry.originalKey)"
                         [canEdit]="canEdit"
                         [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
                         [editTooltip]="'component-log-dialog.actions.edit' | translate"
-                        [id]="'value-' + index"
+                        [attr.id]="getValueId(index, componentValueIndex)"
+                        [id]="getValueId(index, componentValueIndex)"
                         [parentId]="getValueCellId(index)"
                         [saveTooltip]="'component-log-dialog.actions.save' | translate"
-                        [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"
+                        [value]="componentValue.value ?? componentValue.originalValue"
+                        [lastChild]="componentValueIndex === entry.componentValues.length - 1"
                         [attr.helpModeKey]="'scm_edit_DIALOG'"
                     >
                         <ng-container slot="editing">
                             <iqser-circle-button
                                 (action)="undo(entry.originalKey)"
-                                *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
+                                *ngIf="componentValue.value !== componentValue.originalValue && canEdit"
                                 [showDot]="true"
                                 [tooltip]="
                                     'component-log-dialog.actions.undo'
-                                        | translate: { value: entry.componentValues[0].originalValue }
+                                        | translate: { value: componentValue.originalValue }
                                         | replaceNbsp
                                 "
                                 [attr.help-mode-key]="'scm_undo_DIALOG'"
@@ -42,23 +45,25 @@
                 </div>
                 <div>{{ entry.componentValues[0].valueDescription }}</div>
                 <div>
-                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">
-                        <li
-                            *ngFor="let reference of entry.componentValues[0].entityReferences"
-                            [innerHTML]="
-                                'component-log-dialog.annotations'
-                                    | translate
-                                        : {
-                                              type: parseType(reference.displayValue),
-                                              page: reference.page,
-                                              ruleNumber: reference.entityRuleId
-                                          }
-                            "
-                            class="mb-8"
-                        ></li>
-                    </ul>
+                    <ng-container *ngFor="let componentValue of entry.componentValues; let index = index">
+                        <ul *ngIf="componentValue.entityReferences; else noReferences" class="pl-0">
+                            <li
+                                *ngFor="let reference of componentValue.entityReferences"
+                                [innerHTML]="
+                            'component-log-dialog.annotations'
+                                | translate
+                                    : {
+                                          type: parseType(reference.displayValue),
+                                          page: reference.page,
+                                          ruleNumber: reference.entityRuleId
+                                      }
+                        "
+                                class="mb-8"
+                            ></li>
+                        </ul>
 
-                    <ng-template #noReferences>-</ng-template>
+                        <ng-template #noReferences>-</ng-template>
+                    </ng-container>
                 </div>
             </ng-container>
         </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts
index f8193d7c2..b7f2e24db 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts
@@ -60,6 +60,10 @@ export class StructuredComponentManagementDialogComponent extends BaseDialogComp
         return `value-cell-${index}`;
     }
 
+    getValueId(index: number, componentValueIndex: number) {
+        return `value-${index}-${componentValueIndex}`;
+    }
+
     originalOrder = (): number => 0;
 
     exportJSON() {
@@ -87,7 +91,7 @@ export class StructuredComponentManagementDialogComponent extends BaseDialogComp
     }
 
     parseType(type: string) {
-        return type.replaceAll('_', ' ').replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
+        return type?.replaceAll('_', ' ').replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
     }
 
     async toggleOpenScmDialogByDefault() {
@@ -126,14 +130,16 @@ export class StructuredComponentManagementDialogComponent extends BaseDialogComp
         const dictionaries = this.data.dictionaries;
         for (const componentLog of componentLogs) {
             let foundDictionary: Dictionary;
-            for (const reference of componentLog.componentValues[0].entityReferences) {
-                if (foundDictionary) {
+            for (const componentLogValue of componentLog.componentValues) {
+                for (const reference of componentLogValue.entityReferences) {
+                    if (foundDictionary) {
+                        reference.displayValue = foundDictionary.label;
+                        continue;
+                    }
+                    foundDictionary = dictionaries.find(dict => dict.type === reference.type);
+                    foundDictionary = foundDictionary ?? ({ label: reference.type } as Dictionary);
                     reference.displayValue = foundDictionary.label;
-                    continue;
                 }
-                foundDictionary = dictionaries.find(dict => dict.type === reference.type);
-                foundDictionary = foundDictionary ?? ({ label: reference.type } as Dictionary);
-                reference.displayValue = foundDictionary.label;
             }
         }
     }
diff --git a/libs/common-ui b/libs/common-ui
index 42cc494e2..82b11d2eb 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 42cc494e2f3ff18182198bced1320b40c8b41d5e
+Subproject commit 82b11d2ebad8d49a2b784e830c8da511b1e7dc3e