From 643d0f21d4958ead605c50a1e6721e62e0d72bdc Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 30 Jan 2024 13:33:08 +0200
Subject: [PATCH] RED-8284 - Drag & Drop for Import Redactions not working

---
 .../import-redactions-dialog.html             |  2 +-
 .../import-redactions-dialog.ts               |  8 +++++
 .../services/file-drop-overlay.service.ts     | 30 ++++++++++++-------
 3 files changed, 29 insertions(+), 11 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 e38cdbcdd..d4c20a166 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
@@ -29,7 +29,7 @@
             [type]="iconButtonTypes.primary"
         ></iqser-icon-button>
 
-        <div class="all-caps-label cancel" mat-dialog-close [translate]="'import-redactions-dialog.actions.cancel'"></div>
+        <div class="all-caps-label cancel" mat-dialog-close [translate]="'import-redactions-dialog.actions.cancel'" (click)="close()"></div>
     </div>
 
     <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
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 a20d140d2..85d87c465 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
@@ -7,6 +7,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { HttpStatusCode } from '@angular/common/http';
 import { extractPageRanges } from '@utils/page-ranges-mapper';
 import { File } from '@red/domain';
+import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
 
 interface ImportData {
     dossierId: string;
@@ -27,10 +28,12 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
 
     constructor(
         protected readonly _dialogRef: MatDialogRef<ImportRedactionsDialogComponent>,
+        private readonly _fileDropOverlayService: FileDropOverlayService,
         private readonly _redactionImportService: RedactionImportService,
         @Inject(MAT_DIALOG_DATA) readonly data: ImportData,
     ) {
         super(_dialogRef);
+        _fileDropOverlayService.toggleImportingRedactions();
     }
 
     get disabled(): boolean {
@@ -97,4 +100,9 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
             this.numberOfPages = (reader.result as any).match(/\/Type[\s]*\/Page[^s]/g).length;
         };
     }
+
+    close () {
+        this._fileDropOverlayService.toggleImportingRedactions();
+        return super.close();
+    }
 }
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
index ded6fe5be..778156882 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
@@ -3,19 +3,25 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { FileDropComponent } from '../file-drop/file-drop.component';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { DOSSIER_ID } from '../../../tokens';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
 export class FileDropOverlayService {
-    private readonly _dropOverlayRef: OverlayRef;
-    private _dossierId: string;
+    readonly #dropOverlayRef: OverlayRef;
+    readonly #importingRedactions$ = new BehaviorSubject(false);
+    #dossierId: string;
 
     constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
-        this._dropOverlayRef = this._overlay.create({
+        this.#dropOverlayRef = this._overlay.create({
             height: '100vh',
             width: '100vw',
         });
     }
 
+    get #importingRedactions() {
+        return this.#importingRedactions$.getValue();
+    }
+
     dragEnter = e => {
         e.preventDefault();
         e.stopPropagation();
@@ -37,7 +43,7 @@ export class FileDropOverlayService {
     };
 
     initFileDropHandling(dossierId: string) {
-        this._dossierId = dossierId;
+        this.#dossierId = dossierId;
         document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragEnter, false);
         document.getElementsByTagName('body')[0].addEventListener('dragleave', this.dragLeave, false);
     }
@@ -48,23 +54,27 @@ export class FileDropOverlayService {
     }
 
     openFileDropOverlay() {
-        if (!this._dropOverlayRef.hasAttached()) {
+        if (!this.#dropOverlayRef.hasAttached() && !this.#importingRedactions) {
             const component = new ComponentPortal(FileDropComponent, null, this._createInjector());
-            this._dropOverlayRef.attach(component);
+            this.#dropOverlayRef.attach(component);
         }
     }
 
     closeFileDropOverlay() {
-        if (this._dropOverlayRef) {
-            this._dropOverlayRef.detach();
+        if (this.#dropOverlayRef) {
+            this.#dropOverlayRef.detach();
         }
     }
 
+    toggleImportingRedactions() {
+        this.#importingRedactions$.next(!this.#importingRedactions);
+    }
+
     private _createInjector() {
         return Injector.create({
             providers: [
-                { provide: OverlayRef, useValue: this._dropOverlayRef },
-                { provide: DOSSIER_ID, useValue: this._dossierId },
+                { provide: OverlayRef, useValue: this.#dropOverlayRef },
+                { provide: DOSSIER_ID, useValue: this.#dossierId },
             ],
             parent: this._injector,
         });