From 6ea0ace7732ce63aaa0254ae3d203eb0704d6d93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 22 Dec 2022 13:13:24 +0100 Subject: [PATCH] dashboard-collection --- .../dashboard-collection.element.ts} | 35 ++++++++++--------- .../dashboard-collection.stories.ts | 15 ++++++++ .../dashboard-media-management.stories.ts | 15 -------- .../backoffice/sections/media/manifests.ts | 11 +++--- .../sections/media/section-media.element.ts | 2 +- .../section-dashboards.element.ts | 22 ++++++++---- ...workspace-view-media-collection.element.ts | 2 +- .../registry/extension.registry.ts | 7 ++++ .../dashboard-collection.models.ts | 14 ++++++++ .../src/core/extensions-registry/models.ts | 9 +++++ 10 files changed, 88 insertions(+), 44 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/dashboards/{media-management/dashboard-media-management.element.ts => collection/dashboard-collection.element.ts} (57%) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.stories.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/extensions-registry/dashboard-collection.models.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.element.ts similarity index 57% rename from src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.element.ts index 6a7f4d5f78..5cbb17a0d8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.element.ts @@ -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; + 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``; + return html``; } } -export default UmbDashboardMediaManagementElement; +export default UmbDashboardCollectionElement; declare global { interface HTMLElementTagNameMap { - 'umb-dashboard-media-management': UmbDashboardMediaManagementElement; + 'umb-dashboard-collection': UmbDashboardCollectionElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.stories.ts new file mode 100644 index 0000000000..ae18d8c2c6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/collection/dashboard-collection.stories.ts @@ -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 = () => + html` `; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.stories.ts deleted file mode 100644 index e087a26cb1..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.stories.ts +++ /dev/null @@ -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 = () => - html` `; -AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/manifests.ts index 6afd4d7d88..681aa137f6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/manifests.ts @@ -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 = [ +const dashboards: Array = [ { - 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' }, }, ]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/section-media.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/section-media.element.ts index 738e4a5071..21fce3cbe7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/section-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/media/section-media.element.ts @@ -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', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards/section-dashboards.element.ts index d4478a6358..e83bdecb99 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards/section-dashboards.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards/section-dashboards.element.ts @@ -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 = []; + private _dashboards: Array = []; @state() private _currentDashboardPathname = ''; @@ -82,10 +82,10 @@ export class UmbSectionDashboardsElement extends UmbContextConsumerMixin(UmbObse this.observe( 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, 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); + } }, }; }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/views/collection/workspace-view-media-collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/views/collection/workspace-view-media-collection.element.ts index da37fb91bd..091e427689 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/views/collection/workspace-view-media-collection.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/views/collection/workspace-view-media-collection.element.ts @@ -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'; diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts index 5f88e86be6..c91cdb7529 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-api/registry/extension.registry.ts @@ -77,6 +77,7 @@ export class UmbExtensionRegistry { extensionsOfType(type: 'workspace'): Observable>; extensionsOfType(type: 'treeItemAction'): Observable>; extensionsOfType(type: 'dashboard'): Observable>; + extensionsOfType(type: 'dashboardCollection'): Observable>; extensionsOfType(type: 'workspaceView'): Observable>; extensionsOfType(type: 'workspaceAction'): Observable>; extensionsOfType(type: 'propertyEditorUI'): Observable>; @@ -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> { + return this.extensions.pipe( + map((exts) => exts.filter((ext) => (types.indexOf(ext.type) !== -1)).sort((a, b) => (b.weight || 0) - (a.weight || 0))) + ); + } } diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/dashboard-collection.models.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/dashboard-collection.models.ts new file mode 100644 index 0000000000..de6d57e247 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/dashboard-collection.models.ts @@ -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 +} diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts index 8eb1f754fd..4f11a004a2 100644 --- a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts +++ b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts @@ -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;