RED-7550: Bulk edit dialog.

apps/red-ui/src/app/models/file/annotation.permissions.ts

@@ -62,17 +62,6 @@ export class AnnotationPermissions {
             permissions.canRecategorizeAnnotation = canRecategorizeAnnotation(annotation, canAddRedaction);
             permissions.canResizeAnnotation = canResizeAnnotation(annotation, canAddRedaction);
 
-            // if (isDocumine) {
-            //     annotation.isSkipped || annotation.isRedacted;
-            // } else {
-            //     annotation.isImage || annotation.isOCR;
-            //     annotation.isSkipped || annotation.isRedacted;
-            //     annotation.isIgnoredHint || annotation.isDictBasedHint || annotation.isHint || annotation.isSuggestionForceHint;
-            // }
-            // const skippedRedacted = annotation.isSkipped || annotation.isRedacted;
-            // const ignoredHints =  annotation.isIgnoredHint || annotation.isDictBasedHint || annotation.isHint || annotation.isSuggestionForceHint;
-            // const image = annotation
-
             permissions.canEditAnnotations = (annotation.isSkipped || annotation.isRedacted) && !annotation.isImage;
             permissions.canEditHints =
                 annotation.isIgnoredHint || annotation.isDictBasedHint || annotation.isHint || annotation.isSuggestionForceHint;

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

@@ -39,24 +39,35 @@ export class AnnotationActionsComponent implements OnChanges {
     });
     readonly #isDocumine = getConfig().IS_DOCUMINE;
 
+    constructor(
+        readonly viewModeService: ViewModeService,
+        readonly helpModeService: HelpModeService,
+        readonly multiSelectService: MultiSelectService,
+        private readonly _state: FilePreviewStateService,
+        private readonly _permissionsService: PermissionsService,
+        private readonly _iqserPermissionsService: IqserPermissionsService,
+        private readonly _annotationManager: REDAnnotationManager,
+        readonly annotationActionsService: AnnotationActionsService,
+        readonly annotationReferencesService: AnnotationReferencesService,
+    ) {}
+
     get annotations(): AnnotationWrapper[] {
         return this.#annotations;
     }
 
-    @Input()
-    set annotations(annotations: AnnotationWrapper[]) {
-        this.#annotations = annotations.filter(a => a !== undefined);
-        this.isImage = this.#annotations?.reduce((accumulator, annotation) => annotation.isImage && accumulator, true);
-        this._annotationId = this.#annotations[0]?.id;
-    }
-
     get canEdit(): boolean {
-        const documineCanEditRedactions =
+        const canEditRedactions =
             this.annotationPermissions.canChangeLegalBasis ||
             this.annotationPermissions.canRecategorizeAnnotation ||
             this.annotationPermissions.canForceHint ||
             this.annotationPermissions.canForceRedaction;
-        return this.#isDocumine && this.annotations.length > 1 ? this.annotationPermissions.canEditAnnotations : documineCanEditRedactions;
+        return this.annotations.length > 1
+            ? this.#isDocumine
+                ? this.annotationPermissions.canEditAnnotations
+                : this.annotationPermissions.canEditHints ||
+                  this.annotationPermissions.canEditImages ||
+                  this.annotationPermissions.canEditAnnotations
+            : canEditRedactions;
     }
 
     get canRemoveRedaction(): boolean {
@@ -76,17 +87,12 @@ export class AnnotationActionsComponent implements OnChanges {
         return this.annotations.every(a => a.superType === type);
     }
 
-    constructor(
+    @Input()
-        readonly viewModeService: ViewModeService,
+    set annotations(annotations: AnnotationWrapper[]) {
-        readonly helpModeService: HelpModeService,
+        this.#annotations = annotations.filter(a => a !== undefined);
-        readonly multiSelectService: MultiSelectService,
+        this.isImage = this.#annotations?.reduce((accumulator, annotation) => annotation.isImage && accumulator, true);
-        private readonly _state: FilePreviewStateService,
+        this._annotationId = this.#annotations[0]?.id;
-        private readonly _permissionsService: PermissionsService,
+    }
-        private readonly _iqserPermissionsService: IqserPermissionsService,
-        private readonly _annotationManager: REDAnnotationManager,
-        readonly annotationActionsService: AnnotationActionsService,
-        readonly annotationReferencesService: AnnotationReferencesService,
-    ) {}
 
     ngOnChanges(): void {
         this.#setPermissions();

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

@@ -7,27 +7,27 @@
         ></div>
 
         <div class="dialog-content redaction">
-            <!--            <div *ngIf="!allRectangles && redactedText" class="iqser-input-group w-450">-->
+            <div *ngIf="!isImage && redactedTexts" class="iqser-input-group">
-            <!--                <label-->
-            <!--                    [translateParams]="{ type: isImage ? 'image' : isHint ? 'hint' : 'redaction' }"-->
-            <!--                    [translate]="'edit-redaction.dialog.content.redacted-text'"-->
-            <!--                    class="selected-text"-->
-            <!--                ></label>-->
-            <!--                {{ redactedText }}-->
-            <div *ngIf="!allRectangles && redactedTexts" class="iqser-input-group w-450">
                 <label
+                    [translateParams]="{ type: isImage ? 'image' : isHint ? 'hint' : 'redaction', length: redactedTexts.length }"
                     [translate]="'edit-redaction.dialog.content.redacted-text'"
-                    [translateParams]="{ length: redactedTexts.length }"
                     class="selected-text"
                 ></label>
-                {{ redactedTexts }}
+                <cdk-virtual-scroll-viewport
+                    [itemSize]="16"
+                    [ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
+                >
+                    <ul *cdkVirtualFor="let text of redactedTexts">
+                        <li>{{ text }}</li>
+                    </ul>
+                </cdk-virtual-scroll-viewport>
             </div>
 
             <div *ngIf="!isManualRedaction" class="iqser-input-group required w-450">
                 <label [translate]="'edit-redaction.dialog.content.type'"></label>
 
                 <mat-form-field>
-                    <mat-select formControlName="type">
+                    <mat-select formControlName="type" [placeholder]="'edit-redaction.dialog.content.unchanged' | translate">
                         <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
                         <mat-option
                             (click)="typeChanged()"
@@ -46,7 +46,11 @@
                 <div class="iqser-input-group required w-450">
                     <label [translate]="'edit-redaction.dialog.content.reason'"></label>
                     <mat-form-field>
-                        <mat-select class="full-width" formControlName="reason">
+                        <mat-select
+                            class="full-width"
+                            formControlName="reason"
+                            [placeholder]="'edit-redaction.dialog.content.unchanged' | translate"
+                        >
                             <mat-option
                                 *ngFor="let option of legalOptions"
                                 [matTooltip]="option.description"
@@ -66,19 +70,33 @@
 
                 <div class="iqser-input-group w-450">
                     <label [translate]="'edit-redaction.dialog.content.section'"></label>
-                    <input formControlName="section" name="section" type="text" />
+                    <input
+                        formControlName="section"
+                        name="section"
+                        type="text"
+                        [placeholder]="'edit-redaction.dialog.content.unchanged' | translate"
+                    />
                 </div>
             </ng-container>
 
             <div *ngIf="allRectangles" class="iqser-input-group w-400">
                 <label [translate]="'change-legal-basis-dialog.content.classification'"></label>
-                <input formControlName="value" name="classification" type="text" />
+                <input
+                    formControlName="value"
+                    name="classification"
+                    type="text"
+                    [placeholder]="'edit-redaction.dialog.content.unchanged' | translate"
+                />
             </div>
 
             <div class="iqser-input-group w-450">
                 <label [translate]="'edit-redaction.dialog.content.comment'"></label>
                 <textarea
-                    [placeholder]="'edit-redaction.dialog.content.comment-placeholder' | translate"
+                    [placeholder]="
+                        !isImage && redactedTexts.length === 1
+                            ? ('edit-redaction.dialog.content.comment-placeholder' | translate)
+                            : ('edit-redaction.dialog.content.unchanged' | translate)
+                    "
                     formControlName="comment"
                     iqserHasScrollbar
                     name="comment"
@@ -90,7 +108,7 @@
 
         <div class="dialog-actions">
             <iqser-icon-button
-                [disabled]="showLegalReason && disabled"
+                [disabled]="disabled || !changed"
                 [label]="'edit-redaction.dialog.actions.save' | translate"
                 [submit]="true"
                 [type]="iconButtonTypes.primary"

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

@@ -0,0 +1,22 @@
+@use 'common-mixins';
+
+cdk-virtual-scroll-viewport {
+    margin-top: 8px;
+    @include common-mixins.scroll-bar;
+}
+
+:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
+    max-width: 100% !important;
+}
+
+ul {
+    padding-left: 16px;
+}
+
+li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    list-style-position: inside;
+    overflow: hidden;
+    padding-right: 10px;
+}

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

@@ -13,6 +13,7 @@ import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-d
 
 @Component({
     templateUrl: './edit-redaction-dialog.component.html',
+    styleUrls: ['./edit-redaction-dialog.component.scss'],
 })
 export class EditRedactionDialogComponent
     extends IqserDialogComponent<EditRedactionDialogComponent, EditRedactionData, EditRedactResult>
@@ -25,7 +26,6 @@ export class EditRedactionDialogComponent
     readonly isModifyDictionary: boolean;
     readonly isImage: boolean;
     readonly isManualRedaction: boolean;
-    readonly showLegalReason: boolean;
     readonly isHint: boolean;
     readonly allRectangles = this.data.annotations.reduce((acc, a) => acc && a.rectangle, true);
     readonly showExtras: boolean;
@@ -41,11 +41,8 @@ export class EditRedactionDialogComponent
     ) {
         super();
         const annotations = this.data.annotations;
-        const firstEntry = annotations[0];
+        this.isImage = annotations.reduce((acc, next) => acc && [...IMAGE_CATEGORIES, 'ocr'].includes(next.type), true);
-        this.isImage = [...IMAGE_CATEGORIES, 'ocr'].includes(firstEntry.type);
+        this.redactedTexts = !this.isImage ? annotations.map(annotation => annotation.value) : null;
-        const testImage = annotations.reduce((acc, next) => acc && [...IMAGE_CATEGORIES, 'ocr'].includes(next.type), true);
-        console.log(testImage);
-        this.redactedTexts = !testImage ? annotations.map(annotation => annotation.value) : null;
         this.isModifyDictionary = annotations.every(annotation => annotation.isModifyDictionary);
         this.isManualRedaction = annotations.every(annotation => annotation.type === SuperTypes.ManualRedaction);
         this.isHint = annotations.every(annotation => annotation.isHint);
@@ -61,7 +58,7 @@ export class EditRedactionDialogComponent
     }
 
     get disabled() {
-        return !this.form.controls.reason.value;
+        return this.showExtras ? !this.form.controls.reason.value : false;
     }
 
     async ngOnInit() {
@@ -74,11 +71,13 @@ export class EditRedactionDialogComponent
         }));
 
         const reason = this.legalOptions.find(o => o.legalBasis === this.data.annotations[0].legalBasis);
+        const sameLegalBasis = this.data.annotations.every(annotation => annotation.legalBasis === reason?.legalBasis);
         this.form.patchValue({
-            reason: reason,
+            reason: sameLegalBasis ? reason : null,
         });
 
         this.legalOptions.sort((a, b) => a.label.localeCompare(b.label));
+        this.initialFormValue = this.form.getRawValue();
     }
 
     typeChanged() {
@@ -102,7 +101,7 @@ export class EditRedactionDialogComponent
             this.#dossier.dossierTemplateId,
             this.isImage,
             this.isHint,
-            this.data.annotations[0].isOCR,
+            this.data.annotations.every(annotation => annotation.isOCR),
         );
     }
 
@@ -123,8 +122,8 @@ export class EditRedactionDialogComponent
     }
 
     #getForm() {
-        const sameType = new Set(this.data.annotations.map(annotation => annotation.type)).size === 1;
+        const sameType = this.data.annotations.every(annotation => annotation.type === this.data.annotations[0].type);
-        const sameSection = new Set(this.data.annotations.map(annotation => annotation.section)).size === 1;
+        const sameSection = this.data.annotations.every(annotation => annotation.section === this.data.annotations[0].section);
         return this._formBuilder.group({
             reason: new FormControl<LegalBasisOption>(null),
             comment: new FormControl<string>(null),

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

@@ -104,12 +104,16 @@ export class AnnotationActionsService {
             return;
         }
 
-        if (!this.#isDocumine && (result.legalBasis !== annotations[0].legalBasis || result.section !== annotations[0].section)) {
+        if (
+            !this.#isDocumine &&
+            (!annotations.every(annotation => annotation.legalBasis === result.legalBasis) ||
+                !annotations.every(annotation => annotation.section === result.section))
+        ) {
             const changeLegalBasisBody = annotations.map(annotation => ({
                 annotationId: annotation.id,
                 legalBasis: result.legalBasis,
-                section: result.section,
+                section: result.section ?? annotation.section,
-                value: result.value,
+                value: result.value ?? annotation.value,
             }));
             requests.push(this._manualRedactionService.changeLegalBasis(changeLegalBasisBody, dossierId, fileId));
         }

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

@@ -50,13 +50,6 @@ export class PdfAnnotationActionsService {
             availableActions.push(resizeButton);
         }
 
-        /*
-
-        */
-
-        console.log(annotations);
-        console.log(annotations.map(annotation => annotation.type));
-        console.log(permissions);
         const canEditRedactions =
             permissions.canChangeLegalBasis ||
             permissions.canRecategorizeAnnotation ||

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

@@ -1249,7 +1249,7 @@
           }
         },
         "reason": "Reason",
-        "redacted-text": "{type, select, hint{Hint} other{Redacted}} text",
+        "redacted-text": "{type, select, hint{Hint} other{Redacted}} {length, plural, one{text} other {texts}}",
         "section": "Paragraph / Location",
         "type": "Type",
         "unchanged": "Unchanged"