diff --git a/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts index bb3d9dbf68..a898f756b9 100644 --- a/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts +++ b/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts @@ -268,14 +268,18 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< ${when( dataTypesEntries.length > 0, () => - html`
Available configurations
+ html`
+ Available configurations +
${this._renderDataTypes()}${this.#renderLoadMore()}`, )} ${when( editorUIEntries.length > 0, () => - html`
Create a new configuration
- ${this._renderUIs()}`, + html`
+ Create a new configuration +
+ ${this._renderUIs(true)}`, )} `; } @@ -298,7 +302,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< ); } - private _renderUIs() { + private _renderUIs(createAsNewOnPick?: boolean) { if (!this._groupedPropertyEditorUIs) return nothing; const entries = Object.entries(this._groupedPropertyEditorUIs); @@ -306,33 +310,46 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< return entries.map( ([key, value]) => html`
${key === 'undefined' ? 'Uncategorized' : key}
- ${this._renderGroupUIs(value)}`, + ${this._renderGroupUIs(value, createAsNewOnPick)}`, ); } - private _renderGroupUIs(uis: Array) { + private _renderGroupUIs(uis: Array, createAsNewOnPick?: boolean) { return html` `; } + private _renderDataTypeButton(propertyEditorUI: ManifestPropertyEditorUi, createAsNewOnPick?: boolean) { + if (createAsNewOnPick) { + return html` this._createDataType(propertyEditorUI.alias)}> + ${this._renderItemContent(propertyEditorUI)} + `; + } else { + return html` + ${this._renderItemContent(propertyEditorUI)} + `; + } + } + private _renderItemContent(propertyEditorUI: ManifestPropertyEditorUi) { + return html`
+ + ${propertyEditorUI.meta.label || propertyEditorUI.name} +
`; + } + private _renderGroupDataTypes(dataTypes: Array) { return html`
    ${repeat(