RED-3721: Highlights actions page options

2022-04-07 15:31:35 +03:00 · 2022-04-07 15:31:35 +03:00 · f31cfda850
commit f31cfda850
parent 3bb3e93906
10 changed files with 57 additions and 43 deletions
--- a/apps/red-ui/src/app/modules/dossier/services/text-highlight.service.ts
+++ b/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([])),
        );
    }
--- a/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.ts
+++ b/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,
        };
    }
 }
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.html
+++ b/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">
-                    {{ confirmationMessage | translate }}
-                </mat-checkbox>
+                <mat-radio-group formControlName="option">
+                    <mat-radio-button *ngFor="let option of options" [value]="option" color="primary">
+                        {{ 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>
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
+++ b/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 details: string;
-    readonly confirmationMessage: string;
-    readonly saveMessage: string;
+    readonly translations = highlightsTranslations;
+    options = [TextHighlightOperationPages.THIS_PAGE, TextHighlightOperationPages.ALL_PAGES];

    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 ids = highlights.map(h => h.id);
+        const { dossierId, fileId, operation, highlights, pageNumber } = this.data;
+        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],
        });
    }
 }
--- a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
+++ b/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({
--- a/apps/red-ui/src/app/translations/highlights-translations.ts
+++ b/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;
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/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": {
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/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": {
--- a/libs/common-ui
+++ b/libs/common-ui
@ -1 +1 @@
-Subproject commit 7da8f7fda78d7af861329c6cf35c21dc9d7ef48f
+Subproject commit efc28689381ec9dfe136c3bfdaa13b6866ea3c77
--- a/libs/red-domain/src/lib/text-highlight/text-highlight-operation.ts
+++ b/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',
+}