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

Media section view: wired up the collection

Browse Source 
with the data-type configuration.
This commit is contained in:
leekelleher
2024-02-22 16:00:49 +00:00
parent 574559cb83
commit 5e4601f75a
2 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,9 +13,9 @@ export class UmbMediaCollectionServerDataSource implements UmbCollectionDataSour
}
async getCollection(query: UmbMediaCollectionFilterModel) {
// if (!query.dataTypeId) {
// throw new Error('Data type ID is required to fetch a collection.');
// }
if (!query.dataTypeId) {
throw new Error('Data type ID is required to fetch a collection.');
}
const params = {
id: query.unique ?? '',

97
src/Umbraco.Web.UI.Client/src/packages/media/media/section-view/media-section-view.element.ts
View File

@@ -1,48 +1,79 @@
import { UMB_MEDIA_COLLECTION_ALIAS } from '../collection/index.js';
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import type { UmbCollectionBulkActionPermissions, UmbCollectionConfiguration } from '../../../core/collection/types.js';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbCollectionElement } from '@umbraco-cms/backoffice/collection';
import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@customElement('umb-media-section-view')
export class UmbMediaSectionViewElement extends UmbLitElement {
#routes: UmbRoute[] = [
{
path: 'collection',
component: () => {
// TODO: [LK] Check if we can get the default data-type ID (for the Media ListView) from the server.
//private readonly defaultDataTypeId: string = '3a0156c4-3b8c-4803-bdc1-6871faa83fff';
private readonly defaultDataTypeUnique: string = 'dt-collectionView';
// TODO: [LK] Work-in-progress. Need to get the data-type configuration for the Media Collection.
const config = {
unique: '',
dataTypeId: '', //'3a0156c4-3b8c-4803-bdc1-6871faa83fff', //'dt-collectionView',
allowedEntityBulkActions: {
allowBulkCopy: true,
allowBulkDelete: true,
allowBulkMove: true,
allowBulkPublish: false,
allowBulkUnpublish: false,
#dataTypeUnique: string = this.defaultDataTypeUnique;
#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
@state()
private _routes?: UmbRoute[];
constructor() {
super();
this.#defineRoutes();
}
async #defineRoutes() {
await this.#dataTypeDetailRepository.requestByUnique(this.#dataTypeUnique);
this.observe(
await this.#dataTypeDetailRepository.byUnique(this.#dataTypeUnique),
(dataType) => {
if (!dataType) return;
const dataTypeConfig = this.#mapDataTypeConfigToCollectionConfig(dataType);
this._routes = [
{
path: 'collection',
component: () => {
const element = new UmbCollectionElement();
element.alias = UMB_MEDIA_COLLECTION_ALIAS;
element.config = dataTypeConfig;
return element;
},
},
orderBy: 'updateDate',
orderDirection: 'asc',
pageSize: 50,
useInfiniteEditor: false,
userDefinedProperties: undefined,
};
const element = new UmbCollectionElement();
element.alias = UMB_MEDIA_COLLECTION_ALIAS;
element.config = config;
return element;
{
path: '',
redirectTo: 'collection',
},
];
},
},
{
path: '',
redirectTo: 'collection',
},
];
'_observeConfigDataType',
);
}
#mapDataTypeConfigToCollectionConfig(dataType: UmbDataTypeDetailModel): UmbCollectionConfiguration {
const config = new UmbPropertyEditorConfigCollection(dataType.values);
return {
unique: '',
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() {
return html`<umb-router-slot id="router-slot" .routes=${this.#routes}></umb-router-slot>`;
if (!this._routes) return;
return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
}
static styles = [