From 9d7d1f2b52cec2e161fcf265e98774bb0d92d292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Sun, 3 Mar 2024 19:51:19 +0100 Subject: [PATCH 1/2] refactor: UmbEntityActionListElement / UmbEntityActionElement --- .../entity-action-list.element.ts | 33 +++++--- .../entity-action/entity-action.element.ts | 78 +++++-------------- .../entity-action/entity-action.interface.ts | 4 +- .../src/packages/core/entity-action/index.ts | 5 +- .../models/entity-action.model.ts | 15 ++-- 5 files changed, 55 insertions(+), 80 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts index c1c172dad6..cd43f11ce9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts @@ -1,3 +1,4 @@ +import type { UmbEntityActionArgs } from './types.js'; import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit'; import type { ManifestEntityAction } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -5,32 +6,42 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-entity-action-list') export class UmbEntityActionListElement extends UmbLitElement { @property({ type: String, attribute: 'entity-type' }) - public get entityType(): string { - return this._entityType; + public get entityType(): string | undefined { + return this._props.entityType; } - public set entityType(value: string) { - if (value === this._entityType) return; - this._entityType = value; + public set entityType(value: string | undefined) { + if (value === undefined || value === this._props.entityType) return; + this._props.entityType = value; const oldValue = this._filter; - this._filter = (extension: ManifestEntityAction) => extension.meta.entityTypes.includes(this.entityType); + this._filter = (extension: ManifestEntityAction) => extension.meta.entityTypes.includes(value); this.requestUpdate('_filter', oldValue); + this.requestUpdate('_props'); } - private _entityType: string = ''; @state() - _filter?: (extension: ManifestEntityAction) => boolean; + _filter?: (extension: ManifestEntityAction) => boolean; @property({ type: String }) - public unique?: string | null; + public get unique(): string | null | undefined { + return this._props.unique; + } + public set unique(value: string | null | undefined) { + this._props.unique = value; + this.requestUpdate('_props'); + } + + @state() + _props: Partial> = {}; render() { return this._filter ? html` - + .props=${this._props} + .apiArgs=${[this._props]}> ` : ''; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts index 66dfae800f..7e57cc6f1f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.element.ts @@ -1,86 +1,44 @@ +import type { UmbEntityAction } from './entity-action.interface.js'; import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event'; import { html, nothing, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { ManifestEntityAction } from '@umbraco-cms/backoffice/extension-registry'; -import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; @customElement('umb-entity-action') -export class UmbEntityActionElement extends UmbLitElement { - #entityType?: string | null; +export class UmbEntityActionElement< + ArgsMetaType extends object = object, + ApiType extends UmbEntityAction = UmbEntityAction, +> extends UmbLitElement { + #api?: ApiType; @property({ type: String }) - public set entityType(value: string | undefined | null) { - const oldValue = this.#entityType; - this.#entityType = value; - if (oldValue !== this.#entityType) { - this.#createApi(); - this.requestUpdate('entityType', oldValue); - } - } - public get entityType() { - return this.#entityType; - } - - #unique?: string | null; + entityType?: string | null; @property({ type: String }) - public set unique(value: string | undefined | null) { - const oldValue = this.#unique; - this.#unique = value; - if (oldValue !== this.#unique) { - this.#createApi(); - this.requestUpdate('unique', oldValue); - } - } - public get unique() { - return this.#unique; - } + public unique?: string | null; - #manifest?: ManifestEntityAction; + @property({ attribute: false }) + public manifest?: ManifestEntityAction; - @property({ type: Object, attribute: false }) - public set manifest(value: ManifestEntityAction | undefined) { - if (!value) return; - const oldValue = this.#manifest; - this.#manifest = value; - if (oldValue !== this.#manifest) { - this.#createApi(); - this.requestUpdate('manifest', oldValue); - } - } - public get manifest() { - return this.#manifest; - } - - async #createApi() { - // only create the api if we have all the required properties - if (!this.#manifest) return; - if (this.#unique === undefined) return; - if (!this.#entityType) return; - - this.#api = await createExtensionApi(this.#manifest, [ - this, - { - entityType: this.#entityType, - unique: this.#unique, - meta: this.#manifest.meta, - }, - ]); + @property({ attribute: false }) + public set api(api: ApiType | undefined) { + this.#api = api; // TODO: Fix so when we use a HREF it does not refresh the page? - this._href = await this.#api.getHref?.(); + this.#api?.getHref?.().then((href) => { + this._href = href; + // TODO: Do we need to update the component here? [NL] + }); } - #api: any; - @state() _href?: string; async #onClickLabel(event: UUIMenuItemEvent) { if (!this._href) { event.stopPropagation(); - await this.#api.execute(); + await this.#api?.execute(); } this.dispatchEvent(new UmbActionExecutedEvent()); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.interface.ts index 57ba63eb4f..ab93c44ea8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action.interface.ts @@ -9,9 +9,9 @@ import type { UmbAction } from '@umbraco-cms/backoffice/action'; export interface UmbEntityAction extends UmbAction> { /** * The href location, the action will act as a link. - * @returns {Promise} + * @returns {Promise} */ - getHref(): Promise; + getHref(): Promise; /** * The `execute` method, the action will act as a button. diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts index 5928fd6b09..63f981afd5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts @@ -1,6 +1,7 @@ +export * from './common/index.js'; +export * from './entity-action-base.js'; export * from './entity-action-list.element.js'; export * from './entity-action.element.js'; -export * from './entity-action-base.js'; -export * from './common/index.js'; export * from './entity-action.event.js'; +export * from './entity-action.interface.js'; export * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts index c7aa9e188b..fecbe62f3c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts @@ -1,3 +1,5 @@ +import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; +import type { UmbEntityAction } from '@umbraco-cms/backoffice/entity-action'; import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; /** @@ -5,7 +7,9 @@ import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbr * For example for content you may wish to create a new document etc */ // TODO: create interface for API -export interface ManifestEntityAction extends ManifestElementAndApi, ManifestWithDynamicConditions { +export interface ManifestEntityAction + extends ManifestElementAndApi>, + ManifestWithDynamicConditions { type: 'entityAction'; meta: MetaEntityAction; } @@ -35,7 +39,7 @@ export interface MetaEntityAction { } // DELETE -export interface ManifestEntityActionDeleteKind extends ManifestEntityAction { +export interface ManifestEntityActionDeleteKind extends ManifestEntityAction { type: 'entityAction'; kind: 'delete'; meta: MetaEntityActionDeleteKind; @@ -47,7 +51,7 @@ export interface MetaEntityActionDeleteKind extends MetaEntityAction { } // RENAME -export interface ManifestEntityActionRenameKind extends ManifestEntityAction { +export interface ManifestEntityActionRenameKind extends ManifestEntityAction { type: 'entityAction'; kind: 'rename'; meta: MetaEntityActionRenameKind; @@ -59,7 +63,8 @@ export interface MetaEntityActionRenameKind extends MetaEntityAction { } // RELOAD TREE ITEM CHILDREN -export interface ManifestEntityActionReloadTreeItemChildrenKind extends ManifestEntityAction { +export interface ManifestEntityActionReloadTreeItemChildrenKind + extends ManifestEntityAction { type: 'entityAction'; kind: 'reloadTreeItemChildren'; meta: MetaEntityActionRenameKind; @@ -68,7 +73,7 @@ export interface ManifestEntityActionReloadTreeItemChildrenKind extends Manifest export interface MetaEntityActionReloadTreeItemChildrenKind extends MetaEntityAction {} // COPY -export interface ManifestEntityActionDuplicateKind extends ManifestEntityAction { +export interface ManifestEntityActionDuplicateKind extends ManifestEntityAction { type: 'entityAction'; kind: 'duplicate'; meta: MetaEntityActionDuplicateKind; From 8a20aa1558f34604f323194fcbfc5628d4b4386d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Sun, 3 Mar 2024 19:54:25 +0100 Subject: [PATCH 2/2] no need to declare meta twice --- .../core/extension-registry/models/entity-action.model.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts index fecbe62f3c..5d2eec3632 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts @@ -7,11 +7,11 @@ import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbr * For example for content you may wish to create a new document etc */ // TODO: create interface for API -export interface ManifestEntityAction +export interface ManifestEntityAction extends ManifestElementAndApi>, ManifestWithDynamicConditions { type: 'entityAction'; - meta: MetaEntityAction; + meta: MetaType; } export interface MetaEntityAction { @@ -42,7 +42,6 @@ export interface MetaEntityAction { export interface ManifestEntityActionDeleteKind extends ManifestEntityAction { type: 'entityAction'; kind: 'delete'; - meta: MetaEntityActionDeleteKind; } export interface MetaEntityActionDeleteKind extends MetaEntityAction { @@ -54,7 +53,6 @@ export interface MetaEntityActionDeleteKind extends MetaEntityAction { export interface ManifestEntityActionRenameKind extends ManifestEntityAction { type: 'entityAction'; kind: 'rename'; - meta: MetaEntityActionRenameKind; } export interface MetaEntityActionRenameKind extends MetaEntityAction { @@ -67,7 +65,6 @@ export interface ManifestEntityActionReloadTreeItemChildrenKind extends ManifestEntityAction { type: 'entityAction'; kind: 'reloadTreeItemChildren'; - meta: MetaEntityActionRenameKind; } export interface MetaEntityActionReloadTreeItemChildrenKind extends MetaEntityAction {} @@ -76,7 +73,6 @@ export interface MetaEntityActionReloadTreeItemChildrenKind extends MetaEntityAc export interface ManifestEntityActionDuplicateKind extends ManifestEntityAction { type: 'entityAction'; kind: 'duplicate'; - meta: MetaEntityActionDuplicateKind; } export interface MetaEntityActionDuplicateKind extends MetaEntityAction {