From d94f98caf35735d6b9f9b0464407c3d98fc25fd4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Aug 2024 13:07:54 +0200 Subject: [PATCH] add picker module + picker search result item element --- src/Umbraco.Web.UI.Client/package.json | 1 + .../src/packages/core/picker/index.ts | 1 + .../src/packages/core/picker/search/index.ts | 1 + .../core/picker/search/result-item/index.ts | 1 + .../picker-search-result-item.element.ts | 57 +++++++++++++++++++ src/Umbraco.Web.UI.Client/tsconfig.json | 1 + 6 files changed, 62 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index adca9e8ed9..10bff7284d 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -28,6 +28,7 @@ "./content-type": "./dist-cms/packages/core/content-type/index.js", "./content": "./dist-cms/packages/core/content/index.js", "./culture": "./dist-cms/packages/core/culture/index.js", + "./picker": "./dist-cms/packages/core/picker/index.js", "./current-user": "./dist-cms/packages/user/current-user/index.js", "./data-type": "./dist-cms/packages/data-type/index.js", "./debug": "./dist-cms/packages/core/debug/index.js", diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts new file mode 100644 index 0000000000..a5fa9b02d4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts @@ -0,0 +1 @@ +export * from './search/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts new file mode 100644 index 0000000000..e214d22c42 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/index.ts @@ -0,0 +1 @@ +export * from './result-item/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts new file mode 100644 index 0000000000..f8662c50d0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/index.ts @@ -0,0 +1 @@ +export * from './picker-search-result-item.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts new file mode 100644 index 0000000000..f26a04f3c9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/result-item/picker-search-result-item.element.ts @@ -0,0 +1,57 @@ +import { customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import type { ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry'; +import { + UmbExtensionElementAndApiSlotElementBase, + umbExtensionsRegistry, +} from '@umbraco-cms/backoffice/extension-registry'; +import { createObservablePart } from '@umbraco-cms/backoffice/observable-api'; + +const elementName = 'umb-picker-search-result-item'; +@customElement(elementName) +export class UmbPickerSearchResultItemElement extends UmbExtensionElementAndApiSlotElementBase { + _entityType?: string; + @property({ type: String, reflect: true }) + get entityType() { + return this._entityType; + } + set entityType(newVal) { + this._entityType = newVal; + this.#observeEntityType(); + } + + #observeEntityType() { + if (!this._entityType) return; + + const filterByEntityType = (manifest: ManifestTreeItem) => { + if (!this._entityType) return false; + return manifest.forEntityTypes.includes(this._entityType); + }; + + this.observe( + // TODO: what should we do if there are multiple items for an entity type? + // This method gets all extensions based on a type, then filters them based on the entity type. and then we get the alias of the first one [NL] + createObservablePart( + umbExtensionsRegistry.byTypeAndFilter(this.getExtensionType(), filterByEntityType), + (x) => x[0].alias, + ), + (alias) => { + this.alias = alias; + }, + 'umbObserveAlias', + ); + } + + getExtensionType() { + return 'pickerSearchResultItem'; + } + + getDefaultElementName() { + return 'umb-default-picker-search-result-item'; + } +} + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbPickerSearchResultItemElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 715ff5c48d..13058d558f 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -54,6 +54,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js "@umbraco-cms/backoffice/content-type": ["./src/packages/core/content-type/index.ts"], "@umbraco-cms/backoffice/content": ["./src/packages/core/content/index.ts"], "@umbraco-cms/backoffice/culture": ["./src/packages/core/culture/index.ts"], + "@umbraco-cms/backoffice/picker": ["./src/packages/core/picker/index.ts"], "@umbraco-cms/backoffice/current-user": ["./src/packages/user/current-user/index.ts"], "@umbraco-cms/backoffice/data-type": ["./src/packages/data-type/index.ts"], "@umbraco-cms/backoffice/debug": ["./src/packages/core/debug/index.ts"],