From aa4968c061adbf2db357bb3a1539468e401bc768 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 14 Aug 2024 13:08:24 +0200
Subject: [PATCH] register document picker search result item

---
 .../tree-picker/tree-picker-modal.element.ts  |  7 +++-
 ...ument-picker-search-result-item.context.ts | 10 ++++++
 ...ument-picker-search-result-item.element.ts | 36 +++++++++++++++++++
 .../documents/documents/picker/manifests.ts   |  3 ++
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts
index edd16dae04..4a447be4c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts
@@ -245,7 +245,12 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 	}
 
 	#renderPickerSearchResultItem(item: any) {
-		return html` <uui-menu-item label=${item.entityType + ' ' + item.unique}> </uui-menu-item> `;
+		return html`
+			<umb-picker-search-result-item
+				.props=${{ item }}
+				.item=${item}
+				.entityType=${item.entityType}></umb-picker-search-result-item>
+		`;
 	}
 
 	static override styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts
new file mode 100644
index 0000000000..4fd318b5c0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts
@@ -0,0 +1,10 @@
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbDocumentPickerSearchResultItemContext extends UmbContextBase<UmbDocumentPickerSearchResultItemContext> {
+	constructor(host: UmbControllerHost) {
+		super(host, 'pickerSearchResultItem');
+	}
+}
+
+export { UmbDocumentPickerSearchResultItemContext as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts
new file mode 100644
index 0000000000..bde3d6c9d4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts
@@ -0,0 +1,36 @@
+import type { UmbDocumentItemModel } from '../repository/item/types.js';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+const elementName = 'umb-document-picker-search-result-item';
+@customElement(elementName)
+export class UmbDocumentPickerSearchResultItemElement extends UmbLitElement {
+	@property({ type: Object })
+	item?: UmbDocumentItemModel;
+
+	override render() {
+		if (!this.item) return nothing;
+
+		return html`
+			<uui-ref-node name=${this.item.name} id=${this.item.unique} readonly selectable>
+				${this.#renderIcon()}
+			</uui-ref-node>
+		`;
+	}
+
+	#renderIcon() {
+		if (!this.item?.documentType.icon) return nothing;
+		return html`<umb-icon slot="icon" name=${this.item.documentType.icon}></umb-icon>`;
+	}
+
+	static override styles = [UmbTextStyles, css``];
+}
+
+export { UmbDocumentPickerSearchResultItemElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbDocumentPickerSearchResultItemElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts
index 88e1ef42a2..2db7b348d4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js';
 import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
@@ -6,5 +7,7 @@ export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
 		alias: 'Umb.PickerSearchResultItem.Document',
 		name: 'Document Picker Search Result Item',
 		element: () => import('./document-picker-search-result-item.element.js'),
+		api: () => import('./document-picker-search-result-item.context.js'),
+		forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
 	},
 ];