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

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

Browse Source
This commit is contained in:
Valentin Mihai 2023-09-14 00:52:50 +03:00
parent 51ccc63d34
commit d787943363
4 changed files with 56 additions and 9 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;
}