diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts index 21661c1e53..e0e9907a0f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts @@ -42,6 +42,7 @@ export * from './variant/index.js'; export * from './workspace/index.js'; export * from './culture/index.js'; export * from './temporary-file/index.js'; +export * from './object-type/index.js'; const manifests: Array = [ ...conditionManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/index.ts new file mode 100644 index 0000000000..8e0d365e79 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/index.ts @@ -0,0 +1,2 @@ +export * from './object-type.repository.js'; +export * from './input-object-type.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts new file mode 100644 index 0000000000..cdb0995911 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts @@ -0,0 +1,57 @@ +import { html, customElement, property, query, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { FormControlMixin, UUISelectElement, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbObjectTypeRepository } from './object-type.repository'; + +@customElement('umb-input-object-type') +export class UmbInputObjectTypeElement extends FormControlMixin(UmbLitElement) { + @query('uui-select') + private select!: UUISelectElement; + + @property() + public set value(value: UUISelectElement['value']) { + this.select.value = value; + } + public get value(): UUISelectElement['value'] { + return this.select.value; + } + + @state() + private _options: UUISelectElement['options'] = []; + + #repository: UmbObjectTypeRepository; + + constructor() { + super(); + + this.#repository = new UmbObjectTypeRepository(this); + + this.#repository.read().then(({ data, error }) => { + if (!data) return; + + this._options = data.items.map((item) => ({ value: item.id, name: item.name ?? '' })); + }); + } + + protected getFormElement() { + return undefined; + } + + #onChange() { + this.dispatchEvent(new CustomEvent('change')); + } + + render() { + return html` `; + } + + static styles = []; +} + +export default UmbInputObjectTypeElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-input-object-type': UmbInputObjectTypeElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/object-type.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/object-type.repository.ts new file mode 100644 index 0000000000..35a175779e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/object-type.repository.ts @@ -0,0 +1,25 @@ +import { ObjectTypesResource } from '@umbraco-cms/backoffice/backend-api'; +import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; +import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbApi } from '@umbraco-cms/backoffice/extension-api'; +import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; + +export class UmbObjectTypeRepository extends UmbBaseController implements UmbApi { + #host: UmbControllerHost; + + constructor(host: UmbControllerHost) { + super(host); + + this.#host = host; + } + + async #read() { + return tryExecuteAndNotify(this.#host, ObjectTypesResource.getObjectTypes({})); + } + + async read() { + const { data, error } = await this.#read(); + + return { data, error }; + } +}