diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts index d0b80369f6..c2877f68ed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts +++ b/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 = { @@ -98,13 +99,25 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) { } @state() - private _items: Array = []; + private _editDocumentPath = ''; + + @state() + private _items?: Array; #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` this.#openItem(item)} label="Open document ${item.name}" - >${this.localize.term('general_open')}`; + return html` + + ${this.localize.term('general_open')} + + `; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts index 674cf5f699..5de762fce7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts +++ b/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 = { @@ -94,6 +95,9 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) { this.selectedIds = splitStringToArray(idsString); } + @state() + private _editMediaPath = ''; + @state() private _items?: Array; @@ -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` ${this.#renderIsTrashed(item)} + ${this.#renderOpenButton(item)} @@ -199,6 +212,18 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) { return html`Trashed`; } + #renderOpenButton(item: MediaItemResponseModel) { + if (!this.showOpenButton) return; + return html` + + + + `; + } + static styles = [ css` .container { diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts index 0b78e0a192..cfedcddf0f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts +++ b/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 = { @@ -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 = []; + private _editMemberPath = ''; + + @state() + private _items?: Array; // 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) { ${this.#renderIsTrashed(item)} - this.#requestRemoveItem(item)} label="Remove member ${item.name}" - >Remove + ${this.#renderOpenButton(item)} + this._requestRemoveItem(item)} + label="${this.localize.term('general_remove')} ${item.name}"> + ${this.localize.term('general_remove')} + `; } + #renderOpenButton(item: MemberItemResponseModel) { + if (!this.showOpenButton) return; + return html` + + + + `; + } #renderIsTrashed(item: MemberItemResponseModel) { // TODO: Uncomment, once the Management API model support deleted members. [LK] //if (!item.isTrashed) return;