custom column for types
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user