diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
index 9b727bea3..e900cddfb 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
@@ -12,22 +12,24 @@
"
class="selected-text"
>
-
+
{{ form.get('selectedText').value }}
div {
gap: 0.5rem;
+
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
.edit-button {
top: 0;
right: calc((0.5rem + 34px) * -1);
+ position: sticky;
}
.undo-button {
@@ -28,3 +35,11 @@
.relative {
position: relative;
}
+
+.fixed-height {
+ min-height: 40px;
+}
+
+textarea {
+ margin-top: 0;
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
index 66e8f8c43..3a11a87a2 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
@@ -1,6 +1,6 @@
import { Component, inject, OnInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, UntypedFormGroup } from '@angular/forms';
import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
import { Dictionary, IAddRedactionRequest, SuperTypes } from '@red/domain';
import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -12,6 +12,9 @@ import { tap } from 'rxjs/operators';
import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
import { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
+import { calcTextWidthInPixels } from '@utils/functions';
+
+const MAXIMUM_SELECTED_TEXT_WIDTH = 421;
@Component({
templateUrl: './redact-text-dialog.component.html',
@@ -21,19 +24,20 @@ export class RedactTextDialogComponent
extends IqserDialogComponent
implements OnInit
{
+ readonly #manualRedactionTypeExists: boolean;
+ readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
+ #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
readonly roles = Roles;
readonly iconButtonTypes = IconButtonTypes;
readonly options: DetailsRadioOption[];
+ readonly form: UntypedFormGroup;
+ readonly initialText: string;
dictionaryRequest = false;
legalOptions: LegalBasisOption[] = [];
dictionaries: Dictionary[] = [];
- readonly form;
isEditingSelectedText = false;
- readonly initialText: string;
modifiedText: string;
- readonly #manualRedactionTypeExists: boolean;
- #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
- readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
+ selectedTextRows = 1;
constructor(
private readonly _justificationsService: JustificationsService,
@@ -130,6 +134,14 @@ export class RedactTextDialogComponent
});
}
+ toggleEditingSelectedText() {
+ this.isEditingSelectedText = !this.isEditingSelectedText;
+ if (this.isEditingSelectedText) {
+ const width = calcTextWidthInPixels(this.form.get('selectedText').value);
+ this.selectedTextRows = Math.ceil(width / MAXIMUM_SELECTED_TEXT_WIDTH);
+ }
+ }
+
#setDictionaries() {
this.dictionaries = this._dictionaryService.getRedactTextDictionaries(this.#dossier.dossierTemplateId, !this.#applyToAllDossiers);
}
diff --git a/apps/red-ui/src/app/utils/functions.ts b/apps/red-ui/src/app/utils/functions.ts
index b63b3aa2a..83190316a 100644
--- a/apps/red-ui/src/app/utils/functions.ts
+++ b/apps/red-ui/src/app/utils/functions.ts
@@ -115,3 +115,21 @@ export function moveElementInArray(array: T[], element: T, index: number) {
result.splice(index, 0, element);
return result;
}
+
+export function calcTextWidthInPixels(text: string): number {
+ const temporaryElement = document.createElement('span');
+ document.body.appendChild(temporaryElement);
+
+ temporaryElement.style.font = 'times new roman';
+ temporaryElement.style.fontSize = 13 + 'px';
+ temporaryElement.style.height = 'auto';
+ temporaryElement.style.width = 'auto';
+ temporaryElement.style.position = 'absolute';
+ temporaryElement.style.whiteSpace = 'no-wrap';
+ temporaryElement.innerHTML = text;
+
+ const width = Math.ceil(temporaryElement.clientWidth);
+ document.body.removeChild(temporaryElement);
+
+ return width;
+}