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

implement usage of umb-router-slot

Browse Source
This commit is contained in:
Niels Lyngsø
2023-02-06 13:33:36 +01:00
parent 279f82ae26
commit c95e3854be
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,20 +48,23 @@ export class UmbDashboardExamineManagementElement extends UmbLitElement {
@state()
private _routerPath?: string;
private _activePath?: string;
@state()
private _activePath = '';
render() {
return html` ${this._activePath !== ''
? html` <a href="${this._routerPath}/examine-management/"> &larr; Back to overview </a> `
return html` ${this._routerPath && this._activePath !== ''
? html` <a href=${this._routerPath}> &larr; Back to overview </a> `
: nothing}
<umb-router-slot
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
console.log("init", event.target.absoluteRouterPath)
this._routerPath = event.target.absoluteRouterPath;
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
this._activePath = event.target.localActiveViewPath;
this._activePath = event.target.localActiveViewPath || '';
}}></umb-router-slot>`;
}
}

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

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