From e556a133ef44f3cbefdabbb508635b4bd45a58de Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 18 Apr 2022 18:29:43 +0300 Subject: [PATCH] RED-3797 - added drag&drop directive to upload file on a specific area for importing document redactions --- .../dossier-overview-screen.component.ts | 12 +++--- .../import-redactions-dialog.html | 8 +++- .../drag-drop-file-upload.directive.ts | 41 +++++++++++++++++++ .../src/app/modules/shared/shared.module.ts | 3 +- 4 files changed, 55 insertions(+), 9 deletions(-) create mode 100644 apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts index 1ab7c05be..eb5c2d8cc 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts +++ b/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 implements OnInit, OnDestroy, OnAttach { +export class DossierOverviewScreenComponent extends ListingComponent 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 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 imple this._loadingService.stop(); } - ngOnDestroy(): void { - this._fileDropOverlayService.cleanupFileDropHandling(); - super.ngOnDestroy(); - } - ngOnAttach() { this._fileDropOverlayService.initFileDropHandling(this.dossierId); this._setRemovableSubscriptions(); 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 05efaafe8..5c032b36c 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 @@ -3,7 +3,13 @@
-
+
diff --git a/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts b/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts new file mode 100644 index 000000000..77daf3780 --- /dev/null +++ b/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(); + @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 } }); + } + } + } +} diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 4e59742ed..40152677f 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/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];