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

RED-8786 - Preserve New-Lines in Component values in the UI

Browse Source
This commit is contained in:
Valentin Mihai 2024-05-07 22:32:06 +03:00
parent ee70abbfbe
commit 3c64d2ebcf
3 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
View File

@ -2,8 +2,10 @@
<div class="component">{{ entry.name }}</div> <div class="component">{{ entry.name }}</div>
<div class="value" *ngIf="!editing; else editValue"> <div class="value" *ngIf="!editing; else editValue">
<div class="text"> <div class="text">
<span *ngFor="let componentValue of entry.componentValues"> <span
{{ componentValue.value ?? componentValue.originalValue }} *ngFor="let componentValue of entry.componentValues"
[innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue)"
>
</span> </span>
</div> </div>
<div class="actions"> <div class="actions">
@ -23,7 +25,7 @@
<form [formGroup]="form" (submit)="save()"> <form [formGroup]="form" (submit)="save()">
<div cdkDropList (cdkDropListDropped)="drop($event)"> <div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let control of form.controls | keyvalue" class="editing-value" cdkDrag> <div *ngFor="let control of form.controls | keyvalue" class="editing-value" cdkDrag>
<mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon> <mat-icon class="draggable" svgIcon="red:draggable-dots" cdkDragHandle></mat-icon>
<div class="iqser-input-group w-full"> <div class="iqser-input-group w-full">
<textarea [formControlName]="control.key" rows="1" type="text"></textarea> <textarea [formControlName]="control.key" rows="1" type="text"></textarea>
</div> </div>

24
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
View File

@ -147,22 +147,12 @@
} }
} }
/* .cdk-drag-preview { .cdk-drag-preview {
box-sizing: border-box; display: flex;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder { .draggable {
opacity: 0; margin-top: 7px;
cursor: grab;
transform: scale(0.7);
}
} }
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
} */

7
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
View File

@ -4,7 +4,7 @@ import { FormBuilder, FormControl, ReactiveFormsModule, UntypedFormGroup } from
import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, IqserDialog } from '@iqser/common-ui'; import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, IqserDialog } from '@iqser/common-ui';
import { FilterService } from '@common-ui/filtering'; import { FilterService } from '@common-ui/filtering';
import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component'; import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common'; import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
import { MatIcon } from '@angular/material/icon'; import { MatIcon } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
CdkDrag, CdkDrag,
NgIf, NgIf,
NgForOf, NgForOf,
CdkDragHandle,
], ],
}) })
export class EditableStructuredComponentValueComponent extends BaseFormComponent implements OnInit { export class EditableStructuredComponentValueComponent extends BaseFormComponent implements OnInit {
@ -117,4 +118,8 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
} }
} }
} }
transformNewLines(value: string) {
return value.replace(/\n/g, '<br>');
}
} }