diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts index 2bd839ad42..1b61cda607 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts @@ -8,6 +8,7 @@ import { manifests as menuManifests } from './menu/manifests.js'; import { manifests as modalManifests } from './modals/manifests.js'; import { manifests as propertyEditorsManifests } from './property-editors/manifests.js'; import { manifests as recycleBinManifests } from './recycle-bin/manifests.js'; +import { manifests as referenceManifests } from './reference/manifests.js'; import { manifests as repositoryManifests } from './repository/manifests.js'; import { manifests as searchManifests } from './search/manifests.js'; import { manifests as sectionViewManifests } from './dashboard/manifests.js'; @@ -26,6 +27,7 @@ export const manifests: Array = [ ...modalManifests, ...propertyEditorsManifests, ...recycleBinManifests, + ...referenceManifests, ...repositoryManifests, ...searchManifests, ...sectionViewManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts new file mode 100644 index 0000000000..692057ac25 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/manifests.ts @@ -0,0 +1,21 @@ +import { UMB_MEDIA_WORKSPACE_ALIAS } from '../../workspace/constants.js'; +import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace'; + +export const manifests: Array = [ + { + type: 'workspaceInfoApp', + name: 'Media References Workspace Info App', + alias: 'Umb.WorkspaceInfoApp.Media.References', + element: () => import('./media-references-workspace-info-app.element.js'), + weight: 80, + meta: { + label: '#references_labelUsedByItems', + }, + conditions: [ + { + alias: UMB_WORKSPACE_CONDITION_ALIAS, + match: UMB_MEDIA_WORKSPACE_ALIAS, + }, + ], + }, +]; 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/reference/info-app/media-references-workspace-info-app.element.ts similarity index 81% rename from src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info-reference.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/media/media/reference/info-app/media-references-workspace-info-app.element.ts index 4f9aaa6bb8..0e43ff2610 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/reference/info-app/media-references-workspace-info-app.element.ts @@ -1,5 +1,6 @@ -import { UmbMediaReferenceRepository } from '../../../reference/index.js'; -import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { UmbMediaReferenceRepository } from '../repository/index.js'; +import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/constants.js'; +import { css, customElement, html, nothing, 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 { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; @@ -8,18 +9,16 @@ import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace'; 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'; +import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity'; -@customElement('umb-media-workspace-view-info-reference') -export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { +@customElement('umb-media-references-workspace-info-app') +export class UmbMediaReferencesWorkspaceInfoAppElement extends UmbLitElement { #itemsPerPage = 10; #referenceRepository; #routeBuilder?: UmbModalRouteBuilder; - @property() - mediaUnique = ''; - @state() private _currentPage = 1; @@ -32,6 +31,9 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { @state() private _loading = true; + #workspaceContext?: typeof UMB_MEDIA_WORKSPACE_CONTEXT.TYPE; + #mediaUnique?: UmbEntityUnique; + constructor() { super(); this.#referenceRepository = new UmbMediaReferenceRepository(this); @@ -44,6 +46,32 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { .observeRouteBuilder((routeBuilder) => { this.#routeBuilder = routeBuilder; }); + + this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (context) => { + this.#workspaceContext = context; + this.#observeMediaUnique(); + }); + } + + #observeMediaUnique() { + this.observe( + this.#workspaceContext?.unique, + (unique) => { + if (!unique) { + this.#mediaUnique = undefined; + this._items = []; + return; + } + + if (this.#mediaUnique === unique) { + return; + } + + this.#mediaUnique = unique; + this.#getReferences(); + }, + 'umbReferencesDocumentUniqueObserver', + ); } protected override firstUpdated(): void { @@ -51,10 +79,14 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { } async #getReferences() { + if (!this.#mediaUnique) { + throw new Error('Media unique is required'); + } + this._loading = true; const { data } = await this.#referenceRepository.requestReferencedBy( - this.mediaUnique, + this.#mediaUnique, (this._currentPage - 1) * this.#itemsPerPage, this.#itemsPerPage, ); @@ -218,10 +250,10 @@ export class UmbMediaWorkspaceViewInfoReferenceElement extends UmbLitElement { ]; } -export default UmbMediaWorkspaceViewInfoReferenceElement; +export default UmbMediaReferencesWorkspaceInfoAppElement; declare global { interface HTMLElementTagNameMap { - 'umb-media-workspace-view-info-reference': UmbMediaWorkspaceViewInfoReferenceElement; + 'umb-media-references-workspace-info-app': UmbMediaReferencesWorkspaceInfoAppElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/manifests.ts index 4ac6fbdcb2..cad6350ec8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/reference/manifests.ts @@ -1,3 +1,4 @@ import { manifests as repositoryManifests } from './repository/manifests.js'; +import { manifests as infoAppManifests } from './info-app/manifests.js'; -export const manifests: Array = [...repositoryManifests]; +export const manifests: Array = [...repositoryManifests, ...infoAppManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts index 32a3d38771..f6a499c598 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts @@ -11,9 +11,6 @@ import type { MediaUrlInfoModel } from '@umbraco-cms/backoffice/external/backend import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry'; import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section'; import { UMB_SETTINGS_SECTION_ALIAS } from '@umbraco-cms/backoffice/settings'; - -// import of local components -import './media-workspace-view-info-reference.element.js'; import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api'; @customElement('umb-media-workspace-view-info')