document blueprint action, use documentblueprintresource

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/repository/detail/document-blueprint-detail.server.data-source.ts

@@ -1,4 +1,4 @@
-import type { UmbDocumentBlueprintDetailModel, UmbDocumentBlueprintVariantModel } from '../../types.js';
+import type { UmbDocumentBlueprintDetailModel } from '../../types.js';
 import { UMB_DOCUMENT_BLUEPRINT_ENTITY_TYPE } from '../../entity.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import type { UmbDetailDataSource } from '@umbraco-cms/backoffice/repository';
@@ -6,7 +6,7 @@ import type {
 	CreateDocumentRequestModel,
 	UpdateDocumentRequestModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
-import { DocumentResource } from '@umbraco-cms/backoffice/external/backend-api';
+import { DocumentBlueprintResource } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -37,13 +37,10 @@ export class UmbDocumentBlueprintServerDataSource implements UmbDetailDataSource
 		const data: UmbDocumentBlueprintDetailModel = {
 			entityType: UMB_DOCUMENT_BLUEPRINT_ENTITY_TYPE,
 			unique: UmbId.new(),
-			urls: [],
-			template: null,
 			documentType: {
 				unique: '',
 				collection: null,
 			},
-			isTrashed: false,
 			values: [],
 			variants: [],
 			...preset,
@@ -80,7 +77,10 @@ export class UmbDocumentBlueprintServerDataSource implements UmbDetailDataSource
 	async read(unique: string) {
 		if (!unique) throw new Error('Unique is missing');
 
-		const { data, error } = await tryExecuteAndNotify(this.#host, DocumentResource.getDocumentById({ id: unique }));
+		const { data, error } = await tryExecuteAndNotify(
+			this.#host,
+			DocumentBlueprintResource.getDocumentBlueprintById({ id: unique }),
+		);
 
 		if (error || !data) {
 			return { error };
@@ -109,18 +109,10 @@ export class UmbDocumentBlueprintServerDataSource implements UmbDetailDataSource
 					updateDate: variant.updateDate,
 				};
 			}),
-			urls: data.urls.map((url) => {
-				return {
-					culture: url.culture || null,
-					url: url.url,
-				};
-			}),
-			template: data.template ? { unique: data.template.id } : null,
 			documentType: {
 				unique: data.documentType.id,
 				collection: data.documentType.collection ? { unique: data.documentType.collection.id } : null,
 			},
-			isTrashed: data.isTrashed,
 		};
 
 		return { data: document };
@@ -141,14 +133,14 @@ export class UmbDocumentBlueprintServerDataSource implements UmbDetailDataSource
 			id: model.unique,
 			parent: parentUnique ? { id: parentUnique } : null,
 			documentType: { id: model.documentType.unique },
-			template: model.template ? { id: model.template.unique } : null,
+
 			values: model.values,
 			variants: model.variants,
 		};
 
 		const { data, error } = await tryExecuteAndNotify(
 			this.#host,
-			DocumentResource.postDocument({
+			DocumentBlueprintResource.postDocumentBlueprint({
 				requestBody,
 			}),
 		);
@@ -171,14 +163,13 @@ export class UmbDocumentBlueprintServerDataSource implements UmbDetailDataSource
 
 		// TODO: make data mapper to prevent errors
 		const requestBody: UpdateDocumentRequestModel = {
-			template: model.template ? { id: model.template.unique } : null,
 			values: model.values,
 			variants: model.variants,
 		};
 
 		const { error } = await tryExecuteAndNotify(
 			this.#host,
-			DocumentResource.putDocumentById({
+			DocumentBlueprintResource.putDocumentBlueprintById({
 				id: model.unique,
 				requestBody,
 			}),
@@ -201,6 +192,6 @@ export class UmbDocumentBlueprintServerDataSource implements UmbDetailDataSource
 		if (!unique) throw new Error('Unique is missing');
 
 		// TODO: update to delete when implemented
-		return tryExecuteAndNotify(this.#host, DocumentResource.putDocumentByIdMoveToRecycleBin({ id: unique }));
+		return tryExecuteAndNotify(this.#host, DocumentBlueprintResource.deleteDocumentBlueprintById({ id: unique }));
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/types.ts

@@ -10,10 +10,7 @@ export interface UmbDocumentBlueprintDetailModel {
 		collection: UmbReferenceByUnique | null;
 	};
 	entityType: UmbDocumentBlueprintEntityType;
-	isTrashed: boolean;
-	template: { unique: string } | null;
 	unique: string;
-	urls: Array<UmbDocumentBlueprintUrlInfoModel>;
 	values: Array<UmbDocumentBlueprintValueModel>;
 	variants: Array<UmbDocumentBlueprintVariantModel>;
 }

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

@@ -1,15 +0,0 @@
-import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action';
-import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-
-export class UmbCreateDocumentBlueprintEntityAction extends UmbEntityActionBase<never> {
-	constructor(host: UmbControllerHost, args: UmbEntityActionArgs<never>) {
-		super(host, args);
-	}
-
-	async execute() {
-		console.log(`execute for: ${this.args.unique}`);
-		//await this.repository?.createBlueprint();
-	}
-}
-export default UmbCreateDocumentBlueprintEntityAction;

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

@@ -0,0 +1,23 @@
+import { UMB_CREATE_BLUEPRINT_MODAL } from './modal/create-blueprint-modal.token.js';
+import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action';
+import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UmbDocumentBlueprintDetailRepository } from '@umbraco-cms/backoffice/document-blueprint';
+
+export class UmbCreateDocumentBlueprintEntityAction extends UmbEntityActionBase<never> {
+	#repository = new UmbDocumentBlueprintDetailRepository(this);
+
+	constructor(host: UmbControllerHost, args: UmbEntityActionArgs<never>) {
+		super(host, args);
+	}
+
+	async execute() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		const modalContext = modalManager.open(this, UMB_CREATE_BLUEPRINT_MODAL, {
+			data: { unique: this.args.unique },
+		});
+		await modalContext.onSubmit().catch(() => undefined);
+	}
+}
+export default UmbCreateDocumentBlueprintEntityAction;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create-blueprint/index.ts

@@ -0,0 +1 @@
+export * from './modal/index.js';

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create-blueprint/manifests.ts

@@ -0,0 +1,29 @@
+import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+const entityActions: Array<ManifestTypes> = [
+	{
+		type: 'entityAction',
+		kind: 'default',
+		alias: 'Umb.EntityAction.Document.CreateBlueprint',
+		name: 'Create Document Blueprint Entity Action',
+		weight: 1000,
+		api: () => import('./create-blueprint.action.js'),
+		forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
+		meta: {
+			icon: 'icon-blueprint',
+			label: 'Create Content Template',
+		},
+	},
+];
+
+const manifestModals: Array<ManifestTypes> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.CreateBlueprint',
+		name: 'Create Blueprint Modal',
+		js: () => import('./modal/create-blueprint-modal.element.js'),
+	},
+];
+
+export const manifests = [...entityActions, ...manifestModals];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create-blueprint/modal/create-blueprint-modal.element.ts

@@ -0,0 +1,114 @@
+import { UmbDocumentDetailRepository } from '../../../repository/index.js';
+import type { UmbCreateBlueprintModalData } from './create-blueprint-modal.token.js';
+import { html, customElement, css, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import type { UmbDocumentDetailModel } from '@umbraco-cms/backoffice/document';
+import {
+	type UmbDocumentBlueprintDetailModel,
+	UmbDocumentBlueprintDetailRepository,
+} from '@umbraco-cms/backoffice/document-blueprint';
+import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+
+@customElement('umb-create-blueprint-modal')
+export class UmbCreateBlueprintModalElement extends UmbModalBaseElement<UmbCreateBlueprintModalData, never> {
+	#blueprintRepository = new UmbDocumentBlueprintDetailRepository(this);
+	#documentRepository = new UmbDocumentDetailRepository(this);
+
+	#documentUnique = '';
+	#document?: UmbDocumentDetailModel;
+
+	@state()
+	private _documentName = '';
+
+	@state()
+	private _blueprintName = '';
+
+	firstUpdated() {
+		this.#documentUnique = this.data?.unique ?? '';
+		this.#getDocumentData();
+	}
+
+	async #getDocumentData() {
+		const { data } = await this.#documentRepository.requestByUnique(this.#documentUnique);
+		if (!data) return;
+
+		this.#document = data;
+		this._documentName = data.variants[0].name;
+		this._blueprintName = data.variants[0].name;
+	}
+
+	#mapDocumentToBlueprintModel() {
+		if (!this.#document) return;
+		const variants = { ...this.#document?.variants, name: this._blueprintName };
+		const model: UmbDocumentBlueprintDetailModel = { ...this.#document, entityType: 'document-blueprint', variants };
+
+		return model;
+	}
+
+	async #handleSave() {
+		const model = this.#mapDocumentToBlueprintModel();
+		if (!model) return;
+		const { error } = await this.#blueprintRepository.create(model, null);
+		console.log('error', error);
+		this.modalContext?.submit();
+	}
+
+	#renderBlueprintName() {
+		return html`<strong>Create a new Content Template from ${this._documentName}</strong>
+			A Content Template is predefined content that an editor can select to use as the basis for creating new content .
+			<uui-label for="name">Name</uui-label>
+			<uui-input
+				id="name"
+				label="name"
+				.value=${this._blueprintName}
+				@input=${(e: UUIInputEvent) => (this._blueprintName = e.target.value as string)}></uui-input>`;
+	}
+
+	render() {
+		return html`
+			<umb-body-layout headline="Create Content Template">
+				${this.#renderBlueprintName()}
+				<uui-button
+					slot="actions"
+					id="close"
+					label=${this.localize.term('general_close')}
+					@click="${this.#handleClose}"></uui-button>
+				<uui-button
+					slot="actions"
+					id="save"
+					look="primary"
+					color="positive"
+					label=${this.localize.term('buttons_save')}
+					@click="${this.#handleSave}"></uui-button>
+			</umb-body-layout>
+		`;
+	}
+
+	#handleClose() {
+		this.modalContext?.reject();
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			strong,
+			uui-label,
+			uui-input {
+				display: block;
+			}
+
+			uui-label {
+				margin-top: var(--uui-size-space-6);
+			}
+		`,
+	];
+}
+
+export default UmbCreateBlueprintModalElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-create-blueprint-modal': UmbCreateBlueprintModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create-blueprint/modal/create-blueprint-modal.token.ts

@@ -0,0 +1,15 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbCreateBlueprintModalData {
+	unique: string | null;
+}
+
+export const UMB_CREATE_BLUEPRINT_MODAL = new UmbModalToken<UmbCreateBlueprintModalData, never>(
+	'Umb.Modal.CreateBlueprint',
+	{
+		modal: {
+			type: 'sidebar',
+			size: 'small',
+		},
+	},
+);

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create-blueprint/modal/index.ts

@@ -0,0 +1,2 @@
+export * from './create-blueprint-modal.token.js';
+export * from './create-blueprint-modal.element.js';

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

@@ -2,6 +2,7 @@ import { UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS } from '../repository/index.js';
 import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js';
 import { UMB_DOCUMENT_PICKER_MODAL } from '../modals/index.js';
 import { manifests as createManifests } from './create/manifests.js';
+import { manifests as createBlueprintManifests } from './create-blueprint/manifests.js';
 import { manifests as publicAccessManifests } from './public-access/manifests.js';
 import { manifests as cultureAndHostnamesManifests } from './culture-and-hostnames/manifests.js';
 import { manifests as sortChildrenOfManifests } from './sort-children-of/manifests.js';
@@ -21,19 +22,6 @@ const entityActions: Array<ManifestEntityAction> = [
 			pickerModalAlias: UMB_DOCUMENT_PICKER_MODAL,
 		},
 	},
-	{
-		type: 'entityAction',
-		kind: 'default',
-		alias: 'Umb.EntityAction.Document.CreateBlueprint',
-		name: 'Create Document Blueprint Entity Action',
-		weight: 1000,
-		api: () => import('./create-blueprint.action.js'),
-		forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
-		meta: {
-			icon: 'icon-blueprint',
-			label: 'Create Document Blueprint (TBD)',
-		},
-	},
 	{
 		type: 'entityAction',
 		alias: 'Umb.EntityAction.Document.Move',
@@ -116,6 +104,7 @@ const entityActions: Array<ManifestEntityAction> = [
 
 export const manifests = [
 	...createManifests,
+	...createBlueprintManifests,
 	...publicAccessManifests,
 	...cultureAndHostnamesManifests,
 	...sortChildrenOfManifests,