From 773f2bfe9f183a98042ef1904ab8b508344eb5d5 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Mon, 21 Oct 2024 18:16:47 +0300 Subject: [PATCH] RED-7340 - When a user has entered an invalid page range string, display a read border around the input field --- .../edit-redaction-dialog.component.html | 4 ++-- .../edit-redaction-dialog.component.scss | 12 ++++++++++-- .../edit-redaction-dialog.component.ts | 5 ++++- .../rectangle-annotation-dialog.component.ts | 2 +- .../remove-redaction-dialog.component.ts | 2 +- .../file-preview/utils/dialog-options.ts | 1 + .../file-preview/utils/form-validators.ts | 18 ++++++++++++++++-- libs/common-ui | 2 +- 8 files changed, 36 insertions(+), 10 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html index 55bfda05b..dd1e2fbb3 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html @@ -6,7 +6,7 @@ class="dialog-header heading-l" > -
+
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss index 112313d42..b767dc8db 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss @@ -1,8 +1,16 @@ .dialog-content { padding-top: 8px; - &.fixed-height { - height: 386px; + &.rectangle-dialog { + height: 600px; + } + + &.image-dialog { + height: 346px; + } + + .rectangle-dialog, + .image-dialog { overflow-y: auto; } } diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts index 403a7e829..03753ad6a 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts @@ -263,7 +263,10 @@ export class EditRedactionDialogComponent disabled: this.isImported, }), section: new FormControl({ value: sameSection ? this.annotations[0].section : null, disabled: this.isImported }), - option: new FormControl>(this.options[0], validatePageRange()), + option: new FormControl>( + this.options[0], + validatePageRange(this.data.file.numberOfPages), + ), value: new FormControl(this.allRectangles ? this.annotations[0].value : null), }); } diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component.ts index 0fd48e9db..fdbc7c7ed 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component.ts @@ -130,7 +130,7 @@ export class RectangleAnnotationDialog reason: [null, Validators.required], comment: [null], classification: [NON_READABLE_CONTENT], - option: [this.#getOption(SystemDefaults.RECTANGLE_REDACT_DEFAULT), validatePageRange()], + option: [this.#getOption(SystemDefaults.RECTANGLE_REDACT_DEFAULT), validatePageRange(this.data.file.numberOfPages)], }); } diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts index b27c5dbbf..25a3a3865 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts @@ -112,7 +112,7 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent< readonly redactedTexts = this.data.redactions.map(annotation => annotation.value); form: UntypedFormGroup = this._formBuilder.group({ comment: [null], - option: [this.defaultOption, validatePageRange(true)], + option: [this.defaultOption, validatePageRange(this.data.file.numberOfPages, true)], }); readonly selectedOption = toSignal(this.form.get('option').valueChanges.pipe(map(value => value.value))); diff --git a/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts b/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts index 5b4288ccd..a0a680575 100644 --- a/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts +++ b/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts @@ -118,6 +118,7 @@ export const getRectangleRedactOptions = (action: 'add' | 'edit' | 'remove' = 'a description: translations.multiplePages.extraOptionDescription, placeholder: translations.multiplePages.extraOptionPlaceholder, value: '', + errorCode: 'invalidRange', }, }, ]; diff --git a/apps/red-ui/src/app/modules/file-preview/utils/form-validators.ts b/apps/red-ui/src/app/modules/file-preview/utils/form-validators.ts index b66980731..eb01f1e31 100644 --- a/apps/red-ui/src/app/modules/file-preview/utils/form-validators.ts +++ b/apps/red-ui/src/app/modules/file-preview/utils/form-validators.ts @@ -1,12 +1,26 @@ import { AbstractControl, ValidatorFn } from '@angular/forms'; -export const validatePageRange = (allowEmpty = false): ValidatorFn => { +export const validatePageRange = (numberOfPages: number, allowEmpty = false): ValidatorFn => { return (control: AbstractControl): { [key: string]: any } | null => { const option = control.value; if (option?.additionalInput) { const value = option.additionalInput.value; const validRange = /^(\d+(-\d+)?)(,\d+(-\d+)?)*$/.test(value); - return validRange || (!value.length && allowEmpty) ? null : { invalidRange: true }; + + if (!validRange && !(value.length === 0 && allowEmpty)) { + return { invalidRange: true }; + } + + const ranges = value.split(','); + const isWithinRange = ranges.every(range => { + const [start, end] = range.split('-').map(Number); + if (end) { + return start >= 1 && end <= numberOfPages && start < end; + } + return start >= 1 && start <= numberOfPages; + }); + + return isWithinRange || (value.length === 0 && allowEmpty) ? null : { invalidRange: true }; } return null; }; diff --git a/libs/common-ui b/libs/common-ui index a970d5a46..a5d10ad14 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit a970d5a4698846a2e6eaa1b6f7074b0c0f72b949 +Subproject commit a5d10ad1482a69f100f659bcf2b7f2072a6241c9