binding corrections

Author: nielslyngsoe

src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts

@@ -181,19 +181,6 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 	// TODO: consider moving this to another class, to separate 'viewer' from 'manipulator':
 	/** Manipulate methods: */
 
-	/*
-		Only used by legacy implementation:
-		@deprecated
-	*/
-	/*
-	async addProperty(containerId?: string, sortOrder?: number) {
-		await this.#init;
-		if (!this.#structure) return;
-
-		return await this.#structure.createProperty(null, containerId, sortOrder);
-	}
-		*/
-
 	async insertProperty(property: UmbPropertyTypeModel, sortOrder?: number) {
 		await this.#init;
 		if (!this.#structure) return false;

src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts

@@ -19,8 +19,11 @@ import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffi
 import { type UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 
 import './content-type-design-editor-property.element.js';
-import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
-import { UMB_PROPERTY_TYPE_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/property-type';
+import {
+	UMB_CREATE_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN,
+	UMB_EDIT_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN,
+	UMB_PROPERTY_TYPE_WORKSPACE_MODAL,
+} from '@umbraco-cms/backoffice/property-type';
 
 const SORTER_CONFIG: UmbSorterConfig<UmbPropertyTypeModel, UmbContentTypeDesignEditorPropertyElement> = {
 	getUniqueOfElement: (element) => {
@@ -99,12 +102,13 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 		const oldValue = this._containerId;
 		if (value === oldValue) return;
 		this._containerId = value;
+		this.createAddPropertyRoute();
 		this.#propertyStructureHelper.setContainerId(value);
-		this.#addPropertyModal.setUniquePathValue('container-id', value === null ? 'root' : value);
+		this.#addPropertyModal?.setUniquePathValue('container-id', value === null ? 'root' : value);
 		this.requestUpdate('containerId', oldValue);
 	}
 
-	#addPropertyModal: UmbModalRouteRegistrationController;
+	#addPropertyModal?: UmbModalRouteRegistrationController;
 
 	#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbContentTypeModel>(this);
 
@@ -118,7 +122,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 	private _ownerContentType?: UmbContentTypeModel;
 
 	@state()
-	private _modalRouteBuilderNewProperty?: UmbModalRouteBuilder;
+	private _newPropertyPath?: string;
 
 	@state()
 	private _sortModeActive?: boolean;
@@ -158,11 +162,14 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 			this._propertyStructure = propertyStructure;
 			this.#sorter.setModel(this._propertyStructure);
 		});
+	}
 
+	createAddPropertyRoute() {
 		// Note: Route for adding a new property
+		this.#addPropertyModal?.destroy();
 		this.#addPropertyModal = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_TYPE_WORKSPACE_MODAL)
 			.addUniquePaths(['container-id'])
-			.addAdditionalPath('add-property/:sortOrder')
+			.addAdditionalPath('add-property')
 			.onSetup(async (params) => {
 				// TODO: Make a onInit promise, that can be awaited here.
 				if (!this._ownerContentType || this._containerId === undefined) return false;
@@ -179,7 +186,9 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 				return { data: { contentTypeUnique: this._ownerContentType.unique, preset } };
 			})
 			.observeRouteBuilder((routeBuilder) => {
-				this._modalRouteBuilderNewProperty = routeBuilder;
+				this._newPropertyPath =
+					routeBuilder({}) +
+					UMB_CREATE_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN.generateLocal({ containerUnique: this._containerId! });
 			});
 	}
 
@@ -209,7 +218,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 						() => html`
 							<uui-button
 								id="btn-add"
-								href=${ifDefined(this._modalRouteBuilderNewProperty?.({ sortOrder: -1 }))}
+								href=${ifDefined(this._newPropertyPath)}
 								label=${this.localize.term('contentTypeEditor_addProperty')}
 								look="placeholder"></uui-button>
 						`,

src/packages/core/property-type/workspace/constants.ts

@@ -1 +1,2 @@
 export const UMB_PROPERTY_TYPE_WORKSPACE_ALIAS = 'Umb.Workspace.PropertyType';
+export const UMB_PROPERTY_TYPE_ENTITY_TYPE = 'property-type';

src/packages/core/property-type/workspace/index.ts

@@ -1,2 +1,3 @@
 export * from './property-type-workspace.context-token.js';
 export * from './property-type-workspace.modal-token.js';
+export * from './paths.js';

src/packages/core/property-type/workspace/manifests.ts

@@ -1,4 +1,4 @@
-import { UMB_PROPERTY_TYPE_WORKSPACE_ALIAS } from './constants.js';
+import { UMB_PROPERTY_TYPE_ENTITY_TYPE, UMB_PROPERTY_TYPE_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -10,7 +10,7 @@ export const manifests: Array<ManifestTypes> = [
 		alias: UMB_PROPERTY_TYPE_WORKSPACE_ALIAS,
 		api: () => import('./property-type-workspace.context.js'),
 		meta: {
-			entityType: 'property-type',
+			entityType: UMB_PROPERTY_TYPE_ENTITY_TYPE,
 		},
 	},
 	{

src/packages/core/property-type/workspace/paths.ts

@@ -0,0 +1,15 @@
+import { UmbPathPattern } from '@umbraco-cms/backoffice/router';
+import { UMB_PROPERTY_TYPE_ENTITY_TYPE } from './constants';
+import { UMB_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/workspace';
+import { UMB_SETTINGS_SECTION_PATHNAME } from '@umbraco-cms/backoffice/settings';
+
+export const UMB_PROPERTY_TYPE_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
+	sectionName: UMB_SETTINGS_SECTION_PATHNAME,
+	entityType: UMB_PROPERTY_TYPE_ENTITY_TYPE,
+});
+
+export const UMB_CREATE_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{
+	containerUnique: string;
+}>('create/:containerUnique', UMB_PROPERTY_TYPE_WORKSPACE_PATH);
+
+export const UMB_EDIT_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{ unique: string }>('edit/:unique');

src/packages/core/property-type/workspace/property-type-workspace-editor.element.ts

@@ -2,19 +2,9 @@ import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from './property-type-workspace.c
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { customElement, css, html, state, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
-import type { UmbDocumentTypeItemModel } from '@umbraco-cms/backoffice/document-type';
-import { UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type';
-
 @customElement('umb-property-type-workspace-editor')
 export class UmbPropertyTypeWorkspaceEditorElement extends UmbLitElement {
 	//
-	#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
-		this,
-		UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
-		(x) => x.unique,
-	);
-
 	#workspaceContext?: typeof UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT.TYPE;
 
 	@state()
@@ -26,8 +16,11 @@ export class UmbPropertyTypeWorkspaceEditorElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT, (instance) => {
-			this.#workspaceContext = instance;
+		this.consumeContext(UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT, (context) => {
+			this.#workspaceContext = context;
+			this.observe(context.name, (name) => {
+				this._name = name;
+			});
 			this.#workspaceContext?.createPropertyDatasetContext(this);
 		});
 	}

src/packages/core/property-type/workspace/property-type-workspace.modal-token.ts

@@ -1,5 +1,6 @@
 import type { UmbWorkspaceModalData, UmbWorkspaceModalValue } from '@umbraco-cms/backoffice/modal';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { UMB_PROPERTY_TYPE_ENTITY_TYPE } from './constants';
 
 export interface UmbPropertyTypeWorkspaceData extends UmbWorkspaceModalData {
 	contentTypeUnique: string;
@@ -17,7 +18,7 @@ export const UMB_PROPERTY_TYPE_WORKSPACE_MODAL = new UmbModalToken<
 			type: 'sidebar',
 			size: 'small',
 		},
-		data: { entityType: 'property-type', preset: {}, contentTypeUnique: undefined as unknown as string },
+		data: { entityType: UMB_PROPERTY_TYPE_ENTITY_TYPE, preset: {}, contentTypeUnique: undefined as unknown as string },
 	},
 	// Recast the type, so the entityType data prop is not required:
 ) as UmbModalToken<Omit<UmbWorkspaceModalData, 'entityType'>, UmbWorkspaceModalValue>;

src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts

@@ -170,7 +170,7 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 	override render() {
 		return this._data
 			? html`
-					<uui-box>
+					<uui-box class="uui-text">
 						<div class="container">
 							<!-- TODO: Align styling across this and the property of document type workspace editor, or consider if this can go away for a different UX flow -->
 							<uui-input
@@ -331,9 +331,7 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 		UmbTextStyles,
 		css`
 			:host {
-				color: var(--uui-color-text);
-			}
-			#content {
+				display: block;
 				padding: var(--uui-size-layout-1);
 			}
 			#alias-input,