diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts index 96c9375d6b..b5e7d859ae 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts @@ -1,17 +1,17 @@ -import type { UmbCollectionConfiguration, UmbCollectionContext } from '../types.js'; +import type { UmbCollectionColumnConfiguration, UmbCollectionConfiguration, UmbCollectionContext } from '../types.js'; import { UmbCollectionViewManager } from '../collection-view.manager.js'; -import type { UmbCollectionRepository } from '@umbraco-cms/backoffice/repository'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbArrayState, UmbNumberState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; -import type { UmbApi } from '@umbraco-cms/backoffice/extension-api'; import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api'; -import type { ManifestCollection, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import type { UmbCollectionFilterModel } from '@umbraco-cms/backoffice/collection'; import { UmbSelectionManager, UmbPaginationManager } from '@umbraco-cms/backoffice/utils'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import type { ManifestCollection, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbApi } from '@umbraco-cms/backoffice/extension-api'; +import type { UmbCollectionFilterModel } from '@umbraco-cms/backoffice/collection'; +import type { UmbCollectionRepository } from '@umbraco-cms/backoffice/repository'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export class UmbDefaultCollectionContext< CollectionItemType = any, @@ -31,7 +31,7 @@ export class UmbDefaultCollectionContext< #filter = new UmbObjectState({}); public readonly filter = this.#filter.asObservable(); - #userDefinedProperties = new UmbArrayState([], (x) => x); + #userDefinedProperties = new UmbArrayState([], (x) => x); public readonly userDefinedProperties = this.#userDefinedProperties.asObservable(); repository?: UmbCollectionRepository; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts index 6304e5fbf5..a83bebffbb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts @@ -18,7 +18,17 @@ export interface UmbCollectionConfiguration { orderDirection?: string; pageSize?: number; useInfiniteEditor?: boolean; - userDefinedProperties?: Array; + userDefinedProperties?: Array; +} + +export interface UmbCollectionColumnConfiguration { + alias: string; + header: string; + // TODO: [LK] Figure out why the server API needs an int (1|0) instead of a boolean. + isSystem: 1 | 0; + elementName?: string; + // TODO: [LK] Remove `nameTemplate`, to be replaced with `elementName`. + nameTemplate?: string; } export interface UmbCollectionContext { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts index 1b8baa7f5c..d6252661fa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts @@ -1,18 +1,12 @@ +import type { UmbCollectionColumnConfiguration } from '../../../../../../core/collection/types.js'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property, repeat, css, query, state } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, repeat, css, query } from '@umbraco-cms/backoffice/external/lit'; import type { UUIInputEvent, UUISelectElement } from '@umbraco-cms/backoffice/external/uui'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -interface ColumnConfig { - alias: string; - header: string; - isSystem: 1 | 0; - nameTemplate?: string; -} - /** * @element umb-property-editor-ui-collection-view-column-configuration */ @@ -22,7 +16,7 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement implements UmbPropertyEditorUiElement { @property({ type: Array }) - value: Array = []; + value: Array = []; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; @@ -74,18 +68,19 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement this._selectEl.error = false; } - const config: ColumnConfig = { + const config: UmbCollectionColumnConfiguration = { alias: selected.value, header: selected.name, isSystem: selected?.group === 'System Fields' ? 1 : 0, }; + this.value = [...this.value, config]; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } #onRemove(unique: string) { - const newValue: Array = []; + const newValue: Array = []; this.value.forEach((config) => { if (config.alias !== unique) newValue.push(config); }); @@ -93,17 +88,17 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement this.dispatchEvent(new UmbPropertyValueChangeEvent()); } - #onHeaderChange(e: UUIInputEvent, configuration: ColumnConfig) { + #onHeaderChange(e: UUIInputEvent, configuration: UmbCollectionColumnConfiguration) { this.value = this.value.map( - (config): ColumnConfig => + (config): UmbCollectionColumnConfiguration => config.alias === configuration.alias ? { ...config, header: e.target.value as string } : config, ); this.dispatchEvent(new UmbPropertyValueChangeEvent()); } - #onTemplateChange(e: UUIInputEvent, configuration: ColumnConfig) { + #onTemplateChange(e: UUIInputEvent, configuration: UmbCollectionColumnConfiguration) { this.value = this.value.map( - (config): ColumnConfig => + (config): UmbCollectionColumnConfiguration => config.alias === configuration.alias ? { ...config, nameTemplate: e.target.value as string } : config, ); this.dispatchEvent(new UmbPropertyValueChangeEvent()); @@ -141,12 +136,12 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement >Remove - `, + `, )} `; } - #renderSystemFieldRow(configuration: ColumnConfig) { + #renderSystemFieldRow(configuration: UmbCollectionColumnConfiguration) { return html` ${configuration.alias}(system field) ${configuration.header} @@ -154,7 +149,7 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement `; } - #renderCustomFieldRow(configuration: ColumnConfig) { + #renderCustomFieldRow(configuration: UmbCollectionColumnConfiguration) { return html` ${configuration.alias}