From 40c59003882549e81cae51407c7a84cdb6650093 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 17 Feb 2023 11:22:11 +0100
Subject: [PATCH] udi service

---
 src/Umbraco.Web.UI.Client/libs/utils/index.ts |  1 +
 .../libs/utils/udi-service.ts                 |  3 +++
 .../modal-layout-link-picker.element.ts       | 23 ++++++++++++-------
 3 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/libs/utils/udi-service.ts

diff --git a/src/Umbraco.Web.UI.Client/libs/utils/index.ts b/src/Umbraco.Web.UI.Client/libs/utils/index.ts
index 22bcaeabb7..b7439f0c3a 100644
--- a/src/Umbraco.Web.UI.Client/libs/utils/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './utils';
 export * from './umbraco-path';
+export * from './udi-service';
diff --git a/src/Umbraco.Web.UI.Client/libs/utils/udi-service.ts b/src/Umbraco.Web.UI.Client/libs/utils/udi-service.ts
new file mode 100644
index 0000000000..eafc6c6c0e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/utils/udi-service.ts
@@ -0,0 +1,3 @@
+export function buildUdi(entityType: string, guid: string) {
+	return 'umb://' + entityType + '/' + guid.replace(/-/g, '');
+}
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
index 8bbeee8016..843521b6c3 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
@@ -4,6 +4,7 @@ import { customElement, query, state } from 'lit/decorators.js';
 import { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-ui/uui';
 import { UmbModalLayoutElement } from '../modal-layout.element';
 import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
+import { buildUdi } from '@umbraco-cms/utils';
 
 export interface UmbModalLinkPickerData {
 	icon?: string;
@@ -59,6 +60,9 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement<
 		`,
 	];
 
+	@state()
+	_selectedKey?: string;
+
 	@state()
 	_link: UmbModalLinkPickerData = {
 		icon: undefined,
@@ -108,13 +112,16 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement<
 		this._link.queryString = query;
 	}
 
-	private _handleSelectionChange(e: CustomEvent) {
+	private _handleSelectionChange(e: CustomEvent, entityType: string) {
+		//TODO: Update icon, published, trashed
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
-		const udi = element.selection[element.selection.length - 1];
+		const selectedKey = element.selection[element.selection.length - 1];
+		const udi = buildUdi(entityType, selectedKey);
+
+		this._selectedKey = selectedKey;
 		this._link.udi = udi;
-		//TODO: Update icon, if published, if trashed, url
-		this._link.url = udi;
+		this._link.url = udi; // TODO
 		this.requestUpdate();
 	}
 
@@ -193,8 +200,8 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement<
 			<uui-input id="search-input" placeholder="Type to search" label="Type to search"></uui-input>
 			<umb-tree
 				alias="Umb.Tree.Documents"
-				@selected=${this._handleSelectionChange}
-				.selection=${[this._link.udi ?? '']}
+				@selected=${(event: CustomEvent) => this._handleSelectionChange(event, 'document')}
+				.selection=${[this._selectedKey ?? '']}
 				selectable></umb-tree>
 
 			<hr />
@@ -203,8 +210,8 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement<
 
 			<umb-tree
 				alias="Umb.Tree.Media"
-				@selected=${this._handleSelectionChange}
-				.selection=${[this._link.udi ?? '']}
+				@selected=${(event: CustomEvent) => this._handleSelectionChange(event, 'media')}
+				.selection=${[this._selectedKey ?? '']}
 				selectable></umb-tree>`;
 	}
 }