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

RED-7524, add inline editing to selected text in redact dialog

Browse Source
This commit is contained in:
George 2023-08-31 22:41:56 +03:00
parent a84b14f17a
commit f3cf8cde08
7 changed files with 103 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,9 +3,45 @@
<div [translate]="'redact-text.dialog.title'" class="dialog-header heading-l"></div>
<div class="dialog-content redaction">
<div class="iqser-input-group w-450">
<label [translate]="'redact-text.dialog.content.selected-text'" class="selected-text"></label>
{{ form.get('selectedText').value }}
<div class="iqser-input-group w-450 selected-text-group">
<label
[translate]="
initialText === form.get('selectedText').value
? 'redact-text.dialog.content.selected-text'
: 'redact-text.dialog.content.text'
"
class="selected-text"
></label>
<div [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'">
<span *ngIf="!isEditingSelectedText">{{ form.get('selectedText').value }}</span>
<textarea
*ngIf="isEditingSelectedText"
class="w-full"
formControlName="selectedText"
iqserHasScrollbar
name="comment"
rows="4"
type="text"
></textarea>
<iqser-circle-button
(action)="isEditingSelectedText = !isEditingSelectedText"
*ngIf="dictionaryRequest"
[class.absolute]="isEditingSelectedText"
[tooltip]="'redact-text.dialog.content.edit-text' | translate"
class="edit-button"
icon="iqser:edit"
tooltipPosition="below"
></iqser-circle-button>
<iqser-circle-button
(action)="undoTextChange()"
*ngIf="isEditingSelectedText"
[showDot]="initialText !== form.get('selectedText').value"
[tooltip]="'redact-text.dialog.content.revert-text' | translate"
class="absolute undo-button"
icon="red:undo"
tooltipPosition="below"
></iqser-circle-button>
</div>
</div>
<iqser-details-radio

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

@ -1,3 +1,30 @@
.dialog-content {
height: 493px;
overflow-y: auto;
}
.selected-text-group > div {
gap: 0.5rem;
}
.edit-button {
top: 0;
right: calc((0.5rem + 34px) * -1);
}
.undo-button {
top: 0;
right: calc((0.5rem + 34px) * -2);
}
.w-full {
width: 100%;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}

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

@ -21,9 +21,6 @@ export class RedactTextDialogComponent
extends IqserDialogComponent<RedactTextDialogComponent, RedactTextData, RedactTextResult>
implements OnInit
{
readonly #manualRedactionTypeExists: boolean;
#applyToAllDossiers = this.data.applyToAllDossiers ?? true;
readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
readonly roles = Roles;
readonly iconButtonTypes = IconButtonTypes;
readonly options: DetailsRadioOption<RedactOrHintOption>[];
@ -31,6 +28,12 @@ export class RedactTextDialogComponent
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);
constructor(
private readonly _justificationsService: JustificationsService,
@ -42,6 +45,8 @@ export class RedactTextDialogComponent
this.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover);
this.form = this.#getForm();
this.initialText = this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value;
this.modifiedText = this.initialText;
this.form
.get('option')
@ -50,6 +55,11 @@ export class RedactTextDialogComponent
this.dictionaryRequest = option.value === RedactOrHintOptions.IN_DOSSIER;
if (this.dictionaryRequest) {
this.#setDictionaries();
this.form.patchValue({ selectedText: this.modifiedText });
} else {
this.isEditingSelectedText = false;
this.modifiedText = this.form.get('selectedText').value;
this.form.patchValue({ selectedText: this.initialText });
}
this.#resetValues();
}),
@ -86,6 +96,10 @@ export class RedactTextDialogComponent
this.#resetValues();
}
undoTextChange() {
this.form.patchValue({ selectedText: this.initialText });
}
extraOptionChanged(option: DetailsRadioOption<RedactOrHintOption>): void {
this.#applyToAllDossiers = option.extraOption.checked;

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

@ -1925,10 +1925,9 @@
"search": ""
}
},
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
"toggle-readable-redactions": "",
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen"
},
"permissions-screen": {
"dossier": {
@ -1978,18 +1977,6 @@
},
"readonly": "Lesemodus",
"readonly-archived": "",
"recategorize-image-dialog": {
"actions": {
"cancel": "Abbrechen",
"save": "Änderungen speichern"
},
"content": {
"comment": "Kommentar",
"type": "Ausgewählter Bildtyp",
"type-placeholder": "Einen Typ auswählen ..."
},
"header": "Bildtypen bearbeiten"
},
"redact-text": {
"dialog": {
"actions": {
@ -1999,6 +1986,7 @@
"content": {
"comment": "",
"comment-placeholder": "",
"edit-text": "",
"legal-basis": "",
"options": {
"in-dossier": {
@ -2013,7 +2001,9 @@
},
"reason": "",
"reason-placeholder": "",
"revert-text": "",
"selected-text": "",
"text": "",
"type": "",
"type-placeholder": ""
},

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

@ -1925,10 +1925,9 @@
"search": "Search for selection"
}
},
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
"toggle-readable-redactions": "Show redactions {active, select, true{as in final document} false{in preview color} other{}}",
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips"
},
"permissions-screen": {
"dossier": {
@ -1978,18 +1977,6 @@
},
"readonly": "Read only",
"readonly-archived": "Read only (archived)",
"recategorize-image-dialog": {
"actions": {
"cancel": "Cancel",
"save": "Save Changes"
},
"content": {
"comment": "Comment",
"type": "Select image type",
"type-placeholder": "Select a type..."
},
"header": "Edit Image Type"
},
"redact-text": {
"dialog": {
"actions": {
@ -1999,6 +1986,7 @@
"content": {
"comment": "Comment",
"comment-placeholder": "Add remarks or mentions ...",
"edit-text": "Edit text",
"legal-basis": "Legal Basis",
"options": {
"in-dossier": {
@ -2013,7 +2001,9 @@
},
"reason": "Reason",
"reason-placeholder": "Select a reason ...",
"revert-text": "Revert to selected text",
"selected-text": "Selected text:",
"text": "Text:",
"type": "Type",
"type-placeholder": "Select type ..."
},

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

@ -1925,10 +1925,9 @@
"search": ""
}
},
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers grid",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
"toggle-readable-redactions": "",
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} Kurzinfos für Anmerkungen"
},
"permissions-screen": {
"dossier": {
@ -1978,18 +1977,6 @@
},
"readonly": "Lesemodus",
"readonly-archived": "",
"recategorize-image-dialog": {
"actions": {
"cancel": "Abbrechen",
"save": "Änderungen speichern"
},
"content": {
"comment": "Kommentar",
"type": "Ausgewählter Bildtyp",
"type-placeholder": "Einen Typ auswählen ..."
},
"header": "Bildtypen bearbeiten"
},
"redact-text": {
"dialog": {
"actions": {
@ -1999,6 +1986,7 @@
"content": {
"comment": "",
"comment-placeholder": "",
"edit-text": "",
"legal-basis": "",
"options": {
"in-dossier": {
@ -2013,7 +2001,9 @@
},
"reason": "",
"reason-placeholder": "",
"revert-text": "",
"selected-text": "",
"text": "",
"type": "",
"type-placeholder": ""
},

20
apps/red-ui/src/assets/i18n/scm/en.json
View File

@ -1925,10 +1925,9 @@
"search": "Search for selection"
}
},
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layers grid",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid",
"toggle-readable-redactions": "Show components {active, select, true{as in final document} false{in preview color} other{}}",
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips",
"toggle-layers": "{active, select, true{Disable} false{Enable} other{}} layout grid"
"toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips"
},
"permissions-screen": {
"dossier": {
@ -1978,18 +1977,6 @@
},
"readonly": "Read only",
"readonly-archived": "Read only (archived)",
"recategorize-image-dialog": {
"actions": {
"cancel": "Cancel",
"save": "Save Changes"
},
"content": {
"comment": "Comment",
"type": "Select image type",
"type-placeholder": "Select a type..."
},
"header": "Edit Image Type"
},
"redact-text": {
"dialog": {
"actions": {
@ -1999,6 +1986,7 @@
"content": {
"comment": "Comment",
"comment-placeholder": "Add remarks or mentions ...",
"edit-text": "",
"legal-basis": "Legal Basis",
"options": {
"in-dossier": {
@ -2013,7 +2001,9 @@
},
"reason": "Reason",
"reason-placeholder": "Select a reason ...",
"revert-text": "",
"selected-text": "Selected text:",
"text": "",
"type": "Type",
"type-placeholder": "Select type ..."
},