diff --git 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 index 97f43209b..b921265d9 100644 --- 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 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([])), ); } diff --git 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 index 3af0fc034..5e14ef055 100644 --- 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, }; } } diff --git 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 index 6a97c8f2a..8f2ec9122 100644 --- 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 @@
-
+
-
+
@@ -17,15 +17,17 @@
- - {{ confirmationMessage | translate }} - + + + {{ translations[option] | translate }} + +
diff --git 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 index 67c221800..6fcf33d99 100644 --- 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 { 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], }); } } diff --git 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 index d7033314e..1978392df 100644 --- 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({ diff --git a/apps/red-ui/src/app/translations/highlights-translations.ts b/apps/red-ui/src/app/translations/highlights-translations.ts new file mode 100644 index 000000000..e3077dace --- /dev/null +++ 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; diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 688aef0ce..36c4dbaa9 100644 --- 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": "Klicken Sie auf eine beliebige Stelle des Bildschirms um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, verändert sich der Mauszeiger, um Ihnen zu zeigen, ob ein Element interaktiv ist.", - "instructions": "Hilfe-Modus-Anleitungen öffnen", "bottom-text": "Hilfe-Modus", "button-text": "", + "clicking-anywhere-on": "Klicken Sie auf eine beliebige Stelle des Bildschirms um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, verändert sich der Mauszeiger, um Ihnen zu zeigen, ob ein Element interaktiv ist.", + "instructions": "Hilfe-Modus-Anleitungen öffnen", "welcome-to-help-mode": " Willkommen im Hilfe-Modus!
Klicken Sie auf interaktive Elemente, um in einem neuen Tab Infos dazu zu erhalten. " }, "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": { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 384c3a29a..f31c3f0c1 100644 --- 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": " Clicking anywhere on the screen will show you which areas are interactive. Hovering an interactive area will change the mouse cursor 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": " Clicking anywhere on the screen will show you which areas are interactive. Hovering an interactive area will change the mouse cursor to let you know if the element is interactive.", + "instructions": "Open Help Mode Instructions", "welcome-to-help-mode": " Welcome to Help Mode!
Clicking on interactive elements will open info about them in new tab. " }, "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": { diff --git a/libs/common-ui b/libs/common-ui index 7da8f7fda..efc286893 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 7da8f7fda78d7af861329c6cf35c21dc9d7ef48f +Subproject commit efc28689381ec9dfe136c3bfdaa13b6866ea3c77 diff --git a/libs/red-domain/src/lib/text-highlight/text-highlight-operation.ts b/libs/red-domain/src/lib/text-highlight/text-highlight-operation.ts index 607108826..277da1a68 100644 --- 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', +}