From 50f46ee5e5ba5cde84d00b555dde4a0937815b37 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 10 Feb 2023 13:24:35 +0100 Subject: [PATCH 1/3] add document create dialog scaffold --- .../documents/entity-actions/create.action.ts | 14 ------ .../create-document-modal-layout.element.ts | 47 +++++++++++++++++++ .../entity-actions/create/create.action.ts | 31 ++++++++++++ .../documents/entity-actions/manifests.ts | 2 +- 4 files changed, 79 insertions(+), 15 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create.action.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create.action.ts deleted file mode 100644 index 938bd470a2..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create.action.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { UmbDocumentRepository } from '../repository/document.repository'; -import { UmbEntityActionBase } from '../../../shared/entity-actions'; -import { UmbControllerHostInterface } from '@umbraco-cms/controller'; - -export class UmbCreateDocumentEntityAction extends UmbEntityActionBase { - constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { - super(host, repositoryAlias, unique); - } - - async execute() { - console.log(`execute for: ${this.unique}`); - alert('open create dialog'); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts new file mode 100644 index 0000000000..b452876a27 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts @@ -0,0 +1,47 @@ +import { html, TemplateResult } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement } from 'lit/decorators.js'; +import { UmbModalLayoutElement } from '@umbraco-cms/modal'; + +export interface UmbModalConfirmData { + headline: string; + content: TemplateResult | string; + color?: 'positive' | 'danger'; + confirmLabel?: string; +} + +@customElement('umb-create-document-modal-layout') +export class UmbCreateDocumentModalLayoutElement extends UmbModalLayoutElement { + static styles = [UUITextStyles]; + + private _handleConfirm() { + this.modalHandler?.close({ confirmed: true }); + } + + private _handleCancel() { + this.modalHandler?.close({ confirmed: false }); + } + + render() { + return html` + +
Render list of create options
+ + Cancel + + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-create-document-modal-layout': UmbCreateDocumentModalLayoutElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts new file mode 100644 index 0000000000..ff4aa0d2f3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts @@ -0,0 +1,31 @@ +import { UmbDocumentRepository } from '../../repository/document.repository'; +import { UmbEntityActionBase } from '../../../../shared/entity-actions'; +import { UmbControllerHostInterface } from '@umbraco-cms/controller'; +import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbContextConsumerController } from '@umbraco-cms/context-api'; + +// TODO: temp import +import './create-document-modal-layout.element.ts'; + +export class UmbCreateDocumentEntityAction extends UmbEntityActionBase { + #modalService?: UmbModalService; + + constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) { + super(host, repositoryAlias, unique); + + new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { + this.#modalService = instance; + }); + } + + async execute() { + const modalHandler = this.#modalService?.open('umb-create-document-modal-layout', { + type: 'sidebar', + data: { unique: this.unique }, + }); + + const result = await modalHandler?.onClose(); + console.log(`execute for: ${this.unique}`); + alert('open create dialog'); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts index cbe3767e0d..e1fa6841e1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts @@ -2,7 +2,7 @@ import { UmbCopyEntityAction } from '../../../shared/entity-actions/copy/copy.ac import { UmbMoveEntityAction } from '../../../shared/entity-actions/move/move.action'; import { UmbTrashEntityAction } from '../../../shared/entity-actions/trash/trash.action'; import { UmbSortChildrenOfEntityAction } from '../../../shared/entity-actions/sort-children-of/sort-children-of.action'; -import { UmbCreateDocumentEntityAction } from './create.action'; +import { UmbCreateDocumentEntityAction } from './create/create.action'; import { UmbPublishDocumentEntityAction } from './publish.action'; import { UmbDocumentCultureAndHostnamesEntityAction } from './culture-and-hostnames.action'; import { UmbCreateDocumentBlueprintEntityAction } from './create-blueprint.action'; From ece02fba23408772a768c32bb6f8c80dfd78c32d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 10 Feb 2023 13:38:18 +0100 Subject: [PATCH 2/3] add selection of allowed doc types --- .../create-document-modal-layout.element.ts | 41 ++++++++++--------- .../entity-actions/create/create.action.ts | 10 +++-- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts index b452876a27..ff3bf6296b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts @@ -1,40 +1,43 @@ -import { html, TemplateResult } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement } from 'lit/decorators.js'; import { UmbModalLayoutElement } from '@umbraco-cms/modal'; -export interface UmbModalConfirmData { - headline: string; - content: TemplateResult | string; - color?: 'positive' | 'danger'; - confirmLabel?: string; +export interface UmbCreateDocumentModalData { + unique: string | null; +} + +export interface UmbCreateDocumentModalResultData { + documentType: string; } @customElement('umb-create-document-modal-layout') -export class UmbCreateDocumentModalLayoutElement extends UmbModalLayoutElement { +export class UmbCreateDocumentModalLayoutElement extends UmbModalLayoutElement { static styles = [UUITextStyles]; - private _handleConfirm() { - this.modalHandler?.close({ confirmed: true }); + private _handleCancel() { + this.modalHandler?.close(); } - private _handleCancel() { - this.modalHandler?.close({ confirmed: false }); + #onClick(event: PointerEvent) { + event.stopPropagation(); + const target = event.target as HTMLButtonElement; + const documentType = target.value; + this.modalHandler?.close({ documentType }); } render() { return html` -
Render list of create options
+
Render list of create options for ${this.data?.unique}
+ +
    +
    • +
    • +
    • +
Cancel - `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts index ff4aa0d2f3..412df4e261 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts @@ -6,6 +6,7 @@ import { UmbContextConsumerController } from '@umbraco-cms/context-api'; // TODO: temp import import './create-document-modal-layout.element.ts'; +import { UmbCreateDocumentModalResultData } from './create-document-modal-layout.element'; export class UmbCreateDocumentEntityAction extends UmbEntityActionBase { #modalService?: UmbModalService; @@ -19,13 +20,16 @@ export class UmbCreateDocumentEntityAction extends UmbEntityActionBase Date: Fri, 10 Feb 2023 13:39:13 +0100 Subject: [PATCH 3/3] fix import order --- .../documents/documents/entity-actions/create/create.action.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts index 412df4e261..56980762ac 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts @@ -1,12 +1,12 @@ import { UmbDocumentRepository } from '../../repository/document.repository'; import { UmbEntityActionBase } from '../../../../shared/entity-actions'; +import type { UmbCreateDocumentModalResultData } from './create-document-modal-layout.element'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; // TODO: temp import import './create-document-modal-layout.element.ts'; -import { UmbCreateDocumentModalResultData } from './create-document-modal-layout.element'; export class UmbCreateDocumentEntityAction extends UmbEntityActionBase { #modalService?: UmbModalService;