From f5329e010dbb4321e3eb622a3bee458aa9e8b6e7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 8 Mar 2023 11:08:49 +0100 Subject: [PATCH] move current user modal --- .../libs/modal/modal-handler.ts | 15 ++++++++++----- .../libs/modal/modal.context.ts | 4 ++-- .../current-user-header-app.element.ts | 3 ++- .../backoffice/users/current-user/manifests.ts | 3 ++- .../current-user/current-user-modal.element.ts} | 17 ++++++++--------- .../current-user/modals/current-user/index.ts | 6 ++++++ .../users/current-user/modals/manifests.ts | 12 ++++++++++++ 7 files changed, 42 insertions(+), 18 deletions(-) rename src/Umbraco.Web.UI.Client/{libs/modal/layouts/modal-layout-current-user.element.ts => src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts} (92%) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts index 8bc20a5cd9..4dbbb68bf3 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts @@ -28,7 +28,7 @@ export class UmbModalHandler { constructor( host: UmbControllerHostInterface, modalAlias: string | UmbModalToken, - data: unknown, + data?: unknown, config?: UmbModalConfig ) { this.#host = host; @@ -68,10 +68,15 @@ export class UmbModalHandler { return modalDialogElement; } - async #createLayoutElement(manifest: ManifestModal, data: unknown) { + async #createLayoutElement(manifest: ManifestModal, data?: unknown) { + // TODO: add fallback element if no layout is found const layoutElement = (await createExtensionElement(manifest)) as any; - layoutElement.data = data; - layoutElement.modalHandler = this; + + if (layoutElement) { + layoutElement.data = data; + layoutElement.modalHandler = this; + } + return layoutElement; } @@ -88,7 +93,7 @@ export class UmbModalHandler { It makes this code a bit more complex. The main idea is to have the element as part of the modalHandler so it is possible to dispatch events from within the modal element to the one that opened it. Now when the element is an observable it makes it more complex because this host needs to subscribe to updates to the element, instead of just having a reference to it. If we find a better generic solution to communicate between the modal and the host, then we can remove the element as part of the modalHandler. */ - #observeModal(modalAlias: string, data: unknown) { + #observeModal(modalAlias: string, data?: unknown) { new UmbObserverController( this.#host, umbExtensionsRegistry.getByTypeAndAlias('modal', modalAlias), diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts index 38811b1b08..597ab52982 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts @@ -3,7 +3,7 @@ import './layouts/confirm/modal-layout-confirm.element'; import '../../src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element'; import './layouts/media-picker/modal-layout-media-picker.element'; import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element'; -import './layouts/modal-layout-current-user.element'; +import '../../src/backoffice/users/current-user/modals/current-user/current-user-modal.element'; import './layouts/icon-picker/modal-layout-icon-picker.element'; import '../../src/backoffice/settings/languages/language-picker/language-picker-modal-layout.element'; import './layouts/link-picker/modal-layout-link-picker.element'; @@ -204,7 +204,7 @@ export class UmbModalContext { * @return {*} {UmbModalHandler} * @memberof UmbModalContext */ - public open(modalAlias: string | UmbModalToken, data: T, config?: UmbModalConfig): UmbModalHandler { + public open(modalAlias: string | UmbModalToken, data?: T, config?: UmbModalConfig): UmbModalHandler { const modalHandler = new UmbModalHandler(this.host, modalAlias, data, config); modalHandler.containerElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler)); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts index 1d98a94381..d53306805f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts @@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './current-user.store'; +import { UMB_CURRENT_USER_MODAL_TOKEN } from './modals/current-user'; import type { UserDetails } from '@umbraco-cms/models'; import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from 'libs/modal'; import { UmbLitElement } from '@umbraco-cms/element'; @@ -46,7 +47,7 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement { } private _handleUserClick() { - this._modalContext?.userSettings(); + this._modalContext?.open(UMB_CURRENT_USER_MODAL_TOKEN); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts index 63d58c00a4..acff072136 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/manifests.ts @@ -1,3 +1,4 @@ +import { manifests as modalManifests } from './modals/manifests'; import type { ManifestHeaderApp, ManifestUserDashboard } from '@umbraco-cms/models'; export const userDashboards: Array = [ @@ -29,4 +30,4 @@ export const headerApps: Array = [ }, ]; -export const manifests = [...userDashboards, ...headerApps]; +export const manifests = [...userDashboards, ...headerApps, ...modalManifests]; diff --git a/src/Umbraco.Web.UI.Client/libs/modal/layouts/modal-layout-current-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts similarity index 92% rename from src/Umbraco.Web.UI.Client/libs/modal/layouts/modal-layout-current-user.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts index 15e80e6cbd..2d3ee3aa23 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/layouts/modal-layout-current-user.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts @@ -1,21 +1,18 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, CSSResultGroup, html, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '..'; +import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../libs/modal'; import { UmbCurrentUserHistoryStore, UmbCurrentUserHistoryItem, UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, -} from '../../../src/backoffice/users/current-user/current-user-history.store'; -import { - UmbCurrentUserStore, - UMB_CURRENT_USER_STORE_CONTEXT_TOKEN, -} from '../../../src/backoffice/users/current-user/current-user.store'; +} from '../../current-user-history.store'; +import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store'; import type { UserDetails } from '@umbraco-cms/models'; import { UmbLitElement } from '@umbraco-cms/element'; -@customElement('umb-modal-layout-current-user') -export class UmbModalLayoutCurrentUserElement extends UmbLitElement { +@customElement('umb-current-user-modal') +export class UmbCurrentUserModalElement extends UmbLitElement { static styles: CSSResultGroup = [ UUITextStyles, css` @@ -202,8 +199,10 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement { } } +export default UmbCurrentUserModalElement; + declare global { interface HTMLElementTagNameMap { - 'umb-modal-layout-current-user': UmbModalLayoutCurrentUserElement; + 'umb-current-user-modal': UmbCurrentUserModalElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts new file mode 100644 index 0000000000..0a04bff545 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts @@ -0,0 +1,6 @@ +import { UmbModalToken } from 'libs/modal'; + +export const UMB_CURRENT_USER_MODAL_TOKEN = new UmbModalToken('Umb.Modal.CurrentUser', { + type: 'sidebar', + size: 'small', +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts new file mode 100644 index 0000000000..68cc073e78 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/manifests.ts @@ -0,0 +1,12 @@ +import type { ManifestModal } from '@umbraco-cms/extensions-registry'; + +const modals: Array = [ + { + type: 'modal', + alias: 'Umb.Modal.CurrentUser', + name: 'Current User Modal', + loader: () => import('./current-user/current-user-modal.element'), + }, +]; + +export const manifests = [...modals];