addendum implemented

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts

@@ -5,6 +5,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbEntityVariantModel, UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
+import { UmbRoutePathAddendumContext } from '@umbraco-cms/backoffice/router';
 
 export class UmbContentPropertyDatasetContext<
 	ContentModel extends UmbContentDetailModel = UmbContentDetailModel,
@@ -16,6 +17,7 @@ export class UmbContentPropertyDatasetContext<
 	UmbContentWorkspaceContext<ContentModel, ContentTypeModel, VariantModelType>
 > {
 	//
+	#pathAddendum = new UmbRoutePathAddendumContext(this);
 	#currentVariant = new UmbObjectState<VariantModelType | undefined>(undefined);
 	currentVariant = this.#currentVariant.asObservable();
 
@@ -47,6 +49,8 @@ export class UmbContentPropertyDatasetContext<
 		// The controller alias, is a very generic name cause we want only one of these for this controller host.
 		super(host, dataOwner, variantId);
 
+		this.#pathAddendum.setAddendum(variantId ? variantId.toString() : '');
+
 		this.observe(
 			this._dataOwner.variantById(this.getVariantId()),
 			async (variantInfo) => {

src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor.element.ts

@@ -148,6 +148,7 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
 					: ''}
 
 				<umb-router-slot
+					parse-addendum
 					.routes=${this._routes}
 					@init=${(event: UmbRouterSlotInitEvent) => {
 						this._routerPath = event.target.absoluteRouterPath;

src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts

@@ -20,6 +20,7 @@ import type {
 } from '@umbraco-cms/backoffice/content-type';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
+import { UmbRoutePathAddendumContext } from '@umbraco-cms/backoffice/router';
 
 /**
  *  @element umb-property
@@ -171,6 +172,7 @@ export class UmbPropertyElement extends UmbLitElement {
 	private _isReadOnly = false;
 
 	#propertyContext = new UmbPropertyContext(this);
+	#pathAddendum = new UmbRoutePathAddendumContext(this);
 
 	#controlValidator?: UmbFormControlValidator;
 	#validationMessageBinder?: UmbBindServerValidationToFormControl;
@@ -184,6 +186,7 @@ export class UmbPropertyElement extends UmbLitElement {
 			this.#propertyContext.alias,
 			(alias) => {
 				this._alias = alias;
+				this.#pathAddendum.setAddendum(alias);
 			},
 			null,
 		);

src/Umbraco.Web.UI.Client/src/packages/core/router/components/router-slot/router-slot.element.ts

@@ -21,6 +21,9 @@ export class UmbRouterSlotElement extends UmbLitElement {
 	#modalRouter: IRouterSlot = document.createElement('router-slot') as IRouterSlot;
 	#listening = false;
 
+	@property({ type: Boolean, attribute: 'parse-addendum', reflect: false })
+	public parseAddendum?: boolean;
+
 	@property({ attribute: false })
 	public get routes(): UmbRoute[] | undefined {
 		return this.#router.routes;
@@ -63,8 +66,6 @@ export class UmbRouterSlotElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		new UmbRoutePathAddendumResetContext(this);
-
 		this.#modalRouter.parent = this.#router;
 		this.#modalRouter.style.display = 'none';
 		this.#router.addEventListener('changestate', this._updateRouterPath.bind(this));
@@ -80,6 +81,10 @@ export class UmbRouterSlotElement extends UmbLitElement {
 	}
 
 	override connectedCallback() {
+		if (this.parseAddendum !== true) {
+			new UmbRoutePathAddendumResetContext(this);
+		}
+
 		super.connectedCallback();
 		// Currently we have to set this every time as RouteSlot looks for its parent every-time it is connected. Aka it has not way to explicitly set the parent.
 		// And we cannot insert the modal router as a slotted-child of the router, as it flushes its children on every route change.

src/Umbraco.Web.UI.Client/src/packages/core/router/contexts/route-path-addendum.context.ts

@@ -8,33 +8,35 @@ export class UmbRoutePathAddendumContext
 	extends UmbContextBase<UmbRoutePathAddendum, typeof UMB_ROUTE_PATH_ADDENDUM_CONTEXT>
 	implements UmbRoutePathAddendum
 {
-	#parentAddendum?: string;
-	#currentAddendum?: string;
+	#parent?: string;
+	#current?: string;
 
-	#pathAddendum = new UmbStringState(undefined);
-	readonly addendum = this.#pathAddendum.asObservable();
+	#addendum = new UmbStringState(undefined);
+	readonly addendum = this.#addendum.asObservable();
 
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_ROUTE_PATH_ADDENDUM_CONTEXT);
 
 		this.consumeContext(UMB_ROUTE_PATH_ADDENDUM_CONTEXT, (context) => {
 			this.observe(context.addendum, (addendum) => {
-				this.#parentAddendum = addendum;
+				this.#parent = addendum;
+				console.log('parent addendum', addendum, (context as any).getHostElement());
 				this.#update();
 			});
 		}).skipHost();
 	}
 
-	setAddendum(addendum: string) {
-		this.#currentAddendum = addendum;
+	setAddendum(addendum: string | undefined) {
+		this.#current = addendum;
 		this.#update();
 	}
 
 	#update() {
-		if (this.#parentAddendum === undefined || this.#currentAddendum === undefined) {
+		if (this.#parent === undefined || this.#current === undefined) {
 			return;
 		}
-		const base = this.#parentAddendum === '' ? this.#parentAddendum : this.#parentAddendum + '/';
-		this.#pathAddendum.setValue(base + this.#currentAddendum);
+		// if none of the strings are empty strings, then we should add a slash in front of the currentAddendum. So we get one in between.
+		const add = this.#current === '' || this.#parent === '' ? this.#current : '/' + this.#current;
+		this.#addendum.setValue(this.#parent + add);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/router/modal-registration/modal-route-registration.controller.ts

@@ -9,7 +9,6 @@ import type {
 	UmbModalToken,
 } from '@umbraco-cms/backoffice/modal';
 import type { UmbControllerAlias, UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import type { UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -153,6 +153,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 		if (!this._routes || this._routes.length === 0) return nothing;
 		return html`
 			<umb-router-slot
+				parse-addendum
 				id="router-slot"
 				.routes=${this._routes}
 				@init=${(event: UmbRouterSlotInitEvent) => {

src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts

@@ -53,18 +53,18 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 
 	@property()
 	public set alias(value: string | undefined) {
-		this.#linkPickerModal.setUniquePathValue('propertyAlias', value);
+		//this.#linkPickerModal.setUniquePathValue('propertyAlias', value);
 	}
 	public get alias(): string | undefined {
-		return this.#linkPickerModal.getUniquePathValue('propertyAlias');
+		return undefined; //this.#linkPickerModal.getUniquePathValue('propertyAlias');
 	}
 
 	@property()
 	public set variantId(value: string | UmbVariantId | undefined) {
-		this.#linkPickerModal.setUniquePathValue('variantId', value?.toString());
+		//this.#linkPickerModal.setUniquePathValue('variantId', value?.toString());
 	}
 	public get variantId(): string | undefined {
-		return this.#linkPickerModal.getUniquePathValue('variantId');
+		return undefined; //this.#linkPickerModal.getUniquePathValue('variantId');
 	}
 
 	/**
@@ -176,7 +176,6 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 
 		this.#linkPickerModal = new UmbModalRouteRegistrationController(this, UMB_LINK_PICKER_MODAL)
 			.addAdditionalPath(`:index`)
-			.addUniquePaths(['propertyAlias', 'variantId'])
 			.onSetup((params) => {
 				// Get index:
 				const indexParam = params.index;