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

Wired up the data-type configuration for the Document Collection workspace-view and property-editor

Browse Source
This commit is contained in:
leekelleher
2024-02-14 12:20:17 +00:00
parent ef036f83e8
commit bb345f1aa6
2 changed files with 69 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts
View File

@@ -1,3 +1,7 @@
import type {
UmbCollectionBulkActionPermissions,
UmbCollectionConfiguration,
} from '../../../../core/collection/types.js';
import type { UmbPropertyEditorConfigCollection } from '../../config/index.js';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
@@ -12,24 +16,27 @@ export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement impl
value?: string;
@state()
pageSize = 0;
@state()
orderDirection = 'asc';
@state()
useInfiniteEditor = false;
private _config?: UmbCollectionConfiguration;
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this.pageSize = Number(config?.getValueByAlias('pageSize')) || 0;
this.orderDirection = config?.getValueByAlias('orderDirection') ?? 'asc';
this.useInfiniteEditor = config?.getValueByAlias('useInfiniteEditor') ?? false;
this._config = this.#mapDataTypeConfigToCollectionConfig(config);
}
#mapDataTypeConfigToCollectionConfig(
config: UmbPropertyEditorConfigCollection | undefined,
): UmbCollectionConfiguration {
return {
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,
};
}
render() {
// TODO: [LK] Figure out how to pass in the configuration to the collection view.
return html`<umb-collection alias="Umb.Collection.Document"></umb-collection>`;
return html`<umb-collection alias="Umb.Collection.Document" .config=${this._config}></umb-collection>`;
}
}

58
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/collection/document-workspace-view-collection.element.ts
View File

@@ -1,28 +1,70 @@
import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
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 { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-document-workspace-view-collection')
export class UmbDocumentWorkspaceViewCollectionElement extends UmbLitElement implements UmbWorkspaceViewElement {
#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
@state()
private _config?: UmbCollectionConfiguration;
#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
constructor() {
super();
this.#observeConfig();
}
async #observeConfig() {
this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#workspaceContext = workspaceContext;
this.observe(
workspaceContext.structure.ownerContentType(),
async (documentType) => {
if (!documentType) return;
// TODO: [LK] Get the `dataTypeId` and get the configuration for the collection view.
// TODO: [LK] Temp hard-coded. Once the API is ready, wire up the data-type ID from the content-type.
const dataTypeUnique = 'dt-collectionView';
if (dataTypeUnique) {
await this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique);
this.observe(
await this.#dataTypeDetailRepository.byUnique(dataTypeUnique),
(dataType) => {
if (!dataType) return;
this._config = this.#mapDataTypeConfigToCollectionConfig(
new UmbPropertyEditorConfigCollection(dataType.values),
);
},
'#observeConfig.dataType',
);
}
},
'#observeConfig.documentType',
);
});
}
render() {
return html`<umb-collection alias="Umb.Collection.Document"></umb-collection>`;
#mapDataTypeConfigToCollectionConfig(
config: UmbPropertyEditorConfigCollection | undefined,
): UmbCollectionConfiguration {
return {
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,
};
}
static styles = [UmbTextStyles, css``];
render() {
return html`<umb-collection alias="Umb.Collection.Document" .config=${this._config}></umb-collection>`;
}
}
export default UmbDocumentWorkspaceViewCollectionElement;