Merge pull request #512 from umbraco/feature/document-create-dialog

Looks good

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create.action.ts

@@ -1,14 +0,0 @@
-import { UmbDocumentRepository } from '../repository/document.repository';
-import { UmbEntityActionBase } from '@umbraco-cms/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-
-export class UmbCreateDocumentEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
-		super(host, repositoryAlias, unique);
-	}
-
-	async execute() {
-		console.log(`execute for: ${this.unique}`);
-		alert('open create dialog');
-	}
-}

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create-document-modal-layout.element.ts

@@ -0,0 +1,50 @@
+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 UmbCreateDocumentModalData {
+	unique: string | null;
+}
+
+export interface UmbCreateDocumentModalResultData {
+	documentType: string;
+}
+
+@customElement('umb-create-document-modal-layout')
+export class UmbCreateDocumentModalLayoutElement extends UmbModalLayoutElement<UmbCreateDocumentModalData> {
+	static styles = [UUITextStyles];
+
+	private _handleCancel() {
+		this.modalHandler?.close();
+	}
+
+	#onClick(event: PointerEvent) {
+		event.stopPropagation();
+		const target = event.target as HTMLButtonElement;
+		const documentType = target.value;
+		this.modalHandler?.close({ documentType });
+	}
+
+	render() {
+		return html`
+			<umb-body-layout headline="Headline">
+				<div>Render list of create options for ${this.data?.unique}</div>
+
+				<ul>
+					<li><button type="button" value="doc1" @click=${this.#onClick}>Option 1</button></li>
+					<li><button type="button" value="doc2" @click=${this.#onClick}>Option 2</button></li>
+					<li><button type="button" value="doc3" @click=${this.#onClick}>Option 3</button></li>
+				</ul>
+
+				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
+			</umb-body-layout>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-create-document-modal-layout': UmbCreateDocumentModalLayoutElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts

@@ -0,0 +1,35 @@
+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';
+
+export class UmbCreateDocumentEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
+	#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() {
+		// TODO: what to do if modal service is not available?
+		if (!this.#modalService) return;
+
+		const modalHandler = this.#modalService?.open('umb-create-document-modal-layout', {
+			type: 'sidebar',
+			data: { unique: this.unique },
+		});
+
+		// TODO: get type from modal result
+		const { documentType }: UmbCreateDocumentModalResultData = await modalHandler.onClose();
+		alert('create document with document type: ' + documentType);
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/manifests.ts

@@ -1,5 +1,5 @@
 import { DOCUMENT_REPOSITORY_ALIAS } from '../repository/manifests';
-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';