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-02-15 13:25:15 +02:00
parent 42cc494e2f
commit 82b11d2eba
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,8 +35,8 @@
[placeholder]="placeholder" [placeholder]="placeholder"
[id]="id" [id]="id"
name="name" name="name"
[style.width]="this.parentDimensions.width + 'px'" [style.width]="this.textArea.width + 'px'"
[style.height]="this.parentDimensions.height + 'px'" [style.height]="this.textArea.height + 'px'"
></textarea> ></textarea>
</ng-template> </ng-template>
</div> </div>

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

@ -24,8 +24,9 @@ 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;
@Output() readonly save = new EventEmitter<string>(); @Output() readonly save = new EventEmitter<string>();
parentDimensions?: { width: number; height: number }; textAreaSize?: { width: number; height: number };
newValue = ''; newValue = '';
private _editing = false; private _editing = false;
@ -45,13 +46,24 @@ export class EditableInputComponent implements OnChanges {
this.editing = false; this.editing = false;
} }
if (changes['parentId']?.currentValue) { if (changes['parentId']?.currentValue) {
setTimeout(() => { this.setTextAreaSize();
const parent = document.getElementById(this.parentId as string) as HTMLElement;
this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 };
}, 20);
} }
} }
setTextAreaSize() {
setTimeout(() => {
const element = document.getElementById(this.id as string) as HTMLElement;
const parentElement = document.getElementById(this.parentId as string) as HTMLElement;
const width = parentElement.offsetWidth - 98;
let height = (this.lastChild ? parentElement.offsetHeight : element.offsetHeight) - 16;
if (this.lastChild) {
const lastChildIndex = Number(this.id?.split('-')[2]);
height = height - lastChildIndex * element.offsetHeight;
}
this.textAreaSize = { width, height };
}, 50);
}
saveValue(): void { saveValue(): void {
this.save.emit(this.newValue); this.save.emit(this.newValue);
this.editing = false; this.editing = false;