From f5a91736360663e8c129cc54f1bb026b7acf6eeb Mon Sep 17 00:00:00 2001 From: leekelleher Date: Sun, 26 May 2024 22:51:51 +0100 Subject: [PATCH] Bugfix: Media reference links Uses the associated entity-type for the reference for the modal route. Fixes https://github.com/umbraco/Umbraco-CMS/issues/16397 --- ...a-workspace-view-info-reference.element.ts | 166 ++++++++++-------- 1 file changed, 91 insertions(+), 75 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info-reference.element.ts index c45e290cc3..2704b72704 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info-reference.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info-reference.element.ts @@ -1,28 +1,25 @@ -import { css, html, customElement, state, nothing, repeat, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; +import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { isDefaultReference, isDocumentReference, isMediaReference } from '@umbraco-cms/backoffice/relations'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbMediaReferenceRepository } from '@umbraco-cms/backoffice/media'; -import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; -import { - isDefaultReference, - isDocumentReference, - isMediaReference, - type UmbReferenceModel, -} from '@umbraco-cms/backoffice/relations'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal'; +import type { UmbReferenceModel } from '@umbraco-cms/backoffice/relations'; +import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router'; +import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-media-workspace-view-info-reference') export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { #itemsPerPage = 10; + #referenceRepository; + #routeBuilder?: UmbModalRouteBuilder; + @property() mediaUnique = ''; - @state() - private _editMediaPath = ''; - @state() private _currentPage = 1; @@ -32,17 +29,20 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { @state() private _items?: Array = []; + @state() + private _loading = true; + constructor() { super(); this.#referenceRepository = new UmbMediaReferenceRepository(this); new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) - .addAdditionalPath('media') - .onSetup(() => { - return { data: { entityType: 'media', preset: {} } }; + .addAdditionalPath(':entityType') + .onSetup((params) => { + return { data: { entityType: params.entityType, preset: {} } }; }) .observeRouteBuilder((routeBuilder) => { - this._editMediaPath = routeBuilder({}); + this.#routeBuilder = routeBuilder; }); } @@ -51,15 +51,20 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { } async #getReferences() { + this._loading = true; + const { data } = await this.#referenceRepository.requestReferencedBy( this.mediaUnique, - this._currentPage - 1 * this.#itemsPerPage, + (this._currentPage - 1) * this.#itemsPerPage, this.#itemsPerPage, ); + if (!data) return; this._total = data.total; this._items = data.items; + + this._loading = false; } #onPageChange(event: UUIPaginationEvent) { @@ -69,6 +74,11 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { this.#getReferences(); } + #getEditPath(item: UmbReferenceModel) { + const entityType = this.#getEntityType(item); + return this.#routeBuilder && entityType ? `${this.#routeBuilder({ entityType })}edit/${item.id}` : '#'; + } + #getIcon(item: UmbReferenceModel) { if (isDocumentReference(item)) { return item.documentType.icon ?? 'icon-document'; @@ -96,88 +106,94 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { if (isDefaultReference(item)) { return item.type; } - return ''; + return null; } - #getContentType(item: UmbReferenceModel) { + #getEntityType(item: UmbReferenceModel) { if (isDocumentReference(item)) { - return item.documentType.alias; + return 'document'; } if (isMediaReference(item)) { - return item.mediaType.alias; + return 'media'; } if (isDefaultReference(item)) { return item.type; } - return ''; + return null; } render() { - if (this._items && this._items.length > 0) { - return html` - - - - Name - Status - Type Name - Type - - - ${repeat( - this._items, - (item) => item.id, - (item) => - html` - - - - - ${isDocumentReference(item) - ? html` - - ${item.name} - - ` - : item.name} - - - ${this.#getPublishedStatus(item) - ? this.localize.term('content_published') - : this.localize.term('content_unpublished')} - - ${this.#getContentTypeName(item)} - ${this.#getContentType(item)} - `, - )} - - - ${this.#renderReferencePagination()}`; - } else { - return nothing; - } + return html` + + ${when( + this._loading, + () => html``, + () => html`${this.#renderItems()} ${this.#renderPagination()}`, + )} + + `; } - #renderReferencePagination() { + #renderItems() { + if (!this._items?.length) return html`

${this.localize.term('references_DataTypeNoReferences')}

`; + return html` + + + Name + Status + Type Name + Type + + ${repeat( + this._items, + (item) => item.id, + (item) => html` + + + + + + + + ${when( + this.#getPublishedStatus(item), + () => + html`${this.localize.term('content_published')}`, + () => + html`${this.localize.term('content_unpublished')}`, + )} + + ${this.#getContentTypeName(item)} + ${this.#getEntityType(item)} + + `, + )} + + `; + } + + #renderPagination() { if (!this._total) return nothing; const totalPages = Math.ceil(this._total / this.#itemsPerPage); if (totalPages <= 1) return nothing; - return html``; + return html` + + `; } static styles = [ UmbTextStyles, css` - uui-table-cell:not(.link-cell) { + uui-table-cell { color: var(--uui-color-text-alt); }