From d9760a23f4f78d5422a3fb94e1ad3d268a3bcf29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 27 Feb 2024 15:02:56 +0100 Subject: [PATCH] confirm modal method --- .../block-grid-area-config-entry.context.ts | 21 +++--- .../input-block-type.element.ts | 70 ++++++++----------- .../block/context/block-entry.context.ts | 22 +++--- .../confirm/confirm-modal.controller.ts | 30 ++++++++ .../core/modal/context/modal.context.ts | 2 + .../src/packages/core/modal/index.ts | 1 + 6 files changed, 81 insertions(+), 65 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts index c138fb6300..3067cfc101 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts @@ -9,7 +9,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; -import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import { umbConfirmModal } from '@umbraco-cms/backoffice/modal'; export class UmbBlockGridAreaConfigEntryContext extends UmbContextBase implements UmbBlockGridScalableContext @@ -86,19 +86,14 @@ export class UmbBlockGridAreaConfigEntryContext ); } - requestDelete() { - this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => { - const modalContext = modalManager.open(UMB_CONFIRM_MODAL, { - data: { - headline: `Delete ${this.alias}`, - content: 'Are you sure you want to delete this Area?', - confirmLabel: 'Delete', - color: 'danger', - }, - }); - await modalContext.onSubmit(); - this.delete(); + async requestDelete() { + await umbConfirmModal(this, { + headline: `Delete ${this.alias}`, + content: 'Are you sure you want to delete this Area?', + confirmLabel: 'Delete', + color: 'danger', }); + this.delete(); } public delete() { if (!this.#areaKey || !this.#propertyContext) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 8caac68e41..31593e2b2b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -1,8 +1,8 @@ import type { UmbBlockTypeBaseModel } from '../../types.js'; import { - UMB_CONFIRM_MODAL, UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT, + umbConfirmModal, } from '@umbraco-cms/backoffice/modal'; import '../block-type-card/index.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; @@ -42,35 +42,33 @@ export class UmbInputBlockTypeElement< }); } - create() { - this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => { - if (modalManager) { - // TODO: Make as mode for the Picker Modal, so the click to select immediately submits the modal(And in that mode we do not want to see a Submit button). - const modalContext = modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, { - data: { - hideTreeRoot: true, - multiple: false, - pickableFilter: (docType) => - // Only pick elements: - docType.isElement && - // Prevent picking the an already used element type: - this.#filter && - this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined, - }, - }); + async create() { + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); - const modalValue = await modalContext?.onSubmit(); - const selectedElementType = modalValue.selection[0]; - - if (selectedElementType) { - this.dispatchEvent(new CustomEvent('create', { detail: { contentElementTypeKey: selectedElementType } })); - } - } + // TODO: Make as mode for the Picker Modal, so the click to select immediately submits the modal(And in that mode we do not want to see a Submit button). + const modalContext = modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, { + data: { + hideTreeRoot: true, + multiple: false, + pickableFilter: (docType) => + // Only pick elements: + docType.isElement && + // Prevent picking the an already used element type: + this.#filter && + this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined, + }, }); + + const modalValue = await modalContext?.onSubmit(); + const selectedElementType = modalValue.selection[0]; + + if (selectedElementType) { + this.dispatchEvent(new CustomEvent('create', { detail: { contentElementTypeKey: selectedElementType } })); + } } deleteItem(contentElementTypeKey: string) { - this.value = this._items.filter((x) => x.contentElementTypeKey !== contentElementTypeKey); + this.value = this.value.filter((x) => x.contentElementTypeKey !== contentElementTypeKey); this.dispatchEvent(new UmbChangeEvent()); } @@ -78,20 +76,14 @@ export class UmbInputBlockTypeElement< return undefined; } - #onRequestDelete(item: BlockType) { - this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => { - const modalContext = modalManager.open(UMB_CONFIRM_MODAL, { - data: { - color: 'danger', - headline: `Remove [TODO: Get name]?`, - content: 'Are you sure you want to remove this block type?', - confirmLabel: 'Remove', - }, - }); - - await modalContext?.onSubmit(); - this.deleteItem(item.contentElementTypeKey); + async #onRequestDelete(item: BlockType) { + await umbConfirmModal(this, { + color: 'danger', + headline: `Remove [TODO: Get name]?`, + content: 'Are you sure you want to remove this block type?', + confirmLabel: 'Remove', }); + this.deleteItem(item.contentElementTypeKey); } render() { @@ -109,7 +101,7 @@ export class UmbInputBlockTypeElement< .href="${this.workspacePath}/edit/${block.contentElementTypeKey}" .contentElementTypeKey=${block.contentElementTypeKey}> - + this.#onRequestDelete(block)} label="Remove block"> diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts index 323889f06a..2cdac3315d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts @@ -7,7 +7,7 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbNumberState, UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import { encodeFilePath } from '@umbraco-cms/backoffice/utils'; -import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import { umbConfirmModal } from '@umbraco-cms/backoffice/modal'; import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type'; import type { Observable } from '@umbraco-cms/backoffice/external/rxjs'; @@ -353,20 +353,16 @@ export abstract class UmbBlockEntryContext< window.location.href = this.#generateWorkspaceEditSettingsPath(this.#workspacePath.value); } - requestDelete() { - this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => { - const modalContext = modalManager.open(UMB_CONFIRM_MODAL, { - data: { - headline: `Delete ${this.getLabel()}`, - content: 'Are you sure you want to delete this [INSERT BLOCK TYPE NAME]?', - confirmLabel: 'Delete', - color: 'danger', - }, - }); - await modalContext.onSubmit(); - this.delete(); + async requestDelete() { + await umbConfirmModal(this, { + headline: `Delete ${this.getLabel()}`, + content: 'Are you sure you want to delete this [INSERT BLOCK TYPE NAME]?', + confirmLabel: 'Delete', + color: 'danger', }); + this.delete(); } + public delete() { if (!this._entries) return; const contentUdi = this._layout.value?.contentUdi; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.controller.ts index e69de29bb2..1fa482ab54 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.controller.ts @@ -0,0 +1,30 @@ +import { UMB_CONFIRM_MODAL, type UmbConfirmModalData } from '../../token/confirm-modal.token.js'; +import { UMB_MODAL_MANAGER_CONTEXT } from '../../context/modal-manager.context.js'; +import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export interface UmbConfirmModalArgs extends UmbConfirmModalData {} + +export class UmbConfirmModalController extends UmbBaseController { + async open(args: UmbConfirmModalArgs): Promise { + const modalManagerContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + + const modalContext = modalManagerContext.open(UMB_CONFIRM_MODAL, { + data: args, + }); + + await modalContext.onSubmit().catch(() => { + this.destroy(); + }); + + // This is a one time off, so we can destroy our selfs. + this.destroy(); + + // Map back into UmbVariantId instances: + return; + } +} + +export function umbConfirmModal(host: UmbControllerHost, args: UmbConfirmModalArgs) { + return new UmbConfirmModalController(host).open(args); +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts index a27f084725..227ba41e63 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts @@ -81,6 +81,7 @@ export class UmbModalContext