Pull request #362: VM/RED-3797

Merge in RED/ui from VM/RED-3797 to master

* commit 'a160e036ccd5e2d6e4b7112bcd874f4eeda08360':
  RED-3797 - removed commented code
  RED-3797 - added drag&drop directive to upload file on a specific area for importing document redactions
  RED-3797 - added checkbox that allows the user to define the pages to import the redactions from
  RED-3797 - added logic to attach file
  RED-3797 - WIP on adding import redaction dialog

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/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<DialogType> {
@@ -26,6 +27,10 @@ export class DossiersDialogService extends DialogService<DialogType> {
             component: AssignReviewerApproverDialogComponent,
             dialogConfig: { disableClose: false },
         },
+        importRedactions: {
+            component: ImportRedactionsDialogComponent,
+            dialogConfig: { disableClose: false },
+        },
     };
 
     constructor(protected readonly _dialog: MatDialog) {

apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html

@@ -4,14 +4,6 @@
     <iqser-status-bar *ngIf="showStatusBar" [configs]="[{ color: file.workflowStatus, length: 1 }]"></iqser-status-bar>
 </div>
 
-<input
-    #importRedactionsInput
-    (change)="importRedactions($event.target['files'])"
-    class="file-upload-input"
-    type="file"
-    accept="application/pdf"
-/>
-
 <ng-container *ngIf="isFilePreview || isDossierOverviewWorkflow">
     <ng-container *ngTemplateOutlet="actions"></ng-container>
 </ng-container>

apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts

@@ -1,14 +1,4 @@
-import {
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, Optional, ViewChild } from '@angular/core';
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    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,9 +293,9 @@ export class FileActionsComponent implements OnChanges {
         return ref.afterClosed();
     }
 
-    private _triggerImportRedactions($event: MouseEvent) {
+    private _openImportRedactionsDialog($event: MouseEvent) {
         $event.stopPropagation();
-        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

@@ -0,0 +1,49 @@
+<section class="dialog">
+    <div translate="import-redactions-dialog.title" class="dialog-header heading-l"></div>
+
+    <div class="dialog-content">
+        <div translate="import-redactions-dialog.details" class="mb-24"></div>
+        <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>
+        <ng-container *ngIf="fileToImport">
+            <div class="file-area">
+                <mat-icon svgIcon="iqser:document"></mat-icon>
+                <p>{{ fileToImport.name }}</p>
+                <mat-icon svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
+            </div>
+            <div class="only-for-pages">
+                <mat-checkbox
+                    (change)="onlyForSpecificPages = !onlyForSpecificPages"
+                    [checked]="onlyForSpecificPages"
+                    class="filter-menu-checkbox"
+                    color="primary"
+                >
+                    {{ 'import-redactions-dialog.only-for-specific-pages' | translate }}
+                </mat-checkbox>
+
+                <div *ngIf="onlyForSpecificPages" class="iqser-input-group datepicker-wrapper">
+                    <input />
+                </div>
+            </div>
+        </ng-container>
+    </div>
+
+    <div class="dialog-actions">
+        <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>
+    </div>
+
+    <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
+</section>
+
+<input #attachFileInput [hidden]="true" (change)="attachFile($event)" 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

@@ -0,0 +1,72 @@
+@use 'variables';
+
+.upload-area,
+.file-area {
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    width: 586px;
+    background: variables.$grey-2;
+}
+
+.upload-area {
+    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;
+    }
+}
+
+.file-area {
+    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);
+    }
+
+    p {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        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;
+    }
+}

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

@@ -0,0 +1,69 @@
+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';
+import { HttpStatusCode } from '@angular/common/http';
+
+interface ImportData {
+    dossierId: string;
+    fileId: string;
+}
+
+@Component({
+    templateUrl: './import-redactions-dialog.html',
+    styleUrls: ['./import-redactions-dialog.scss'],
+})
+export class ImportRedactionsDialogComponent extends BaseDialogComponent {
+    @ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef;
+
+    fileToImport: File | null;
+    onlyForSpecificPages = false;
+
+    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);
+    }
+
+    triggerAttachFile() {
+        this.attachFileInput.nativeElement.click();
+    }
+
+    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<void> {
+        this._loadingService.start();
+        const import$ = this._redactionImportService.importRedactions(this.data.dossierId, this.data.fileId, this.fileToImport);
+        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();
+        }
+    }
+}

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 = [

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];
 

apps/red-ui/src/assets/i18n/de.json

@@ -1453,6 +1453,19 @@
     "logo": "Logo",
     "signature": "Signatur"
   },
+  "import-redactions-dialog": {
+    "actions": {
+      "cancel": "",
+      "import": ""
+    },
+    "details": "",
+    "http": {
+      "success": ""
+    },
+    "only-for-specific-pages": "",
+    "title": "",
+    "upload-area-text": ""
+  },
   "initials-avatar": {
     "unassigned": "Unbekannt",
     "you": "Sie"

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,19 @@
     "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.",
+    "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",
     "you": "You"

libs/common-ui

@@ -1 +1 @@
-Subproject commit 6a0e22e68441a1dbbaaa38cfebed1aa8e8bb91be
+Subproject commit d8c2a342baa6acb330132c44000562bdd823f620