From 190560ca52b509e9a0de15e9f828666ca670be17 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 20 Jun 2022 15:38:54 +0300 Subject: [PATCH] RED-3721: Radio buttons with details --- .../highlight-action-dialog.component.html | 8 +------ .../highlight-action-dialog.component.ts | 21 +++++++++++++++---- apps/red-ui/src/assets/i18n/de.json | 11 +++++++++- apps/red-ui/src/assets/i18n/en.json | 11 +++++++++- libs/common-ui | 2 +- 5 files changed, 39 insertions(+), 14 deletions(-) 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 843ca8160..d4b19021a 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 @@ -17,13 +17,7 @@ > -
- - - {{ 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 b277fb09e..7f477626e 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 @@ -2,11 +2,12 @@ import { Component, Inject, Injector } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { TextHighlightOperation, TextHighlightOperationPages } from '@red/domain'; -import { BaseDialogComponent, LoadingService } from '@iqser/common-ui'; +import { BaseDialogComponent, DetailsRadioOption, LoadingService } from '@iqser/common-ui'; import { TextHighlightService } from '@services/files/text-highlight.service'; import { firstValueFrom } from 'rxjs'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { highlightsTranslations } from '@translations/highlights-translations'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; export interface HighlightActionData { readonly operation: TextHighlightOperation; @@ -23,7 +24,19 @@ export interface HighlightActionData { }) export class HighlightActionDialogComponent extends BaseDialogComponent { readonly translations = highlightsTranslations; - options = [TextHighlightOperationPages.THIS_PAGE, TextHighlightOperationPages.ALL_PAGES]; + + readonly options: DetailsRadioOption[] = [ + { + label: _('highlight-action-dialog.form.options.this-page.label'), + value: TextHighlightOperationPages.THIS_PAGE, + description: _('highlight-action-dialog.form.options.this-page.description'), + }, + { + label: _('highlight-action-dialog.form.options.all-pages.label'), + value: TextHighlightOperationPages.ALL_PAGES, + description: _('highlight-action-dialog.form.options.all-pages.description'), + }, + ]; constructor( private readonly _formBuilder: UntypedFormBuilder, @@ -44,7 +57,7 @@ export class HighlightActionDialogComponent extends BaseDialogComponent { // !color means we are in bulk select mode, so we don't need to apply additional page filters const filteredHighlights = - !color || this.form.get('option').value === TextHighlightOperationPages.ALL_PAGES + !color || this.form.get('option').value.value === TextHighlightOperationPages.ALL_PAGES ? highlights : highlights.filter(h => h.pageNumber === pageNumber); @@ -61,7 +74,7 @@ export class HighlightActionDialogComponent extends BaseDialogComponent { if (this.data.color) { return this._formBuilder.group({ color: [{ value: this.data.color, disabled: true }, Validators.required], - option: [null, Validators.required], + option: [this.options[0], Validators.required], }); } else { return this._formBuilder.group({ diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index b40170a80..7f540b547 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -1496,6 +1496,16 @@ "form": { "color": { "label": "" + }, + "options": { + "all-pages": { + "description": "", + "label": "" + }, + "this-page": { + "description": "", + "label": "" + } } }, "remove": { @@ -1524,7 +1534,6 @@ "error": "", "success": "" }, - "only-for-specific-pages": "", "title": "", "upload-area-text": "" }, diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 3cd11e248..184c9ea75 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -1496,6 +1496,16 @@ "form": { "color": { "label": "Highlight HEX Color" + }, + "options": { + "all-pages": { + "description": "The highlights in the selected HEX color will be removed on all pages of the document.", + "label": "Remove on all pages" + }, + "this-page": { + "description": "The highlights in the selected HEX color will be removed only on the current page in view.", + "label": "Remove only on this page" + } } }, "remove": { @@ -1524,7 +1534,6 @@ "error": "Failed to import redactions! {error}", "success": "Redactions has been imported!" }, - "only-for-specific-pages": "Import only for page(s)", "title": "Import document with redactions", "upload-area-text": "Click or drag & drop anywhere on this area..." }, diff --git a/libs/common-ui b/libs/common-ui index 47e1cac50..f1934abc2 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 47e1cac50a7c002c1045962cc71771b755ab4baf +Subproject commit f1934abc2b259a6e89303e95fe70a54471d2401d