yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

render first entity action next to more button

Browse Source
This commit is contained in:
Mads Rasmussen
2024-03-24 19:32:18 +01:00
parent 3170e6853e
commit ec5a5dfa3e
1 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts
View File

@@ -1,9 +1,11 @@
import type { UmbEntityAction } from '@umbraco-cms/backoffice/entity-action';
import { html, nothing, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { map } from '@umbraco-cms/backoffice/external/rxjs';
import type { UmbSectionSidebarContext } from '@umbraco-cms/backoffice/section';
import { UMB_SECTION_SIDEBAR_CONTEXT } from '@umbraco-cms/backoffice/section';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { ManifestEntityAction, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import type { ManifestEntityAction } from '@umbraco-cms/backoffice/extension-registry';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
@customElement('umb-entity-actions-bundle')
export class UmbEntityActionsBundleElement extends UmbLitElement {
@@ -30,7 +32,10 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
private _hasActions = false;
@state()
private _firstAction?: ManifestEntityAction;
private _firstActionManifest?: ManifestEntityAction;
@state()
private _firstActionApi?: UmbEntityAction<unknown>;
#sectionSidebarContext?: UmbSectionSidebarContext;
@@ -45,35 +50,50 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
#observeEntityActions() {
this.observe(
umbExtensionsRegistry.byType('entityAction'),
(manifests) => {
async (manifests) => {
const actions = manifests.filter((manifest) => manifest.forEntityTypes.includes(this.entityType!));
this._hasActions = actions.length > 0;
this._firstAction = this._hasActions ? actions[0] : undefined;
this._firstActionManifest = this._hasActions ? actions[0] : undefined;
if (!this._firstActionManifest) return;
this._firstActionApi = await createExtensionApi(this, this._firstActionManifest, [
{ unique: this.unique, entityType: this.entityType },
]);
},
'umbEntityActionsObserver',
);
}
private _openActions() {
#openContextMenu() {
if (!this.entityType) throw new Error('Entity type is not defined');
if (this.unique === undefined) throw new Error('Unique is not defined');
this.#sectionSidebarContext?.toggleContextMenu(this.entityType, this.unique, this.label);
}
async #onFirstActionClick(event: PointerEvent) {
event.stopPropagation();
await this._firstActionApi?.execute();
}
render() {
return html`
${this._hasActions
? html`
<uui-action-bar slot="actions">
<uui-button @click=${this._openActions} label="Open actions menu">
<uui-symbol-more></uui-symbol-more>
</uui-button>
<uui-button><uui-icon name=${this._firstAction?.meta.icon}></uui-icon></uui-button>
</uui-action-bar>
`
? html` <uui-action-bar slot="actions"> ${this.#renderFirstAction()} ${this.#renderMore()} </uui-action-bar> `
: nothing}
`;
}
#renderMore() {
return html`<uui-button @click=${this.#openContextMenu} label="Open actions menu">
<uui-symbol-more></uui-symbol-more>
</uui-button>`;
}
#renderFirstAction() {
if (!this._firstActionApi) return nothing;
return html`<uui-button label=${this._firstActionManifest?.meta.label} @click=${this.#onFirstActionClick}>
<uui-icon name=${this._firstActionManifest?.meta.icon}></uui-icon>
</uui-button>`;
}
}
declare global {