fix mocks for doc types

fix handler for doc types
update workspace context

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.server.data.ts

@@ -80,7 +80,7 @@ export class UmbDocumentTypeServerDataSource implements RepositoryDetailDataSour
 		// TODO: use resources when end point is ready:
 		return tryExecuteAndNotify<DocumentTypeModel>(
 			this.#host,
-			fetch('/umbraco/management/api/v1/document/save', {
+			fetch('/umbraco/management/api/v1/document-type', {
 				method: 'POST',
 				body: body,
 				headers: {
@@ -116,8 +116,8 @@ export class UmbDocumentTypeServerDataSource implements RepositoryDetailDataSour
 		// TODO: use resources when end point is ready:
 		return tryExecuteAndNotify<DocumentTypeModel>(
 			this.#host,
-			fetch('/umbraco/management/api/v1/document-type/save', {
-				method: 'POST',
+			fetch(`/umbraco/management/api/v1/document-type/${document.key}`, {
+				method: 'PUT',
 				body: body,
 				headers: {
 					'Content-Type': 'application/json',
@@ -141,8 +141,8 @@ export class UmbDocumentTypeServerDataSource implements RepositoryDetailDataSour
 		// TODO: use resources when end point is ready:
 		return tryExecuteAndNotify<DocumentTypeModel>(
 			this.#host,
-			fetch('/umbraco/management/api/v1/document-type/trash', {
-				method: 'POST',
+			fetch(`/umbraco/management/api/v1/document-type/${key}`, {
+				method: 'DELETE',
 				body: JSON.stringify([key]),
 				headers: {
 					'Content-Type': 'application/json',
@@ -167,8 +167,8 @@ export class UmbDocumentTypeServerDataSource implements RepositoryDetailDataSour
 		// TODO: use resources when end point is ready:
 		return tryExecuteAndNotify(
 			this.#host,
-			fetch('/umbraco/management/api/v1/document-type/trash', {
-				method: 'POST',
+			fetch(`/umbraco/management/api/v1/document-type/${key}`, {
+				method: 'DELETE',
 				body: JSON.stringify([key]),
 				headers: {
 					'Content-Type': 'application/json',

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts

@@ -1,35 +1,72 @@
-import { UmbEntityWorkspaceManager } from '../../../shared/components/workspace/workspace-context/entity-manager-controller';
 import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
 import { UmbWorkspaceEntityContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
-import { UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from '../repository/document-type.store';
+import { UmbDocumentTypeRepository } from '../repository/document-type.repository';
 import type { DocumentTypeModel } from '@umbraco-cms/backend-api';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { ObjectState } from '@umbraco-cms/observable-api';
 
+type EntityType = DocumentTypeModel;
 export class UmbWorkspaceDocumentTypeContext
 	extends UmbWorkspaceContext
-	implements UmbWorkspaceEntityContextInterface<DocumentTypeModel | undefined>
+	implements UmbWorkspaceEntityContextInterface<EntityType | undefined>
 {
-	#manager = new UmbEntityWorkspaceManager(this._host, 'document-type', UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN);
+	#host: UmbControllerHostInterface;
+	#repo: UmbDocumentTypeRepository;
 
-	public readonly data = this.#manager.state.asObservable();
-	public readonly name = this.#manager.state.getObservablePart((state) => state?.name);
+	#data = new ObjectState<EntityType | undefined>(undefined);
+	data = this.#data.asObservable();
+	name = this.#data.getObservablePart((data) => data?.name);
 
-	setName(name: string) {
-		this.#manager.state.update({ name: name });
+	constructor(host: UmbControllerHostInterface) {
+		super(host);
+		this.#host = host;
+		this.#repo = new UmbDocumentTypeRepository(this.#host);
 	}
-	setIcon(icon: string) {
-		this.#manager.state.update({ icon: icon });
-	}
-	getEntityType = this.#manager.getEntityType;
-	getUnique = this.#manager.getEntityKey;
-	getEntityKey = this.#manager.getEntityKey;
-	getStore = this.#manager.getStore;
-	getData = this.#manager.getData;
-	load = this.#manager.load;
-	create = this.#manager.create;
-	save = this.#manager.save;
-	destroy = this.#manager.destroy;
 
 	public setPropertyValue(alias: string, value: unknown) {
 		throw new Error('setPropertyValue is not implemented for UmbWorkspaceDocumentTypeContext');
 	}
+
+	getData() {
+		return this.#data.getValue();
+	}
+
+	getEntityKey() {
+		return this.getData()?.key || '';
+	}
+
+	getEntityType() {
+		return 'document-type';
+	}
+
+	setName(name: string) {
+		this.#data.update({ name });
+	}
+
+	// TODO => manage setting icon color
+	setIcon(icon: string) {
+		this.#data.update({ icon });
+	}
+
+	async load(entityKey: string) {
+		const { data } = await this.#repo.requestByKey(entityKey);
+		if (data) {
+			this.#data.next(data);
+		}
+	}
+
+	async createScaffold(parentKey: string | null) {
+		const { data } = await this.#repo.createDetailsScaffold(parentKey);
+		if (!data) return;
+		this.#data.next(data);
+	}
+
+	async save() {
+		if (!this.#data.value) return;
+		this.#repo.saveDetail(this.#data.value);
+	}
+
+	public destroy(): void {
+		this.#data.complete();
+	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts

@@ -28,6 +28,7 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements Um
 			#name {
 				width: 100%;
 				flex: 1 1 auto;
+				align-items: center;
 			}
 
 			#alias {
@@ -70,7 +71,7 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements Um
 	}
 
 	public create(parentKey: string | null) {
-		this._workspaceContext.create(parentKey);
+		this._workspaceContext.createScaffold(parentKey);
 	}
 
 	// TODO. find a way where we don't have to do this for all workspaces.
@@ -89,7 +90,6 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements Um
 
 		modalHandler?.onClose().then((saved) => {
 			if (saved) this._workspaceContext?.setIcon(saved.icon);
-			console.log(saved);
 			// TODO save color ALIAS as well
 		});
 	}
@@ -100,7 +100,7 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements Um
 				<div id="header" slot="header">
 					<uui-button id="icon" @click=${this._handleIconClick} compact>
 						<uui-icon
-							name="${this._documentType?.icon || 'umb:document-dashed-line'}"
+							name="${this._documentType?.icon || this._icon.name}"
 							style="color: ${this._icon.color}"></uui-icon>
 					</uui-button>
 

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/workspace-view-document-type-design.element.ts

@@ -7,7 +7,15 @@ import type { DocumentTypeModel } from '@umbraco-cms/backend-api';
 
 @customElement('umb-workspace-view-document-type-design')
 export class UmbWorkspaceViewDocumentTypeDesignElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-space-6);
+			}
+		`,
+	];
 
 	@state()
 	_documentType?: DocumentTypeModel;
@@ -33,7 +41,7 @@ export class UmbWorkspaceViewDocumentTypeDesignElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<div>Design of ${this._documentType?.name}</div>`;
+		return html`Design of ${this._documentType?.name}`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts

@@ -14,7 +14,7 @@ export const data: Array<DocumentTypeModel> = [
 		alias: 'blogPost',
 		name: 'Blog Post',
 		description: null,
-		icon: 'icon-item-arrangement',
+		icon: 'umb:item-arrangement',
 		allowedAsRoot: true,
 		variesByCulture: true,
 		variesBySegment: false,
@@ -573,7 +573,7 @@ export const data: Array<DocumentTypeModel> = [
 		alias: 'blogPost',
 		name: 'Blog Post',
 		description: null,
-		icon: 'icon-item-arrangement',
+		icon: 'umb:item-arrangement',
 		allowedAsRoot: true,
 		variesByCulture: true,
 		variesBySegment: false,
@@ -707,7 +707,7 @@ export const data: Array<DocumentTypeModel> = [
 		alias: 'masterPage',
 		name: 'Master Page',
 		description: null,
-		icon: 'icon-document',
+		icon: 'umb:document',
 		allowedAsRoot: false,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -755,7 +755,7 @@ export const data: Array<DocumentTypeModel> = [
 		alias: 'baseElementType',
 		name: 'Base Element Type',
 		description: null,
-		icon: 'icon-science',
+		icon: 'umb:science',
 		allowedAsRoot: false,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -799,6 +799,15 @@ export const data: Array<DocumentTypeModel> = [
 ];
 
 export const treeData: Array<DocumentTypeTreeItemModel> = [
+	{
+		name: 'All property editors document type',
+		type: 'document-type',
+		hasChildren: false,
+		key: 'all-property-editors-document-type-key',
+		isContainer: false,
+		parentKey: null,
+		icon: '',
+	},
 	{
 		name: 'Document Type 1',
 		type: 'document-type',
@@ -807,7 +816,7 @@ export const treeData: Array<DocumentTypeTreeItemModel> = [
 		isContainer: false,
 		parentKey: null,
 		icon: '',
-	},
+	},	
 	{
 		name: 'Document Type 2',
 		type: 'document-type',

src/Umbraco.Web.UI.Client/src/core/mocks/domains/document-type.handlers.ts

@@ -1,11 +1,10 @@
 import { rest } from 'msw';
 import { umbDocumentTypeData } from '../data/document-type.data';
 import type { DocumentTypeModel } from '@umbraco-cms/backend-api';
-import { umbracoPath } from '@umbraco-cms/utils';
 
 // TODO: add schema
 export const handlers = [
-	rest.post<DocumentTypeModel[]>('/umbraco/backoffice/document-type/save', (req, res, ctx) => {
+	rest.post<DocumentTypeModel[]>('/umbraco/management/api/v1/document-type/:key', (req, res, ctx) => {
 		const data = req.body;
 		if (!data) return;
 
@@ -46,7 +45,7 @@ export const handlers = [
 		return res(ctx.status(200), ctx.json(items));
 	}),
 
-	rest.get(umbracoPath('/document-type/:key'), (req, res, ctx) => {
+	rest.get('/umbraco/management/api/v1/document-type/:key', (req, res, ctx) => {
 		const key = req.params.key as string;
 		if (!key) return;
 

src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts

@@ -50,7 +50,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 			#icon-selection {
 				line-height: 0;
 				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(40px, 40px));
+				grid-template-columns: repeat(auto-fit, minmax(40px, calc(100% / 8)));
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;