RED-3982 - added upload component

src/lib/common-ui.module.ts

@@ -32,6 +32,8 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { CapitalizePipe } from './utils/pipes/capitalize.pipe';
 import { KeycloakAngularModule } from 'keycloak-angular';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { UploadFileComponent } from './upload-file/upload-file.component';
+import { DragDropFileUploadDirective } from './upload-file/drag-drop-file-upload.directive';
 
 const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule, MatCheckboxModule];
 const modules = [
@@ -57,9 +59,12 @@ const components = [
     ToastComponent,
     SmallChipComponent,
     ProgressBarComponent,
+    UploadFileComponent,
+    DragDropFileUploadDirective,
 ];
-const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, LogPipe];
 
+
+const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, LogPipe];
 @NgModule({
     declarations: [...components, ...pipes],
     imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, KeycloakAngularModule],

src/lib/help-mode/help-mode/help-mode.component.ts

@@ -38,7 +38,7 @@ export class HelpModeComponent {
         }
     }
 
-    @HostListener('window:resize') onResize(event: any) {
+    @HostListener('window:resize') onResize() {
         if (this.helpModeService.isHelpModeActive) {
             this.helpModeService.updateHelperElements();
         }

src/lib/upload-file/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: '[iqserDragDropFileUpload]',
+})
+export class DragDropFileUploadDirective {
+    @Output() readonly fileDropped = new EventEmitter();
+    @HostBinding('style.background-color') private _background = DEFAULT_BACKGROUND_COLOR;
+
+    @HostListener('dragover', ['$event'])
+    onDragOver(event: DragEvent) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer?.types.includes('Files')) {
+            this._background = DRAG_OVER_BACKGROUND_COLOR;
+        }
+    }
+
+    @HostListener('dragleave', ['$event'])
+    onDragLeave(event: DragEvent) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._background = DEFAULT_BACKGROUND_COLOR;
+    }
+
+    @HostListener('drop', ['$event'])
+    onDrop(event: DragEvent) {
+        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 } });
+            }
+        }
+    }
+}

src/lib/upload-file/upload-file.component.html

@@ -0,0 +1,17 @@
+<div
+    class="upload-area"
+    *ngIf="!file"
+    (click)="triggerAttachFile()"
+    iqserDragDropFileUpload
+    (fileDropped)="attachFile($event)"
+>
+    <mat-icon svgIcon="iqser:upload"></mat-icon>
+    <div translate="import-redactions-dialog.upload-area-text"></div>
+</div>
+<div class="file-area" *ngIf="file">
+    <mat-icon svgIcon="iqser:document"></mat-icon>
+    <p>{{ file.name }}</p>
+    <mat-icon svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
+</div>
+
+<input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" [accept]="'application/pdf'" />

src/lib/upload-file/upload-file.component.scss

@@ -0,0 +1,58 @@
+@import '../../assets/styles/common-variables';
+
+.upload-area,
+.file-area {
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    width: 586px;
+    background: var(--iqser-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;
+    }
+}

src/lib/upload-file/upload-file.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+    selector: 'iqser-upload-file',
+    templateUrl: './upload-file.component.html',
+    styleUrls: ['./upload-file.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+export class UploadFileComponent {
+    @ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef;
+
+    @Output() readonly fileChanged = new EventEmitter<File | null>();
+
+    file!: File | null;
+
+    triggerAttachFile() {
+        this.attachFileInput.nativeElement.click();
+    }
+
+    attachFile(event) {
+        const files = event?.target?.files;
+        this.file = 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.file) {
+            console.error('No file to import!');
+            return;
+        }
+        this.fileChanged.emit(this.file);
+    }
+
+    removeFile() {
+        this.file = null;
+        this.fileChanged.emit(null);
+    }
+}