From 2da2b364889348b35436330b5ac8becd34fb446c Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Wed, 22 May 2024 16:14:39 +0300
Subject: [PATCH] RED-8342 - Component Editor not showing all values for a
 multi-value-component

---
 ...component-management-dialog.component.html | 73 +++++++++++--------
 ...component-management-dialog.component.scss | 15 +++-
 apps/red-ui/src/assets/i18n/redact/de.json    |  1 +
 apps/red-ui/src/assets/i18n/redact/en.json    |  1 +
 apps/red-ui/src/assets/i18n/scm/de.json       |  1 +
 apps/red-ui/src/assets/i18n/scm/en.json       |  1 +
 libs/common-ui                                |  2 +-
 7 files changed, 58 insertions(+), 36 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 ca716021e..da556b01d 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
@@ -11,38 +11,47 @@
 
             <ng-container *ngFor="let entry of componentLogEntries; let index = index">
                 <div class="bold">{{ entry.name }}</div>
-                <div [id]="getValueCellId(index)">
-                    <ng-container *ngFor="let componentValue of entry.componentValues">
-                        <iqser-editable-input
-                            (save)="saveEdit($event, entry.originalKey)"
-                            [canEdit]="canEdit && entry.componentValues.length === 1"
-                            [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
-                            [editTooltip]="'component-log-dialog.actions.edit' | translate"
-                            [id]="'value-' + index"
-                            [parentId]="getValueCellId(index)"
-                            [saveTooltip]="'component-log-dialog.actions.save' | translate"
-                            [value]="componentValue.value ?? componentValue.originalValue"
-                            [showDot]="entry.componentValues.length !== 1"
-                            [attr.helpModeKey]="'scm_edit_DIALOG'"
-                            [class.not-editable]="entry.componentValues.length !== 1"
-                        >
-                            <ng-container slot="editing">
-                                <iqser-circle-button
-                                    (action)="undo(entry.originalKey)"
-                                    *ngIf="componentValue.value !== componentValue.originalValue && canEdit"
-                                    [showDot]="true"
-                                    [tooltip]="
-                                        'component-log-dialog.actions.undo'
-                                            | translate: { value: componentValue.originalValue }
-                                            | replaceNbsp
-                                    "
-                                    [attr.help-mode-key]="'scm_undo_DIALOG'"
-                                    class="ml-2"
-                                    icon="red:undo"
-                                ></iqser-circle-button>
-                            </ng-container>
-                        </iqser-editable-input>
-                    </ng-container>
+                <div [id]="getValueCellId(index)" class="component-value">
+                    <div>
+                        <ng-container *ngFor="let componentValue of entry.componentValues">
+                            <iqser-editable-input
+                                (save)="saveEdit($event, entry.originalKey)"
+                                [canEdit]="canEdit && entry.componentValues.length === 1"
+                                [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
+                                [editTooltip]="'component-log-dialog.actions.edit' | translate"
+                                [id]="'value-' + index"
+                                [parentId]="getValueCellId(index)"
+                                [saveTooltip]="'component-log-dialog.actions.save' | translate"
+                                [value]="componentValue.value ?? componentValue.originalValue"
+                                [listValue]="entry.componentValues.length !== 1"
+                                [attr.helpModeKey]="'scm_edit_DIALOG'"
+                                [class.not-editable]="entry.componentValues.length !== 1"
+                            >
+                                <ng-container slot="editing">
+                                    <iqser-circle-button
+                                        (action)="undo(entry.originalKey)"
+                                        *ngIf="componentValue.value !== componentValue.originalValue && canEdit"
+                                        [showDot]="true"
+                                        [tooltip]="
+                                            'component-log-dialog.actions.undo'
+                                                | translate: { value: componentValue.originalValue }
+                                                | replaceNbsp
+                                        "
+                                        [attr.help-mode-key]="'scm_undo_DIALOG'"
+                                        class="ml-2"
+                                        icon="red:undo"
+                                    ></iqser-circle-button>
+                                </ng-container>
+                            </iqser-editable-input>
+                        </ng-container>
+                    </div>
+                    <iqser-circle-button
+                        *ngIf="entry.componentValues.length !== 1"
+                        [tooltip]="'component-log-dialog.actions.disabled-edit' | translate"
+                        [disabled]="true"
+                        class="edit-button"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
                 </div>
                 <div>{{ entry.componentValues[0].valueDescription }}</div>
                 <div>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss
index faa5f961e..40ed5a774 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss
@@ -60,7 +60,16 @@ ul {
     margin-left: auto;
 }
 
-.not-editable {
-    margin-top: 8px;
-    margin-bottom: 8px;
+.component-value {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    div {
+        width: 100%;
+
+        .not-editable {
+            margin: 8px 0;
+        }
+    }
 }
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 443729bd3..cd802dd16 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -496,6 +496,7 @@
     "actions": {
       "cancel-edit": "Cancel",
       "close": "Close",
+      "disabled-edit": "",
       "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
       "export-json": "Export JSON",
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 78b5bdbc6..d379bab49 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -496,6 +496,7 @@
     "actions": {
       "cancel-edit": "Cancel",
       "close": "Close",
+      "disabled-edit": "Multi-value component – Read-only",
       "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
       "export-json": "Export JSON",
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 25bbfb82a..2607b580c 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -496,6 +496,7 @@
     "actions": {
       "cancel-edit": "Cancel",
       "close": "Close",
+      "disabled-edit": "",
       "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
       "export-json": "Export JSON",
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index f9f1bffbe..82e1ad98c 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -496,6 +496,7 @@
     "actions": {
       "cancel-edit": "Cancel",
       "close": "Close",
+      "disabled-edit": "Multi-value component – Read-only",
       "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
       "export-json": "Export JSON",
diff --git a/libs/common-ui b/libs/common-ui
index 0e7d234c7..76c2562d7 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 0e7d234c7014531a10b6204fb0c0977846162141
+Subproject commit 76c2562d7f401d0b94cd3293abfaf6e2f9168924