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

dashboard-collection

Browse Source
This commit is contained in:
Niels Lyngsø
2022-12-22 13:13:24 +01:00
parent 7c989d0251
commit 6ea0ace773
10 changed files with 88 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.element.ts
View File

@@ -1,16 +1,16 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { customElement, state } from 'lit/decorators.js';
import '../../components/collection/collection.element';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbMediaStore, UmbMediaStoreItemType } from '@umbraco-cms/stores/media/media.store';
import { UmbCollectionContext } from '@umbraco-cms/components/collection/collection.context';
import type { ManifestDashboardCollection } from '@umbraco-cms/models';
@customElement('umb-dashboard-media-management')
export class UmbDashboardMediaManagementElement extends UmbContextProviderMixin(
UmbContextConsumerMixin(UmbObserverMixin(LitElement))
) {
@customElement('umb-dashboard-collection')
export class UmbDashboardCollectionElement extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbObserverMixin(LitElement))) {
static styles = [
UUITextStyles,
css`
@@ -27,19 +27,22 @@ export class UmbDashboardMediaManagementElement extends UmbContextProviderMixin(
private _collectionContext?:UmbCollectionContext<UmbMediaStoreItemType, UmbMediaStore>;
public manifest!: ManifestDashboardCollection;
constructor() {
super();
this._collectionContext = new UmbCollectionContext(this, null, 'umbMediaStore');
this.provideContext('umbCollectionContext', this._collectionContext);
// TODO: subscribe selection.
}
@state()
private _entityType?:string;
connectedCallback(): void {
super.connectedCallback();
if(!this._collectionContext) {
const manifestMeta = (this.manifest.meta as any);
this._entityType = manifestMeta.entityType as string;
this._collectionContext = new UmbCollectionContext(this, null, manifestMeta.storeAlias);
this.provideContext('umbCollectionContext', this._collectionContext);
}
// TODO: avoid this connection, our own approach on Lit-Controller could be handling this case.
this._collectionContext?.connectedCallback();
}
@@ -52,14 +55,14 @@ export class UmbDashboardMediaManagementElement extends UmbContextProviderMixin(
render() {
return html`<umb-collection entityType="media"></umb-collection>`;
return html`<umb-collection entityType=${ifDefined(this._entityType)}></umb-collection>`;
}
}
export default UmbDashboardMediaManagementElement;
export default UmbDashboardCollectionElement;
declare global {
interface HTMLElementTagNameMap {
'umb-dashboard-media-management': UmbDashboardMediaManagementElement;
'umb-dashboard-collection': UmbDashboardCollectionElement;
}
}

15
src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbDashboardCollectionElement } from './dashboard-collection.element';
import './dashboard-collection.element';
export default {
title: 'Dashboards/Media Management',
component: 'umb-dashboard-collection',
id: 'umb-dashboard-collection',
} as Meta;
export const AAAOverview: Story<UmbDashboardCollectionElement> = () =>
html` <umb-dashboard-collection></umb-dashboard-collection>`;
AAAOverview.storyName = 'Overview';

15
src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.stories.ts
View File

@@ -1,15 +0,0 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbDashboardMediaManagementElement } from './dashboard-media-management.element';
import './dashboard-media-management.element';
export default {
title: 'Dashboards/Media Management',
component: 'umb-dashboard-media-management',
id: 'umb-dashboard-media-management',
} as Meta;
export const AAAOverview: Story<UmbDashboardMediaManagementElement> = () =>
html` <umb-dashboard-media-management></umb-dashboard-media-management>`;
AAAOverview.storyName = 'Overview';

11
src/Umbraco.Web.UI.Client/src/backoffice/sections/media/manifests.ts
View File

@@ -1,4 +1,4 @@
import type { ManifestDashboard, ManifestSection } from '@umbraco-cms/models';
import type { ManifestDashboardCollection, ManifestSection } from '@umbraco-cms/models';
const sectionAlias = 'Umb.Section.Media';
@@ -13,17 +13,18 @@ const section: ManifestSection = {
},
};
const dashboards: Array<ManifestDashboard> = [
const dashboards: Array<ManifestDashboardCollection> = [
{
type: 'dashboard',
alias: 'Umb.Dashboard.MediaManagement',
type: 'dashboardCollection',
alias: 'Umb.Dashboard.MediaCollection',
name: 'Media Dashboard',
loader: () => import('../../dashboards/media-management/dashboard-media-management.element'),
weight: 10,
meta: {
label: 'Media',
sections: [sectionAlias],
pathname: 'media-management',
entityType: 'media',
storeAlias: 'umbMediaStore'
},
},
];

2
src/Umbraco.Web.UI.Client/src/backoffice/sections/media/section-media.element.ts
View File

@@ -19,7 +19,7 @@ export class UmbSectionMedia extends LitElement {
type: 'dashboard',
alias: 'Umb.Dashboard.MediaManagement',
name: 'Media Dashboard',
loader: () => import('../../dashboards/media-management/dashboard-media-management.element'),
loader: () => import('../../dashboards/collection/dashboard-collection.element'),
weight: 10,
meta: {
label: 'Media',

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

@@ -7,7 +7,7 @@ import { UmbSectionContext } from '../section.context';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import type { ManifestDashboard, ManifestSection } from '@umbraco-cms/models';
import type { ManifestDashboard, ManifestDashboardCollection, ManifestSection, ManifestWithMeta } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@customElement('umb-section-dashboards')
@@ -44,7 +44,7 @@ export class UmbSectionDashboardsElement extends UmbContextConsumerMixin(UmbObse
];
@state()
private _dashboards: Array<ManifestDashboard> = [];
private _dashboards: Array<ManifestDashboard | ManifestDashboardCollection> = [];
@state()
private _currentDashboardPathname = '';
@@ -82,10 +82,10 @@ export class UmbSectionDashboardsElement extends UmbContextConsumerMixin(UmbObse
this.observe<ManifestDashboard[]>(
umbExtensionsRegistry
?.extensionsOfType('dashboard')
?.extensionsOfTypes(['dashboard', 'dashboardCollection'])
.pipe(
map((extensions) =>
extensions.filter((extension) => extension.meta.sections.includes(this._currentSectionAlias))
extensions.filter((extension) => (extension as ManifestWithMeta).meta.sections.includes(this._currentSectionAlias))
)
),
(dashboards) => {
@@ -102,9 +102,19 @@ export class UmbSectionDashboardsElement extends UmbContextConsumerMixin(UmbObse
this._routes = this._dashboards.map((dashboard) => {
return {
path: `${dashboard.meta.pathname}`,
component: () => createExtensionElement(dashboard),
setup: (_element: ManifestDashboard, info: IRoutingInfo) => {
component: () => {
if (dashboard.type === 'dashboardCollection') {
return import('src/backoffice/dashboards/collection/dashboard-collection.element');
}
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.
(component as any).manifest = dashboard;
if((component as any).then) {
(component as any).then((el: any) => el.manifest = dashboard);
}
},
};
});

2
src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/views/collection/workspace-view-media-collection.element.ts
View File

@@ -8,7 +8,7 @@ import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import type { DocumentDetails, MediaDetails } from '@umbraco-cms/models';
import 'src/backoffice/components/content-property/content-property.element';
import 'src/backoffice/dashboards/media-management/dashboard-media-management.element';
import 'src/backoffice/dashboards/collection/dashboard-collection.element';
import { UmbCollectionContext } from '@umbraco-cms/components/collection/collection.context';
import { UmbMediaStore, UmbMediaStoreItemType } from '@umbraco-cms/stores/media/media.store';

7
src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts
View File

@@ -77,6 +77,7 @@ export class UmbExtensionRegistry {
extensionsOfType(type: 'workspace'): Observable<Array<ManifestWorkspace>>;
extensionsOfType(type: 'treeItemAction'): Observable<Array<ManifestTreeItemAction>>;
extensionsOfType(type: 'dashboard'): Observable<Array<ManifestDashboard>>;
extensionsOfType(type: 'dashboardCollection'): Observable<Array<ManifestDashboard>>;
extensionsOfType(type: 'workspaceView'): Observable<Array<ManifestWorkspaceView>>;
extensionsOfType(type: 'workspaceAction'): Observable<Array<ManifestWorkspaceAction>>;
extensionsOfType(type: 'propertyEditorUI'): Observable<Array<ManifestPropertyEditorUI>>;
@@ -94,4 +95,10 @@ export class UmbExtensionRegistry {
map((exts) => exts.filter((ext) => ext.type === type).sort((a, b) => (b.weight || 0) - (a.weight || 0)))
);
}
extensionsOfTypes(types: string[]): Observable<Array<ManifestTypes>> {
return this.extensions.pipe(
map((exts) => exts.filter((ext) => (types.indexOf(ext.type) !== -1)).sort((a, b) => (b.weight || 0) - (a.weight || 0)))
);
}
}

14
src/Umbraco.Web.UI.Client/src/core/extensions-registry/dashboard-collection.models.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { ManifestBase } from './models';
export interface ManifestDashboardCollection extends ManifestBase {
type: 'dashboardCollection';
meta: MetaDashboardCollection;
}
export interface MetaDashboardCollection {
sections: string[];
pathname: string;
label?: string;
entityType: string,
storeAlias: string
}

9
src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts
View File

@@ -8,6 +8,7 @@ import type { ManifestWorkspaceAction } from './workspace-action.models';
import type { ManifestWorkspaceView } from './workspace-view.models';
import type { ManifestPropertyEditorUI, ManifestPropertyEditorModel } from './property-editor.models';
import type { ManifestDashboard } from './dashboard.models';
import type { ManifestDashboardCollection } from './dashboard-collection.models';
import type { ManifestUserDashboard } from './user-dashboard.models';
import type { ManifestPropertyAction } from './property-action.models';
import type { ManifestPackageView } from './package-view.models';
@@ -25,6 +26,7 @@ export * from './workspace-action.models';
export * from './workspace-view.models';
export * from './property-editor.models';
export * from './dashboard.models';
export * from './dashboard-collection.models';
export * from './user-dashboard.models';
export * from './property-action.models';
export * from './package-view.models';
@@ -44,6 +46,7 @@ export type ManifestTypes =
| ManifestPropertyEditorUI
| ManifestPropertyEditorModel
| ManifestDashboard
| ManifestDashboardCollection
| ManifestUserDashboard
| ManifestPropertyAction
| ManifestPackageView
@@ -65,6 +68,7 @@ export type ManifestStandardTypes =
| 'propertyEditorUI'
| 'propertyEditorModel'
| 'dashboard'
| 'dashboardCollection'
| 'user-dashboard'
| 'propertyAction'
| 'packageView'
@@ -82,6 +86,7 @@ export type ManifestElementType =
| ManifestPropertyAction
| ManifestPropertyEditorUI
| ManifestDashboard
| ManifestDashboardCollection
| ManifestUserDashboard
| ManifestWorkspaceView
| ManifestWorkspaceAction
@@ -110,6 +115,10 @@ export interface ManifestCustom extends ManifestBase {
meta?: any;
}
export interface ManifestWithMeta extends ManifestBase {
meta: any;
}
export interface ManifestEntrypoint extends ManifestBase {
type: 'entrypoint';
js: string;