RED-3797 - added drag&drop directive to upload file on a specific area for importing document redactions

apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts

@@ -25,7 +25,7 @@ import {
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { PermissionsService } from '@services/permissions.service';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { ConfigService } from '../config.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
@@ -49,7 +49,7 @@ import { NGXLogger } from 'ngx-logger';
         dossiersServiceProvider,
     ],
 })
-export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnDestroy, OnAttach {
+export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnAttach {
     readonly listingModes = ListingModes;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('dossier-overview.table-header.title');
@@ -103,6 +103,9 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
         this.dossierTemplateId = this.#currentDossier.dossierTemplateId;
         this.files$ = merge(this.#files$, this.#dossierFilesChange$).pipe(shareLast());
         this._updateFileAttributes();
+        _router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            this._fileDropOverlayService.cleanupFileDropHandling();
+        });
     }
 
     get checkedRequiredFilters(): NestedFilter[] {
@@ -159,11 +162,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
         this._loadingService.stop();
     }
 
-    ngOnDestroy(): void {
-        this._fileDropOverlayService.cleanupFileDropHandling();
-        super.ngOnDestroy();
-    }
-
     ngOnAttach() {
         this._fileDropOverlayService.initFileDropHandling(this.dossierId);
         this._setRemovableSubscriptions();

apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html

@@ -3,7 +3,13 @@
 
     <div class="dialog-content">
         <div translate="import-redactions-dialog.details" class="mb-24"></div>
-        <div class="upload-area" *ngIf="!fileToImport" (click)="triggerAttachFile()">
+        <div
+            class="upload-area"
+            *ngIf="!fileToImport"
+            (click)="triggerAttachFile()"
+            redactionDragDropFileUpload
+            (fileDropped)="attachFile($event)"
+        >
             <mat-icon svgIcon="iqser:upload"></mat-icon>
             <div translate="import-redactions-dialog.upload-area-text"></div>
         </div>

apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts

@@ -0,0 +1,41 @@
+import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';
+
+const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
+const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
+
+@Directive({
+    selector: '[redactionDragDropFileUpload]',
+})
+export class DragDropFileUploadDirective {
+    @Output() readonly fileDropped = new EventEmitter<any>();
+    @HostBinding('style.background-color') private background = DEFAULT_BACKGROUND_COLOR;
+
+    @HostListener('dragover', ['$event'])
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer.types.includes('Files')) {
+            this.background = DRAG_OVER_BACKGROUND_COLOR;
+        }
+    }
+
+    @HostListener('dragleave', ['$event'])
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = DEFAULT_BACKGROUND_COLOR;
+    }
+
+    @HostListener('drop', ['$event'])
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer.types.includes('Files')) {
+            this.background = DEFAULT_BACKGROUND_COLOR;
+            const files = event.dataTransfer.files;
+            if (files.length > 0) {
+                this.fileDropped.emit({ target: { files } });
+            }
+        }
+    }
+}

apps/red-ui/src/app/modules/shared/shared.module.ts

@@ -30,6 +30,7 @@ import { FileStatsComponent } from './components/file-stats/file-stats.component
 import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
 import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
 import { MAT_DATE_FORMATS } from '@angular/material/core';
+import { DragDropFileUploadDirective } from '@shared/directives/drag-drop-file-upload.directive';
 
 const buttons = [FileDownloadBtnComponent, UserButtonComponent];
 
@@ -54,7 +55,7 @@ const components = [
     ...buttons,
 ];
 
-const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
+const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective, DragDropFileUploadDirective];
 
 const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule];