From 2292d993e3d11a9b2804f9ce96850929c4824079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 16 Mar 2023 11:31:36 +0100 Subject: [PATCH 1/3] fix paths of section views --- .../section-views/section-views.element.ts | 34 +++++-------------- .../components/section/section.context.ts | 8 ----- .../components/section/section.element.ts | 22 ++++++++++-- 3 files changed, 27 insertions(+), 37 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts index 42d2f0cbd5..6f80c1f93d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts +++ b/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 = []; - @state() - private _routerFolder = ''; + @property() + private routerPath?: string; - @state() - private _activeViewPathname?: string; + @property() + private activePath?: string; private _sectionContext?: UmbSectionContext; private _extensionsObserver?: UmbObserverController; @@ -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` ` : nothing} `; } @@ -107,8 +88,9 @@ export class UmbSectionViewsElement extends UmbLitElement { (view: ManifestSectionView) => html` + href="${this.routerPath}/view/${view.meta.pathname}" + data-active=${this.activePath} + ?active="${this.activePath === 'view/' + view.meta.pathname}"> ${view.meta.label || view.name} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts index b46b979b94..2c4e8a4068 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts @@ -22,10 +22,6 @@ export class UmbSectionContext { #activeTreeItem = new ObjectState(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'); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts index 3548abb088..66f81f33d1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts @@ -2,9 +2,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { map } from 'rxjs'; +import type { UmbRouterSlotChangeEvent, IRoutingInfo, UmbRouterSlotInitEvent } from '@umbraco-cms/router'; 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 { 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; + @state() + private _routerPath?: string; + @state() + private _activePath?: string; + @state() private _menus?: Array; @@ -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} - ${this._views && this._views.length > 0 ? html`` : nothing} + ${this._views && this._views.length > 0 + ? html`` + : nothing} ${this._routes && this._routes.length > 0 ? html`` + @init=${(event: UmbRouterSlotInitEvent) => { + this._routerPath = event.target.absoluteRouterPath; + }} + @change=${(event: UmbRouterSlotChangeEvent) => { + this._activePath = event.target.localActiveViewPath || ''; + }}>` : nothing} From aac72b270cfa67e2b37d0b501d8fac59b4a62163 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 16 Mar 2023 11:31:47 +0100 Subject: [PATCH 2/3] remove test attr --- .../components/section/section-views/section-views.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts index 6f80c1f93d..76b3c4e96d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts @@ -89,7 +89,6 @@ export class UmbSectionViewsElement extends UmbLitElement { ${view.meta.label || view.name} From 15088a4c626e05730d564195232bc2be75a3bc4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 16 Mar 2023 11:33:00 +0100 Subject: [PATCH 3/3] fix lints --- .../src/backoffice/shared/components/section/section.element.ts | 2 +- .../components/workspace-property/workspace-property.element.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts index 66f81f33d1..02c6151310 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts @@ -2,9 +2,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { map } from 'rxjs'; -import type { UmbRouterSlotChangeEvent, IRoutingInfo, UmbRouterSlotInitEvent } from '@umbraco-cms/router'; import type { UmbWorkspaceEntityElement } from '../workspace/workspace-entity-element.interface'; import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from './section.context'; +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'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts index 6574b32776..f1be387b72 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts +++ b/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';