Merge pull request #504 from umbraco/feature/implement-umb-router-slot

use umb-router-slot

src/Umbraco.Web.UI.Client/libs/router/router-slot.element.ts

@@ -1,3 +1,4 @@
+import 'router-slot';
 import { LitElement, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { IRoute, RouterSlot } from 'router-slot';
@@ -7,6 +8,8 @@ import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/r
  *  @element umb-router-slot-element
  *  @description - Component for wrapping Router Slot element, providing some local events for implementation.
  *  @extends UmbRouterSlotElement
+ * @fires {UmbRouterSlotInitEvent} init - fires when the media card is selected
+ * @fires {UmbRouterSlotChangeEvent} change - fires when the media card is unselected
  */
 @customElement('umb-router-slot')
 export class UmbRouterSlotElement extends LitElement {
@@ -38,8 +41,11 @@ export class UmbRouterSlotElement extends LitElement {
 	constructor() {
 		super();
 		this.#router = document.createElement('router-slot');
+		// Note: I decided not to use the local changestate event, because it is not fired when the route is changed from any router-slot. And for now I wanted to keep it local.
+		//this.#router.addEventListener('changestate', this._onNavigationChanged);
 	}
 
+
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.#listening === false) {
@@ -54,6 +60,7 @@ export class UmbRouterSlotElement extends LitElement {
 		this.#listening = false;
 	}
 
+
 	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.firstUpdated(_changedProperties);
 		this._routerPath = this.#router.constructAbsolutePath('') || '';

src/Umbraco.Web.UI.Client/src/app.ts

@@ -9,7 +9,7 @@ import '@umbraco-ui/uui-modal-container';
 import '@umbraco-ui/uui-modal-dialog';
 import '@umbraco-ui/uui-modal-sidebar';
 import 'element-internals-polyfill';
-import 'router-slot';
+import '@umbraco-cms/router';
 
 import type { Guard, IRoute } from 'router-slot/model';
 
@@ -17,6 +17,7 @@ import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+
 import { UmbLitElement } from '@umbraco-cms/element';
 import { tryExecuteAndNotify } from '@umbraco-cms/resources';
 import { OpenAPI, RuntimeLevel, ServerResource } from '@umbraco-cms/backend-api';
@@ -151,7 +152,7 @@ export class UmbApp extends UmbLitElement {
 	}
 
 	render() {
-		return html`<router-slot id="router-slot" .routes=${this._routes}></router-slot>`;
+		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/created-packages-section-view.element.ts

@@ -54,7 +54,7 @@ export class UmbCreatedPackagesSectionViewElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<router-slot .routes=${this._routes}></router-slot>`;
+		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts

@@ -54,7 +54,7 @@ export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<router-slot .routes=${this._routes}></router-slot>`;
+		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts

@@ -6,6 +6,7 @@ import { UmbDashboardExamineIndexElement } from './views/section-view-examine-in
 import { UmbDashboardExamineSearcherElement } from './views/section-view-examine-searchers';
 
 import { UmbLitElement } from '@umbraco-cms/element';
+import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 
 @customElement('umb-dashboard-examine-management')
 export class UmbDashboardExamineManagementElement extends UmbLitElement {
@@ -46,28 +47,24 @@ export class UmbDashboardExamineManagementElement extends UmbLitElement {
 	];
 
 	@state()
-	private _currentPath?: string;
+	private _routerPath?: string;
 
-	/**
-	 *
-	 */
-	constructor() {
-		super();
-	}
+	@state()
+	private _activePath = '';
 
-	private _onRouteChange() {
-		this._currentPath = path();
-	}
-
-	private get backbutton(): boolean {
-		return !(this._currentPath?.endsWith('examine-management/'));
-	}
 
 	render() {
-		return html` ${this.backbutton
-				? html` <a href="section/settings/dashboard/examine-management"> &larr; Back to overview </a> `
+		return html` ${this._routerPath && this._activePath !== ''
+				? html` <a href=${this._routerPath}> &larr; Back to overview </a> `
 				: nothing}
-			<router-slot @changestate="${this._onRouteChange}" .routes=${this._routes}></router-slot>`;
+			<umb-router-slot
+				.routes=${this._routes}
+				@init=${(event: UmbRouterSlotInitEvent) => {
+					this._routerPath = event.target.absoluteRouterPath;
+				}}
+				@change=${(event: UmbRouterSlotChangeEvent) => {
+					this._activePath = event.target.localActiveViewPath || '';
+				}}></umb-router-slot>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/dashboard-health-check.element.ts

@@ -76,7 +76,7 @@ export class UmbDashboardHealthCheckElement extends UmbLitElement {
 	}
 
 	render() {
-		return html` <router-slot .routes=${this._routes}></router-slot>`;
+		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts

@@ -103,7 +103,7 @@ export class UmbCollectionElement extends UmbLitElement {
 		return html`
 			<umb-body-layout no-header-background>
 				<umb-collection-toolbar slot="header"></umb-collection-toolbar>
-				<router-slot id="router-slot" .routes="${this._routes}"></router-slot>
+				<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>
 				${this._selection && this._selection.length > 0
 					? html`<umb-collection-selection-actions slot="footer"></umb-collection-selection-actions>`
 					: nothing}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts

@@ -2,12 +2,12 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { state } from 'lit/decorators.js';
-import { IRoutingInfo } from 'router-slot';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
 import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context';
 import type { ManifestSection } from '@umbraco-cms/models';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { createExtensionElementOrFallback } from '@umbraco-cms/extensions-api';
+import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
 
 @defineElement('umb-backoffice-main')
 export class UmbBackofficeMain extends UmbLitElement {
@@ -67,9 +67,6 @@ export class UmbBackofficeMain extends UmbLitElement {
 			return {
 				path: this._routePrefix + section.meta.pathname,
 				component: () => createExtensionElementOrFallback(section, 'umb-section'),
-				setup: this._onRouteSetup,
-				// TODO: sometimes we can end up in a state where this callback doesn't get called. It could look like a bug in the router-slot.
-				// Niels: Could this be because _backofficeContext is not available at that state?
 			};
 		});
 
@@ -79,8 +76,8 @@ export class UmbBackofficeMain extends UmbLitElement {
 		});
 	}
 
-	private _onRouteSetup = (_component: HTMLElement, info: IRoutingInfo) => {
-		const currentPath = info.match.route.path;
+	private _onRouteChange = (event: UmbRouterSlotChangeEvent) => {
+		const currentPath = event.target.localActiveViewPath || ''
 		const section = this._sections.find((s) => this._routePrefix + s.meta.pathname === currentPath);
 		if (!section) return;
 		this._backofficeContext?.setActiveSectionAlias(section.alias);
@@ -97,7 +94,11 @@ export class UmbBackofficeMain extends UmbLitElement {
 	}
 
 	render() {
-		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
+		return html`
+			<umb-router-slot
+				.routes=${this._routes}
+				@change=${this._onRouteChange}
+			></umb-router-slot>`;
 	}
 }
 

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

@@ -8,6 +8,7 @@ import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/exte
 import type { ManifestDashboard, ManifestDashboardCollection, ManifestWithMeta } from '@umbraco-cms/models';
 
 import { UmbLitElement } from '@umbraco-cms/element';
+import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 
 @customElement('umb-section-dashboards')
 export class UmbSectionDashboardsElement extends UmbLitElement {
@@ -41,14 +42,14 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 	@state()
 	private _dashboards?: Array<ManifestDashboard | ManifestDashboardCollection>;
 
-	@state()
-	private _currentDashboardPathname = '';
-
 	@state()
 	private _routes: Array<any> = [];
 
 	@state()
-	private _currentSectionPathname = '';
+	private _routerPath?: string;
+
+	@state()
+	private _activePath?: string;
 
 	private _currentSectionAlias?: string;
 	private _sectionContext?: UmbSectionContext;
@@ -69,9 +70,6 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 			this._currentSectionAlias = alias;
 			this._observeDashboards();
 		});
-		this.observe(this._sectionContext.pathname.pipe(first()), (pathname) => {
-			this._currentSectionPathname = pathname || '';
-		});
 	}
 
 	private _observeDashboards() {
@@ -108,7 +106,6 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 						return createExtensionElement(dashboard);
 					},
 					setup: (component: Promise<HTMLElement> | HTMLElement, info: IRoutingInfo) => {
-						this._currentDashboardPathname = info.match.route.path;
 						// When its using import, we get an element, when using createExtensionElement we get a Promise.
 						// TODO: this is a bit hacky, can we do it in a more appropriate way:
 						if ((component as any).then) {
@@ -135,9 +132,9 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 							${this._dashboards.map(
 								(dashboard) => html`
 									<uui-tab
-										href="${`section/${this._currentSectionPathname}/dashboard/${dashboard.meta.pathname}`}"
+										href="${this._routerPath}/${dashboard.meta.pathname}"
 										label=${dashboard.meta.label || dashboard.name}
-										?active="${dashboard.meta.pathname === this._currentDashboardPathname}"></uui-tab>
+										?active="${dashboard.meta.pathname === this._activePath}"></uui-tab>
 								`
 							)}
 						</uui-tab-group>
@@ -150,7 +147,16 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 		return html`
 			${this._renderNavigation()}
 			<uui-scroll-container id="scroll-container">
-				<router-slot id="router-slot" .routes="${this._routes}"></router-slot>
+				<umb-router-slot
+					id="router-slot"
+					.routes="${this._routes}"
+					@init=${(event: UmbRouterSlotInitEvent) => {
+						this._routerPath = event.target.absoluteRouterPath;
+					}}
+					@change=${(event: UmbRouterSlotChangeEvent) => {
+						this._activePath = event.target.localActiveViewPath;
+					}}
+				></umb-router-slot>
 			</uui-scroll-container>
 		`;
 	}

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

@@ -11,6 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/element';
 
 import './section-sidebar-menu/section-sidebar-menu.element.ts';
 import './section-views/section-views.element.ts';
+import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
 
 @customElement('umb-section')
 export class UmbSectionElement extends UmbLitElement {
@@ -173,9 +174,6 @@ export class UmbSectionElement extends UmbLitElement {
 				return {
 					path: 'view/' + view.meta.pathname,
 					component: () => createExtensionElement(view),
-					setup: () => {
-						this._sectionContext?.setActiveView(view);
-					},
 				};
 			}) ?? [];
 
@@ -187,6 +185,13 @@ 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`
 			${this._menuItems && this._menuItems.length > 0
@@ -199,7 +204,7 @@ export class UmbSectionElement extends UmbLitElement {
 			<umb-section-main>
 				${this._views && this._views.length > 0 ? html`<umb-section-views></umb-section-views>` : nothing}
 				${this._routes && this._routes.length > 0
-					? html`<router-slot id="router-slot" .routes="${this._routes}"></router-slot>`
+					? html`<umb-router-slot id="router-slot" .routes="${this._routes}" @change=${this._onRouteChange}></umb-router-slot>`
 					: nothing}
 				<slot></slot>
 			</umb-section-main>

src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts

@@ -2,6 +2,7 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import type { IRoute, IRoutingInfo } from 'router-slot';
+import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from '../../../users/user.store';
 import { umbExtensionsRegistry , createExtensionElement } from '@umbraco-cms/extensions-api';
 
 import './list-view-layouts/table/workspace-view-users-table.element';
@@ -9,7 +10,6 @@ import './list-view-layouts/grid/workspace-view-users-grid.element';
 import './workspace-view-users-selection.element';
 import './workspace-view-users-invite.element';
 import type { ManifestWorkspace, UserDetails } from '@umbraco-cms/models';
-import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from 'src/backoffice/users/users/user.store';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { DeepState } from '@umbraco-cms/observable-api';
 
@@ -128,7 +128,7 @@ export class UmbSectionViewUsersElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<router-slot .routes=${this._routes}></router-slot>`;
+		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts

@@ -220,7 +220,7 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 				</div>
 			</div>
 
-			<router-slot .routes=${this._routes}></router-slot>
+			<umb-router-slot .routes=${this._routes}></umb-router-slot>
 
 			${this._renderSelection()}
 		`;