Property Editor Data Source (#20375)

* Add property editor data source extension types

Introduces types and extension interfaces for property editor data sources, including manifest and API definitions. Updates the main property-editor types export to include the new data source types.

* add test data sources

* wip collection and item repos

* export consts

* fix picker modal token

* make global components file

* render picker in data type

* wire up repositories

* append editor data source alias to data type detail model

* fix global manifest declaration

* make optional

* fix types

* register collection item picker modal element + wip collection menu extension

* register collection menu for property editor data source

* wire up modal tokens

* fix circular

* register as global element

* register default kind for collection menu

* wip fleshing out collection menu

* pass props + listen for selection events

* fix imports

* accept icon in manifest

* extend base type

* use correct data to calculate length

* export types

* add load more button

* wire up load more

* remove debugger

* add search for property editor data sources

* only select one data source

* rename file

* add entity type

* add manifest for search result item

* fix imports/exports

* fix manifest imports

* wire up data source value with workspace

* remove debugger

* wip property editor + input

* move data-source files

* more specific extension types

* remove copy from file name

* allow settings in manifests

* export types

* merge settings

* fix ui alias

* remerge if data source is removed

* Update data-type-details-workspace-view.element.ts

* reset data

* Update data-type-workspace.context.ts

* update merging + move mapping to data source

* Fix mutation of data.values in data type detail mapping

Refactored #mapServerResponseModelToEntityDetailModel to avoid mutating the original data.values array when removing the editorDataSourceAlias. This ensures the original server response remains unchanged and improves data integrity.

* add  forDataSourceTypes to manifest

* update interfaces

* test data source implementations

* only show data source select if property editor supports it

* remove custom context

* remove unused token

* use generic collection item picker modal

* remove custom modal

* export types

* render data source alias on data type into view

* pass data source alias

* allow data source alias

* allow data source alias

* pass data source alias

* add prop for data source alias

* Add property editor data source alias support

* Add editor data source alias to property context

Introduces support for storing and retrieving the editor data source alias in UmbPropertyContext. Updates UmbPropertyElement to use the context for managing the data source alias and ensures the alias is set on the property editor element.

* pass data source alias to input

* pass data source alias to context

* update js docs

* split types from token file

* fix import

* update error message

* add more test sources

* Refactor repository manager initialization logic

Changed the initialization flow in UmbRepositoryItemsManager to support optional repository alias and deferred repository setup. Added setItemRepository and getItemRepository methods for explicit repository management, and moved repository initialization logic to a dedicated private method.

* remove support for passing a filter

* wip wire up input with modal

* add constant

* test user data source

* add todo

* require entityType on webhook items

* add entityType

* use id as unique

* add default icon

* wire up search

* add search to media

* pass config

* support configuration in data sources + temp test cases

* remove temp text

* change to one generic extension type with a data type sub type

* search in label

* pass filter args to collection item picker

* clean up

* aligning interfaces

* iterate status instead of item

* simplify examples

* add types for config

* move to examples

* add custom data examples for collection and tree

* update imports

* add manifests for collection and tree custom data examples

* add type guards

* add type guards

* Update types.ts

* add return type

* remove debuggers

* make observables optional

* add null checks for observables

* use statuses

* extend picker input context

* map config

* use data to set value when there is no observable

* store as string array

* Add getDefaultApiConstructor to tree item element

* make it optional

* fix search types

* add fallback icon and name

* remove unused imports

* pass stored value to input

* rename file

* remove unused config value

* make api observable

* add search to custom collection example

* render fallback item

* fix import order

* add fallback render to tree item element

* Update tree-item.element.ts

* Revert "Update tree-item.element.ts"

This reverts commit 3458877de91359f8b7a242a7936ae2bd7641ae1f.

* Revert "add fallback render to tree item element"

This reverts commit b30219d3ed66c6b0f8a6ca010adcc137fffcd00c.

* move from data type to property editor

* align file names

* introduce picker-property-editor module

* remove custom types

* use basic types

* use tree item type

* Update input-entity-data.context.ts

* update types

* add interface for item model

* force unique on collection item model

* require an item model in picker context

* allow icon to be null

* extend item model from user group item model

* add entity type to mapped data

* Update user-group-item.server.data-source.ts

* align static file models

* correct types for user picker

* extend item model

* fix types

* more type fixing

* align models

* align models

* fix types

* add utils for fallback name and icon

* add todo

* use fallback name and icon functions

* Update default-picker-search-result-item.element.ts

* add fallback tree item if none is registered

* add search to example

* extract data source config and pass to api

* align naming

* temp type cast

* move search module into core

* fix illegal imports

* add missing const exports

* make property-editor-data-source module

* register property editor data source ref item + render description

* remove console log

* remove indention

* simplify data source type

* Update src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.element.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/Umbraco.Web.UI.Client/src/packages/core/property-editor-data-source/input/input-property-editor-data-source.element.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/default/default-collection-menu.element.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* add todo

* hide add button when readonly

* check correct amount config

* Update input-entity-data.element.ts

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Mads Rasmussen
2025-10-10 11:46:48 +02:00
committed by GitHub
parent 9b0b60e6cb
commit f60436270f
203 changed files with 3326 additions and 176 deletions

View File

@@ -0,0 +1,75 @@
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import {
UmbDocumentItemRepository,
UmbDocumentSearchRepository,
UmbDocumentTreeRepository,
type UmbDocumentSearchRequestArgs,
} from '@umbraco-cms/backoffice/document';
import { UMB_DOCUMENT_TYPE_ENTITY_TYPE } from '@umbraco-cms/backoffice/document-type';
import type {
UmbPickerSearchableDataSource,
UmbPickerTreeDataSource,
} from '@umbraco-cms/backoffice/picker-data-source';
import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
import type {
UmbTreeAncestorsOfRequestArgs,
UmbTreeChildrenOfRequestArgs,
UmbTreeRootItemsRequestArgs,
} from '@umbraco-cms/backoffice/tree';
import { getConfigValue, type UmbConfigCollectionModel } from '@umbraco-cms/backoffice/utils';
export class ExampleDocumentPickerPropertyEditorDataSource
extends UmbControllerBase
implements UmbPickerTreeDataSource, UmbPickerSearchableDataSource
{
#tree = new UmbDocumentTreeRepository(this);
#item = new UmbDocumentItemRepository(this);
#search = new UmbDocumentSearchRepository(this);
#config: UmbConfigCollectionModel = [];
setConfig(config: UmbConfigCollectionModel) {
// TODO: add examples for all config options
this.#config = config;
}
getConfig(): UmbConfigCollectionModel {
return this.#config;
}
requestTreeRoot() {
return this.#tree.requestTreeRoot();
}
requestTreeRootItems(args: UmbTreeRootItemsRequestArgs) {
return this.#tree.requestTreeRootItems(args);
}
requestTreeItemsOf(args: UmbTreeChildrenOfRequestArgs) {
return this.#tree.requestTreeItemsOf(args);
}
requestTreeItemAncestors(args: UmbTreeAncestorsOfRequestArgs) {
return this.#tree.requestTreeItemAncestors(args);
}
requestItems(uniques: Array<string>) {
return this.#item.requestItems(uniques);
}
search(args: UmbSearchRequestArgs) {
const filterString = getConfigValue<string>(this.#config, 'filter');
const filterArray = filterString ? filterString.split(',') : [];
const allowedContentTypes: UmbDocumentSearchRequestArgs['allowedContentTypes'] = filterArray.map(
(unique: string) => ({
entityType: UMB_DOCUMENT_TYPE_ENTITY_TYPE,
unique,
}),
);
const combinedArgs: UmbDocumentSearchRequestArgs = { ...args, allowedContentTypes };
return this.#search.search(combinedArgs);
}
}
export { ExampleDocumentPickerPropertyEditorDataSource as api };