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

RED-8342 - Component Editor not showing all values for a multi-value-component

Browse Source
This commit is contained in:
Valentin Mihai 2024-05-27 13:21:05 +03:00
parent 1610a4c3a5
commit fd4580f60d
3 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/inputs/editable-input/editable-input.component.html
View File

@ -1,6 +1,7 @@
<ng-container *ngIf="!editing"> <ng-container *ngIf="!editing">
<div *ngIf="showPreview"> <div *ngIf="showPreview">
{{ value }} <li *ngIf="listValue; else simpleValue">{{ value }}</li>
<ng-template #simpleValue> {{ value }} </ng-template>
</div> </div>
<div class="flex"> <div class="flex">
@ -35,8 +36,8 @@
[placeholder]="placeholder" [placeholder]="placeholder"
[id]="id" [id]="id"
name="name" name="name"
[style.width]="this.parentDimensions.width + 'px'" [style.width]="this.parentDimensions?.width + 'px'"
[style.height]="this.parentDimensions.height + 'px'" [style.height]="this.parentDimensions?.height + 'px'"
></textarea> ></textarea>
</ng-template> </ng-template>
</div> </div>

4
src/lib/inputs/editable-input/editable-input.component.scss
View File

@ -18,3 +18,7 @@ textarea {
margin: 0; margin: 0;
min-height: 0; min-height: 0;
} }
form {
width: 100%;
}

12
src/lib/inputs/editable-input/editable-input.component.ts
View File

@ -24,6 +24,8 @@ export class EditableInputComponent implements OnChanges {
@Input() canEdit = true; @Input() canEdit = true;
@Input() buttonsType: CircleButtonType = CircleButtonTypes.default; @Input() buttonsType: CircleButtonType = CircleButtonTypes.default;
@Input() helpModeKey: string = ''; @Input() helpModeKey: string = '';
@Input() lastChild = false;
@Input() listValue = false;
@Output() readonly save = new EventEmitter<string>(); @Output() readonly save = new EventEmitter<string>();
parentDimensions?: { width: number; height: number }; parentDimensions?: { width: number; height: number };
newValue = ''; newValue = '';
@ -44,12 +46,10 @@ export class EditableInputComponent implements OnChanges {
if (changes['value']) { if (changes['value']) {
this.editing = false; this.editing = false;
} }
if (changes['parentId']?.currentValue) { setTimeout(() => {
setTimeout(() => { const parent = document.getElementById(this.parentId as string) as HTMLElement;
const parent = document.getElementById(this.parentId as string) as HTMLElement; this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 };
this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 }; }, 20);
}, 20);
}
} }
saveValue(): void { saveValue(): void {