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

Adds "media workspace collection view"

Browse Source
This commit is contained in:
leekelleher
2024-02-22 17:12:12 +00:00
parent ddda3d18f3
commit c0e9bd0b5b
3 changed files with 106 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts
View File

@@ -40,6 +40,7 @@ export class UmbMediaServerDataSource implements UmbDetailDataSource<UmbMediaDet
urls: [],
mediaType: {
unique: mediaType.unique,
collection: mediaType.collection || null,
},
isTrashed: false,
values: [],
@@ -89,7 +90,10 @@ export class UmbMediaServerDataSource implements UmbDetailDataSource<UmbMediaDet
};
}),
urls: data.urls,
mediaType: { unique: data.mediaType.id },
mediaType: {
unique: data.mediaType.id,
collection: data.mediaType.collection || null,
},
isTrashed: data.isTrashed,
};

37
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
View File

@@ -1,4 +1,4 @@
import { UMB_MEDIA_DETAIL_REPOSITORY_ALIAS } from '../repository/index.js';
import { UMB_MEDIA_WORKSPACE_HAS_COLLECTION_CONDITION } from '../conditions/media-workspace-has-collection.condition.js';
import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
import type {
ManifestWorkspace,
@@ -18,24 +18,23 @@ const workspace: ManifestWorkspace = {
};
const workspaceViews: Array<ManifestWorkspaceView> = [
// {
// 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',

83
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/collection/media-workspace-view-collection.element.ts Normal file
View File

@@ -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<UmbCollectionBulkActionPermissions>('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`<uui-loader></uui-loader>`;
return html`<umb-collection .alias=${UMB_MEDIA_COLLECTION_ALIAS} .config=${this._config}></umb-collection>`;
}
}
export default UmbMediaWorkspaceViewCollectionElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-workspace-view-collection': UmbMediaWorkspaceViewCollectionElement;
}
}