diff --git a/src/Umbraco.Web.UI.Client/libs/section/sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/libs/section/sidebar/section-sidebar.context.ts index b903a4c06c..64e0f4d88e 100644 --- a/src/Umbraco.Web.UI.Client/libs/section/sidebar/section-sidebar.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/section/sidebar/section-sidebar.context.ts @@ -20,14 +20,13 @@ export class UmbSectionSidebarContext { this.#host = host; } - toggleContextMenu(entityType: string, unique: string | null | undefined, headline: string) { - console.log('open for ', entityType, unique, headline); + toggleContextMenu(entityType: string, unique: string | null | undefined, headline: string | undefined) { this.openContextMenu(entityType, unique, headline); } // TODO: we wont get notified about tree item name changes because we don't have a subscription // we need to figure out how we best can handle this when we only know the entity and unique id - openContextMenu(entityType: string, unique: string | null | undefined, headline: string) { + openContextMenu(entityType: string, unique: string | null | undefined, headline: string | undefined) { this.#entityType.next(entityType); this.#unique.next(unique); this.#headline.next(headline); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts new file mode 100644 index 0000000000..af0efba954 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts @@ -0,0 +1,80 @@ +import { css, html, nothing } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property, state } from 'lit/decorators.js'; +import { map } from 'rxjs'; +import { UmbSectionSidebarContext, UMB_SECTION_SIDEBAR_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/section'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; + +@customElement('umb-entity-actions-bundle') +export class UmbEntityActionsBundleElement extends UmbLitElement { + private _entityType?: string; + @property({ type: String, attribute: 'entity-type' }) + public get entityType() { + return this._entityType; + } + public set entityType(value: string | undefined) { + const oldValue = this._entityType; + if (oldValue === value) return; + + this._entityType = value; + this.#observeEntityActions(); + this.requestUpdate('entityType', oldValue); + } + + @property({ type: String }) + public headline?: string; + + @state() + private _hasActions = false; + + #sectionSidebarContext?: UmbSectionSidebarContext; + + constructor() { + super(); + + this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, (sectionContext) => { + this.#sectionSidebarContext = sectionContext; + }); + } + + #observeEntityActions() { + this.observe( + umbExtensionsRegistry + .extensionsOfType('entityAction') + .pipe(map((actions) => actions.filter((action) => action.conditions.entityTypes.includes(this.entityType!)))), + (actions) => { + this._hasActions = actions.length > 0; + console.log('umb-entity-actions-bundle — observe', this._entityType, this._hasActions); + }, + 'observeEntityAction' + ); + } + + private _openActions() { + if (!this.entityType) throw new Error('Entity type is not defined'); + this.#sectionSidebarContext?.toggleContextMenu(this.entityType, undefined, this.headline); + } + + render() { + return html` + ${this._hasActions + ? html` + + + + + + ` + : nothing} + `; + } + + static styles = [UUITextStyles, css``]; +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-entity-actions-bundle': UmbEntityActionsBundleElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index 8b9c45bccb..fb1bc0b8ab 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -18,6 +18,7 @@ import './table/table.element'; import './entity-action/entity-action-list.element'; import './entity-action/entity-action.element'; +import './entity-actions-bundle/entity-actions-bundle.element'; import './entity-bulk-action/entity-bulk-action.element'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/menu/menu-item-base/menu-item-base.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/menu/menu-item-base/menu-item-base.element.ts index 9c9c4993eb..99955cf2eb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/menu/menu-item-base/menu-item-base.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/menu/menu-item-base/menu-item-base.element.ts @@ -1,29 +1,14 @@ -import { css, html, nothing } from 'lit'; +import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { map } from 'rxjs'; -import { - UmbSectionSidebarContext, - UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, - UmbSectionContext, - UMB_SECTION_CONTEXT_TOKEN, -} from '@umbraco-cms/backoffice/section'; +import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/section'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { ManifestEntityAction, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; @customElement('umb-menu-item-base') export class UmbMenuItemBaseElement extends UmbLitElement { - private _entityType?: string; @property({ type: String, attribute: 'entity-type' }) - public get entityType() { - return this._entityType; - } - public set entityType(value: string | undefined) { - this._entityType = value; - this.#observeEntityActions(); - } + public entityType?: string; @property({ type: String, attribute: 'icon-name' }) public iconName = ''; @@ -37,12 +22,7 @@ export class UmbMenuItemBaseElement extends UmbLitElement { @state() private _href?: string; - @state() - private _hasActions = false; - #sectionContext?: UmbSectionContext; - #sectionSidebarContext?: UmbSectionSidebarContext; - #actionObserver?: UmbObserverController>; constructor() { super(); @@ -51,24 +31,6 @@ export class UmbMenuItemBaseElement extends UmbLitElement { this.#sectionContext = sectionContext; this._observeSection(); }); - - this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, (sectionContext) => { - this.#sectionSidebarContext = sectionContext; - }); - } - - #observeEntityActions() { - if (this.#actionObserver) this.#actionObserver.destroy(); - - this.#actionObserver = this.observe( - umbExtensionsRegistry - .extensionsOfType('entityAction') - .pipe(map((actions) => actions.filter((action) => action.conditions.entityTypes.includes(this.entityType!)))), - (actions) => { - this._hasActions = actions.length > 0; - }, - 'entityAction' - ); } private _observeSection() { @@ -86,13 +48,8 @@ export class UmbMenuItemBaseElement extends UmbLitElement { return `section/${sectionPathname}/workspace/${this.entityType}`; } - private _openActions() { - if (!this.entityType) throw new Error('Entity type is not defined'); - this.#sectionSidebarContext?.toggleContextMenu(this.entityType, undefined, this.label); - } - render() { - return html` ${this.#renderIcon()}${this.#renderActions()}`; } @@ -102,17 +59,8 @@ export class UmbMenuItemBaseElement extends UmbLitElement { } #renderActions() { - return html` - ${this._hasActions - ? html` - - - - - - ` - : nothing} - `; + return html` + `; } static styles = [UUITextStyles, css``]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/manifests.ts index c81f590803..22b2139a5d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/manifests.ts @@ -1,4 +1,5 @@ import { DOCUMENT_REPOSITORY_ALIAS } from '../repository/manifests'; +import { DOCUMENT_ENTITY_TYPE, DOCUMENT_ROOT_ENTITY_TYPE } from '..'; import { UmbCreateDocumentEntityAction } from './create/create.action'; import { UmbPublishDocumentEntityAction } from './publish.action'; import { UmbDocumentCultureAndHostnamesEntityAction } from './culture-and-hostnames.action'; @@ -15,8 +16,6 @@ import { } from '@umbraco-cms/backoffice/entity-action'; import { ManifestEntityAction, ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; -const entityType = 'document'; - const entityActions: Array = [ { type: 'entityAction', @@ -30,7 +29,7 @@ const entityActions: Array = [ api: UmbCreateDocumentEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ROOT_ENTITY_TYPE, DOCUMENT_ENTITY_TYPE], }, }, { @@ -45,7 +44,7 @@ const entityActions: Array = [ api: UmbTrashEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -60,7 +59,7 @@ const entityActions: Array = [ api: UmbCreateDocumentBlueprintEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -75,7 +74,7 @@ const entityActions: Array = [ api: UmbMoveEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -90,7 +89,7 @@ const entityActions: Array = [ api: UmbCopyEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -105,7 +104,7 @@ const entityActions: Array = [ api: UmbSortChildrenOfEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ROOT_ENTITY_TYPE, DOCUMENT_ENTITY_TYPE], }, }, { @@ -120,7 +119,7 @@ const entityActions: Array = [ api: UmbDocumentCultureAndHostnamesEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -134,7 +133,7 @@ const entityActions: Array = [ api: UmbDocumentPermissionsEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -148,7 +147,7 @@ const entityActions: Array = [ api: UmbDocumentPublicAccessEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -162,7 +161,7 @@ const entityActions: Array = [ api: UmbPublishDocumentEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -176,7 +175,7 @@ const entityActions: Array = [ api: UmbUnpublishDocumentEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, { @@ -190,7 +189,7 @@ const entityActions: Array = [ api: UmbRollbackDocumentEntityAction, }, conditions: { - entityTypes: [entityType], + entityTypes: [DOCUMENT_ENTITY_TYPE], }, }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts new file mode 100644 index 0000000000..a6dc9da481 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts @@ -0,0 +1,4 @@ +import './components'; + +export const DOCUMENT_ROOT_ENTITY_TYPE = 'document-root'; +export const DOCUMENT_ENTITY_TYPE = 'document'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/index.ts index f5676e2798..c2b5748247 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/index.ts @@ -6,8 +6,8 @@ import { manifests as documentTypeManifests } from './document-types/manifests'; import { manifests as documentManifests } from './documents/manifests'; import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api'; -import './document-types/components'; -import './documents/components'; +import './document-types'; +import './documents'; export const manifests = [ ...dashboardManifests,