yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix value undefined

Browse Source
This commit is contained in:
Niels Lyngsø
2024-03-01 11:09:17 +01:00
parent 11f9799ec3
commit dd49b46c46
1 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts
View File

@@ -26,7 +26,7 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
implements UmbPropertyEditorUiElement implements UmbPropertyEditorUiElement
{ {
@property({ type: Array }) @property({ type: Array })
value: Array<LayoutConfig> = []; value?: Array<LayoutConfig>;
@property({ type: Object, attribute: false }) @property({ type: Object, attribute: false })
public config?: UmbPropertyEditorConfigCollection; public config?: UmbPropertyEditorConfigCollection;
@@ -41,47 +41,47 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
} }
#onAdd() { #onAdd() {
this.value = [...this.value, { isSystem: false, icon: 'icon-stop', selected: true }]; this.value = [...(this.value ?? []), { isSystem: false, icon: 'icon-stop', selected: true }];
this.dispatchEvent(new UmbPropertyValueChangeEvent()); this.dispatchEvent(new UmbPropertyValueChangeEvent());
} }
#onRemove(unique: number) { #onRemove(unique: number) {
const values = [...this.value]; const values = [...(this.value ?? [])];
values.splice(unique, 1); values.splice(unique, 1);
this.value = values; this.value = values;
this.dispatchEvent(new UmbPropertyValueChangeEvent()); this.dispatchEvent(new UmbPropertyValueChangeEvent());
} }
#onChangePath(e: UUIInputEvent, index: number) { #onChangePath(e: UUIInputEvent, index: number) {
const values = [...this.value]; const values = [...(this.value ?? [])];
values[index] = { ...values[index], path: e.target.value as string }; values[index] = { ...values[index], path: e.target.value as string };
this.value = values; this.value = values;
this.dispatchEvent(new UmbPropertyValueChangeEvent()); this.dispatchEvent(new UmbPropertyValueChangeEvent());
} }
#onChangeName(e: UUIInputEvent, index: number) { #onChangeName(e: UUIInputEvent, index: number) {
const values = [...this.value]; const values = [...(this.value ?? [])];
values[index] = { ...values[index], name: e.target.value as string }; values[index] = { ...values[index], name: e.target.value as string };
this.value = values; this.value = values;
this.dispatchEvent(new UmbPropertyValueChangeEvent()); this.dispatchEvent(new UmbPropertyValueChangeEvent());
} }
#onChangeSelected(e: UUIBooleanInputEvent, index: number) { #onChangeSelected(e: UUIBooleanInputEvent, index: number) {
const values = [...this.value]; const values = [...(this.value ?? [])];
values[index] = { ...values[index], selected: e.target.checked }; values[index] = { ...values[index], selected: e.target.checked };
this.value = values; this.value = values;
this.dispatchEvent(new UmbPropertyValueChangeEvent()); this.dispatchEvent(new UmbPropertyValueChangeEvent());
} }
async #onIconChange(index: number) { async #onIconChange(index: number) {
const icon = this.#iconReader(this.value[index].icon ?? ''); const icon = this.#iconReader((this.value ? this.value[index].icon : undefined) ?? '');
// TODO: send icon data to modal // TODO: send icon data to modal
const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL); const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL);
const picked = await modalContext?.onSubmit(); const picked = await modalContext?.onSubmit();
if (!picked) return; if (!picked) return;
const values = [...this.value]; const values = [...(this.value ?? [])];
values[index] = { ...values[index], icon: `${picked.icon} color-${picked.color}` }; values[index] = { ...values[index], icon: `${picked.icon} color-${picked.color}` };
this.value = values; this.value = values;
this.dispatchEvent(new UmbPropertyValueChangeEvent()); this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -89,16 +89,18 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
render() { render() {
return html`<div id="layout-wrapper"> return html`<div id="layout-wrapper">
${repeat( ${this.value
this.value, ? repeat(
(layout, index) => '' + layout.name + layout.icon, this.value,
(layout, index) => (layout, index) => '' + layout.name + layout.icon,
html` <div class="layout-item"> (layout, index) =>
<uui-icon name="icon-navigation"></uui-icon> ${layout.isSystem html` <div class="layout-item">
? this.renderSystemFieldRow(layout, index) <uui-icon name="icon-navigation"></uui-icon> ${layout.isSystem
: this.renderCustomFieldRow(layout, index)} ? this.renderSystemFieldRow(layout, index)
</div>`, : this.renderCustomFieldRow(layout, index)}
)} </div>`,
)
: ''}
</div> </div>
<uui-button <uui-button
id="add" id="add"