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(); + } }