diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts index 1d2cc270a2..fa2f027bca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/manifests.ts +++ b/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, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts new file mode 100644 index 0000000000..53fbc181bf --- /dev/null +++ b/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; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts index 61b0e50365..3a80fc0f81 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-root/relation-type-root-workspace.element.ts +++ b/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` - ; - `; + return html` + + ; + + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts index 66655f1cd7..a44e71b5f5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/views/relation-type-detail-workspace-view.element.ts +++ b/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``; return html`
@@ -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;