From 03ed172f802349b02a66c887362209d079ff9d2c Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 25 Jul 2023 00:31:34 +0300
Subject: [PATCH] DM-344 - Resize annotation dialog in DocuMine

---
 .../resize-annotation-dialog.component.html   | 49 ++++++++++++++
 .../resize-annotation-dialog.component.ts     | 66 +++++++++++++++++++
 .../resize-redaction-dialog.component.html    |  1 -
 .../resize-redaction-dialog.component.ts      |  8 ---
 .../file-preview/file-preview.module.ts       |  2 +
 .../services/annotation-actions.service.ts    | 17 +++--
 .../file-preview/utils/dialog-types.ts        | 11 +++-
 apps/red-ui/src/assets/i18n/redact/de.json    | 16 ++++-
 apps/red-ui/src/assets/i18n/redact/en.json    | 16 ++++-
 apps/red-ui/src/assets/i18n/scm/de.json       | 16 ++++-
 apps/red-ui/src/assets/i18n/scm/en.json       | 16 ++++-
 11 files changed, 197 insertions(+), 21 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.ts

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.html
new file mode 100644
index 000000000..f6fd4404d
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.html
@@ -0,0 +1,49 @@
+<section class="dialog">
+    <form (submit)="save()" [formGroup]="form">
+        <div [innerHTML]="'resize-annotation.dialog.header' | translate" class="dialog-header heading-l"></div>
+
+        <div class="dialog-content redaction">
+            <div class="iqser-input-group w-450">
+                <label class="selected-text" [translate]="'resize-annotation.dialog.content.original-text'"></label>
+                {{ redaction.value }}
+            </div>
+
+            <div class="iqser-input-group w-450">
+                <label class="selected-text" [translate]="'resize-annotation.dialog.content.resized-text'"></label>
+                {{ data.text }}
+            </div>
+
+            <ng-container *deny="roles.getRss">
+                <div class="iqser-input-group required w-450">
+                    <label [translate]="'resize-annotation.dialog.content.type'"></label>
+
+                    <mat-form-field>
+                        <mat-select formControlName="dictionary">
+                            <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
+                            <mat-option [value]="redaction.entity.type">
+                                <span> {{ redaction.entity.label }} </span>
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+            </ng-container>
+
+            <div class="iqser-input-group w-450">
+                <label [translate]="'resize-annotation.dialog.content.comment'"></label>
+                <textarea formControlName="comment" iqserHasScrollbar name="comment" rows="4" type="text"></textarea>
+            </div>
+        </div>
+
+        <div class="dialog-actions">
+            <iqser-icon-button
+                [label]="'resize-annotation.dialog.actions.save' | translate"
+                [submit]="true"
+                [type]="iconButtonTypes.primary"
+            ></iqser-icon-button>
+
+            <div [translate]="'resize-annotation.dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
+        </div>
+    </form>
+
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+</section>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.ts
new file mode 100644
index 000000000..9f0bab091
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
+import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
+import { Dictionary, Dossier } from '@red/domain';
+import { Roles } from '@users/roles';
+import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
+import { ResizeAnnotationData, ResizeAnnotationResult } from '../../../utils/dialog-types';
+
+@Component({
+    templateUrl: './resize-annotation-dialog.component.html',
+})
+export class ResizeAnnotationDialogComponent
+    extends IqserDialogComponent<ResizeAnnotationDialogComponent, ResizeAnnotationData, ResizeAnnotationResult>
+    implements OnInit
+{
+    readonly roles = Roles;
+    readonly iconButtonTypes = IconButtonTypes;
+
+    dictionaries: Dictionary[] = [];
+    redaction: AnnotationWrapper;
+    form!: UntypedFormGroup;
+
+    readonly #dossier: Dossier;
+
+    constructor(
+        private readonly _activeDossiersService: ActiveDossiersService,
+        private readonly _dictionariesMapService: DictionariesMapService,
+        private readonly _formBuilder: FormBuilder,
+    ) {
+        super();
+        this.#dossier = _activeDossiersService.find(this.data.dossierId);
+        this.redaction = this.data.redaction;
+
+        this.form = this.#getForm();
+    }
+
+    get displayedDictionaryLabel() {
+        const dictType = this.form.get('dictionary').value;
+        if (dictType) {
+            return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
+        }
+        return null;
+    }
+
+    async ngOnInit() {
+        this.dictionaries = this._dictionariesMapService.get(this.#dossier.dossierTemplateId);
+    }
+
+    #getForm(): UntypedFormGroup {
+        return this._formBuilder.group({
+            comment: [null],
+            dictionary: new FormControl({ value: this.redaction.entity.type, disabled: true }),
+        });
+    }
+
+    save(): void {
+        const formValue = this.form.getRawValue();
+
+        this.dialogRef.close({
+            comment: formValue.comment,
+            updateDictionary: this.redaction.entity.hasDictionary,
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.html
index a64e7987e..2f562a0b1 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.html
@@ -41,7 +41,6 @@
 
         <div class="dialog-actions">
             <iqser-icon-button
-                [disabled]="disabled"
                 [label]="'resize-redaction.dialog.actions.save' | translate"
                 [submit]="true"
                 [type]="iconButtonTypes.primary"
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
index 5b2eb7ff4..8d9fbbe37 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
@@ -57,14 +57,6 @@ export class ResizeRedactionDialogComponent
         return null;
     }
 
-    get disabled(): boolean {
-        return !this.valid;
-    }
-
-    get text(): string {
-        return this.data.text;
-    }
-
     async ngOnInit() {
         this.dictionaries = this._dictionariesMapService.get(this.#dossier.dossierTemplateId);
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
index 7ce983bf6..c0c29f152 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
@@ -69,6 +69,7 @@ import { TenantPipe } from '@iqser/common-ui/lib/tenants';
 import { AddHintDialogComponent } from './dialogs/add-hint-dialog/add-hint-dialog.component';
 import { AddAnnotationDialogComponent } from './dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component';
 import { RemoveAnnotationDialogComponent } from './dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component';
+import { ResizeAnnotationDialogComponent } from './dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component';
 
 const routes: IqserRoutes = [
     {
@@ -95,6 +96,7 @@ const dialogs = [
     RemoveRedactionDialogComponent,
     AddAnnotationDialogComponent,
     RemoveAnnotationDialogComponent,
+    ResizeAnnotationDialogComponent,
 ];
 
 const components = [
diff --git a/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts b/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts
index 99563135e..adb5cc314 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts
@@ -34,10 +34,17 @@ import { IqserDialog } from '@common-ui/dialog/iqser-dialog.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { isJustOne, List } from '@iqser/common-ui/lib/utils';
 import { PermissionsService } from '@services/permissions.service';
-import { RemoveRedactionData, RemoveRedactionPermissions, RemoveRedactionResult, ResizeRedactionData } from '../utils/dialog-types';
+import {
+    RemoveRedactionData,
+    RemoveRedactionPermissions,
+    RemoveRedactionResult,
+    ResizeRedactionData,
+    ResizeRedactionResult,
+} from '../utils/dialog-types';
 import { RemoveRedactionOptions } from '../utils/dialog-options';
 import { RemoveAnnotationDialogComponent } from '../dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component';
 import { ResizeRedactionDialogComponent } from '../dialogs/resize-redaction-dialog/resize-redaction-dialog.component';
+import { ResizeAnnotationDialogComponent } from '../dialogs/docu-mine/resize-annotation-dialog/resize-annotation-dialog.component';
 
 @Injectable()
 export class AnnotationActionsService {
@@ -231,7 +238,7 @@ export class AnnotationActionsService {
             dossierId: dossier.dossierId,
         };
 
-        const result = await this.#getResizeRedactionDialog(data).result();
+        const result: ResizeRedactionResult = await this.#getResizeRedactionDialog(data).result();
 
         if (result) {
             const resizeRequest: IResizeRequest = {
@@ -425,9 +432,9 @@ export class AnnotationActionsService {
     }
 
     #getResizeRedactionDialog(data: ResizeRedactionData) {
-        // if (this.#isDocumine) {
-        //     return this._iqserDialog.openDefault(RemoveAnnotationDialogComponent, { data });
-        // }
+        if (this.#isDocumine) {
+            return this._iqserDialog.openDefault(ResizeAnnotationDialogComponent, { data });
+        }
         return this._iqserDialog.openDefault(ResizeRedactionDialogComponent, { data });
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts b/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts
index e9a099295..b4b6185a9 100644
--- a/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts
+++ b/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts
@@ -25,19 +25,24 @@ export interface RedactTextResult {
 export type AddHintResult = RedactTextResult;
 export type AddAnnotationResult = RedactTextResult;
 
-export interface ResizeRedactionData {
+export interface ResizeAnnotationData {
     redaction: AnnotationWrapper;
-    dossierId: string;
     text: string;
+    dossierId: string;
+}
+
+export interface ResizeRedactionData extends ResizeAnnotationData {
     applyToAllDossiers?: boolean;
     isApprover?: boolean;
 }
 
-export interface ResizeRedactionResult {
+export interface ResizeAnnotationResult {
     comment: string;
     updateDictionary: boolean;
 }
 
+export type ResizeRedactionResult = ResizeAnnotationResult;
+
 export interface RemoveRedactionPermissions {
     canRemoveOnlyHere: boolean;
     canRemoveFromDictionary: boolean;
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 059d6adad..b9c5ca2e8 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -128,7 +128,6 @@
       "dossier-dictionary-only": "",
       "has-dictionary": "",
       "hint": "",
-      "linked-to-global-entity": "",
       "manage-entries-in-dictionary-editor-only": "",
       "name": "",
       "name-placeholder": "",
@@ -2103,6 +2102,21 @@
     },
     "header": "Temporäres Passwort für {userName} festlegen"
   },
+  "resize-annotation": {
+    "dialog": {
+      "actions": {
+        "cancel": "",
+        "save": ""
+      },
+      "content": {
+        "comment": "",
+        "original-text": "",
+        "resized-text": "",
+        "type": ""
+      },
+      "header": ""
+    }
+  },
   "resize-redaction": {
     "dialog": {
       "actions": {
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index fa9aaea0a..2077fea9f 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -128,7 +128,6 @@
       "dossier-dictionary-only": "Dossier dictionary only",
       "has-dictionary": "Has dictionary",
       "hint": "Hint",
-      "linked-to-global-entity": "Linked to global entity",
       "manage-entries-in-dictionary-editor-only": "Manage entries in Dictionary editor only",
       "name": "Display Name",
       "name-placeholder": "Enter Name",
@@ -2103,6 +2102,21 @@
     },
     "header": "Set Temporary Password for {userName}"
   },
+  "resize-annotation": {
+    "dialog": {
+      "actions": {
+        "cancel": "Cancel",
+        "save": "Save Changes"
+      },
+      "content": {
+        "comment": "Comment",
+        "original-text": "Original annotation:",
+        "resized-text": "Resized annotation:",
+        "type": "Type"
+      },
+      "header": "Resize annotation"
+    }
+  },
   "resize-redaction": {
     "dialog": {
       "actions": {
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index fd3614034..4ede6a01c 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -128,7 +128,6 @@
       "dossier-dictionary-only": "",
       "has-dictionary": "",
       "hint": "",
-      "linked-to-global-entity": "",
       "manage-entries-in-dictionary-editor-only": "",
       "name": "",
       "name-placeholder": "",
@@ -2103,6 +2102,21 @@
     },
     "header": "Temporäres Passwort für {userName} festlegen"
   },
+  "resize-annotation": {
+    "dialog": {
+      "actions": {
+        "cancel": "",
+        "save": ""
+      },
+      "content": {
+        "comment": "",
+        "original-text": "",
+        "resized-text": "",
+        "type": ""
+      },
+      "header": ""
+    }
+  },
   "resize-redaction": {
     "dialog": {
       "actions": {
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index aca676e22..e90f0d622 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -128,7 +128,6 @@
       "dossier-dictionary-only": "",
       "has-dictionary": "Has dictionary",
       "hint": "Hint",
-      "linked-to-global-entity": "",
       "manage-entries-in-dictionary-editor-only": "",
       "name": "Display Name",
       "name-placeholder": "Enter Name",
@@ -2103,6 +2102,21 @@
     },
     "header": "Set Temporary Password for {userName}"
   },
+  "resize-annotation": {
+    "dialog": {
+      "actions": {
+        "cancel": "Cancel",
+        "save": "Save Changes"
+      },
+      "content": {
+        "comment": "Comment",
+        "original-text": "Original annotation:",
+        "resized-text": "Resized annotation:",
+        "type": "Type"
+      },
+      "header": "Resize annotation"
+    }
+  },
   "resize-redaction": {
     "dialog": {
       "actions": {