Merge pull request #1903 from umbraco/chore/relation-types-ui-amends

Chore: Relation Types UI amends

src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts

@@ -10,6 +10,7 @@ const collectionManifest: ManifestCollection = {
 	kind: 'default',
 	alias: UMB_RELATION_TYPE_COLLECTION_ALIAS,
 	name: 'Relation Type Collection',
+	element: () => import('./relation-type-collection.element.js'),
 	meta: {
 		repositoryAlias: UMB_RELATION_TYPE_COLLECTION_REPOSITORY_ALIAS,
 	},

src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts

@@ -0,0 +1,19 @@
+import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
+
+const elementName = 'umb-relation-type-collection';
+@customElement(elementName)
+export class UmbRelationTypeCollectionElement extends UmbCollectionDefaultElement {
+	// NOTE: Returns empty toolbar, so to remove the header padding.
+	protected renderToolbar() {
+		return html``;
+	}
+}
+
+export default UmbRelationTypeCollectionElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbRelationTypeCollectionElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts

@@ -5,9 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 @customElement('umb-relation-type-root-workspace')
 export class UmbRelationTypeRootWorkspaceElement extends UmbLitElement {
 	render() {
-		return html`<umb-body-layout main-no-padding headline="Relations">
-			<umb-collection alias=${UMB_RELATION_TYPE_COLLECTION_ALIAS}></umb-collection>;
-		</umb-body-layout>`;
+		return html`
+			<umb-body-layout main-no-padding headline=${this.localize.term('relationType_relations')}>
+				<umb-collection alias=${UMB_RELATION_TYPE_COLLECTION_ALIAS}></umb-collection>;
+			</umb-body-layout>
+		`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts

@@ -34,6 +34,9 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp
 	@state()
 	_totalPages = 1;
 
+	@state()
+	_loading = false;
+
 	#workspaceContext?: typeof UMB_RELATION_TYPE_WORKSPACE_CONTEXT.TYPE;
 	#relationCollectionRepository = new UmbRelationCollectionRepository(this);
 	#paginationManager = new UmbPaginationManager();
@@ -73,6 +76,8 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp
 	}
 
 	async #requestRelations() {
+		this._loading = true;
+
 		const relationTypeUnique = this.#workspaceContext?.getUnique();
 		if (!relationTypeUnique) throw new Error('Relation type unique is required');
 
@@ -87,6 +92,7 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp
 		if (data) {
 			this._relations = data.items;
 			this.#paginationManager.setTotalItems(data.total);
+			this._loading = false;
 		}
 	}
 
@@ -164,6 +170,7 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp
 	}
 
 	#renderRelations() {
+		if (this._loading) return html`<uui-loader></uui-loader>`;
 		return html`
 			<div>
 				<umb-table .config=${this._tableConfig} .columns=${this._tableColumns} .items=${this._tableItems}></umb-table>
@@ -207,6 +214,10 @@ export class UmbRelationTypeDetailWorkspaceViewElement extends UmbLitElement imp
 				grid-template-columns: 1fr 350px;
 			}
 
+			uui-loader {
+				text-align: center;
+			}
+
 			uui-pagination {
 				margin-top: var(--uui-size-layout-1);
 				display: block;