From f3cf8cde08af3551ccd8f9c0912081678f5e97ad Mon Sep 17 00:00:00 2001
From: George <george.balanesc.ext@knecon.com>
Date: Thu, 31 Aug 2023 22:41:56 +0300
Subject: [PATCH] RED-7524, add inline editing to selected  text in redact
 dialog

---
 .../redact-text-dialog.component.html         | 42 +++++++++++++++++--
 .../redact-text-dialog.component.scss         | 27 ++++++++++++
 .../redact-text-dialog.component.ts           | 20 +++++++--
 apps/red-ui/src/assets/i18n/redact/de.json    | 20 +++------
 apps/red-ui/src/assets/i18n/redact/en.json    | 20 +++------
 apps/red-ui/src/assets/i18n/scm/de.json       | 20 +++------
 apps/red-ui/src/assets/i18n/scm/en.json       | 20 +++------
 7 files changed, 103 insertions(+), 66 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 54ba12229..9b727bea3 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,9 +3,45 @@
         <div [translate]="'redact-text.dialog.title'" class="dialog-header heading-l"></div>
 
         <div class="dialog-content redaction">
-            <div class="iqser-input-group w-450">
-                <label [translate]="'redact-text.dialog.content.selected-text'" class="selected-text"></label>
-                {{ form.get('selectedText').value }}
+            <div class="iqser-input-group w-450 selected-text-group">
+                <label
+                    [translate]="
+                        initialText === form.get('selectedText').value
+                            ? 'redact-text.dialog.content.selected-text'
+                            : 'redact-text.dialog.content.text'
+                    "
+                    class="selected-text"
+                ></label>
+                <div [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'">
+                    <span *ngIf="!isEditingSelectedText">{{ form.get('selectedText').value }}</span>
+                    <textarea
+                        *ngIf="isEditingSelectedText"
+                        class="w-full"
+                        formControlName="selectedText"
+                        iqserHasScrollbar
+                        name="comment"
+                        rows="4"
+                        type="text"
+                    ></textarea>
+                    <iqser-circle-button
+                        (action)="isEditingSelectedText = !isEditingSelectedText"
+                        *ngIf="dictionaryRequest"
+                        [class.absolute]="isEditingSelectedText"
+                        [tooltip]="'redact-text.dialog.content.edit-text' | translate"
+                        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>
+                </div>
             </div>
 
             <iqser-details-radio
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 a1a876d9a..66c6bb390 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
@@ -1,3 +1,30 @@
 .dialog-content {
     height: 493px;
+    overflow-y: auto;
+}
+
+.selected-text-group > div {
+    gap: 0.5rem;
+}
+
+.edit-button {
+    top: 0;
+    right: calc((0.5rem + 34px) * -1);
+}
+
+.undo-button {
+    top: 0;
+    right: calc((0.5rem + 34px) * -2);
+}
+
+.w-full {
+    width: 100%;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.relative {
+    position: relative;
 }
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 c0c5abb6b..66e8f8c43 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
@@ -21,9 +21,6 @@ export class RedactTextDialogComponent
     extends IqserDialogComponent<RedactTextDialogComponent, RedactTextData, RedactTextResult>
     implements OnInit
 {
-    readonly #manualRedactionTypeExists: boolean;
-    #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
-    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
     readonly roles = Roles;
     readonly iconButtonTypes = IconButtonTypes;
     readonly options: DetailsRadioOption<RedactOrHintOption>[];
@@ -31,6 +28,12 @@ export class RedactTextDialogComponent
     legalOptions: LegalBasisOption[] = [];
     dictionaries: Dictionary[] = [];
     readonly form;
+    isEditingSelectedText = false;
+    readonly initialText: string;
+    modifiedText: string;
+    readonly #manualRedactionTypeExists: boolean;
+    #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
+    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
 
     constructor(
         private readonly _justificationsService: JustificationsService,
@@ -42,6 +45,8 @@ export class RedactTextDialogComponent
         this.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover);
 
         this.form = this.#getForm();
+        this.initialText = this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value;
+        this.modifiedText = this.initialText;
 
         this.form
             .get('option')
@@ -50,6 +55,11 @@ export class RedactTextDialogComponent
                     this.dictionaryRequest = option.value === RedactOrHintOptions.IN_DOSSIER;
                     if (this.dictionaryRequest) {
                         this.#setDictionaries();
+                        this.form.patchValue({ selectedText: this.modifiedText });
+                    } else {
+                        this.isEditingSelectedText = false;
+                        this.modifiedText = this.form.get('selectedText').value;
+                        this.form.patchValue({ selectedText: this.initialText });
                     }
                     this.#resetValues();
                 }),
@@ -86,6 +96,10 @@ export class RedactTextDialogComponent
         this.#resetValues();
     }
 
+    undoTextChange() {
+        this.form.patchValue({ selectedText: this.initialText });
+    }
+
     extraOptionChanged(option: DetailsRadioOption<RedactOrHintOption>): void {
         this.#applyToAllDossiers = option.extraOption.checked;
 
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 591f92a3d..e79cd029c 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -1925,10 +1925,9 @@
         "search": ""
       }
     },
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers",
+    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
     "toggle-readable-redactions": "",
-    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen",
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
+    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen"
   },
   "permissions-screen": {
     "dossier": {
@@ -1978,18 +1977,6 @@
   },
   "readonly": "Lesemodus",
   "readonly-archived": "",
-  "recategorize-image-dialog": {
-    "actions": {
-      "cancel": "Abbrechen",
-      "save": "Änderungen speichern"
-    },
-    "content": {
-      "comment": "Kommentar",
-      "type": "Ausgewählter Bildtyp",
-      "type-placeholder": "Einen Typ auswählen ..."
-    },
-    "header": "Bildtypen bearbeiten"
-  },
   "redact-text": {
     "dialog": {
       "actions": {
@@ -1999,6 +1986,7 @@
       "content": {
         "comment": "",
         "comment-placeholder": "",
+        "edit-text": "",
         "legal-basis": "",
         "options": {
           "in-dossier": {
@@ -2013,7 +2001,9 @@
         },
         "reason": "",
         "reason-placeholder": "",
+        "revert-text": "",
         "selected-text": "",
+        "text": "",
         "type": "",
         "type-placeholder": ""
       },
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 5b2a6669b..9388604ff 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -1925,10 +1925,9 @@
         "search": "Search for selection"
       }
     },
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers",
+    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
     "toggle-readable-redactions": "Show redactions {active, select, true{as in final document} false{in preview color} other{}}",
-    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips",
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
+    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips"
   },
   "permissions-screen": {
     "dossier": {
@@ -1978,18 +1977,6 @@
   },
   "readonly": "Read only",
   "readonly-archived": "Read only (archived)",
-  "recategorize-image-dialog": {
-    "actions": {
-      "cancel": "Cancel",
-      "save": "Save Changes"
-    },
-    "content": {
-      "comment": "Comment",
-      "type": "Select image type",
-      "type-placeholder": "Select a type..."
-    },
-    "header": "Edit Image Type"
-  },
   "redact-text": {
     "dialog": {
       "actions": {
@@ -1999,6 +1986,7 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions ...",
+        "edit-text": "Edit text",
         "legal-basis": "Legal Basis",
         "options": {
           "in-dossier": {
@@ -2013,7 +2001,9 @@
         },
         "reason": "Reason",
         "reason-placeholder": "Select a reason ...",
+        "revert-text": "Revert to selected text",
         "selected-text": "Selected text:",
+        "text": "Text:",
         "type": "Type",
         "type-placeholder": "Select type ..."
       },
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index a1bb24c2d..b16501e24 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -1925,10 +1925,9 @@
         "search": ""
       }
     },
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers grid",
+    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
     "toggle-readable-redactions": "",
-    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen",
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
+    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen"
   },
   "permissions-screen": {
     "dossier": {
@@ -1978,18 +1977,6 @@
   },
   "readonly": "Lesemodus",
   "readonly-archived": "",
-  "recategorize-image-dialog": {
-    "actions": {
-      "cancel": "Abbrechen",
-      "save": "Änderungen speichern"
-    },
-    "content": {
-      "comment": "Kommentar",
-      "type": "Ausgewählter Bildtyp",
-      "type-placeholder": "Einen Typ auswählen ..."
-    },
-    "header": "Bildtypen bearbeiten"
-  },
   "redact-text": {
     "dialog": {
       "actions": {
@@ -1999,6 +1986,7 @@
       "content": {
         "comment": "",
         "comment-placeholder": "",
+        "edit-text": "",
         "legal-basis": "",
         "options": {
           "in-dossier": {
@@ -2013,7 +2001,9 @@
         },
         "reason": "",
         "reason-placeholder": "",
+        "revert-text": "",
         "selected-text": "",
+        "text": "",
         "type": "",
         "type-placeholder": ""
       },
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 2d05ac327..f39f06cfa 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -1925,10 +1925,9 @@
         "search": "Search for selection"
       }
     },
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers grid",
+    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
     "toggle-readable-redactions": "Show components {active, select, true{as in final document} false{in preview color} other{}}",
-    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips",
-    "toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
+    "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips"
   },
   "permissions-screen": {
     "dossier": {
@@ -1978,18 +1977,6 @@
   },
   "readonly": "Read only",
   "readonly-archived": "Read only (archived)",
-  "recategorize-image-dialog": {
-    "actions": {
-      "cancel": "Cancel",
-      "save": "Save Changes"
-    },
-    "content": {
-      "comment": "Comment",
-      "type": "Select image type",
-      "type-placeholder": "Select a type..."
-    },
-    "header": "Edit Image Type"
-  },
   "redact-text": {
     "dialog": {
       "actions": {
@@ -1999,6 +1986,7 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions ...",
+        "edit-text": "",
         "legal-basis": "Legal Basis",
         "options": {
           "in-dossier": {
@@ -2013,7 +2001,9 @@
         },
         "reason": "Reason",
         "reason-placeholder": "Select a reason ...",
+        "revert-text": "",
         "selected-text": "Selected text:",
+        "text": "",
         "type": "Type",
         "type-placeholder": "Select type ..."
       },