yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement router-slot for dashboards

Browse Source
This commit is contained in:
Niels Lyngsø
2023-02-06 13:56:12 +01:00
parent 2fb728692e
commit 06c718d543
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
`;
}