Fixes sorting of Collection configuration editors

specifically when a new data-type is created.
(Empty configuration)
This commit is contained in:
leekelleher
2024-04-25 12:43:07 +01:00
parent 6f0118ae5c
commit 17e7d7d3c2
2 changed files with 24 additions and 26 deletions

View File

@@ -30,9 +30,9 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
});
@property({ type: Array })
public set value(value: Array<UmbCollectionColumnConfiguration>) {
this.#value = value;
this.#sorter.setModel(value);
public set value(value: Array<UmbCollectionColumnConfiguration> | undefined) {
this.#value = value ?? [];
this.#sorter.setModel(this.#value);
}
public get value(): Array<UmbCollectionColumnConfiguration> {
return this.#value;
@@ -92,7 +92,10 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
}
render() {
return html`${this.#renderColumns()} ${this.#renderInput()}`;
return html`
<div id="layout-wrapper">${this.#renderColumns()}</div>
${this.#renderInput()}
`;
}
#renderInput() {
@@ -106,15 +109,11 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
#renderColumns() {
if (!this.value) return nothing;
return html`
<div id="layout-wrapper">
${repeat(
this.value,
(column) => column.alias,
(column) => this.#renderColumn(column),
)}
</div>
`;
return repeat(
this.value,
(column) => column.alias,
(column) => this.#renderColumn(column),
);
}
#renderColumn(column: UmbCollectionColumnConfiguration) {

View File

@@ -53,9 +53,9 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
});
@property({ type: Array })
public set value(value: Array<UmbCollectionLayoutConfiguration>) {
this.#value = value;
this.#sorter.setModel(value);
public set value(value: Array<UmbCollectionLayoutConfiguration> | undefined) {
this.#value = value ?? [];
this.#sorter.setModel(this.#value);
}
public get value(): Array<UmbCollectionLayoutConfiguration> {
return this.#value;
@@ -132,7 +132,10 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
}
render() {
return html`${this.#renderLayouts()} ${this.#renderInput()}`;
return html`
<div id="layout-wrapper">${this.#renderLayouts()}</div>
${this.#renderInput()}
`;
}
#renderInput() {
@@ -141,15 +144,11 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
#renderLayouts() {
if (!this.value) return nothing;
return html`
<div id="layout-wrapper">
${repeat(
this.value,
(layout) => this.#getUnique(layout),
(layout, index) => this.#renderLayout(layout, index),
)}
</div>
`;
return repeat(
this.value,
(layout) => this.#getUnique(layout),
(layout, index) => this.#renderLayout(layout, index),
);
}
#renderLayout(layout: UmbCollectionLayoutConfiguration, index: number) {