efsa improvements

apps/red-ui/src/app/app.module.ts

@@ -72,6 +72,8 @@ const components = [AppComponent, AuthErrorComponent, NotificationsComponent, Sp
             closeButton: true,
             enableHtml: true,
             toastComponent: ToastComponent,
+            preventDuplicates: true,
+            resetTimeoutOnDuplicate: true,
         }),
         TranslateModule.forRoot({
             loader: {

apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html

@@ -70,6 +70,7 @@
             <p class="download-includes">{{ 'download-includes' | translate }}</p>
             <div class="d-flex">
                 <redaction-select
+                    [height]="150"
                     [label]="'report-type.label' | translate: { length: reportTemplateIdsLength }"
                     [optionTemplate]="reportTemplateOptionTemplate"
                     [options]="availableReportTypes"
@@ -78,6 +79,7 @@
                     formControlName="reportTemplateIds"
                 ></redaction-select>
                 <redaction-select
+                    [height]="150"
                     [label]="'download-type.label' | translate: { length: downloadFileTypesLength }"
                     [options]="downloadTypes"
                     formControlName="downloadFileTypes"

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-details/annotation-details.component.html

@@ -2,7 +2,7 @@
     <mat-icon [svgIcon]="'red:redaction-changes'"></mat-icon>
 </div>
 
-<ng-container *ngIf="hasEnginesToShow">
+<ng-container *ngIf="hasEnginesToShow && !isSelected">
     <div #trigger="cdkOverlayOrigin" (mouseout)="isPopoverOpen = false" (mouseover)="isPopoverOpen = true" cdkOverlayOrigin class="chip">
         <ng-container *ngFor="let engine of engines">
             <mat-icon *ngIf="engine.show" [svgIcon]="engine.icon"></mat-icon>

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-details/annotation-details.component.ts

@@ -26,6 +26,7 @@ type EngineName = keyof typeof Engines;
 })
 export class AnnotationDetailsComponent implements OnChanges {
     @Input() annotation: AnnotationWrapper;
+    @Input() isSelected: boolean;
 
     isPopoverOpen = false;
     hasEnginesToShow: boolean;

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html

@@ -41,7 +41,7 @@
         <redaction-comments #comments [annotation]="annotation"></redaction-comments>
     </div>
 
-    <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
+    <redaction-annotation-details [annotation]="annotation" [isSelected]="isSelected(annotation.id)"></redaction-annotation-details>
 </div>
 
 <ng-container *ngIf="annotationReferencesService.annotation$ | async as annotation">

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.ts

@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
 import { File, ViewMode } from '@red/domain';
 import { ViewModeService } from '../../services/view-mode.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
-import { Observable } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
-import { filter, switchMap } from 'rxjs/operators';
+import { filter, map, switchMap } from 'rxjs/operators';
 
 @Component({
     selector: 'redaction-view-switch [file]',
@@ -21,7 +21,11 @@ export class ViewSwitchComponent implements OnChanges {
     constructor(readonly viewModeService: ViewModeService, private readonly _stateService: FilePreviewStateService) {
         this.canSwitchToDeltaView$ = this._stateService.fileData$.pipe(
             filter(fileData => !!fileData),
-            switchMap(fileData => fileData?.hasChangeLog$),
+            switchMap(fileData =>
+                combineLatest([fileData.hasChangeLog$, fileData.file$]).pipe(
+                    map(([hasChangeLog, file]) => hasChangeLog && !file.isApproved),
+                ),
+            ),
         );
     }
 

apps/red-ui/src/app/modules/shared/components/select/select.component.scss

@@ -11,6 +11,21 @@
     }
 }
 
+// https://stackoverflow.com/questions/34641281/how-to-add-class-to-host-element
+:host(.fixed-height) {
+    height: var(--height);
+    overflow: hidden;
+
+    ::ng-deep .mat-chip-list {
+        height: calc(var(--height) - 44px);
+
+        .mat-chip-list-wrapper {
+            height: 100%;
+            overflow: scroll;
+        }
+    }
+}
+
 .label-header {
     padding: 16px 16px 14px 16px;
     display: flex;

apps/red-ui/src/app/modules/shared/components/select/select.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, Input, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, TemplateRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatChip, MatChipList, MatChipSelectionChange } from '@angular/material/chips';
 
@@ -20,13 +20,27 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
     @Input() options: any[];
     @Input() disabled = false;
     @Input() multiple = true;
-
     @ViewChild(MatChipList) chipList: MatChipList;
-
     private _value: any[] = [];
     private _onChange: (value: any[]) => void;
 
-    constructor(private readonly _changeDetector: ChangeDetectorRef) {}
+    constructor(private readonly _changeDetector: ChangeDetectorRef, private readonly _elementRef: ElementRef) {}
+
+    @HostBinding('class.fixed-height')
+    get isFixedHeight(): boolean {
+        return !!this._height;
+    }
+
+    private _height?: number;
+
+    @Input()
+    set height(value: number) {
+        this._height = value;
+        if (this.isFixedHeight) {
+            const nativeElement = this._elementRef.nativeElement as HTMLElement;
+            nativeElement.style.setProperty('--height', `${this._height}px`);
+        }
+    }
 
     @Input() valueMapper: (option: any) => any = option => option.key;