From b7d49290d8dc910dbba373f17f48134f518b7eda Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 6 May 2024 09:47:59 +0200
Subject: [PATCH] custom column for types

---
 ...ebhook-table-name-column-layout.element.ts | 59 +++++++++++++++++++
 .../webhook-table-collection-view.element.ts  |  4 +-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts
new file mode 100644
index 0000000000..c2de5ec6c6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts
@@ -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;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts
index 6445b032cd..c1170a0800 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts
@@ -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',