custom column for types

This commit is contained in:
JesmoDev
2024-05-06 09:47:59 +02:00
parent ee0ae18d3b
commit b7d49290d8
2 changed files with 62 additions and 1 deletions

View File

@@ -0,0 +1,59 @@
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { html, nothing, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbMediaTypeItemRepository } from '@umbraco-cms/backoffice/media-type';
import { UmbDocumentTypeItemRepository } from '@umbraco-cms/backoffice/document-type';
@customElement('umb-webhook-table-content-type-column-layout')
export class UmbWebhookTableContentTypeColumnLayoutElement extends UmbLitElement {
@property({ attribute: false })
value?: { contentTypeName: string; contentTypes: Array<string> };
@state()
private _contentTypes = '';
#repository?: UmbDocumentTypeItemRepository | UmbMediaTypeItemRepository;
connectedCallback(): void {
super.connectedCallback();
this.#getContentTypes();
}
async #getContentTypes() {
switch (this.value?.contentTypeName) {
case 'Content':
this.#repository = new UmbDocumentTypeItemRepository(this);
break;
case 'Media':
this.#repository = new UmbMediaTypeItemRepository(this);
break;
}
if (this.value?.contentTypeName && this.#repository) {
const { data } = await this.#repository.requestItems(this.value.contentTypes);
this._contentTypes = data?.map((item) => item.name).join(', ') ?? '';
}
}
render() {
if (!this.value) return nothing;
return html`${this._contentTypes}`;
}
static styles = [
UmbTextStyles,
css`
:host {
white-space: nowrap;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
'umb-webhook-table-content-type-column-layout': UmbWebhookTableContentTypeColumnLayoutElement;
}
}

View File

@@ -9,6 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import './column-layouts/boolean/webhook-table-boolean-column-layout.element.js';
import './column-layouts/name/webhook-table-name-column-layout.element.js';
import './column-layouts/entity-actions/webhook-table-entity-actions-column-layout.element.js';
import './column-layouts/content-type/webhook-table-name-column-layout.element.js';
@customElement('umb-webhook-table-collection-view')
export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
@@ -40,6 +41,7 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
{
name: 'Types',
alias: 'types',
elementName: 'umb-webhook-table-content-type-column-layout',
},
{
name: '',
@@ -92,7 +94,7 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement {
},
{
columnAlias: 'types',
value: webhook.contentTypes,
value: { contentTypeName: webhook.events[0].eventType, contentTypes: webhook.contentTypes },
},
{
columnAlias: 'entityActions',