From 85494df4ccb2fa5c23445d06e452c93ed23d9bf1 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Tue, 12 Apr 2022 18:26:28 +0300 Subject: [PATCH 1/5] RED-3797 - WIP on adding import redaction dialog --- .../services/dossiers-dialog.service.ts | 7 +- .../file-actions/file-actions.component.html | 14 ++-- .../file-actions/file-actions.component.ts | 5 +- .../import-redactions-dialog.html | 27 ++++++++ .../import-redactions-dialog.scss | 64 +++++++++++++++++++ .../import-redactions-dialog.ts | 21 ++++++ .../file-preview/file-preview.module.ts | 2 + apps/red-ui/src/assets/i18n/de.json | 9 +++ apps/red-ui/src/assets/i18n/en.json | 11 +++- libs/common-ui | 2 +- 10 files changed, 150 insertions(+), 12 deletions(-) create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts index e9f1f4d66..41ce299fc 100644 --- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts @@ -4,8 +4,9 @@ import { AddDossierDialogComponent } from '../dialogs/add-dossier-dialog/add-dos import { EditDossierDialogComponent } from '../dialogs/edit-dossier-dialog/edit-dossier-dialog.component'; import { AssignReviewerApproverDialogComponent } from '../dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component'; import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui'; +import { ImportRedactionsDialogComponent } from '../../file-preview/dialogs/import-redactions-dialog/import-redactions-dialog'; -type DialogType = 'confirm' | 'editDossier' | 'addDossier' | 'assignFile'; +type DialogType = 'confirm' | 'editDossier' | 'addDossier' | 'assignFile' | 'importRedactions'; @Injectable() export class DossiersDialogService extends DialogService { @@ -26,6 +27,10 @@ export class DossiersDialogService extends DialogService { component: AssignReviewerApproverDialogComponent, dialogConfig: { disableClose: false }, }, + importRedactions: { + component: ImportRedactionsDialogComponent, + dialogConfig: { disableClose: false }, + }, }; constructor(protected readonly _dialog: MatDialog) { diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html index 125b5b28c..deeb284f9 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html @@ -4,13 +4,13 @@ - + + + + + + + diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts index 43a4a559f..a73721573 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts +++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts @@ -53,7 +53,7 @@ export class FileActionsComponent implements OnChanges { @Input() maxWidth: number; @Input() fileActionsHelpModeKey: 'document_features' | 'editor_document_features' = 'document_features'; - @ViewChild('importRedactionsInput', { static: true }) importRedactionsInput: ElementRef; + // @ViewChild('importRedactionsInput', { static: true }) importRedactionsInput: ElementRef; toggleTooltip?: string; assignTooltip?: string; @@ -320,7 +320,8 @@ export class FileActionsComponent implements OnChanges { private _triggerImportRedactions($event: MouseEvent) { $event.stopPropagation(); - this.importRedactionsInput.nativeElement.click(); + this._dialogService.openDialog('importRedactions', null, null); + // this.importRedactionsInput.nativeElement.click(); } private _openDeleteFileDialog($event: MouseEvent) { 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 new file mode 100644 index 000000000..d921438c8 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html @@ -0,0 +1,27 @@ +
+
+ +
+
+
+ +
+
+ +
+ +

{{file.name}}

+ +
+ +
+ +
+ +
+
+ + +
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 new file mode 100644 index 000000000..16310ac8c --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss @@ -0,0 +1,64 @@ +@use 'variables'; + +.upload-area { + display: flex; + align-items: center; + border-radius: 8px; + width: 586px; + background: variables.$grey-2; + gap: 16px; + + height: 88px; + cursor: pointer; + + mat-icon, + div { + opacity: 0.5; + transition: 0.1s; + } + + mat-icon { + margin-left: 32px; + } + + div { + font-size: 16px; + font-weight: 500; + } + + //&:hover { + // mat-icon { + // transform: scale(1.2); + // } + // + // div { + // font-size: 19px; + // } + //} +} + +.file-area { + display: flex; + align-items: center; + border-radius: 8px; + width: 586px; + background: variables.$grey-2; + gap: 10px; + + height: 48px; + + mat-icon:first-child { + opacity: 0.5; + margin-left: 16px; + } + + mat-icon:last-child { + margin-left: auto; + margin-right: 16px; + cursor: pointer; + } + + mat-icon { + transform: scale(0.7); + } +} 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 new file mode 100644 index 000000000..c9f1fe4a9 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts @@ -0,0 +1,21 @@ +import { Component, Injector } from '@angular/core'; +import { BaseDialogComponent } from '@iqser/common-ui'; +import { MatDialogRef } from '@angular/material/dialog'; + +@Component({ + templateUrl: './import-redactions-dialog.html', + styleUrls: ['./import-redactions-dialog.scss'], +}) +export class ImportRedactionsDialogComponent extends BaseDialogComponent { + hasFile = false; + + file = { + name: 'File with redactions.pdf', + }; + + constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef) { + super(_injector, _dialogRef); + } + + save(): void {} +} 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 a91dcf8d5..2b62af345 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 @@ -38,6 +38,7 @@ import { DocumentInfoDialogComponent } from './dialogs/document-info-dialog/docu import { ManualRedactionService } from './services/manual-redaction.service'; import { AnnotationWrapperComponent } from './components/annotation-wrapper/annotation-wrapper.component'; import { AnnotationReferenceComponent } from './components/annotation-reference/annotation-reference.component'; +import { ImportRedactionsDialogComponent } from './dialogs/import-redactions-dialog/import-redactions-dialog'; const routes: Routes = [ { @@ -59,6 +60,7 @@ const dialogs = [ HighlightActionDialogComponent, AcceptRecommendationDialogComponent, DocumentInfoDialogComponent, + ImportRedactionsDialogComponent, ]; const components = [ diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 3a691f506..aecb1effb 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -1453,6 +1453,15 @@ "logo": "Logo", "signature": "Signatur" }, + "import-redactions-dialog": { + "actions": { + "cancel": "", + "import": "" + }, + "details": "", + "upload-area-text": "", + "title": "" + }, "initials-avatar": { "unassigned": "Unbekannt", "you": "Sie" diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 0ceb4c396..a78ab2130 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -822,7 +822,7 @@ "edit": "Edit Dossier", "upload-document": "Upload Document" }, - "import-redactions": "Import redactions from other file", + "import-redactions": "Import redactions", "new-rule": { "toast": { "actions": { @@ -1453,6 +1453,15 @@ "logo": "Logo", "signature": "Signature" }, + "import-redactions-dialog": { + "actions": { + "cancel": "Cancel", + "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" + }, "initials-avatar": { "unassigned": "Unassigned", "you": "You" diff --git a/libs/common-ui b/libs/common-ui index 3c0d4368c..d8c2a342b 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 3c0d4368c70975255478d5ee038587c1ea97ecf8 +Subproject commit d8c2a342baa6acb330132c44000562bdd823f620 From a9d966a4f5ebe22b4a3477ea3e6f7eb13473d081 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 13 Apr 2022 00:51:31 +0300 Subject: [PATCH 2/5] RED-3797 - added logic to attach file --- .../file-actions/file-actions.component.ts | 34 ++----------- .../import-redactions-dialog.html | 19 +++++-- .../import-redactions-dialog.scss | 30 +++++------ .../import-redactions-dialog.ts | 50 +++++++++++++++---- 4 files changed, 71 insertions(+), 62 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts index a73721573..51b7578b3 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts +++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts @@ -1,14 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - HostBinding, - Input, - OnChanges, - Optional, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, Optional, ViewChild } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { Action, ActionTypes, Dossier, File } from '@red/domain'; import { DossiersDialogService } from '../../../services/dossiers-dialog.service'; @@ -53,8 +43,6 @@ export class FileActionsComponent implements OnChanges { @Input() maxWidth: number; @Input() fileActionsHelpModeKey: 'document_features' | 'editor_document_features' = 'document_features'; - // @ViewChild('importRedactionsInput', { static: true }) importRedactionsInput: ElementRef; - toggleTooltip?: string; assignTooltip?: string; buttonType?: CircleButtonType; @@ -105,7 +93,6 @@ export class FileActionsComponent implements OnChanges { private readonly _reanalysisService: ReanalysisService, private readonly _router: Router, private readonly _changeRef: ChangeDetectorRef, - private readonly _redactionImportService: RedactionImportService, ) {} @HostBinding('class.keep-visible') @@ -146,7 +133,7 @@ export class FileActionsComponent implements OnChanges { }, { type: ActionTypes.circleBtn, - action: ($event: MouseEvent) => this._triggerImportRedactions($event), + action: ($event: MouseEvent) => this._openImportRedactionsDialog($event), tooltip: _('dossier-overview.import-redactions'), icon: 'red:import_redactions', show: this.showImportRedactions, @@ -290,18 +277,6 @@ export class FileActionsComponent implements OnChanges { ); } - async importRedactions(files: FileList) { - const fileToImport = files[0]; - - if (!fileToImport) { - console.error('No file to import!'); - return; - } - - const import$ = this._redactionImportService.importRedactions(this.file.dossierId, this.file.fileId, fileToImport); - await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error })); - } - forceReanalysisAction($event: LongPressEvent) { this.analysisForced = !$event.touchEnd && this._userPreferenceService.areDevFeaturesEnabled; this._setup(); @@ -318,10 +293,9 @@ export class FileActionsComponent implements OnChanges { return ref.afterClosed(); } - private _triggerImportRedactions($event: MouseEvent) { + private _openImportRedactionsDialog($event: MouseEvent) { $event.stopPropagation(); - this._dialogService.openDialog('importRedactions', null, null); - // this.importRedactionsInput.nativeElement.click(); + this._dialogService.openDialog('importRedactions', null, { dossierId: this.file.dossierId, fileId: this.file.fileId }); } private _openDeleteFileDialog($event: MouseEvent) { 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 d921438c8..11ae69420 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,21 +3,21 @@
-
+
- +
-

{{file.name}}

- +

{{ fileToImport.name }}

+
-
@@ -25,3 +25,12 @@ + + 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 16310ac8c..b01e5b947 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 @@ -1,13 +1,16 @@ @use 'variables'; -.upload-area { +.upload-area, +.file-area { display: flex; align-items: center; border-radius: 8px; width: 586px; background: variables.$grey-2; - gap: 16px; +} +.upload-area { + gap: 16px; height: 88px; cursor: pointer; @@ -25,26 +28,10 @@ font-size: 16px; font-weight: 500; } - - //&:hover { - // mat-icon { - // transform: scale(1.2); - // } - // - // div { - // font-size: 19px; - // } - //} } .file-area { - display: flex; - align-items: center; - border-radius: 8px; - width: 586px; - background: variables.$grey-2; gap: 10px; - height: 48px; mat-icon:first-child { @@ -61,4 +48,11 @@ mat-icon { transform: scale(0.7); } + + p { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 490px; + } } 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 c9f1fe4a9..368f2b8e0 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 @@ -1,21 +1,53 @@ -import { Component, Injector } from '@angular/core'; -import { BaseDialogComponent } from '@iqser/common-ui'; -import { MatDialogRef } from '@angular/material/dialog'; +import { Component, ElementRef, Inject, Injector, ViewChild } from '@angular/core'; +import { BaseDialogComponent, LoadingService, Toaster } from '@iqser/common-ui'; +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'; + +interface ImportData { + dossierId: string; + fileId: string; +} @Component({ templateUrl: './import-redactions-dialog.html', styleUrls: ['./import-redactions-dialog.scss'], }) export class ImportRedactionsDialogComponent extends BaseDialogComponent { - hasFile = false; + @ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef; - file = { - name: 'File with redactions.pdf', - }; + fileToImport: File | null; - constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef) { + constructor( + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, + private readonly _loadingService: LoadingService, + private readonly _redactionImportService: RedactionImportService, + private readonly _toaster: Toaster, + @Inject(MAT_DIALOG_DATA) + readonly data: ImportData, + ) { super(_injector, _dialogRef); } - save(): void {} + triggerAttachFile() { + this.attachFileInput.nativeElement.click(); + } + + attachFile(files: FileList) { + this.fileToImport = files[0]; + + if (!this.fileToImport) { + console.error('No file to import!'); + return; + } + } + + async save(): Promise { + 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 })); + this._loadingService.stop(); + } } From fda08284e606dc0d6041f217d15ef9449d54aa40 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 14 Apr 2022 12:10:54 +0300 Subject: [PATCH 3/5] 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 @@

{{ fileToImport.name }}

- + +
+
+ + {{ 'import-redactions-dialog.only-for-specific-pages' | translate }} + + +
+ +
@@ -26,11 +40,4 @@ - + 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 { 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", From e556a133ef44f3cbefdabbb508635b4bd45a58de Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 18 Apr 2022 18:29:43 +0300 Subject: [PATCH 4/5] 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]; From a160e036ccd5e2d6e4b7112bcd874f4eeda08360 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 18 Apr 2022 19:14:36 +0300 Subject: [PATCH 5/5] RED-3797 - removed commented code --- .../components/file-actions/file-actions.component.html | 8 -------- 1 file changed, 8 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html index deeb284f9..170a0555a 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html @@ -4,14 +4,6 @@
- - - - - - - -