RED-3721: Highlights actions page options

apps/red-ui/src/app/modules/dossier/services/text-highlight.service.ts

@@ -19,6 +19,7 @@ export class TextHighlightService extends GenericService<TextHighlightResponse>
         return this._http.get<{ highlights: Highlight[] }>(`/${this.#getPath(dossierId, fileId)}`).pipe(
             map(response => response.highlights),
             map(highlights => highlights.map(highlight => AnnotationWrapper.fromHighlight(highlight))),
+            map(highlights => highlights.sort((h1, h2) => h1.color.localeCompare(h2.color))),
             catchError(() => of([])),
         );
     }

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

@@ -43,6 +43,7 @@ export class HighlightsSeparatorComponent {
             color: highlightGroup.color,
             operation,
             highlights,
+            pageNumber: this.annotation.pageNumber,
         };
     }
 }

apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.html

@@ -1,9 +1,9 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div [translate]="title" class="dialog-header heading-l"></div>
+        <div [translate]="translations[data.operation].title" class="dialog-header heading-l"></div>
 
         <div class="dialog-content">
-            <div [translate]="details" class="mb-24"></div>
+            <div [translate]="translations[data.operation].details" class="mb-24"></div>
 
             <div class="iqser-input-group required w-150">
                 <label translate="highlight-action-dialog.form.color.label"></label>
@@ -17,15 +17,17 @@
             </div>
 
             <div class="iqser-input-group">
-                <mat-checkbox color="primary" formControlName="confirmation" name="confirmation">
+                <mat-radio-group formControlName="option">
-                    {{ confirmationMessage | translate }}
+                    <mat-radio-button *ngFor="let option of options" [value]="option" color="primary">
-                </mat-checkbox>
+                        {{ translations[option] | translate }}
+                    </mat-radio-button>
+                </mat-radio-group>
             </div>
         </div>
 
         <div class="dialog-actions">
             <button [disabled]="form.invalid" color="primary" mat-flat-button type="submit">
-                {{ saveMessage | translate }}
+                {{ translations[data.operation].save | translate }}
             </button>
             <div class="all-caps-label cancel" mat-dialog-close translate="highlight-action-dialog.actions.cancel"></div>
             <iqser-help-button></iqser-help-button>

apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts

@@ -1,12 +1,12 @@
 import { Component, Inject, Injector } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { TextHighlightOperation } from '@red/domain';
+import { TextHighlightOperation, TextHighlightOperationPages } from '@red/domain';
 import { BaseDialogComponent, LoadingService } from '@iqser/common-ui';
 import { TextHighlightService } from '../../../dossier/services/text-highlight.service';
 import { firstValueFrom } from 'rxjs';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { highlightsTranslations } from '../../../../translations/highlights-translations';
 
 export interface HighlightActionData {
     readonly operation: TextHighlightOperation;
@@ -14,16 +14,15 @@ export interface HighlightActionData {
     readonly dossierId: string;
     readonly fileId: string;
     readonly highlights: AnnotationWrapper[];
+    readonly pageNumber: number;
 }
 
 @Component({
     templateUrl: './highlight-action-dialog.component.html',
 })
 export class HighlightActionDialogComponent extends BaseDialogComponent {
-    readonly title: string;
+    readonly translations = highlightsTranslations;
-    readonly details: string;
+    options = [TextHighlightOperationPages.THIS_PAGE, TextHighlightOperationPages.ALL_PAGES];
-    readonly confirmationMessage: string;
-    readonly saveMessage: string;
 
     constructor(
         private readonly _formBuilder: FormBuilder,
@@ -36,29 +35,16 @@ export class HighlightActionDialogComponent extends BaseDialogComponent {
         super(_injector, _dialogRef);
         this.form = this._getForm();
         this.initialFormValue = this.form.getRawValue();
-
-        this.title =
-            data.operation === TextHighlightOperation.CONVERT
-                ? _('highlight-action-dialog.convert.title')
-                : _('highlight-action-dialog.remove.title');
-        this.details =
-            data.operation === TextHighlightOperation.CONVERT
-                ? _('highlight-action-dialog.convert.details')
-                : _('highlight-action-dialog.remove.details');
-        this.confirmationMessage =
-            data.operation === TextHighlightOperation.CONVERT
-                ? _('highlight-action-dialog.convert.confirmation')
-                : _('highlight-action-dialog.remove.confirmation');
-        this.saveMessage =
-            data.operation === TextHighlightOperation.CONVERT
-                ? _('highlight-action-dialog.convert.save')
-                : _('highlight-action-dialog.remove.save');
     }
 
     async save(): Promise<void> {
         this._loadingService.start();
-        const { dossierId, fileId, operation, highlights } = this.data;
+        const { dossierId, fileId, operation, highlights, pageNumber } = this.data;
-        const ids = highlights.map(h => h.id);
+        const filteredHighlights =
+            this.form.get('option').value === TextHighlightOperationPages.ALL_PAGES
+                ? highlights
+                : highlights.filter(h => h.pageNumber === pageNumber);
+        const ids = filteredHighlights.map(h => h.id);
         await firstValueFrom(this._textHighlightService.performHighlightsAction(ids, dossierId, fileId, operation));
         this._loadingService.stop();
         this._dialogRef.close(true);
@@ -67,7 +53,7 @@ export class HighlightActionDialogComponent extends BaseDialogComponent {
     private _getForm(): FormGroup {
         return this._formBuilder.group({
             color: [{ value: this.data.color, disabled: true }, Validators.required],
-            confirmation: [false, Validators.requiredTrue],
+            option: [null, Validators.required],
         });
     }
 }

apps/red-ui/src/app/modules/mat-config/mat-config.module.ts

@@ -18,6 +18,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDayjsDateModule } from '@tabuckner/material-dayjs-adapter';
+import { MatRadioModule } from '@angular/material/radio';
 
 const matImports = [
     MatDialogModule,
@@ -39,6 +40,7 @@ const matImports = [
     MatAutocompleteModule,
     MatChipsModule,
     MatDayjsDateModule,
+    MatRadioModule,
 ];
 
 @NgModule({

apps/red-ui/src/app/translations/highlights-translations.ts

@@ -0,0 +1,17 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TextHighlightOperation, TextHighlightOperationPages } from '@red/domain';
+
+export const highlightsTranslations = {
+    [TextHighlightOperation.CONVERT]: {
+        title: _('highlight-action-dialog.convert.title'),
+        details: _('highlight-action-dialog.convert.details'),
+        save: _('highlight-action-dialog.convert.save'),
+    },
+    [TextHighlightOperation.REMOVE]: {
+        title: _('highlight-action-dialog.remove.title'),
+        details: _('highlight-action-dialog.remove.details'),
+        save: _('highlight-action-dialog.remove.save'),
+    },
+    [TextHighlightOperationPages.ALL_PAGES]: _('highlight-action-dialog.all-pages'),
+    [TextHighlightOperationPages.THIS_PAGE]: _('highlight-action-dialog.this-page'),
+} as const;

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

@@ -1409,18 +1409,18 @@
     "title": "SMTP-Konto konfigurieren"
   },
   "help-mode": {
-    "clicking-anywhere-on": "<b>Klicken Sie auf eine beliebige Stelle des Bildschirms </b> um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, <b>verändert sich der Mauszeiger</b>, um Ihnen zu zeigen, ob ein Element interaktiv ist.",
-    "instructions": "Hilfe-Modus-Anleitungen öffnen",
     "bottom-text": "Hilfe-Modus",
     "button-text": "",
+    "clicking-anywhere-on": "<b>Klicken Sie auf eine beliebige Stelle des Bildschirms </b> um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, <b>verändert sich der Mauszeiger</b>, um Ihnen zu zeigen, ob ein Element interaktiv ist.",
+    "instructions": "Hilfe-Modus-Anleitungen öffnen",
     "welcome-to-help-mode": "<b> Willkommen im Hilfe-Modus! <br> Klicken Sie auf interaktive Elemente, um in einem neuen Tab Infos dazu zu erhalten. </b>"
   },
   "highlight-action-dialog": {
     "actions": {
       "cancel": ""
     },
+    "all-pages": "",
     "convert": {
-      "confirmation": "",
       "details": "",
       "save": "",
       "title": ""
@@ -1431,12 +1431,12 @@
       }
     },
     "remove": {
-      "confirmation": "",
       "details": "",
       "save": "",
       "title": ""
     },
-    "success": ""
+    "success": "",
+    "this-page": ""
   },
   "highlights": "",
   "image-category": {

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

@@ -1409,18 +1409,18 @@
     "title": "Configure SMTP Account"
   },
   "help-mode": {
-    "clicking-anywhere-on": "<b> Clicking anywhere on the screen </b> will show you which areas are interactive. Hovering an interactive area will <b> change the mouse cursor </b> to let you know if the element is interactive.",
-    "instructions": "Open Help Mode Instructions",
     "bottom-text": "Help Mode",
     "button-text": "Help Mode (H)",
+    "clicking-anywhere-on": "<b> Clicking anywhere on the screen </b> will show you which areas are interactive. Hovering an interactive area will <b> change the mouse cursor </b> to let you know if the element is interactive.",
+    "instructions": "Open Help Mode Instructions",
     "welcome-to-help-mode": "<b> Welcome to Help Mode! <br> Clicking on interactive elements will open info about them in new tab. </b>"
   },
   "highlight-action-dialog": {
     "actions": {
       "cancel": "Cancel"
     },
+    "all-pages": "For all pages in this document",
     "convert": {
-      "confirmation": "All highlights in the document will be converted",
       "details": "All highlights from the document will be converted to Imported Redactions, using the color set up in the Default Colors section of the app.",
       "save": "Convert Highlights",
       "title": "Convert highlights to imported redactions"
@@ -1431,12 +1431,12 @@
       }
     },
     "remove": {
-      "confirmation": "All highlights in this HEX Color will be removed from the document",
       "details": "Removing highlights from the document will delete all the rectangles and leave a white background behind the highlighted text.",
       "save": "Remove Highlights",
       "title": "Remove highlights"
     },
-    "success": "{operation, select, convert{Converting} delete{Removing} other{}} highlights in progress..."
+    "success": "{operation, select, convert{Converting} delete{Removing} other{}} highlights in progress...",
+    "this-page": "Only for this page"
   },
   "highlights": "{color} - {length} {length, plural, one{highlight} other{highlights}}",
   "image-category": {

libs/common-ui

@@ -1 +1 @@
-Subproject commit 7da8f7fda78d7af861329c6cf35c21dc9d7ef48f
+Subproject commit efc28689381ec9dfe136c3bfdaa13b6866ea3c77

libs/red-domain/src/lib/text-highlight/text-highlight-operation.ts

@@ -2,3 +2,8 @@ export enum TextHighlightOperation {
     REMOVE = 'delete',
     CONVERT = 'convert',
 }
+
+export enum TextHighlightOperationPages {
+    ALL_PAGES = 'ALL_PAGES',
+    THIS_PAGE = 'THIS_PAGE',
+}