diff --git a/src/Umbraco.Web.UI.Client/libs/extension-registry/models/index.ts b/src/Umbraco.Web.UI.Client/libs/extension-registry/models/index.ts index 9c4c76f4bc..da457c4755 100644 --- a/src/Umbraco.Web.UI.Client/libs/extension-registry/models/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/extension-registry/models/index.ts @@ -14,7 +14,11 @@ import type { ManifestPropertyAction } from './property-action.model'; import type { ManifestPropertyEditorUI, ManifestPropertyEditorModel } from './property-editor.model'; import type { ManifestRepository } from './repository.model'; import type { ManifestSection } from './section.model'; -import type { ManifestSectionSidebarApp, ManifestSectionSidebarAppMenuKind } from './section-sidebar-app.model'; +import type { + ManifestSectionSidebarApp, + ManifestSectionSidebarAppMenuKind, + ManifestSectionSidebarAppMenuWithEntityActionsKind, +} from './section-sidebar-app.model'; import type { ManifestSectionView } from './section-view.model'; import type { ManifestStore, ManifestTreeStore, ManifestItemStore } from './store.model'; import type { ManifestTheme } from './theme.model'; @@ -79,6 +83,7 @@ export type ManifestTypes = | ManifestSection | ManifestSectionSidebarApp | ManifestSectionSidebarAppMenuKind + | ManifestSectionSidebarAppMenuWithEntityActionsKind | ManifestSectionView | ManifestStore | ManifestTheme diff --git a/src/Umbraco.Web.UI.Client/libs/extension-registry/models/section-sidebar-app.model.ts b/src/Umbraco.Web.UI.Client/libs/extension-registry/models/section-sidebar-app.model.ts index 0eba37c441..a1f85d5c6d 100644 --- a/src/Umbraco.Web.UI.Client/libs/extension-registry/models/section-sidebar-app.model.ts +++ b/src/Umbraco.Web.UI.Client/libs/extension-registry/models/section-sidebar-app.model.ts @@ -10,13 +10,27 @@ export interface ConditionsSectionSidebarApp { sections: Array; } -export interface ManifestSectionSidebarAppMenuKind extends ManifestSectionSidebarApp { +export interface ManifestSectionSidebarAppBaseMenu extends ManifestSectionSidebarApp { + type: 'sectionSidebarApp'; + meta: MetaSectionSidebarAppMenuKind; +} + +export interface ManifestSectionSidebarAppMenuKind extends ManifestSectionSidebarAppBaseMenu { type: 'sectionSidebarApp'; kind: 'menu'; - meta: MetaSectionSidebarAppMenuKind; } export interface MetaSectionSidebarAppMenuKind { label: string; menu: string; } + +export interface ManifestSectionSidebarAppMenuWithEntityActionsKind extends ManifestSectionSidebarAppBaseMenu { + type: 'sectionSidebarApp'; + kind: 'menuWithEntityActions'; + meta: MetaSectionSidebarAppMenuWithEntityActionsKind; +} + +export interface MetaSectionSidebarAppMenuWithEntityActionsKind extends MetaSectionSidebarAppMenuKind { + entityType: string; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts new file mode 100644 index 0000000000..e694773554 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts @@ -0,0 +1,42 @@ +import { html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UmbSectionSidebarMenuElement } from '../section-sidebar-menu/section-sidebar-menu.element'; +import { + ManifestSectionSidebarAppMenuWithEntityActionsKind, + UmbBackofficeManifestKind, + umbExtensionsRegistry, +} from '@umbraco-cms/backoffice/extension-registry'; + +import '../../menu/menu.element'; + +const manifestWithEntityActions: UmbBackofficeManifestKind = { + type: 'kind', + alias: 'Umb.Kind.Menu', + matchKind: 'menuWithEntityActions', + matchType: 'sectionSidebarApp', + manifest: { + type: 'sectionSidebarApp', + elementName: 'umb-section-sidebar-menu', + }, +}; +umbExtensionsRegistry.register(manifestWithEntityActions); + +@customElement('umb-section-sidebar-menu-with-entity-actions') +export class UmbSectionSidebarMenuWithEntityActionsElement extends UmbSectionSidebarMenuElement { + renderHeader() { + return html`

${this.manifest?.meta?.label}

+ + `; + } +} + +export default UmbSectionSidebarMenuWithEntityActionsElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-section-sidebar-menu-with-entity-actions': UmbSectionSidebarMenuElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.stories.ts new file mode 100644 index 0000000000..69c338f681 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.stories.ts @@ -0,0 +1,15 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit'; + +import type { UmbSectionSidebarMenuWithEntityActionsElement } from './section-sidebar-menu-with-entity-actions.element'; +import './section-sidebar-menu-with-entity-actions.element'; + +export default { + title: 'Sections/Shared/Section Sidebar Menu With Entity Actions', + component: 'umb-section-sidebar-menu-with-entity-actions', + id: 'umb-section-sidebar-menu-with-entity-actions', +} as Meta; + +export const AAAOverview: Story = () => + html` `; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu/section-sidebar-menu.element.ts index b7939f8927..579a35fd45 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu/section-sidebar-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section-sidebar-menu/section-sidebar-menu.element.ts @@ -3,6 +3,7 @@ import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { ManifestMenu, + ManifestSectionSidebarAppBaseMenu, ManifestSectionSidebarAppMenuKind, UmbBackofficeManifestKind, umbExtensionsRegistry, @@ -25,13 +26,19 @@ const manifest: UmbBackofficeManifestKind = { umbExtensionsRegistry.register(manifest); @customElement('umb-section-sidebar-menu') -export class UmbSectionSidebarMenuElement extends UmbLitElement { +export class UmbSectionSidebarMenuElement< + ManifestType extends ManifestSectionSidebarAppBaseMenu = ManifestSectionSidebarAppMenuKind +> extends UmbLitElement { @property() - manifest?: ManifestSectionSidebarAppMenuKind; + manifest?: ManifestType; + + renderHeader() { + return html`

${this.manifest?.meta?.label}

`; + } render() { // TODO: link to dashboards when clicking on the menu item header - return html`

${this.manifest?.meta?.label}

+ return html`${this.renderHeader()} menu.alias === this.manifest?.meta?.menu} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section.element.ts index 040f680eab..95e115e4dc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/section/section.element.ts @@ -14,6 +14,7 @@ import type { UmbRoute } from '@umbraco-cms/backoffice/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import './section-sidebar-menu/section-sidebar-menu.element'; +import './section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element'; /** * @export