RED-3797 - WIP on adding import redaction dialog

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

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

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

@@ -0,0 +1,27 @@
+<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="!hasFile" (click)="hasFile = true">
+            <mat-icon svgIcon="iqser:upload"></mat-icon>
+            <div translate="import-redactions-dialog.upload-area-text"></div>
+        </div>
+        <ng-container *ngIf="hasFile">
+            <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>
+            </div>
+        </ng-container>
+    </div>
+
+    <div class="dialog-actions">
+        <button color="primary" mat-flat-button type="submit" [disabled]="!hasFile">
+            {{ '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>

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

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<ImportRedactionsDialogComponent>) {
+        super(_injector, _dialogRef);
+    }
+
+    save(): void {}
+}

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/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"

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"

libs/common-ui

@@ -1 +1 @@
-Subproject commit 3c0d4368c70975255478d5ee038587c1ea97ecf8
+Subproject commit d8c2a342baa6acb330132c44000562bdd823f620