yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

confirm modal method

Browse Source
This commit is contained in:
Niels Lyngsø
2024-02-27 15:02:56 +01:00
parent 7ad25839c8
commit d9760a23f4
6 changed files with 81 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.context.ts
View File

@@ -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<UmbBlockGridAreaConfigEntryContext>
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;

70
src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
View File

@@ -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}>
<uui-action-bar slot="actions">
<uui-button @click=${this.#onRequestDelete} label="Remove block">
<uui-button @click=${() => this.#onRequestDelete(block)} label="Remove block">
<uui-icon name="icon-trash"></uui-icon>
</uui-button>
</uui-action-bar>

22
src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
View File

@@ -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;

30
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.controller.ts
View File

@@ -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<void> {
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);
}

2
src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts
View File

@@ -81,6 +81,7 @@ export class UmbModalContext<ModalPreset extends object = object, ModalValue = a
*/
public submit() {
this.#submitResolver?.(this.getValue());
// TODO: Could we clean up this class here? (Example destroy the value state, and other things?)
}
/**
@@ -90,6 +91,7 @@ export class UmbModalContext<ModalPreset extends object = object, ModalValue = a
*/
public reject(reason?: UmbModalRejectReason) {
this.#submitRejecter?.(reason);
// TODO: Could we clean up this class here? (Example destroy the value state, and other things?)
}
/**

1
src/Umbraco.Web.UI.Client/src/packages/core/modal/index.ts
View File

@@ -8,3 +8,4 @@ export * from './token/index.js';
export * from './types.js';
export * from './component/modal-element.element.js';
export * from './component/modal.element.js';
export * from './common/confirm/confirm-modal.controller.js';