-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1306 from umbraco/feature/document-type-structure…
…-collection-ui Feature: Document Type Structure - configure collection UI
- Loading branch information
Showing
10 changed files
with
210 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
src/packages/core/components/input-collection-configuration/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './input-collection-configuration.element.js'; |
143 changes: 143 additions & 0 deletions
143
.../core/components/input-collection-configuration/input-collection-configuration.element.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| import { html, customElement, property, css, state, nothing } from '@umbraco-cms/backoffice/external/lit'; | ||
| import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; | ||
| import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; | ||
| import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; | ||
| import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository'; | ||
| import { UMB_DATATYPE_WORKSPACE_MODAL, UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/data-type'; | ||
| import { | ||
| UmbModalRouteRegistrationController, | ||
| UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL, | ||
| } from '@umbraco-cms/backoffice/modal'; | ||
| import type { UmbDataTypeItemModel } from '@umbraco-cms/backoffice/data-type'; | ||
|
|
||
| @customElement('umb-input-collection-configuration') | ||
| export class UmbInputCollectionConfigurationElement extends FormControlMixin(UmbLitElement) { | ||
| protected getFormElement() { | ||
| return undefined; | ||
| } | ||
|
|
||
| #itemManager = new UmbRepositoryItemsManager<UmbDataTypeItemModel>( | ||
| this, | ||
| UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS, | ||
| (x) => x.unique, | ||
| ); | ||
|
|
||
| #createDataTypeModal: UmbModalRouteRegistrationController; | ||
|
|
||
| #propertyEditorUiAlias = 'Umb.PropertyEditorUi.CollectionView'; | ||
|
|
||
| @state() | ||
| private _dataTypePickerModalPath?: string; | ||
|
|
||
| @state() | ||
| private _item?: UmbDataTypeItemModel; | ||
|
|
||
| @property({ attribute: 'default-value' }) | ||
| defaultValue?: string; | ||
|
|
||
| #setValue(value: string) { | ||
| this.value = value; | ||
| this.#itemManager.setUniques(value ? [value] : []); | ||
| this.dispatchEvent(new UmbChangeEvent()); | ||
| } | ||
|
|
||
| constructor() { | ||
| super(); | ||
|
|
||
| this.observe(this.#itemManager.items, (items) => { | ||
| this._item = items[0]; | ||
| }); | ||
|
|
||
| new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL) | ||
| .addAdditionalPath(':uiAlias') | ||
| .onSetup((routingInfo) => { | ||
| return { | ||
| data: { | ||
| propertyEditorUiAlias: routingInfo.uiAlias, | ||
| }, | ||
| value: undefined, | ||
| }; | ||
| }) | ||
| .onSubmit((submitData) => { | ||
| if (submitData?.createNewWithPropertyEditorUiAlias) { | ||
| this.#createDataType(); | ||
| } else { | ||
| this.#setValue(submitData?.dataTypeId ?? this.defaultValue ?? ''); | ||
| } | ||
| }) | ||
| .observeRouteBuilder((routeBuilder) => { | ||
| this._dataTypePickerModalPath = routeBuilder({ uiAlias: this.#propertyEditorUiAlias }); | ||
| }); | ||
|
|
||
| this.#createDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_DATATYPE_WORKSPACE_MODAL) | ||
| .addAdditionalPath(':uiAlias') | ||
| .onSetup((params) => { | ||
| return { data: { entityType: 'data-type', preset: { editorUiAlias: params.uiAlias } } }; | ||
| }) | ||
| .onSubmit((value) => { | ||
| this.#setValue(value?.unique ?? this.defaultValue ?? ''); | ||
| }); | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
|
|
||
| if (this.value) { | ||
| this.#itemManager.setUniques([this.value as string]); | ||
| } | ||
| } | ||
|
|
||
| #clearDataType() { | ||
| this.#setValue(''); | ||
| } | ||
|
|
||
| #createDataType() { | ||
| this.#createDataTypeModal.open({ uiAlias: this.#propertyEditorUiAlias }, 'create/null'); | ||
| } | ||
|
|
||
| render() { | ||
| return !this.value ? this.#renderCreate() : this.#renderConfigured(); | ||
| } | ||
|
|
||
| #renderCreate() { | ||
| if (!this._dataTypePickerModalPath) return nothing; | ||
| return html`<uui-button | ||
| id="create-button" | ||
| color="default" | ||
| look="placeholder" | ||
| label="Configure as a collection" | ||
| href=${this._dataTypePickerModalPath}></uui-button>`; | ||
| } | ||
|
|
||
| #renderConfigured() { | ||
| if (!this._item || !this._dataTypePickerModalPath) return nothing; | ||
| return html` | ||
| <uui-ref-list> | ||
| <uui-ref-node-data-type standalone name=${this._item.name} detail=${this._item.unique}> | ||
| <uui-action-bar slot="actions"> | ||
| <uui-button | ||
| label=${this.localize.term('general_choose')} | ||
| href=${this._dataTypePickerModalPath}></uui-button> | ||
| <uui-button @click=${this.#clearDataType} label=${this.localize.term('general_remove')}></uui-button> | ||
| </uui-action-bar> | ||
| </uui-ref-node-data-type> | ||
| </uui-ref-list> | ||
| `; | ||
| } | ||
|
|
||
| static styles = [ | ||
| css` | ||
| #create-button { | ||
| width: 100%; | ||
| } | ||
| `, | ||
| ]; | ||
| } | ||
|
|
||
| export default UmbInputCollectionConfigurationElement; | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'umb-input-collection-configuration': UmbInputCollectionConfigurationElement; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters