diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/actions/editor-action-data-type-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/actions/editor-action-data-type-save.element.ts new file mode 100644 index 0000000000..24fb3fc8e2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/actions/editor-action-data-type-save.element.ts @@ -0,0 +1,63 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import type { UUIButtonState } from '@umbraco-ui/uui'; +import type { UmbNotificationDefaultData } from '../../../../core/services/notification/layouts/default'; +import type { UmbNotificationService } from '../../../../core/services/notification'; +import { UmbDataTypeContext } from '../data-type.context'; +import { UmbContextConsumerMixin } from '@umbraco-cms/context-api'; +import { UmbDataTypeStore } from 'src/core/stores/data-type/data-type.store'; + +@customElement('umb-editor-action-data-type-save') +export class UmbEditorActionDataTypeSaveElement extends UmbContextConsumerMixin(LitElement) { + static styles = [UUITextStyles, css``]; + + @state() + private _saveButtonState?: UUIButtonState; + + private _dataTypeStore?: UmbDataTypeStore; + private _dataTypeContext?: UmbDataTypeContext; + private _notificationService?: UmbNotificationService; + + constructor() { + super(); + + this.consumeAllContexts(['umbDataTypeStore', 'umbDataTypeContext', 'umbNotificationService'], (instances) => { + this._dataTypeStore = instances['umbDataTypeStore']; + this._dataTypeContext = instances['umbDataTypeContext']; + this._notificationService = instances['umbNotificationService']; + }); + } + + private async _handleSave() { + if (!this._dataTypeStore || !this._dataTypeContext) return; + + try { + this._saveButtonState = 'waiting'; + const dataType = this._dataTypeContext.getData(); + await this._dataTypeStore.save([dataType]); + const data: UmbNotificationDefaultData = { message: 'Data Type Saved' }; + this._notificationService?.peek('positive', { data }); + this._saveButtonState = 'success'; + } catch (error) { + this._saveButtonState = 'failed'; + } + } + + render() { + return html``; + } +} + +export default UmbEditorActionDataTypeSaveElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-editor-action-data-type-save': UmbEditorActionDataTypeSaveElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts index 0e3631fbe0..8b50b4d26c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts @@ -1,14 +1,13 @@ -import { UUIButtonState, UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; +import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { UmbNotificationService } from '../../../core/services/notification'; import { UmbDataTypeStore } from '../../../core/stores/data-type/data-type.store'; -import { UmbNotificationDefaultData } from '../../../core/services/notification/layouts/default'; import type { DataTypeDetails } from '../../../core/mocks/data/data-type.data'; import { UmbDataTypeContext } from './data-type.context'; import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { UmbContextProviderMixin, UmbContextConsumerMixin } from '@umbraco-cms/context-api'; +import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; import '../shared/editor-entity-layout/editor-entity-layout.element'; @@ -41,25 +40,67 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin( @state() private _dataTypeName = ''; - @state() - private _saveButtonState?: UUIButtonState; - private _dataTypeContext?: UmbDataTypeContext; private _dataTypeStore?: UmbDataTypeStore; - private _notificationService?: UmbNotificationService; constructor() { super(); - this.consumeAllContexts(['umbDataTypeStore', 'umbNotificationService'], (instances) => { + this._registerExtensions(); + + this.consumeAllContexts(['umbDataTypeStore'], (instances) => { this._dataTypeStore = instances['umbDataTypeStore']; - this._notificationService = instances['umbNotificationService']; this._observeDataType(); }); this.addEventListener('property-value-change', this._onPropertyValueChange); } + private _registerExtensions() { + const extensions: Array = [ + { + type: 'editorView', + alias: 'Umb.EditorView.DataType.Edit', + name: 'Data Type Editor Edit View', + loader: () => import('./views/edit/editor-view-data-type-edit.element'), + weight: 90, + meta: { + editors: ['Umb.Editor.DataType'], + label: 'Edit', + pathname: 'edit', + icon: 'edit', + }, + }, + { + type: 'editorView', + alias: 'Umb.EditorView.DataType.Info', + name: 'Data Type Editor Info View', + loader: () => import('./views/info/editor-view-data-type-info.element'), + weight: 90, + meta: { + editors: ['Umb.Editor.DataType'], + label: 'Info', + pathname: 'info', + icon: 'info', + }, + }, + { + type: 'editorAction', + alias: 'Umb.EditorAction.DataType.Save', + name: 'Save Data Type Editor Action', + loader: () => import('./actions/editor-action-data-type-save.element'), + meta: { + editors: ['Umb.Editor.DataType'], + }, + }, + ]; + + extensions.forEach((extension) => { + if (umbExtensionsRegistry.isRegistered(extension.alias)) return; + umbExtensionsRegistry.register(extension); + }); + } + private _observeDataType() { if (!this._dataTypeStore) return; @@ -86,22 +127,6 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin( this._dataTypeContext?.setPropertyValue(target?.alias, target?.value); }; - private async _onSave() { - // TODO: What if store is not present, what if node is not loaded.... - if (!this._dataTypeStore || !this._dataTypeContext) return; - - try { - this._saveButtonState = 'waiting'; - const dataType = this._dataTypeContext.getData(); - await this._dataTypeStore.save([dataType]); - const data: UmbNotificationDefaultData = { message: 'Data Type Saved' }; - this._notificationService?.peek('positive', { data }); - this._saveButtonState = 'success'; - } catch (error) { - this._saveButtonState = 'failed'; - } - } - // TODO. find a way where we don't have to do this for all editors. private _handleInput(event: UUIInputEvent) { if (event instanceof UUIInputEvent) { @@ -117,15 +142,6 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin( return html` - -
- -
`; } diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts index ce97628fbe..48274100a5 100644 --- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts +++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts @@ -209,36 +209,6 @@ export const internalManifests: Array Promise import('../backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element'), - weight: 90, - meta: { - // TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin - // this is a temp solution - editors: ['Umb.Editor.DataType'], - label: 'Edit', - pathname: 'edit', - icon: 'edit', - }, - }, - { - type: 'editorView', - alias: 'Umb.EditorView.DataType.Info', - name: 'Data Type Editor Info View', - loader: () => import('../backoffice/editors/data-type/views/info/editor-view-data-type-info.element'), - weight: 90, - meta: { - // TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin - // this is a temp solution - editors: ['Umb.Editor.DataType'], - label: 'Info', - pathname: 'info', - icon: 'info', - }, - }, { type: 'editorView', alias: 'Umb.EditorView.DocumentType.Design',