yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored the loading state

Browse Source 
It previously caused a bug with the sort ordering feature.
Because the `<umb-table>` was being removed from the DOM.
It now uses an alternative loading bar.
This commit is contained in:
leekelleher
2024-04-30 16:52:21 +01:00
parent 4410c76aac
commit 07d7e7ebfd
2 changed files with 47 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
View File

@@ -1,7 +1,7 @@
import { getPropertyValueByAlias } from '../index.js';
import type { UmbCollectionColumnConfiguration } from '../../../../../core/collection/types.js';
import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from '../../types.js';
import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -98,26 +98,37 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
}
render() {
if (this._loading) {
return html`<div class="container"><uui-loader></uui-loader></div>`;
}
if (this._items.length === 0) {
return html`<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`;
}
return this._items.length === 0 ? this.#renderEmpty() : this.#renderItems();
}
#renderEmpty() {
if (this._items.length > 0) return nothing;
return html`
<div id="document-grid">
${repeat(
this._items,
(item) => item.unique,
(item) => this.#renderCard(item),
<div class="container">
${when(
this._loading,
() => html`<uui-loader></uui-loader>`,
() => html`<p>${this.localize.term('content_listViewNoItems')}</p>`,
)}
</div>
`;
}
#renderCard(item: UmbDocumentCollectionItemModel) {
#renderItems() {
if (this._items.length === 0) return nothing;
return html`
<div id="document-grid">
${repeat(
this._items,
(item) => item.unique,
(item) => this.#renderItem(item),
)}
</div>
${when(this._loading, () => html`<uui-loader-bar></uui-loader-bar>`)}
`;
}
#renderItem(item: UmbDocumentCollectionItemModel) {
return html`
<uui-card-content-node
.name=${item.name ?? 'Unnamed Document'}
@@ -153,7 +164,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
>`;
default:
return html`<uui-tag slot="tag" color="danger" look="secondary">${fromCamelCase(item.state)}</uui-tag>`;
}
}
}
#renderProperties(item: UmbDocumentCollectionItemModel) {

31
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts
View File

@@ -2,7 +2,7 @@ import { getPropertyValueByAlias } from '../index.js';
import type { UmbCollectionColumnConfiguration } from '../../../../../core/collection/types.js';
import type { UmbDocumentCollectionItemModel } from '../../types.js';
import type { UmbDocumentCollectionContext } from '../../document-collection.context.js';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { css, customElement, html, nothing, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
@@ -193,23 +193,34 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
}
render() {
if (this._loading) {
return html`<div class="container"><uui-loader></uui-loader></div>`;
}
return this._tableItems.length === 0 ? this.#renderEmpty() : this.#renderItems();
}
if (this._tableItems.length === 0) {
return html`<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`;
}
#renderEmpty() {
if (this._tableItems.length > 0) return nothing;
return html`
<div class="container">
${when(
this._loading,
() => html`<uui-loader></uui-loader>`,
() => html`<p>${this.localize.term('content_listViewNoItems')}</p>`,
)}
</div>
`;
}
#renderItems() {
if (this._tableItems.length === 0) return nothing;
return html`
<umb-table
.config=${this._tableConfig}
.columns=${this._tableColumns}
.items=${this._tableItems}
.selection=${this._selection}
@selected="${this.#handleSelect}"
@deselected="${this.#handleDeselect}"
@ordered="${this.#handleOrdering}"></umb-table>
@selected=${this.#handleSelect}
@deselected=${this.#handleDeselect}
@ordered=${this.#handleOrdering}></umb-table>
${when(this._loading, () => html`<uui-loader-bar></uui-loader-bar>`)}
`;
}