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

add specialised types to dashboards and sections

Browse Source
This commit is contained in:
Jacob Overgaard
2022-06-01 13:17:25 +02:00
parent 00b29f0173
commit 334f95bc7e
3 changed files with 92 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/Umbraco.Web.UI.Client/src/backoffice/backoffice-header-sections.element.ts
View File

@@ -1,14 +1,14 @@
import { Subscription } from 'rxjs';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { Subscription } from 'rxjs';
import { getUserSections } from '../core/api/fetcher';
import { UmbExtensionManifest } from '../core/extension';
import { UmbContextConsumerMixin } from '../core/context';
import { UmbExtensionManifestSection } from '../core/extension';
import { UmbRouteLocation, UmbRouter } from '../core/router';
import { UmbSectionContext } from '../section.context';
import { UmbContextConsumerMixin } from '../core/context';
@customElement('umb-backoffice-header-sections')
export class UmbBackofficeHeaderSections extends UmbContextConsumerMixin(LitElement) {
@@ -45,13 +45,13 @@ export class UmbBackofficeHeaderSections extends UmbContextConsumerMixin(LitElem
private _allowedSection: Array<string> = [];
@state()
private _sections: Array<UmbExtensionManifest> = [];
private _sections: Array<UmbExtensionManifestSection> = [];
@state()
private _visibleSections: Array<UmbExtensionManifest> = [];
private _visibleSections: Array<UmbExtensionManifestSection> = [];
@state()
private _extraSections: Array<UmbExtensionManifest> = [];
private _extraSections: Array<UmbExtensionManifestSection> = [];
@state()
private _currentSectionAlias = '';
@@ -61,9 +61,9 @@ export class UmbBackofficeHeaderSections extends UmbContextConsumerMixin(LitElem
private _sectionSubscription?: Subscription;
private _currentSectionSubscription?: Subscription;
private _locationSubscription?: Subscription;
private _location? : UmbRouteLocation;
private _location?: UmbRouteLocation;
constructor () {
constructor() {
super();
this.consumeContext('umbRouter', (_instance: UmbRouter) => {
@@ -83,8 +83,8 @@ export class UmbBackofficeHeaderSections extends UmbContextConsumerMixin(LitElem
this._open = !this._open;
}
private _handleTabClick(e: PointerEvent, section: UmbExtensionManifest) {
const tab = e.currentTarget as any;
private _handleTabClick(e: PointerEvent, section: UmbExtensionManifestSection) {
const tab = e.currentTarget as HTMLElement;
// TODO: we need to be able to prevent the tab from setting the active state
if (tab.id === 'moreTab') {
@@ -108,38 +108,37 @@ export class UmbBackofficeHeaderSections extends UmbContextConsumerMixin(LitElem
this._open = false;
}
private _useLocation () {
private _useLocation() {
this._locationSubscription?.unsubscribe();
this._locationSubscription = this._router?.location
.subscribe((location: UmbRouteLocation) => {
this._locationSubscription = this._router?.location.subscribe((location: UmbRouteLocation) => {
this._location = location;
});
}
private _useCurrentSection () {
private _useCurrentSection() {
this._currentSectionSubscription?.unsubscribe();
this._currentSectionSubscription = this._sectionContext?.getCurrent()
.subscribe(section => {
this._currentSectionSubscription = this._sectionContext?.getCurrent().subscribe((section) => {
this._currentSectionAlias = section.alias;
});
}
private async _useSections() {
this._sectionSubscription?.unsubscribe();
const { data } = await getUserSections({});
this._allowedSection = data.sections;
this._sectionSubscription = this._sectionContext?.getSections()
.subscribe((sectionExtensions: any) => {
this._sections = sectionExtensions.filter((section: any) => this._allowedSection.includes(section.alias));
this._visibleSections = this._sections;
const currentSectionAlias = this._sections.find(section => section.meta.pathname === this._location?.params?.section)?.alias;
if (!currentSectionAlias) return;
this._sectionContext?.setCurrent(currentSectionAlias);
});
this._sectionSubscription = this._sectionContext?.getSections().subscribe((sectionExtensions) => {
this._sections = sectionExtensions.filter((section) => this._allowedSection.includes(section.alias));
this._visibleSections = this._sections;
const currentSectionAlias = this._sections.find(
(section) => section.meta.pathname === this._location?.params?.section
)?.alias;
if (!currentSectionAlias) return;
this._sectionContext?.setCurrent(currentSectionAlias);
});
}
disconnectedCallback(): void {

86
src/Umbraco.Web.UI.Client/src/content/content-dashboards.element.ts
View File

@@ -2,8 +2,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { map, Subscription } from 'rxjs';
import { UmbContextConsumerMixin } from '../core/context';
import { UmbExtensionManifest, UmbExtensionRegistry } from '../core/extension';
import { UmbExtensionManifest, UmbExtensionManifestDashboard, UmbExtensionRegistry } from '../core/extension';
import { UmbRouteLocation, UmbRouter } from '../core/router';
@customElement('umb-content-dashboards')
@@ -18,7 +19,7 @@ export class UmbContentDashboards extends UmbContextConsumerMixin(LitElement) {
];
@state()
private _dashboards: Array<UmbExtensionManifest> = [];
private _dashboards: Array<UmbExtensionManifestDashboard> = [];
@state()
private _current = '';
@@ -47,49 +48,52 @@ export class UmbContentDashboards extends UmbContextConsumerMixin(LitElement) {
});
}
private _useLocation () {
private _useLocation() {
this._locationSubscription?.unsubscribe();
this._router?.location
.subscribe((location: UmbRouteLocation) => {
this._router?.location.subscribe((location: UmbRouteLocation) => {
this._location = location;
});
}
private _useDashboards () {
private _useDashboards() {
this._dashboardsSubscription?.unsubscribe();
this._dashboardsSubscription = this._extensionRegistry?.extensions
.pipe(
map((extensions: Array<UmbExtensionManifest>) => extensions
.filter(extension => extension.type === 'dashboard')
.sort((a: any, b: any) => b.meta.weight - a.meta.weight))
).subscribe(dashboards => {
// TODO: What do we want to use as path?
this._dashboards = dashboards;
const dashboardLocation = decodeURIComponent(this._location?.params?.dashboard);
const sectionLocation = this._location?.params?.section;
.pipe(
map((extensions) =>
extensions
.filter((extension) => extension.type === 'dashboard')
.map((x) => x as UmbExtensionManifestDashboard)
.sort((a, b) => b.meta.weight - a.meta.weight)
)
)
.subscribe((dashboards) => {
// TODO: What do we want to use as path?
this._dashboards = dashboards;
const dashboardLocation = decodeURIComponent(this._location?.params?.dashboard);
const sectionLocation = this._location?.params?.section;
// TODO: Temp redirect solution
if (dashboardLocation === 'undefined') {
this._router?.push(`/section/${sectionLocation}/dashboard/${this._dashboards[0].meta.pathname}`);
this._setCurrent(this._dashboards[0]);
return;
}
// TODO: Temp redirect solution
if (dashboardLocation === 'undefined') {
this._router?.push(`/section/${sectionLocation}/dashboard/${this._dashboards[0].meta.pathname}`);
this._setCurrent(this._dashboards[0]);
return;
}
const dashboard = this._dashboards.find(dashboard => dashboard.meta.pathname === dashboardLocation);
const dashboard = this._dashboards.find((dashboard) => dashboard.meta.pathname === dashboardLocation);
if (!dashboard) {
this._router?.push(`/section/${sectionLocation}/dashboard/${this._dashboards[0].meta.pathname}`);
this._setCurrent(this._dashboards[0]);
return;
}
if (!dashboard) {
this._router?.push(`/section/${sectionLocation}/dashboard/${this._dashboards[0].meta.pathname}`);
this._setCurrent(this._dashboards[0]);
return;
}
this._setCurrent(dashboard);
})
this._setCurrent(dashboard);
});
}
private _handleTabClick(e: PointerEvent, dashboard: UmbExtensionManifest) {
private _handleTabClick(_e: PointerEvent, dashboard: UmbExtensionManifestDashboard) {
// TODO: this could maybe be handled by an anchor tag
const section = this._location?.params?.section;
this._router?.push(`/section/${section}/dashboard/${dashboard.meta.pathname}`);
@@ -97,11 +101,11 @@ export class UmbContentDashboards extends UmbContextConsumerMixin(LitElement) {
}
// TODO: Temp outlet solution
private async _setCurrent (dashboard: UmbExtensionManifest) {
private async _setCurrent(dashboard: UmbExtensionManifest) {
if (typeof dashboard.js === 'function') {
await dashboard.js();
}
if (dashboard.elementName) {
const element = document.createElement(dashboard.elementName);
this._outlet = element;
@@ -119,15 +123,17 @@ export class UmbContentDashboards extends UmbContextConsumerMixin(LitElement) {
render() {
return html`
<uui-tab-group id="tabs">
${ this._dashboards.map(dashboard => html`
<uui-tab
label=${dashboard.name}
?active="${this._current === dashboard.name}"
@click="${(e: PointerEvent) => this._handleTabClick(e, dashboard)}"></uui-tab>
`)}
${this._dashboards.map(
(dashboard) => html`
<uui-tab
label=${dashboard.name}
?active="${this._current === dashboard.name}"
@click="${(e: PointerEvent) => this._handleTabClick(e, dashboard)}"></uui-tab>
`
)}
</uui-tab-group>
${ this._outlet }
`;
${this._outlet}
`;
}
}

38
src/Umbraco.Web.UI.Client/src/section.context.ts
View File

@@ -1,33 +1,37 @@
import { firstValueFrom, map, Observable, ReplaySubject } from 'rxjs';
import { UmbExtensionManifest, UmbExtensionRegistry } from './core/extension';
import { firstValueFrom, map, ReplaySubject } from 'rxjs';
import { UmbExtensionManifestSection, UmbExtensionRegistry } from './core/extension';
export class UmbSectionContext {
private _extensionRegistry!: UmbExtensionRegistry;
private _current: ReplaySubject<UmbExtensionManifest> = new ReplaySubject(1);
public readonly current: Observable<UmbExtensionManifest> = this._current.asObservable();
private _current = new ReplaySubject<UmbExtensionManifestSection>(1);
public readonly current = this._current.asObservable();
constructor(_extensionRegistry: UmbExtensionRegistry) {
this._extensionRegistry = _extensionRegistry;
}
getSections () {
return this._extensionRegistry.extensions
.pipe(
map((extensions: Array<UmbExtensionManifest>) => extensions
.filter(extension => extension.type === 'section')
.sort((a: any, b: any) => b.meta.weight - a.meta.weight))
);
getSections() {
return this._extensionRegistry.extensions.pipe(
map((extensions) =>
extensions
.filter((extension) => extension.type === 'section')
.map((extension) => extension as UmbExtensionManifestSection)
.sort((a, b) => b.meta.weight - a.meta.weight)
)
);
}
getCurrent () {
getCurrent() {
return this.current;
}
async setCurrent (sectionAlias: string) {
async setCurrent(sectionAlias: string) {
const sections = await firstValueFrom(this.getSections());
const matchedSection = sections.find(section => section.alias === sectionAlias) as UmbExtensionManifest;
this._current.next(matchedSection);
const matchedSection = sections.find((section) => section.alias === sectionAlias);
if (matchedSection) {
this._current.next(matchedSection);
}
}
}
}