diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts index 3be52db3db..202d9ff754 100644 --- a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts +++ b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts @@ -1,4 +1,4 @@ -import { UmbAction, UmbActionBase } from './action'; +import { UmbAction, UmbActionBase } from './repository-action'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; export interface UmbEntityAction extends UmbAction { diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts index e2cae65052..73c48f7d4a 100644 --- a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts +++ b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts @@ -1,4 +1,4 @@ -import { UmbAction, UmbActionBase } from './action'; +import { UmbAction, UmbActionBase } from './repository-action'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; export interface UmbEntityBulkAction extends UmbAction { diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/index.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/index.ts index 9503bc670b..2790106ec1 100644 --- a/src/Umbraco.Web.UI.Client/libs/entity-action/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/entity-action/index.ts @@ -1,4 +1,4 @@ -export * from './action'; +export * from './repository-action'; export * from './entity-action'; export * from './entity-bulk-action'; export * from './actions'; diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/repository-action.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/libs/entity-action/action.ts rename to src/Umbraco.Web.UI.Client/libs/entity-action/repository-action.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-action/entity-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-action/entity-action.element.ts index 3e47636630..455fe01585 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-action/entity-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/entity-action/entity-action.element.ts @@ -1,5 +1,5 @@ import { html, nothing } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { UUIMenuItemEvent } from '@umbraco-ui/uui'; import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events'; @@ -38,16 +38,26 @@ class UmbEntityActionElement extends UmbLitElement { } } - #createApi() { + async #createApi() { if (!this._manifest?.meta.api) return; + // TODO: Could we provide the manifest to the api constructor? instead, to enable more flexibility. Mainly cause some actions knows their repository. some does not need a repository? this.#api = new this._manifest.meta.api(this, this._manifest.meta.repositoryAlias, this.unique); + + // TODO: Fix so when we use a HREF it does not refresh the page? + this._href = await this.#api.getHref?.(); + this.requestUpdate('_href'); } #api: any; + @state() + _href?: string; + async #onClickLabel(event: UUIMenuItemEvent) { - event.stopPropagation(); - await this.#api.execute(); + if (!this._href) { + event.stopPropagation(); + await this.#api.execute(); + } this.dispatchEvent(new UmbExecutedEvent()); } @@ -60,7 +70,8 @@ class UmbEntityActionElement extends UmbLitElement { render() { return html` ${this._manifest?.meta.icon 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 60ac09116c..9838604411 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,4 +1,4 @@ -import { css, html } from 'lit'; +import { 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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts index 570f45055c..d1b018191d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts @@ -3,12 +3,13 @@ import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; export class UmbLanguageCreateEntityAction extends UmbEntityActionBase { + // TODO: Could EntityActions take the manifest instead, for more flexibility? constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) { super(host, repositoryAlias, unique); } - async execute() { - console.log(`execute for: ${this.unique}`); - alert('language create dialog'); + // TODO: Generate the href or retrieve it from something? + async getHref() { + return 'section/settings/workspace/language/create'; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language-root/language-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language-root/language-root-workspace.element.ts index fcd8ff1ad0..9449b49196 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language-root/language-root-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/workspace/language-root/language-root-workspace.element.ts @@ -37,7 +37,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement { }, { name: 'Fallback', - alias: 'fallBackLanguage', + alias: 'fallbackLanguage', }, { name: '', @@ -91,7 +91,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement { value: language.isMandatory, }, { - columnAlias: 'fallBackLanguage', + columnAlias: 'fallbackLanguage', value: languages.find((x) => x.isoCode === language.fallbackIsoCode)?.name, }, { @@ -103,6 +103,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement { }); } + // TODO: Generate the href or retrieve it from something? render() { return html` diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/extending/entity-actions.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/extending/entity-actions.mdx index 6d814db657..0643e04625 100644 --- a/src/Umbraco.Web.UI.Client/storybook/stories/extending/entity-actions.mdx +++ b/src/Umbraco.Web.UI.Client/storybook/stories/extending/entity-actions.mdx @@ -86,7 +86,31 @@ interface UmbEntityActionElement {} ### The Entity Action Class -As part of the Extension Manifest you can attach a class that will be instanciated as part of the action. It will have access to the host element, a repository with the given alias and the unique (key etc) of the entity. When the action is clicked the `execute` method on the api class will be run. When the action is completed, an event on the host element will be dispatched to notify any surrounding elements. +As part of the Extension Manifest you can attach a class that will be instanciated as part of the action. +It will have access to the host element, a repository with the given alias and the unique (key etc) of the entity. + +The class either provides a getHref method, or an execute method. If the getHref method is provided, the action will use the link. Otherwise the `execute` method will be used. +When the action is clicked the `execute` method on the api class will be run. When the action is completed, an event on the host element will be dispatched to notify any surrounding elements. + +Example of providing a `getHref` method: + +```ts +import { UmbEntityActionBase } from '@umbraco-cms/entity-action'; +import { UmbControllerHostElement } from '@umbraco-cms/controller'; +import type { MyRepository } from './my-repository'; + +export class MyEntityAction extends UmbEntityActionBase { + constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) { + super(host, repositoryAlias, unique); + } + + async getHref() { + return 'my-link/path-to-something'; + } +} +``` + +Example of providing a `execute` method: ```ts import { UmbEntityActionBase } from '@umbraco-cms/entity-action'; diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/actions.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/actions.mdx index d9ff5db436..6865e19005 100644 --- a/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/actions.mdx +++ b/src/Umbraco.Web.UI.Client/storybook/stories/extending/workspaces/actions.mdx @@ -39,7 +39,9 @@ extensionRegistry.register(manifest); ### The Workspace Action Class -As part of the Extension Manifest you can attach a class that will be instanciated as part of the action. It will have access to the host element and the Workspace Context. When the action is clicked the `execute` method on the api class will be run. When the action is completed, an event on the host element will be dispatched to notify any surrounding elements. +As part of the Extension Manifest you can attach a class that will be instanciated as part of the action. It will have access to the host element and the Workspace Context. +When the action is clicked the `execute` method on the api class will be run. +When the action is completed, an event on the host element will be dispatched to notify any surrounding elements. ```ts import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action';