From fda08284e606dc0d6041f217d15ef9449d54aa40 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Thu, 14 Apr 2022 12:10:54 +0300
Subject: [PATCH] RED-3797 - added checkbox that allows the user to define the
 pages to import the redactions from

---
 .../import-redactions-dialog.html             | 25 ++++++++++++-------
 .../import-redactions-dialog.scss             | 14 +++++++++++
 .../import-redactions-dialog.ts               | 20 +++++++++++++--
 apps/red-ui/src/assets/i18n/de.json           |  8 ++++--
 apps/red-ui/src/assets/i18n/en.json           |  8 ++++--
 5 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html
index 11ae69420..05efaafe8 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html
@@ -11,7 +11,21 @@
             <div class="file-area">
                 <mat-icon svgIcon="iqser:document"></mat-icon>
                 <p>{{ fileToImport.name }}</p>
-                <mat-icon svgIcon="iqser:trash" (click)="fileToImport = null"></mat-icon>
+                <mat-icon svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
+            </div>
+            <div class="only-for-pages">
+                <mat-checkbox
+                    (change)="onlyForSpecificPages = !onlyForSpecificPages"
+                    [checked]="onlyForSpecificPages"
+                    class="filter-menu-checkbox"
+                    color="primary"
+                >
+                    {{ 'import-redactions-dialog.only-for-specific-pages' | translate }}
+                </mat-checkbox>
+
+                <div *ngIf="onlyForSpecificPages" class="iqser-input-group datepicker-wrapper">
+                    <input />
+                </div>
             </div>
         </ng-container>
     </div>
@@ -26,11 +40,4 @@
     <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
 </section>
 
-<input
-    #attachFileInput
-    [hidden]="true"
-    (change)="attachFile($event.target['files'])"
-    class="file-upload-input"
-    type="file"
-    accept="application/pdf"
-/>
+<input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" accept="application/pdf" />
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss
index b01e5b947..7fca79465 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss
@@ -56,3 +56,17 @@
         max-width: 490px;
     }
 }
+
+.only-for-pages {
+    margin-top: 16px;
+    margin-left: 21px;
+    min-height: 34px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    mat-checkbox {
+        width: fit-content;
+        margin-right: 16px;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
index 368f2b8e0..ea0f79579 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
@@ -4,6 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { firstValueFrom } from 'rxjs';
 import { RedactionImportService } from '../../../dossier/shared/services/redaction-import.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { HttpStatusCode } from '@angular/common/http';
 
 interface ImportData {
     dossierId: string;
@@ -18,6 +19,7 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
     @ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef;
 
     fileToImport: File | null;
+    onlyForSpecificPages = false;
 
     constructor(
         protected readonly _injector: Injector,
@@ -35,19 +37,33 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
         this.attachFileInput.nativeElement.click();
     }
 
-    attachFile(files: FileList) {
+    attachFile(event) {
+        const files = event.target['files'];
         this.fileToImport = files[0];
 
+        // input field needs to be set as empty in case the same file will be selected second time
+        event.target.value = '';
+
         if (!this.fileToImport) {
             console.error('No file to import!');
             return;
         }
     }
 
+    removeFile() {
+        this.fileToImport = null;
+        this.onlyForSpecificPages = false;
+    }
+
     async save(): Promise<void> {
         this._loadingService.start();
         const import$ = this._redactionImportService.importRedactions(this.data.dossierId, this.data.fileId, this.fileToImport);
-        await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error }));
+        const result: any = await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error }));
         this._loadingService.stop();
+
+        if (result.status === HttpStatusCode.Ok) {
+            this._toaster.success(_('import-redactions-dialog.http.success'));
+            this.close();
+        }
     }
 }
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index aecb1effb..cbd91d665 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -1459,8 +1459,12 @@
       "import": ""
     },
     "details": "",
-    "upload-area-text": "",
-    "title": ""
+    "http": {
+      "success": ""
+    },
+    "only-for-specific-pages": "",
+    "title": "",
+    "upload-area-text": ""
   },
   "initials-avatar": {
     "unassigned": "Unbekannt",
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index a78ab2130..19df0487b 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1459,8 +1459,12 @@
       "import": "Import"
     },
     "details": "To apply redactions from another document, you first need to upload it.",
-    "upload-area-text": "Click or drag & drop anywhere on this area...",
-    "title": "Import document with redactions"
+    "http": {
+      "success": "Redactions has been imported!"
+    },
+    "only-for-specific-pages": "Import only for page(s)",
+    "title": "Import document with redactions",
+    "upload-area-text": "Click or drag & drop anywhere on this area..."
   },
   "initials-avatar": {
     "unassigned": "Unassigned",