diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts index 051cc450d9..c86745bf55 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/data-type-picker-flow-data-type-picker-modal.token.ts @@ -1,11 +1,13 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbDataTypePickerFlowDataTypePickerModalData { - selection?: Array; propertyEditorUiAlias: string; } -export type UmbDataTypePickerFlowDataTypePickerModalResult = undefined; +export type UmbDataTypePickerFlowDataTypePickerModalResult = { + dataTypeId?: string; + createNew?: boolean; +}; export const UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL = new UmbModalToken< UmbDataTypePickerFlowDataTypePickerModalData, diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts index 1cdb8030fc..2453deff5b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts @@ -2,10 +2,9 @@ import { UmbDataTypeRepository } from '../../repository/data-type.repository.js' import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { - UmbPropertyEditorUIPickerModalData, - UmbPropertyEditorUIPickerModalResult, UmbModalHandler, UmbDataTypePickerFlowDataTypePickerModalData, + UmbDataTypePickerFlowDataTypePickerModalResult, } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -18,15 +17,11 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme @state() private _dataTypes?: Array; - @state() - private _selection: Array = []; - connectedCallback(): void { super.connectedCallback(); if (!this.data) return; - this._selection = this.data.selection ?? []; this._observeDataTypesOf(this.data.propertyEditorUiAlias); } @@ -35,36 +30,45 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme const dataTypeRepository = new UmbDataTypeRepository(this); + // TODO: This is a hack to get the data types of a property editor ui alias. + // TODO: Make sure filtering works data-type that does not have a property editor ui, but should be using the default property editor UI for those. // TODO: make an end-point just retrieving the data types using a given property editor ui alias. - await dataTypeRepository.requestRootTreeItems(); + const { data } = await dataTypeRepository.requestRootTreeItems(); + + if (!data) return; + + await Promise.all( + data.items.map((item) => { + if (item.id) { + return dataTypeRepository.requestById(item.id); + } + return Promise.resolve(); + }) + ); // TODO: Use the asObservable from above onces end-point has been made. - const source = await dataTypeRepository.treeItemsByPropertyEditorUiAlias(propertyEditorUiAlias); + const source = await dataTypeRepository.byPropertyEditorUiAlias(propertyEditorUiAlias); this.observe(source, (dataTypes) => { + console.log('observe got', dataTypes); this._dataTypes = dataTypes; }); } private _handleClick(dataType: FolderTreeItemResponseModel) { if (dataType.id) { - this._select(dataType.id); + this.modalHandler?.submit({ dataTypeId: dataType.id }); } } - private _select(alias: string) { - this._selection = [alias]; - } - private _close() { this.modalHandler?.reject(); } @property({ attribute: false }) - modalHandler?: UmbModalHandler; - - private _submit() { - this.modalHandler?.submit({ selection: this._selection }); - } + modalHandler?: UmbModalHandler< + UmbDataTypePickerFlowDataTypePickerModalData, + UmbDataTypePickerFlowDataTypePickerModalResult + >; render() { return html` @@ -85,7 +89,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme (dataType) => dataType.id, (dataType) => dataType.id - ? html`
  • + ? html`
  • -
    • ` - )} + ${this._dataTypePickerModalRouteBuilder + ? repeat( + uis, + (propertyEditorUI) => propertyEditorUI.alias, + (propertyEditorUI) => html`
  • + + + ${propertyEditorUI.meta.label || propertyEditorUI.name} + +
    • ` + ) + : ''} `; } @@ -242,21 +263,8 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement { cursor: pointer; } - #item-grid .item[selected] button { - background: var(--uui-color-selected); - color: var(--uui-color-selected-contrast); - } - - #item-grid .item button { - background: none; - border: none; - cursor: pointer; + #item-grid .item uui-button { padding: var(--uui-size-space-3); - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - font-size: 0.8rem; height: 100%; width: 100%; color: var(--uui-color-interactive); diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.stories.ts deleted file mode 100644 index 8e8e70e5c6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.stories.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Meta, Story } from '@storybook/web-components'; -import type { UmbDataTypePickerFlowModalElement } from './data-type-picker-flow-modal.element.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorUIPickerModalData } from '@umbraco-cms/backoffice/modal'; - -import './data-type-picker-flow-modal.element.js'; -import '../../../../core/components/body-layout/body-layout.element.js'; - -export default { - title: 'API/Modals/Layouts/Data Type Picker Flow', - component: 'umb-data-type-picker-flow-modal', - id: 'umb-data-type-picker-flow-modal', -} as Meta; - -const data: UmbPropertyEditorUIPickerModalData = { selection: [] }; - -export const Overview: Story = () => html` - -`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.repository.ts index 47fddbef00..959ba64508 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.repository.ts @@ -188,10 +188,10 @@ export class UmbDataTypeRepository return this.#detailStore!.byId(id); } - async treeItemsByPropertyEditorUiAlias(propertyEditorUiAlias: string) { + async byPropertyEditorUiAlias(propertyEditorUiAlias: string) { if (!propertyEditorUiAlias) throw new Error('propertyEditorUiAlias is missing'); await this.#init; - return this.#treeStore!.withPropertyEditorUiAlias(propertyEditorUiAlias); + return this.#detailStore!.withPropertyEditorUiAlias(propertyEditorUiAlias); } async create(dataType: CreateDataTypeRequestModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.store.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.store.ts index 76e2c0e20c..fb7fb3249e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.store.ts @@ -52,4 +52,11 @@ export class UmbDataTypeStore extends UmbStoreBase { remove(uniques: Array) { this._data.remove(uniques); } + + withPropertyEditorUiAlias(propertyEditorUiAlias: string) { + // TODO: Use a model for the data-type tree items: ^^Most likely it should be parsed to the UmbEntityTreeStore as a generic type. + return this._data.getObservablePart((items) => + items.filter((item) => (item as any).propertyEditorUiAlias === propertyEditorUiAlias) + ); + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.tree.store.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.tree.store.ts index 63e5170482..d2dc4686d8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/repository/data-type.tree.store.ts @@ -18,15 +18,6 @@ export class UmbDataTypeTreeStore extends UmbEntityTreeStore { constructor(host: UmbControllerHostElement) { super(host, UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN.toString()); } - - withPropertyEditorUiAlias(propertyEditorUiAlias: string) { - // TODO: Use a model for the data-type tree items: ^^Most likely it should be parsed to the UmbEntityTreeStore as a generic type. - return this._data.getObservablePart((item) => { - if ((item as any).propertyEditorUiAlias === propertyEditorUiAlias) { - return item; - } - }); - } } export const UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken('UmbDataTypeTreeStore');