From 9f7fdda00c4fa912f30e42a166159fe43e936fbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Wed, 31 Aug 2022 10:45:15 +0200 Subject: [PATCH] actions: actions are now seperate elements --- .../backoffice/tree/actions-modal.element.ts | 40 ++++------------ .../src/backoffice/tree/actions.service.ts | 2 +- .../actions/tree-action-create.element.ts | 29 ++++++++++++ .../actions/tree-action-delete.element.ts | 29 ++++++++++++ .../actions/tree-action-reload.element.ts | 29 ++++++++++++ .../tree/shared/tree-action.element.ts | 47 +++++++++++++++++++ 6 files changed, 143 insertions(+), 33 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-create.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-delete.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-reload.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-action.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts index 8a134c3869..4aad43cfdd 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions-modal.element.ts @@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { UmbActionService } from './actions.service'; import { UmbContextConsumerMixin } from '../../core/context'; import type { ManifestEntityAction } from '../../core/models'; +import './shared/tree-action.element'; @customElement('umb-actions-modal') export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) { @@ -22,19 +23,6 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) { #title > * { margin: 0; } - - .action { - display: flex; - padding: var(--uui-size-2) var(--uui-size-4); - border-bottom: 1px solid var(--uui-color-divider); - cursor: pointer; - align-items: center; - gap: var(--uui-size-3); - } - .action:hover { - background-color: var(--uui-color-surface-emphasis); - color: var(--uui-color-interactive-emphasis); - } `, ]; @@ -51,7 +39,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) { @property() name = ''; - private _actionList: ManifestEntityAction[] = [ + private _actionList: Array Promise }> = [ { name: 'create', alias: 'action.create', @@ -60,16 +48,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) { icon: 'add', weight: 10, }, - type: 'entityAction', - }, - { - name: 'rename', - alias: 'action.rename', - meta: { - label: 'Rename', - icon: 'edit', - weight: 20, - }, + loader: () => import('./actions/tree-action-create.element'), type: 'entityAction', }, { @@ -78,8 +57,9 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) { meta: { label: 'Delete', icon: 'delete', - weight: 30, + weight: 20, }, + loader: () => import('./actions/tree-action-delete.element'), type: 'entityAction', }, { @@ -88,8 +68,9 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) { meta: { label: 'Reload', icon: 'sync', - weight: 40, + weight: 30, }, + loader: () => import('./actions/tree-action-reload.element'), type: 'entityAction', }, ]; @@ -98,12 +79,7 @@ export class UmbActionsModal extends UmbContextConsumerMixin(LitElement) { return this._actionList .sort((a, b) => a.meta.weight - b.meta.weight) .map((action) => { - return html` -
''} @click=${() => this._actionService?.execute(action)}> - - ${action.meta.label} -
- `; + return html` `; }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts index 3677d05d70..2d89ab3a59 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions.service.ts @@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UmbContextProviderMixin } from '../../core/context'; -import { ManifestEntityAction } from '../../core/models'; +import type { ManifestEntityAction } from '../../core/models'; import './actions-modal.element'; @customElement('umb-action-service') diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-create.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-create.element.ts new file mode 100644 index 0000000000..e42c019a19 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-create.element.ts @@ -0,0 +1,29 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbContextConsumerMixin } from '../../../core/context'; +import type { ManifestEntityAction } from '../../../core/models'; + +@customElement('umb-tree-action-create') +export default class UmbTreeActionCreateElement extends UmbContextConsumerMixin(LitElement) { + static styles = [UUITextStyles, css``]; + + @property({ attribute: false }) + public treeAction?: ManifestEntityAction; + + private _handleLabelClick() { + console.log(this.treeAction, 'label clicked'); + } + + render() { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-tree-action-create': UmbTreeActionCreateElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-delete.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-delete.element.ts new file mode 100644 index 0000000000..bae13b14b6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-delete.element.ts @@ -0,0 +1,29 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbContextConsumerMixin } from '../../../core/context'; +import type { ManifestEntityAction } from '../../../core/models'; + +@customElement('umb-tree-action-delete') +export default class UmbTreeActionDeleteElement extends UmbContextConsumerMixin(LitElement) { + static styles = [UUITextStyles, css``]; + + @property({ attribute: false }) + public treeAction?: ManifestEntityAction; + + private _handleLabelClick() { + console.log(this.treeAction, 'label clicked'); + } + + render() { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-tree-action-delete': UmbTreeActionDeleteElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-reload.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-reload.element.ts new file mode 100644 index 0000000000..b6b0fda791 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/actions/tree-action-reload.element.ts @@ -0,0 +1,29 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbContextConsumerMixin } from '../../../core/context'; +import type { ManifestEntityAction } from '../../../core/models'; + +@customElement('umb-tree-action-reload') +export default class UmbTreeActionReloadElement extends UmbContextConsumerMixin(LitElement) { + static styles = [UUITextStyles, css``]; + + @property({ attribute: false }) + public treeAction?: ManifestEntityAction; + + private _handleLabelClick() { + console.log(this.treeAction, 'label clicked'); + } + + render() { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-tree-action-reload': UmbTreeActionReloadElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-action.element.ts new file mode 100644 index 0000000000..7bc1f81111 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-action.element.ts @@ -0,0 +1,47 @@ +import { UUITextStyles } from '@umbraco-ui/uui'; +import { CSSResultGroup, html, LitElement } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; + +import { createExtensionElement } from '../../../core/extension'; +import type { ManifestEntityAction } from '../../../core/models'; + +@customElement('umb-tree-action') +export class UmbTreeActionElement extends LitElement { + static styles: CSSResultGroup = [UUITextStyles]; + + private _treeAction?: ManifestEntityAction; + @property({ type: Object }) + public get treeAction(): ManifestEntityAction | undefined { + return this._treeAction; + } + public set treeAction(value: ManifestEntityAction | undefined) { + this._treeAction = value; + this._createElement(); + } + + @state() + private _element?: UmbTreeActionElement; + + private async _createElement() { + if (!this.treeAction) return; + + try { + this._element = (await createExtensionElement(this.treeAction)) as UmbTreeActionElement | undefined; + if (!this._element) return; + + this._element.treeAction = this.treeAction; + } catch (error) { + // TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.) + } + } + + render() { + return html`${this._element}`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-tree-action': UmbTreeActionElement; + } +}