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

migrate UmbSectionContext to UmbContextAlias

Browse Source
This commit is contained in:
Jacob Overgaard
2023-01-17 16:24:47 +01:00
parent 0c22b4ee5f
commit fbc8928ecd
11 changed files with 35 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { css, html } from 'lit';
import { state } from 'lit/decorators.js';
import { IRoutingInfo } from 'router-slot';
import { UmbSectionStore, UMB_SECTION_STORE_CONTEXT_ALIAS } from '../section/section.store';
import { UmbSectionContext } from '../section/section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section/section.context';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type { ManifestSection } from '@umbraco-cms/models';
import { UmbSectionElement } from 'src/backoffice/shared/components/section/section.element';
@@ -93,7 +93,7 @@ export class UmbBackofficeMain extends UmbLitElement {
private _provideSectionContext(section: ManifestSection) {
if (!this._sectionContext) {
this._sectionContext = new UmbSectionContext(section);
this.provideContext('umbSectionContext', this._sectionContext);
this.provideContext(UMB_SECTION_CONTEXT_ALIAS, this._sectionContext);
} else {
this._sectionContext.setManifest(section);
}

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

@@ -3,7 +3,7 @@ import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { IRoutingInfo } from 'router-slot';
import { first, map } from 'rxjs';
import { UmbSectionContext } from '../section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type {
ManifestDashboard,
@@ -63,7 +63,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
constructor() {
super();
this.consumeContext('umbSectionContext', (context: UmbSectionContext) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (context) => {
this._sectionContext = context;
this._observeSectionContext();
});
@@ -73,7 +73,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
if (!this._sectionContext) return;
this.observe(this._sectionContext.manifest.pipe(first()), (section) => {
if(section) {
if (section) {
this._currentSectionAlias = section.alias;
this._currentSectionPathname = section.meta.pathname;
this._observeDashboards();
@@ -86,7 +86,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
this.observe(
umbExtensionsRegistry
?.extensionsOfTypes<(ManifestDashboard | ManifestDashboardCollection)>(['dashboard', 'dashboardCollection'])
?.extensionsOfTypes<ManifestDashboard | ManifestDashboardCollection>(['dashboard', 'dashboardCollection'])
.pipe(
map((extensions) =>
extensions.filter((extension) =>
@@ -104,7 +104,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
private _createRoutes() {
this._routes = [];
if(this._dashboards) {
if (this._dashboards) {
this._routes = this._dashboards.map((dashboard) => {
return {
path: `${dashboard.meta.pathname}`,

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

@@ -1,7 +1,7 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { manifests } from '../../../../documents/section.manifests';
import { UmbSectionContext } from '../section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context';
import type { UmbSectionDashboardsElement } from './section-dashboards.element';
import type { ManifestSection } from '@umbraco-cms/models';
import './section-dashboards.element';
@@ -14,7 +14,9 @@ export default {
id: 'umb-section-dashboards',
decorators: [
(story) =>
html` <umb-context-provider key="umbSectionContext" .value=${new UmbSectionContext(contentSectionManifest)}>
html` <umb-context-provider
key=${UMB_SECTION_CONTEXT_ALIAS.toString()}
.value=${new UmbSectionContext(contentSectionManifest)}>
${story()}
</umb-context-provider>`,
],

4
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts
View File

@@ -1,7 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbSectionContext } from '../section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context';
import { ManifestSidebarMenuItem } from '@umbraco-cms/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -19,7 +19,7 @@ export class UmbSectionSidebarMenuElement extends UmbLitElement {
constructor() {
super();
this.consumeContext('umbSectionContext', (instance) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (instance) => {
this._sectionContext = instance;
this._observeCurrentSection();
});

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

@@ -1,7 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbSectionContext } from '../section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context';
import type { ManifestSection } from '@umbraco-cms/models';
import '../../tree/context-menu/tree-context-menu.service';
@@ -39,7 +39,7 @@ export class UmbSectionSidebarElement extends UmbLitElement {
constructor() {
super();
this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeSectionContext();
});

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

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { EMPTY, map, of, Subscription, switchMap } from 'rxjs';
import { UmbSectionContext } from '../section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section.context';
import type { ManifestSectionView } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -44,7 +44,7 @@ export class UmbSectionViewsElement extends UmbLitElement {
constructor() {
super();
this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeViews();
this._observeActiveView();

6
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts
View File

@@ -1,10 +1,9 @@
import { BehaviorSubject } from 'rxjs';
import type { Entity, ManifestSection, ManifestSectionView, ManifestTree } from '@umbraco-cms/models';
import { UniqueBehaviorSubject } from '@umbraco-cms/observable-api';
import { UmbContextAlias } from '@umbraco-cms/context-api';
export class UmbSectionContext {
#manifest;
public readonly manifest;
@@ -25,7 +24,6 @@ export class UmbSectionContext {
this.manifest = this.#manifest.asObservable();
}
public setManifest(data: ManifestSection) {
this.#manifest.next({ ...data });
}
@@ -46,3 +44,5 @@ export class UmbSectionContext {
this._activeView.next(view);
}
}
export const UMB_SECTION_CONTEXT_ALIAS = new UmbContextAlias<UmbSectionContext>(UmbSectionContext.name);

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

@@ -4,7 +4,7 @@ import { customElement, state } from 'lit/decorators.js';
import { map, switchMap, EMPTY, of } from 'rxjs';
import { IRoutingInfo } from 'router-slot';
import type { UmbWorkspaceEntityElement } from '../workspace/workspace-entity-element.interface';
import { UmbSectionContext } from './section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from './section.context';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type { ManifestSectionView, ManifestWorkspace, ManifestSidebarMenuItem } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@@ -48,7 +48,7 @@ export class UmbSectionElement extends UmbLitElement {
constructor() {
super();
this.consumeContext('umbSectionContext', (instance) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (instance) => {
this._sectionContext = instance;
// TODO: currently they don't corporate, as they overwrite each other...
@@ -60,11 +60,9 @@ export class UmbSectionElement extends UmbLitElement {
private _observeMenuItems() {
if (!this._sectionContext) return;
this.observe(this._sectionContext?.manifest,
(section) => {
this._observeSidebarMenuItem(section?.alias);
}
);
this.observe(this._sectionContext?.manifest, (section) => {
this._observeSidebarMenuItem(section?.alias);
});
this.observe(umbExtensionsRegistry.extensionsOfType('workspace'), (workspaceExtensions) => {
this._workspaces = workspaceExtensions;
@@ -72,14 +70,12 @@ export class UmbSectionElement extends UmbLitElement {
});
}
private _observeSidebarMenuItem(sectionAlias?:string) {
if(sectionAlias) {
private _observeSidebarMenuItem(sectionAlias?: string) {
if (sectionAlias) {
this.observe(
umbExtensionsRegistry
?.extensionsOfType('sidebarMenuItem')
.pipe(
map((manifests) => manifests.filter((manifest) => manifest.meta.sections.includes(sectionAlias)))
),
?.extensionsOfType('sidebarMenuItem')
.pipe(map((manifests) => manifests.filter((manifest) => manifest.meta.sections.includes(sectionAlias)))),
(manifests) => {
this._menuItems = manifests;
this._createMenuRoutes();

4
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
View File

@@ -1,5 +1,5 @@
import { customElement, property, state } from 'lit/decorators.js';
import { UmbSectionContext } from '../../section/section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../../section/section.context';
import { UmbTreeContextMenuPageService } from '../context-menu/tree-context-menu-page.service';
import { UmbTreeContextMenuService } from '../context-menu/tree-context-menu.service';
import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
@@ -28,7 +28,7 @@ export default class UmbTreeItemActionElement extends UmbLitElement {
connectedCallback() {
super.connectedCallback();
this.consumeContext('umbSectionContext', (sectionContext) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeActiveTree();
this._observeActiveTreeItem();

4
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page-action-list.element.ts
View File

@@ -2,7 +2,7 @@ import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { map } from 'rxjs';
import { UmbSectionContext } from '../../section/section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../../section/section.context';
import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -41,7 +41,7 @@ export class UmbTreeContextMenuPageActionListElement extends UmbLitElement {
constructor() {
super();
this.consumeContext('umbSectionContext', (sectionContext) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeActiveTree();
this._observeActiveTreeItem();

4
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
View File

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { map, Observable } from 'rxjs';
import { repeat } from 'lit/directives/repeat.js';
import { UmbSectionContext } from '../section/section.context';
import { UmbSectionContext, UMB_SECTION_CONTEXT_ALIAS } from '../section/section.context';
import type { UmbTreeContextBase } from './tree.context';
import { UmbTreeContextMenuService } from './context-menu/tree-context-menu.service';
import type { Entity } from '@umbraco-cms/models';
@@ -82,7 +82,7 @@ export class UmbTreeItem extends UmbLitElement {
this._store = store;
});
this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
this.consumeContext(UMB_SECTION_CONTEXT_ALIAS, (sectionContext) => {
this._sectionContext = sectionContext;
this._observeSection();
this._observeActiveTreeItem();