Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Merge branch 'VM/RED-7588' into 'master'

Browse Source 
RED-7588 - Improve the behavior of the add-to-dict text edit in new dialog

Closes RED-7588

See merge request redactmanager/red-ui!76
This commit is contained in:
Dan Percic 2023-09-14 09:52:13 +02:00
commit 114f52dd71
5 changed files with 70 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
View File

@ -12,22 +12,24 @@
"
class="selected-text"
></label>
<div [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'">
<div [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'" class="fixed-height">
<span *ngIf="!isEditingSelectedText">{{ form.get('selectedText').value }}</span>
<textarea
*ngIf="isEditingSelectedText"
[rows]="selectedTextRows"
class="w-full"
formControlName="selectedText"
iqserHasScrollbar
name="comment"
rows="4"
type="text"
></textarea>
<iqser-circle-button
(action)="isEditingSelectedText = !isEditingSelectedText"
(action)="toggleEditingSelectedText()"
*ngIf="dictionaryRequest"
[class.absolute]="isEditingSelectedText"
[showDot]="initialText !== form.get('selectedText').value && !isEditingSelectedText"
[tooltip]="'redact-text.dialog.content.edit-text' | translate"
[type]="isEditingSelectedText ? 'dark' : 'default'"
class="edit-button"
icon="iqser:edit"
tooltipPosition="below"

15
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.scss
View File

@ -5,11 +5,18 @@
.selected-text-group > 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;
}

24
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
View File

@ -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<RedactTextDialogComponent, RedactTextData, RedactTextResult>
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<RedactOrHintOption>[];
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);
}

18
apps/red-ui/src/app/utils/functions.ts
View File

@ -115,3 +115,21 @@ export function moveElementInArray<T>(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;
}

20
apps/red-ui/src/assets/i18n/redact/de.json
View File

@ -2052,11 +2052,11 @@
},
"only-here": {
"description": "Do not annotate \"{value}\" at this position in the current document.",
"description-bulk": "",
"description-bulk": "Do not annotate the selected terms at this position in the current document.",
"label": "Remove here"
}
},
"redacted-text": ""
"redacted-text": "Selected redactions"
},
"title": "Remove {count, plural, one{annotation} other {annotations}}"
}
@ -2070,30 +2070,38 @@
"content": {
"comment": "Comment",
"comment-placeholder": "Add remarks or mentions ...",
"list-item": "{text}",
"list-item-false-positive": "\"{text}\" in the context: \"{context}\"",
"options": {
"do-not-recommend": {
"description": "Do not recommend \"{value}\" as {type} in any document of the current dossier.",
"description-bulk": "",
"description-bulk": "Do not recommend the selected terms in any document of the current dossier.",
"extraOptionLabel": "Apply to all dossiers",
"label": "Remove from dossier"
},
"false-positive": {
"description": "\"{value}\" is not a {type} in this context: \"{context}\".",
"description-bulk": "Do not redact the selected terms in their respective context.",
"extraOptionLabel": "Apply to all dossiers",
"label": "False positive"
},
"in-dossier": {
"description": "Do not {type} \"{value}\" in any document of the current dossier.",
"description-bulk": "Do not redact the selected terms as their respective types in any dossier.",
"extraOptionLabel": "Apply to all dossiers",
"label": "Remove from dossier"
"label": "Remove from dossier",
"label-bulk": "No longer redact in any dossier"
},
"only-here": {
"description": "Do not {type, select, undefined{redact} other{type}} \"{value}\" at this position in the current document.",
"description-bulk": "Do not redact the selected terms at this position in the current document.",
"label": "Remove here"
}
}
},
"redacted-text": "Selected {type}"
},
"title": "Remove {type}"
"title": "Remove {type, select, redaction{redaction} recommendation{recommendation} other{hint}}",
"title-bulk": "Remove {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
}
},
"report-type": {