From c0e9bd0b5b6ced893d69e03d8717bc77537a66ca Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 22 Feb 2024 17:12:12 +0000 Subject: [PATCH] Adds "media workspace collection view" --- .../detail/media-detail.server.data-source.ts | 6 +- .../media/media/workspace/manifests.ts | 37 ++++----- ...media-workspace-view-collection.element.ts | 83 +++++++++++++++++++ 3 files changed, 106 insertions(+), 20 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts index 2c7e93b6cc..1197797300 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts @@ -40,6 +40,7 @@ export class UmbMediaServerDataSource implements UmbDetailDataSource = [ - // { - // type: 'workspaceView', - // alias: 'Umb.WorkspaceView.Media.Collection', - // name: 'Media Workspace Collection View', - // element: () => import('./views/collection/media-collection-workspace-view.element.js'), - // weight: 300, - // meta: { - // label: 'Media', - // pathname: 'collection', - // icon: 'icon-grid', - // }, - // conditions: [ - // { - // alias: 'Umb.Condition.WorkspaceAlias', - // match: workspace.alias, - // }, - // ], - // }, + { + type: 'workspaceView', + alias: 'Umb.WorkspaceView.Media.Collection', + name: 'Media Workspace Collection View', + element: () => import('./views/collection/media-workspace-view-collection.element.js'), + weight: 300, + meta: { + label: 'Collection', + pathname: 'collection', + icon: 'icon-grid', + }, + conditions: [ + { + alias: UMB_MEDIA_WORKSPACE_HAS_COLLECTION_CONDITION, + }, + ], + }, { type: 'workspaceView', alias: 'Umb.WorkspaceView.Media.Edit', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts new file mode 100644 index 0000000000..bf0ff2caf6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts @@ -0,0 +1,83 @@ +import type { + UmbCollectionBulkActionPermissions, + UmbCollectionConfiguration, +} from '../../../../../core/collection/types.js'; +import { customElement, html, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type'; +import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UMB_MEDIA_COLLECTION_ALIAS, UMB_MEDIA_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/media'; +import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type'; +import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; + +@customElement('umb-media-workspace-view-collection') +export class UmbMediaWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement { + @state() + private _config?: UmbCollectionConfiguration; + + @state() + private _mediaUnique?: string; + + #dataTypeDetailRepository = new UmbDataTypeDetailRepository(this); + + constructor() { + super(); + this.#observeConfig(); + } + + async #observeConfig() { + this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (workspaceContext) => { + this.observe(workspaceContext.unique, (unique) => { + this._mediaUnique = unique; + }); + this.observe( + workspaceContext.structure.ownerContentType(), + async (mediaType) => { + if (!mediaType || !mediaType.collection) return; + + const dataTypeUnique = mediaType.collection.unique; + + if (dataTypeUnique) { + await this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique); + this.observe( + await this.#dataTypeDetailRepository.byUnique(dataTypeUnique), + (dataType) => { + if (!dataType) return; + this._config = this.#mapDataTypeConfigToCollectionConfig(dataType); + }, + '_observeConfigDataType', + ); + } + }, + '_observeConfigMediaType', + ); + }); + } + + #mapDataTypeConfigToCollectionConfig(dataType: UmbDataTypeDetailModel): UmbCollectionConfiguration { + const config = new UmbPropertyEditorConfigCollection(dataType.values); + return { + unique: this._mediaUnique, + dataTypeId: dataType.unique, + allowedEntityBulkActions: config?.getValueByAlias('bulkActionPermissions'), + orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate', + orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc', + pageSize: Number(config?.getValueByAlias('pageSize')) ?? 50, + useInfiniteEditor: config?.getValueByAlias('useInfiniteEditor') ?? false, + userDefinedProperties: config?.getValueByAlias('includeProperties'), + }; + } + + render() { + if (!this._config?.unique || !this._config?.dataTypeId) return html``; + return html``; + } +} + +export default UmbMediaWorkspaceViewCollectionElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-workspace-view-collection': UmbMediaWorkspaceViewCollectionElement; + } +}