RED-3797 - added logic to attach file

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) {

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

@@ -3,21 +3,21 @@
 
     <div class="dialog-content">
         <div translate="import-redactions-dialog.details" class="mb-24"></div>
-        <div class="upload-area" *ngIf="!hasFile" (click)="hasFile = true">
+        <div class="upload-area" *ngIf="!fileToImport" (click)="triggerAttachFile()">
             <mat-icon svgIcon="iqser:upload"></mat-icon>
             <div translate="import-redactions-dialog.upload-area-text"></div>
         </div>
-        <ng-container *ngIf="hasFile">
+        <ng-container *ngIf="fileToImport">
             <div class="file-area">
                 <mat-icon svgIcon="iqser:document"></mat-icon>
-                <p>{{file.name}}</p>
-                <mat-icon svgIcon="iqser:trash" (click)="hasFile = false"></mat-icon>
+                <p>{{ fileToImport.name }}</p>
+                <mat-icon svgIcon="iqser:trash" (click)="fileToImport = null"></mat-icon>
             </div>
         </ng-container>
     </div>
 
     <div class="dialog-actions">
-        <button color="primary" mat-flat-button type="submit" [disabled]="!hasFile">
+        <button color="primary" mat-flat-button type="submit" (click)="save()" [disabled]="!fileToImport">
             {{ 'import-redactions-dialog.actions.import' | translate }}
         </button>
         <div class="all-caps-label cancel" mat-dialog-close translate="import-redactions-dialog.actions.cancel"></div>
@@ -25,3 +25,12 @@
 
     <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
 </section>
+
+<input
+    #attachFileInput
+    [hidden]="true"
+    (change)="attachFile($event.target['files'])"
+    class="file-upload-input"
+    type="file"
+    accept="application/pdf"
+/>

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

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<ImportRedactionsDialogComponent>) {
+    constructor(
+        protected readonly _injector: Injector,
+        protected readonly _dialogRef: MatDialogRef<ImportRedactionsDialogComponent>,
+        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<void> {
+        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();
+    }
 }