RED-7340 - prefill the range fields in the edit and remove dialogs

apps/red-ui/src/app/components/notifications/notifications.component.scss

@@ -22,7 +22,7 @@
         }
 
         .mat-mdc-menu-item.notification {
-            padding: 8px 26px 10px 8px;
+            padding: 8px 26px 10px 8px !important;
             margin: 2px 0 0 0;
             height: fit-content;
             position: relative;

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts

@@ -588,4 +588,16 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
             this.displayedPages.every((value, index) => value === newDisplayedPages[index])
         );
     }
+
+    @HostListener('click', ['$event'])
+    clickInsideWorkloadView($event: MouseEvent) {
+        $event?.stopPropagation();
+    }
+
+    @HostListener('document: click')
+    clickOutsideWorkloadView() {
+        if (this.multiSelectService.active()) {
+            this.multiSelectService.deactivate();
+        }
+    }
 }

apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts

@@ -37,7 +37,7 @@ import {
 import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-radio.component';
 import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
 import { validatePageRange } from '../../utils/form-validators';
-import { parseRectanglePosition, parseSelectedPageNumbers } from '../../utils/enhance-manual-redaction-request.utils';
+import { parseRectanglePosition, parseSelectedPageNumbers, prefillPageRange } from '../../utils/enhance-manual-redaction-request.utils';
 
 interface TypeSelectOptions {
     type: string;
@@ -103,6 +103,14 @@ export class EditRedactionDialogComponent
         private readonly _dictionaryService: DictionaryService,
     ) {
         super();
+
+        if (this.allRectangles) {
+            prefillPageRange(
+                this.data.annotations[0],
+                this.data.allFileAnnotations,
+                this.options as DetailsRadioOption<RectangleRedactOption>[],
+            );
+        }
     }
 
     get displayedDictionaryLabel() {

apps/red-ui/src/app/modules/file-preview/dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component.scss

@@ -3,7 +3,7 @@
 }
 
 .dialog-content {
-    height: 650px;
+    height: 610px;
     overflow-y: auto;
 }
 

apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts

@@ -36,7 +36,7 @@ import {
 } from '../../utils/dialog-types';
 import { isJustOne } from '@common-ui/utils';
 import { validatePageRange } from '../../utils/form-validators';
-import { parseRectanglePosition, parseSelectedPageNumbers } from '../../utils/enhance-manual-redaction-request.utils';
+import { parseRectanglePosition, parseSelectedPageNumbers, prefillPageRange } from '../../utils/enhance-manual-redaction-request.utils';
 
 @Component({
     templateUrl: './remove-redaction-dialog.component.html',
@@ -140,6 +140,14 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
         private readonly _userPreferences: UserPreferenceService,
     ) {
         super();
+
+        if (this.#allRectangles) {
+            prefillPageRange(
+                this.data.redactions[0],
+                this.data.allFileRedactions,
+                this.options as DetailsRadioOption<RectangleRedactOption>[],
+            );
+        }
     }
 
     get hasFalsePositiveOption() {

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts

@@ -253,6 +253,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
 
     ngOnDestroy() {
         this.pdf.instance.UI.hotkeys.off('esc');
+        this.pdf.instance.UI.iframeWindow.document.removeEventListener('click', this.handleViewerClick);
         super.ngOnDestroy();
     }
 
@@ -277,6 +278,15 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
     }
 
+    @Bind()
+    handleViewerClick() {
+        this._ngZone.run(() => {
+            if (this._multiSelectService.active()) {
+                this._multiSelectService.deactivate();
+            }
+        });
+    }
+
     async ngOnAttach(previousRoute: ActivatedRouteSnapshot) {
         if (!this.state.file().canBeOpened) {
             return this.#navigateToDossier();
@@ -307,6 +317,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         this.#restoreOldFilters();
         this.pdf.instance.UI.hotkeys.on('esc', this.handleEscInsideViewer);
         this._viewerHeaderService.resetLayers();
+        this.pdf.instance.UI.iframeWindow.document.addEventListener('click', this.handleViewerClick);
     }
 
     async openRectangleAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {

apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts

@@ -95,7 +95,7 @@ export class AnnotationActionsService {
                 );
             } else {
                 const addAnnotationRequest = annotations.map(a => ({
-                    comment: { text: request.comment },
+                    comment: request.comment,
                     legalBasis: request.legalBasis,
                     reason: request.reason,
                     positions: a.positions,
@@ -113,9 +113,11 @@ export class AnnotationActionsService {
 
     async editRedaction(annotations: AnnotationWrapper[]) {
         const { dossierId, file } = this._state;
+        const allFileAnnotations = this._fileDataService.annotations();
         const includeUnprocessed = annotations.every(annotation => this.#includeUnprocessed(annotation, true));
         const data = {
             annotations,
+            allFileAnnotations,
             dossierId,
             file: file(),
         };
@@ -184,9 +186,11 @@ export class AnnotationActionsService {
         const dossierTemplate = this._dossierTemplatesService.find(this._state.dossierTemplateId);
         const isApprover = this._permissionsService.isApprover(this._state.dossier());
         const { file } = this._state;
+        const allFileRedactions = this._fileDataService.annotations();
 
         const data = {
             redactions,
+            allFileRedactions,
             file: file(),
             dossier: this._state.dossier(),
             falsePositiveContext: redactions.map(r => this.#getFalsePositiveText(r)),

apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts

@@ -64,6 +64,7 @@ export interface RedactTextData {
 
 export interface EditRedactionData {
     annotations: AnnotationWrapper[];
+    allFileAnnotations?: AnnotationWrapper[];
     dossierId: string;
     file: File;
     isApprover?: boolean;
@@ -135,6 +136,7 @@ export interface RemoveRedactionPermissions {
 
 export interface RemoveRedactionData {
     redactions: AnnotationWrapper[];
+    allFileRedactions?: AnnotationWrapper[];
     dossier: Dossier;
     file?: File;
     falsePositiveContext: string[];

apps/red-ui/src/app/modules/file-preview/utils/enhance-manual-redaction-request.utils.ts

@@ -1,7 +1,8 @@
 import { Dictionary, File, IAddRedactionRequest, IEntityLogEntryPosition, SuperType } from '@red/domain';
 import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
-import { LegalBasisOption } from './dialog-types';
+import { LegalBasisOption, RectangleRedactOption, RectangleRedactOptions } from './dialog-types';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
 
 export interface EnhanceRequestData {
     readonly type: SuperType | null;
@@ -79,3 +80,60 @@ export const parseRectanglePosition = (annotation: AnnotationWrapper) => {
         pageNumber: position.page,
     } as IEntityLogEntryPosition;
 };
+
+export const prefillPageRange = (
+    annotation: AnnotationWrapper,
+    allFileAnnotations: AnnotationWrapper[],
+    options: DetailsRadioOption<RectangleRedactOption>[],
+) => {
+    const option = options.find(o => o.value === RectangleRedactOptions.MULTIPLE_PAGES);
+    const pages = extractPages(annotation, allFileAnnotations);
+    option.additionalInput.value = toRangeString(pages);
+};
+
+const extractPages = (annotation: AnnotationWrapper, allFileAnnotations: AnnotationWrapper[]): number[] => {
+    return allFileAnnotations.reduce((pages, a) => {
+        const position = a.positions[0];
+        const annotationPosition = annotation.positions[0];
+        if (
+            position.height === annotationPosition.height &&
+            position.width === annotationPosition.width &&
+            position.topLeft.x === annotationPosition.topLeft.x &&
+            position.topLeft.y === annotationPosition.topLeft.y
+        ) {
+            pages.push(position.page);
+        }
+        return pages;
+    }, []);
+};
+
+const toRangeString = (pages: number[]): string => {
+    if (pages.length === 0) {
+        return '';
+    }
+
+    let ranges = [];
+    let start = pages[0];
+    let end = pages[0];
+
+    for (let i = 1; i < pages.length; i++) {
+        if (pages[i] === end + 1) {
+            end = pages[i];
+        } else {
+            if (start === end) {
+                ranges.push(`${start}`);
+            } else {
+                ranges.push(`${start}-${end}`);
+            }
+            start = end = pages[i];
+        }
+    }
+
+    if (start === end) {
+        ranges.push(`${start}`);
+    } else {
+        ranges.push(`${start}-${end}`);
+    }
+
+    return ranges.join(',');
+};

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

@@ -2134,7 +2134,7 @@
         "type": "Typ",
         "type-placeholder": "Typ auswählen...",
         "unchanged": "Ungeändert",
-        "value": ""
+        "value": "Wert"
       },
       "title": "Text schwärzen"
     }

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

@@ -2134,7 +2134,7 @@
         "type": "Type",
         "type-placeholder": "Select type...",
         "unchanged": "",
-        "value": ""
+        "value": "Wert"
       },
       "title": "Redact text"
     }

libs/common-ui

@@ -1 +1 @@
-Subproject commit e88929f0d48e54298d85ef05ea467980be11524b
+Subproject commit ba85260cc4a3e780a37b3f41be26b83d045a1dcb