From 06c718d543f92e41ffdd0f7f4ec138a69a894208 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 6 Feb 2023 13:56:12 +0100
Subject: [PATCH] implement router-slot for dashboards

---
 .../section-dashboards.element.ts             | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
index 246928fb34..ca5442d022 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
+++ b/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">
-				<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-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>
 		`;
 	}