Merge pull request #1126 from umbraco/feature/tree-picker-open-infinity-editor

Tree Picker: Open item in Infinity Editor

src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts

@@ -4,6 +4,7 @@ import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentItemResponseModel, DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 const SORTER_CONFIG: UmbSorterConfig<string> = {
@@ -98,13 +99,25 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	@state()
-	private _items: Array<DocumentItemResponseModel> = [];
+	private _editDocumentPath = '';
+
+	@state()
+	private _items?: Array<DocumentItemResponseModel>;
 
 	#pickerContext = new UmbDocumentPickerContext(this);
 
 	constructor() {
 		super();
 
+		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath('document')
+			.onSetup(() => {
+				return { data: { entityType: 'document', preset: {} } };
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._editDocumentPath = routeBuilder({});
+			});
+
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
@@ -141,11 +154,6 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 		});
 	}
 
-	#openItem(item: DocumentItemResponseModel) {
-		// TODO: Implement the Content editing infinity editor. [LK]
-		console.log('TODO: _openItem', item);
-	}
-
 	render() {
 		return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
 	}
@@ -199,9 +207,13 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 
 	#renderOpenButton(item: DocumentItemResponseModel) {
 		if (!this.showOpenButton) return;
-		return html`<uui-button @click=${() => this.#openItem(item)} label="Open document ${item.name}"
-			>${this.localize.term('general_open')}</uui-button
-		>`;
+		return html`
+			<uui-button
+				href="${this._editDocumentPath}edit/${item.id}"
+				label="${this.localize.term('general_open')} ${item.name}">
+				${this.localize.term('general_open')}
+			</uui-button>
+		`;
 	}
 
 	static styles = [

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts

@@ -2,8 +2,9 @@ import { UmbMediaPickerContext } from './input-media.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { MediaItemResponseModel, MediaTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import type { MediaItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 const SORTER_CONFIG: UmbSorterConfig<string> = {
@@ -94,6 +95,9 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 		this.selectedIds = splitStringToArray(idsString);
 	}
 
+	@state()
+	private _editMediaPath = '';
+
 	@state()
 	private _items?: Array<MediaItemResponseModel>;
 
@@ -102,6 +106,15 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 	constructor() {
 		super();
 
+		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath('media')
+			.onSetup(() => {
+				return { data: { entityType: 'media', preset: {} } };
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._editMediaPath = routeBuilder({});
+			});
+
 		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 
@@ -175,7 +188,6 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 
 	#renderItem(item: MediaItemResponseModel) {
 		// TODO: `file-ext` value has been hardcoded here. Find out if API model has value for it. [LK]
-		// TODO: How to handle the `showOpenButton` option? [LK]
 		return html`
 			<uui-card-media
 				name=${ifDefined(item.name === null ? undefined : item.name)}
@@ -183,6 +195,7 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 				file-ext="jpg">
 				${this.#renderIsTrashed(item)}
 				<uui-action-bar slot="actions">
+					${this.#renderOpenButton(item)}
 					<uui-button label="Copy media">
 						<uui-icon name="icon-documents"></uui-icon>
 					</uui-button>
@@ -199,6 +212,18 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 		return html`<uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag>`;
 	}
 
+	#renderOpenButton(item: MediaItemResponseModel) {
+		if (!this.showOpenButton) return;
+		return html`
+			<uui-button
+				compact
+				href="${this._editMediaPath}edit/${item.id}"
+				label=${this.localize.term('general_edit') + ` ${item.name}`}>
+				<uui-icon name="icon-edit"></uui-icon>
+			</uui-button>
+		`;
+	}
+
 	static styles = [
 		css`
 			.container {

src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts

@@ -3,6 +3,7 @@ import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 const SORTER_CONFIG: UmbSorterConfig<string> = {
@@ -87,6 +88,9 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 		this.#sorter.setModel(ids);
 	}
 
+	@property({ type: Boolean })
+	showOpenButton?: boolean;
+
 	@property({ type: Array })
 	allowedContentTypeIds?: string[] | undefined;
 
@@ -97,7 +101,10 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	@state()
-	private _items: Array<MemberItemResponseModel> = [];
+	private _editMemberPath = '';
+
+	@state()
+	private _items?: Array<MemberItemResponseModel>;
 
 	// TODO: Create the `UmbMemberPickerContext` [LK]
 	//#pickerContext = new UmbMemberPickerContext(this);
@@ -105,6 +112,14 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	constructor() {
 		super();
 
+		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath('member')
+			.onSetup(() => {
+				return { data: { entityType: 'member', preset: {} } };
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._editMemberPath = routeBuilder({});
+			});
 		// TODO: Uncomment, once `UmbMemberPickerContext` has been implemented. [LK]
 		// this.addValidator(
 		// 	'rangeUnderflow',
@@ -192,14 +207,28 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
 				${this.#renderIsTrashed(item)}
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this.#requestRemoveItem(item)} label="Remove member ${item.name}"
-						>Remove</uui-button
-					>
+					${this.#renderOpenButton(item)}
+					<uui-button
+						@click=${() => this._requestRemoveItem(item)}
+						label="${this.localize.term('general_remove')} ${item.name}">
+						${this.localize.term('general_remove')}
+					</uui-button>
 				</uui-action-bar>
 			</uui-ref-node>
 		`;
 	}
 
+	#renderOpenButton(item: MemberItemResponseModel) {
+		if (!this.showOpenButton) return;
+		return html`
+			<uui-button
+				compact
+				href="${this._editMemberPath}edit/${item.id}"
+				label=${this.localize.term('general_edit') + ` ${item.name}`}>
+				<uui-icon name="icon-edit"></uui-icon>
+			</uui-button>
+		`;
+	}
 	#renderIsTrashed(item: MemberItemResponseModel) {
 		// TODO: Uncomment, once the Management API model support deleted members. [LK]
 		//if (!item.isTrashed) return;