Merge pull request #599 from umbraco/feature/section-paths

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts

@@ -1,6 +1,6 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { map, of } from 'rxjs';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section.context';
 import type { ManifestSectionView } from '@umbraco-cms/models';
@@ -32,11 +32,11 @@ export class UmbSectionViewsElement extends UmbLitElement {
 	@state()
 	private _views: Array<ManifestSectionView> = [];
 
-	@state()
-	private _routerFolder = '';
+	@property()
+	private routerPath?: string;
 
-	@state()
-	private _activeViewPathname?: string;
+	@property()
+	private activePath?: string;
 
 	private _sectionContext?: UmbSectionContext;
 	private _extensionsObserver?: UmbObserverController<ManifestSectionView[]>;
@@ -47,16 +47,9 @@ export class UmbSectionViewsElement extends UmbLitElement {
 		this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (sectionContext) => {
 			this._sectionContext = sectionContext;
 			this._observeViews();
-			this._observeActiveView();
 		});
 	}
 
-	connectedCallback(): void {
-		super.connectedCallback();
-		/* TODO: find a way to construct absolute urls */
-		this._routerFolder = window.location.pathname.split('/view')[0];
-	}
-
 	private _observeViews() {
 		if (!this._sectionContext) return;
 
@@ -82,18 +75,6 @@ export class UmbSectionViewsElement extends UmbLitElement {
 		}
 	}
 
-	private _observeActiveView() {
-		if (this._sectionContext) {
-			this.observe(
-				this._sectionContext?.activeViewPathname,
-				(pathname) => {
-					this._activeViewPathname = pathname;
-				},
-				'activeViewPathnameObserver'
-			);
-		}
-	}
-
 	render() {
 		return html` ${this._views.length > 0 ? html` <div id="header">${this._renderViews()}</div> ` : nothing} `;
 	}
@@ -107,8 +88,8 @@ export class UmbSectionViewsElement extends UmbLitElement {
 								(view: ManifestSectionView) => html`
 									<uui-tab
 										.label="${view.meta.label || view.name}"
-										href="${this._routerFolder}/view/${view.meta.pathname}"
-										?active="${this._activeViewPathname?.includes(view.meta.pathname)}">
+										href="${this.routerPath}/view/${view.meta.pathname}"
+										?active="${this.activePath === 'view/' + view.meta.pathname}">
 										<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
 										${view.meta.label || view.name}
 									</uui-tab>

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts

@@ -22,10 +22,6 @@ export class UmbSectionContext {
 	#activeTreeItem = new ObjectState<ActiveTreeItemType | undefined>(undefined);
 	public readonly activeTreeItem = this.#activeTreeItem.asObservable();
 
-	// TODO: what is the best context to put this in?
-	#activeViewPathname = new StringState(undefined);
-	public readonly activeViewPathname = this.#activeViewPathname.asObservable();
-
 	constructor(manifest: ManifestSection) {
 		this.setManifest(manifest);
 	}
@@ -46,10 +42,6 @@ export class UmbSectionContext {
 	public setActiveTreeItem(item?: ActiveTreeItemType) {
 		this.#activeTreeItem.next(item);
 	}
-
-	public setActiveView(view?: ManifestSectionView) {
-		this.#activeViewPathname.next(view?.meta.pathname);
-	}
 }
 
 export const UMB_SECTION_CONTEXT_TOKEN = new UmbContextToken<UmbSectionContext>('UmbSectionContext');

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts

@@ -4,7 +4,7 @@ import { customElement, state } from 'lit/decorators.js';
 import { map } from 'rxjs';
 import type { UmbWorkspaceEntityElement } from '../workspace/workspace-entity-element.interface';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from './section.context';
-import type { UmbRouterSlotChangeEvent, IRoutingInfo } from '@umbraco-cms/router';
+import type { UmbRouterSlotChangeEvent, IRoutingInfo, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 import type { ManifestSectionView, ManifestWorkspace, ManifestMenuSectionSidebarApp } from '@umbraco-cms/models';
 import { umbExtensionsRegistry, createExtensionElement } from '@umbraco-cms/extensions-api';
 import { UmbLitElement } from '@umbraco-cms/element';
@@ -43,6 +43,11 @@ export class UmbSectionElement extends UmbLitElement {
 	@state()
 	private _routes?: Array<any>;
 
+	@state()
+	private _routerPath?: string;
+	@state()
+	private _activePath?: string;
+
 	@state()
 	private _menus?: Array<ManifestMenuSectionSidebarApp>;
 
@@ -187,12 +192,14 @@ export class UmbSectionElement extends UmbLitElement {
 		}
 	}
 
+	/*
 	private _onRouteChange = (event: UmbRouterSlotChangeEvent) => {
 		const currentPath = event.target.localActiveViewPath;
 		const view = this._views?.find((view) => 'view/' + view.meta.pathname === currentPath);
 		if (!view) return;
 		this._sectionContext?.setActiveView(view);
 	};
+	*/
 
 	render() {
 		return html`
@@ -214,12 +221,21 @@ export class UmbSectionElement extends UmbLitElement {
 				  `
 				: nothing}
 			<umb-section-main>
-				${this._views && this._views.length > 0 ? html`<umb-section-views></umb-section-views>` : nothing}
+				${this._views && this._views.length > 0
+					? html`<umb-section-views
+							.routerPath=${this._routerPath}
+							.activePath=${this._activePath}></umb-section-views>`
+					: nothing}
 				${this._routes && this._routes.length > 0
 					? html`<umb-router-slot
 							id="router-slot"
 							.routes="${this._routes}"
-							@change=${this._onRouteChange}></umb-router-slot>`
+							@init=${(event: UmbRouterSlotInitEvent) => {
+								this._routerPath = event.target.absoluteRouterPath;
+							}}
+							@change=${(event: UmbRouterSlotChangeEvent) => {
+								this._activePath = event.target.localActiveViewPath || '';
+							}}></umb-router-slot>`
 					: nothing}
 				<slot></slot>
 			</umb-section-main>

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts

@@ -2,9 +2,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
 import { UmbVariantId } from '../../variants/variant-id.class';
 import { UmbWorkspacePropertyContext } from './workspace-property.context';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';