From 1150f9cf6b055d540502baa589e6ee3e365d2da0 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 24 Apr 2024 14:05:46 +0300
Subject: [PATCH] RED-8904: use table format for add dialog as well.

---
 .../redact-text-dialog.component.html         | 80 ++++++++++---------
 .../redact-text-dialog.component.scss         | 45 +++++++----
 .../redact-text-dialog.component.ts           | 12 ++-
 3 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
index 4454477ce..25161a316 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
@@ -3,48 +3,56 @@
         <div [translate]="'redact-text.dialog.title'" class="dialog-header heading-l"></div>
 
         <div class="dialog-content redaction">
-            <div class="iqser-input-group w-450 selected-text-group">
+            <div class="iqser-input-group w-full selected-text-group">
                 <div
                     [class.fixed-height-36]="dictionaryRequest"
                     [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'"
                 >
-                    <ul>
-                        <li>
-                            <span *ngIf="!isEditingSelectedText" [innerHTML]="form.controls.selectedText.value"></span>
-                        </li>
-                    </ul>
+                    <div class="table">
+                        <label>Value</label>
+                        <div class="row">
+                            <span
+                                *ngIf="!isEditingSelectedText"
+                                [innerHTML]="form.controls.selectedText.value"
+                                [ngStyle]="{
+                                    'min-width': textWidth > maximumSelectedTextWidth ? '95%' : 'unset',
+                                    'max-width': textWidth > maximumSelectedTextWidth ? 0 : 'unset'
+                                }"
+                            ></span>
+                            <textarea
+                                *ngIf="isEditingSelectedText"
+                                [rows]="selectedTextRows"
+                                [ngStyle]="{ width: maximumTextAreaWidth + 'px' }"
+                                formControlName="selectedText"
+                                iqserHasScrollbar
+                                name="comment"
+                                type="text"
+                            ></textarea>
 
-                    <textarea
-                        *ngIf="isEditingSelectedText"
-                        [rows]="selectedTextRows"
-                        class="w-full"
-                        formControlName="selectedText"
-                        iqserHasScrollbar
-                        name="comment"
-                        type="text"
-                    ></textarea>
+                            <iqser-circle-button
+                                (action)="toggleEditingSelectedText()"
+                                *ngIf="dictionaryRequest"
+                                [showDot]="initialText !== form.get('selectedText').value && !isEditingSelectedText"
+                                [tooltip]="'redact-text.dialog.content.edit-text' | translate"
+                                [type]="isEditingSelectedText ? 'dark' : 'default'"
+                                [size]="18"
+                                [iconSize]="13"
+                                icon="iqser:edit"
+                                tooltipPosition="below"
+                            ></iqser-circle-button>
 
-                    <iqser-circle-button
-                        (action)="toggleEditingSelectedText()"
-                        *ngIf="dictionaryRequest"
-                        [class.absolute]="isEditingSelectedText"
-                        [showDot]="initialText !== form.get('selectedText').value && !isEditingSelectedText"
-                        [tooltip]="'redact-text.dialog.content.edit-text' | translate"
-                        [type]="isEditingSelectedText ? 'dark' : 'default'"
-                        class="edit-button"
-                        icon="iqser:edit"
-                        tooltipPosition="below"
-                    ></iqser-circle-button>
-
-                    <iqser-circle-button
-                        (action)="undoTextChange()"
-                        *ngIf="isEditingSelectedText"
-                        [showDot]="initialText !== form.get('selectedText').value"
-                        [tooltip]="'redact-text.dialog.content.revert-text' | translate"
-                        class="absolute undo-button"
-                        icon="red:undo"
-                        tooltipPosition="below"
-                    ></iqser-circle-button>
+                            <iqser-circle-button
+                                (action)="undoTextChange()"
+                                *ngIf="isEditingSelectedText"
+                                [showDot]="initialText !== form.get('selectedText').value"
+                                [tooltip]="'redact-text.dialog.content.revert-text' | translate"
+                                [size]="18"
+                                [iconSize]="13"
+                                icon="red:undo"
+                                tooltipPosition="below"
+                            ></iqser-circle-button>
+                        </div>
+                    </div>
                 </div>
             </div>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.scss
index d4c112676..df1cd1e09 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.scss
@@ -13,29 +13,14 @@
     }
 }
 
-.edit-button {
-    top: 0;
-    right: calc((0.5rem + 34px) * -1);
-    position: sticky;
-}
-
-.undo-button {
-    top: 0;
-    right: calc((0.5rem + 34px) * -2);
+iqser-circle-button {
+    padding-left: 8px;
 }
 
 .w-full {
     width: 100%;
 }
 
-.absolute {
-    position: absolute;
-}
-
-.relative {
-    position: relative;
-}
-
 .fixed-height-36 {
     min-height: 36px;
 }
@@ -43,3 +28,29 @@
 textarea {
     margin-top: 0;
 }
+
+.table {
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+
+    label {
+        opacity: 0.7;
+        font-weight: normal;
+    }
+
+    .row {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        background-color: var(--iqser-alt-background);
+        min-width: 100%;
+
+        span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            list-style-position: inside;
+            overflow: hidden;
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
index 12a5b4259..a55a7fb2b 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
@@ -14,7 +14,7 @@ import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from
 import { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 
-const MAXIMUM_SELECTED_TEXT_WIDTH = 421;
+const MAXIMUM_TEXT_AREA_WIDTH = 421;
 
 @Component({
     templateUrl: './redact-text-dialog.component.html',
@@ -39,6 +39,10 @@ export class RedactTextDialogComponent
     readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
     readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
     #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
+    readonly maximumTextAreaWidth = MAXIMUM_TEXT_AREA_WIDTH;
+    readonly maximumSelectedTextWidth = 567;
+
+    textWidth: number;
 
     get defaultOption() {
         const inDossierOption = this.options.find(option => option.value === RedactOrHintOptions.IN_DOSSIER);
@@ -60,7 +64,7 @@ export class RedactTextDialogComponent
         this.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover, this.data.isPageExcluded);
         this.form = this.#getForm();
         this.#setupValidators(this.dictionaryRequest ? RedactOrHintOptions.IN_DOSSIER : RedactOrHintOptions.ONLY_HERE);
-
+        this.textWidth = calcTextWidthInPixels(this.form.controls.selectedText.value);
         this.form.controls.option.valueChanges
             .pipe(
                 tap((option: DetailsRadioOption<RedactOrHintOption>) => {
@@ -136,7 +140,7 @@ export class RedactTextDialogComponent
         this.isEditingSelectedText = !this.isEditingSelectedText;
         if (this.isEditingSelectedText) {
             const width = calcTextWidthInPixels(this.form.controls.selectedText.value);
-            this.selectedTextRows = Math.ceil(width / MAXIMUM_SELECTED_TEXT_WIDTH);
+            this.selectedTextRows = Math.ceil(width / MAXIMUM_TEXT_AREA_WIDTH);
         }
     }
 
@@ -213,4 +217,6 @@ export class RedactTextDialogComponent
         }
         this.form.controls.dictionary.setValue(this.#manualRedactionTypeExists ? SuperTypes.ManualRedaction : null);
     }
+
+    protected readonly window = window;
 }