From 715135006611c4cd4494a6a0463dfab0c5c8e293 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Apr 2024 16:12:04 +0100 Subject: [PATCH 1/7] Adds loading state on the context --- .../core/collection/default/collection-default.context.ts | 7 +++++++ .../views/grid/document-grid-collection-view.element.ts | 2 ++ .../views/table/document-table-collection-view.element.ts | 2 ++ 3 files changed, 11 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts index 11247ffae2..088b17a742 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts @@ -31,6 +31,9 @@ export class UmbDefaultCollectionContext< #manifest?: ManifestCollection; #repository?: UmbCollectionRepository; + #loading = new UmbObjectState(false); + public readonly loading = this.#loading.asObservable(); + #items = new UmbArrayState([], (x) => x); public readonly items = this.#items.asObservable(); @@ -176,6 +179,8 @@ export class UmbDefaultCollectionContext< if (!this.#repository) throw new Error(`Missing repository for ${this.#manifest}`); + this.#loading.setValue(true); + const filter = this.#filter.getValue(); const { data } = await this.#repository.requestCollection(filter); @@ -184,6 +189,8 @@ export class UmbDefaultCollectionContext< this.#totalItems.setValue(data.total); this.pagination.setTotalItems(data.total); } + + this.#loading.setValue(false); } /** diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index 8ec535ba7f..01b818fb1b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -39,6 +39,8 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { #observeCollectionContext() { if (!this.#collectionContext) return; + this.observe(this.#collectionContext.loading, (loading) => (this._loading = loading), '_observeLoading'); + this.observe( this.#collectionContext.userDefinedProperties, (userDefinedProperties) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 943588f16e..6764068675 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -75,6 +75,8 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { #observeCollectionContext() { if (!this.#collectionContext) return; + this.observe(this.#collectionContext.loading, (loading) => (this._loading = loading), '_observeLoading'); + this.observe( this.#collectionContext.userDefinedProperties, (userDefinedProperties) => { From 3f724e481a941fabf0a6efc2028c3bc865d48bda Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Apr 2024 16:15:04 +0100 Subject: [PATCH 2/7] Registers the Route Builder on the Document Collection Views --- .../documents/documents/collection/types.ts | 5 +++ .../document-grid-collection-view.element.ts | 23 +++++++++--- .../document-table-column-name.element.ts | 33 ++++------------- .../document-table-column-state.element.ts | 11 +++--- .../document-table-collection-view.element.ts | 35 +++++++++++++++++-- 5 files changed, 67 insertions(+), 40 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts index ffcbcb13d3..6539b5c5e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts @@ -23,3 +23,8 @@ export interface UmbDocumentCollectionItemModel { updater?: string | null; values: Array<{ alias: string; value: string }>; } + +export interface UmbEditableDocumentCollectionItemModel { + item: UmbDocumentCollectionItemModel; + editPath: string; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index 01b818fb1b..c7405ddbcc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -7,9 +7,13 @@ 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'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; +import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; @customElement('umb-document-grid-collection-view') export class UmbDocumentGridCollectionViewElement extends UmbLitElement { + @state() + private _editDocumentPath = ''; + @state() private _items: Array = []; @@ -34,6 +38,15 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { this.#collectionContext = collectionContext; this.#observeCollectionContext(); }); + + new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath('document') + .onSetup(() => { + return { data: { entityType: 'document', preset: {} } }; + }) + .observeRouteBuilder((routeBuilder) => { + this._editDocumentPath = routeBuilder({}); + }); } #observeCollectionContext() { @@ -66,10 +79,10 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { ); } - // TODO: How should we handle url stuff? [?] - #onOpen(id: string) { - // TODO: this will not be needed when cards works as links with href [?] - history.pushState(null, '', 'section/content/workspace/document/edit/' + id); + #onOpen(event: Event, id: string) { + event.preventDefault(); + event.stopPropagation(); + window.history.pushState(null, '', this._editDocumentPath + 'edit/' + id); } #onSelect(item: UmbDocumentCollectionItemModel) { @@ -111,7 +124,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { selectable ?select-only=${this._selection.length > 0} ?selected=${this.#isSelected(item)} - @open=${() => this.#onOpen(item.unique ?? '')} + @open=${(event: Event) => this.#onOpen(event, item.unique ?? '')} @selected=${() => this.#onSelect(item)} @deselected=${() => this.#onDeselect(item)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts index 1d9e39d4b3..0801145f11 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts @@ -1,49 +1,30 @@ -import type { UmbDocumentCollectionItemModel } from '../../../types.js'; -import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; +import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; +import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; import type { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-document-table-column-name') export class UmbDocumentTableColumnNameElement extends UmbLitElement implements UmbTableColumnLayoutElement { - @state() - private _editDocumentPath = ''; - - @property({ type: Object, attribute: false }) column!: UmbTableColumn; - - @property({ type: Object, attribute: false }) item!: UmbTableItem; @property({ attribute: false }) - value!: UmbDocumentCollectionItemModel; - - constructor() { - super(); - - new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) - .addAdditionalPath('document') - .onSetup(() => { - return { data: { entityType: 'document', preset: {} } }; - }) - .observeRouteBuilder((routeBuilder) => { - this._editDocumentPath = routeBuilder({}); - }); - } + value!: UmbEditableDocumentCollectionItemModel; #onClick(event: Event & { target: UUIButtonElement }) { event.preventDefault(); event.stopPropagation(); - window.history.pushState({}, '', event.target.href); + window.history.pushState(null, '', event.target.href); } render() { + if (!this.value) return nothing; return html` `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts index 1a44194e82..11c1e6985b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts @@ -1,4 +1,4 @@ -import type { UmbDocumentCollectionItemModel } from '../../../types.js'; +import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { fromCamelCase } from '@umbraco-cms/backoffice/utils'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -6,17 +6,14 @@ import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from ' @customElement('umb-document-table-column-state') export class UmbDocumentTableColumnStateElement extends UmbLitElement implements UmbTableColumnLayoutElement { - @property({ type: Object, attribute: false }) column!: UmbTableColumn; - - @property({ type: Object, attribute: false }) item!: UmbTableItem; @property({ attribute: false }) - value!: UmbDocumentCollectionItemModel; + value!: UmbEditableDocumentCollectionItemModel; render() { - switch (this.value.state) { + switch (this.value.item.state) { case 'Published': return html`${this.localize.term('content_published')}`; case 'PublishedPendingChanges': @@ -26,7 +23,7 @@ export class UmbDocumentTableColumnStateElement extends UmbLitElement implements case 'NotCreated': return html`${this.localize.term('content_notCreated')}`; default: - return html`${fromCamelCase(this.value.state)}`; + return html`${fromCamelCase(this.value.item.state)}`; } } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 6764068675..175918e86a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -6,6 +6,8 @@ import { css, html, customElement, state } from '@umbraco-cms/backoffice/externa 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'; +import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; +import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal'; import type { UmbTableColumn, UmbTableConfig, @@ -64,12 +66,36 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { #collectionContext?: UmbDocumentCollectionContext; + #routeBuilder?: UmbModalRouteBuilder; + constructor() { super(); this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (collectionContext) => { this.#collectionContext = collectionContext; - this.#observeCollectionContext(); }); + + this.#registerModalRoute(); + } + + #registerModalRoute() { + new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath(':entityType') + .onSetup((params) => { + return { data: { entityType: params.entityType, preset: {} } }; + }) + .onReject(() => { + this.#collectionContext?.requestCollection(); + }) + .onSubmit(() => { + this.#collectionContext?.requestCollection(); + }) + .observeRouteBuilder((routeBuilder) => { + this.#routeBuilder = routeBuilder; + + // NOTE: Configuring the observations AFTER the route builder is ready, + // otherwise there is a race condition and `#collectionContext.items` tends to win. [LK] + this.#observeCollectionContext(); + }); } #observeCollectionContext() { @@ -133,15 +159,20 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { const data = this._tableColumns?.map((column) => { + const editPath = this.#routeBuilder + ? this.#routeBuilder({ entityType: item.entityType }) + `edit/${item.unique}` + : ''; + return { columnAlias: column.alias, - value: column.elementName ? item : getPropertyValueByAlias(item, column.alias), + value: column.elementName ? { item, editPath } : getPropertyValueByAlias(item, column.alias), }; }) ?? []; return { id: item.unique, icon: item.icon, + entityType: 'document', data: data, }; }); From 4410c76aac637a88f77378e69526adbb8f35ab3a Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Apr 2024 16:15:16 +0100 Subject: [PATCH 3/7] Code tidy-up --- .../default/collection-default.element.ts | 2 +- .../documents/documents/collection/types.ts | 2 +- .../document-grid-collection-view.element.ts | 8 ++++---- .../document-table-collection-view.element.ts | 18 ++++-------------- 4 files changed, 10 insertions(+), 20 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts index 087dd2e362..d4923f45cd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts @@ -57,7 +57,7 @@ export class UmbCollectionDefaultElement extends UmbLitElement { return html` ${this.renderToolbar()} - + ${this.renderPagination()} ${this.renderSelectionActions()} `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts index 6539b5c5e6..c3a7b16517 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts @@ -6,7 +6,7 @@ export interface UmbDocumentCollectionFilterModel extends UmbCollectionFilterMod orderBy?: string; orderCulture?: string; orderDirection?: 'asc' | 'desc'; - userDefinedProperties: Array<{alias: string, header: string, isSystem: boolean}>; + userDefinedProperties: Array<{ alias: string; header: string; isSystem: boolean }>; } export interface UmbDocumentCollectionItemModel { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index c7405ddbcc..d3d11169a5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -59,15 +59,15 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { (userDefinedProperties) => { this._userDefinedProperties = userDefinedProperties; }, - 'umbCollectionUserDefinedPropertiesObserver', + '_observeUserDefinedProperties', ); - this.observe(this.#collectionContext.items, (items) => (this._items = items), 'umbCollectionItemsObserver'); + this.observe(this.#collectionContext.items, (items) => (this._items = items), '_observeItems'); this.observe( this.#collectionContext.selection.selection, (selection) => (this._selection = selection), - 'umbCollectionSelectionObserver', + '_observeSelection', ); this.observe( @@ -75,7 +75,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { (skip) => { this._skip = skip; }, - 'umbCollectionSkipObserver', + '_observePaginationSkip', ); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 175918e86a..93534ff9ee 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -61,15 +61,13 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { @state() private _selection: Array = []; - @state() - private _skip: number = 0; - #collectionContext?: UmbDocumentCollectionContext; #routeBuilder?: UmbModalRouteBuilder; constructor() { super(); + this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (collectionContext) => { this.#collectionContext = collectionContext; }); @@ -109,7 +107,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { this._userDefinedProperties = userDefinedProperties; this.#createTableHeadings(); }, - 'umbCollectionUserDefinedPropertiesObserver', + '_observeUserDefinedProperties', ); this.observe( @@ -118,7 +116,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { this._items = items; this.#createTableItems(this._items); }, - 'umbCollectionItemsObserver', + '_observeItems', ); this.observe( @@ -126,15 +124,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { (selection) => { this._selection = selection as string[]; }, - 'umbCollectionSelectionObserver', - ); - - this.observe( - this.#collectionContext.pagination.skip, - (skip) => { - this._skip = skip; - }, - 'umbCollectionSkipObserver', + '_observeSelection', ); } From 07d7e7ebfdc00694e7dd27f4921eb6b2ef75d39d Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Apr 2024 16:52:21 +0100 Subject: [PATCH 4/7] Refactored the loading state It previously caused a bug with the sort ordering feature. Because the `` was being removed from the DOM. It now uses an alternative loading bar. --- .../document-grid-collection-view.element.ts | 41 ++++++++++++------- .../document-table-collection-view.element.ts | 31 +++++++++----- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index d3d11169a5..b94e2d9b85 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -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`
`; - } - - if (this._items.length === 0) { - return html`

${this.localize.term('content_listViewNoItems')}

`; - } + return this._items.length === 0 ? this.#renderEmpty() : this.#renderItems(); + } + #renderEmpty() { + if (this._items.length > 0) return nothing; return html` -
- ${repeat( - this._items, - (item) => item.unique, - (item) => this.#renderCard(item), +
+ ${when( + this._loading, + () => html``, + () => html`

${this.localize.term('content_listViewNoItems')}

`, )}
`; } - #renderCard(item: UmbDocumentCollectionItemModel) { + #renderItems() { + if (this._items.length === 0) return nothing; + return html` +
+ ${repeat( + this._items, + (item) => item.unique, + (item) => this.#renderItem(item), + )} +
+ ${when(this._loading, () => html``)} + `; + } + + #renderItem(item: UmbDocumentCollectionItemModel) { return html` `; default: return html`${fromCamelCase(item.state)}`; - } + } } #renderProperties(item: UmbDocumentCollectionItemModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 93534ff9ee..54683263d1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -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`
`; - } + return this._tableItems.length === 0 ? this.#renderEmpty() : this.#renderItems(); + } - if (this._tableItems.length === 0) { - return html`

${this.localize.term('content_listViewNoItems')}

`; - } + #renderEmpty() { + if (this._tableItems.length > 0) return nothing; + return html` +
+ ${when( + this._loading, + () => html``, + () => html`

${this.localize.term('content_listViewNoItems')}

`, + )} +
+ `; + } + #renderItems() { + if (this._tableItems.length === 0) return nothing; return html` + @selected=${this.#handleSelect} + @deselected=${this.#handleDeselect} + @ordered=${this.#handleOrdering}> + ${when(this._loading, () => html``)} `; } From 707aaa4a9c429c945df95152b6929b35818c1eb3 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Apr 2024 16:52:49 +0100 Subject: [PATCH 5/7] Grid: Simplifies the `state` tag code --- .../document-grid-collection-view.element.ts | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index b94e2d9b85..d4d23e2d5e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -7,6 +7,7 @@ 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'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; +import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; @customElement('umb-document-grid-collection-view') @@ -144,27 +145,24 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { `; } - #renderState(item: UmbDocumentCollectionItemModel) { - switch (item.state) { + #getStateTagConfig(state: string): { color: UUIInterfaceColor; label: string } { + switch (state) { case 'Published': - return html`${this.localize.term('content_published')}`; + return { color: 'positive', label: this.localize.term('content_published') }; case 'PublishedPendingChanges': - return html`${this.localize.term('content_publishedPendingChanges')}`; + return { color: 'warning', label: this.localize.term('content_publishedPendingChanges') }; case 'Draft': - return html`${this.localize.term('content_unpublished')}`; + return { color: 'default', label: this.localize.term('content_unpublished') }; case 'NotCreated': - return html`${this.localize.term('content_notCreated')}`; + return { color: 'danger', label: this.localize.term('content_notCreated') }; default: - return html`${fromCamelCase(item.state)}`; + return { color: 'danger', label: fromCamelCase(state) }; + } } + + #renderState(item: UmbDocumentCollectionItemModel) { + const tagConfig = this.#getStateTagConfig(item.state); + return html`${tagConfig.label}`; } #renderProperties(item: UmbDocumentCollectionItemModel) { From 9662cc5b5031339bc4fe62b2fc9aff89658ef763 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Apr 2024 17:53:19 +0100 Subject: [PATCH 6/7] Document Grid: fixes refresh on modal cancel/submit --- .../document-grid-collection-view.element.ts | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index d4d23e2d5e..fb55c39022 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -6,9 +6,9 @@ import { fromCamelCase } from '@umbraco-cms/backoffice/utils'; 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'; +import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; -import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; @customElement('umb-document-grid-collection-view') export class UmbDocumentGridCollectionViewElement extends UmbLitElement { @@ -24,9 +24,6 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { @state() private _selection: Array = []; - @state() - private _skip: number = 0; - @state() private _userDefinedProperties?: Array; @@ -45,6 +42,12 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { .onSetup(() => { return { data: { entityType: 'document', preset: {} } }; }) + .onReject(() => { + this.#collectionContext?.requestCollection(); + }) + .onSubmit(() => { + this.#collectionContext?.requestCollection(); + }) .observeRouteBuilder((routeBuilder) => { this._editDocumentPath = routeBuilder({}); }); @@ -70,14 +73,6 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { (selection) => (this._selection = selection), '_observeSelection', ); - - this.observe( - this.#collectionContext.pagination.skip, - (skip) => { - this._skip = skip; - }, - '_observePaginationSkip', - ); } #onOpen(event: Event, id: string) { @@ -136,7 +131,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { selectable ?select-only=${this._selection.length > 0} ?selected=${this.#isSelected(item)} - @open=${(event: Event) => this.#onOpen(event, item.unique ?? '')} + @open=${(event: Event) => this.#onOpen(event, item.unique)} @selected=${() => this.#onSelect(item)} @deselected=${() => this.#onDeselect(item)}> From e398b3adea98c659dd2d8294fc1ef3585ce5f2ee Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 1 May 2024 09:27:49 +0100 Subject: [PATCH 7/7] Replaced hardcoded edit path with constant helper --- .../views/grid/document-grid-collection-view.element.ts | 7 +++++-- .../views/table/document-table-collection-view.element.ts | 4 +++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index fb55c39022..6781ebd2cd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -1,4 +1,5 @@ import { getPropertyValueByAlias } from '../index.js'; +import { UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN } from '../../../paths.js'; import type { UmbCollectionColumnConfiguration } from '../../../../../core/collection/types.js'; import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from '../../types.js'; import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; @@ -75,10 +76,12 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { ); } - #onOpen(event: Event, id: string) { + #onOpen(event: Event, unique: string) { event.preventDefault(); event.stopPropagation(); - window.history.pushState(null, '', this._editDocumentPath + 'edit/' + id); + + const url = this._editDocumentPath + UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateLocal({ unique }); + window.history.pushState(null, '', url); } #onSelect(item: UmbDocumentCollectionItemModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 54683263d1..4b019ecd61 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -1,4 +1,5 @@ import { getPropertyValueByAlias } from '../index.js'; +import { UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN } from '../../../paths.js'; import type { UmbCollectionColumnConfiguration } from '../../../../../core/collection/types.js'; import type { UmbDocumentCollectionItemModel } from '../../types.js'; import type { UmbDocumentCollectionContext } from '../../document-collection.context.js'; @@ -150,7 +151,8 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { const data = this._tableColumns?.map((column) => { const editPath = this.#routeBuilder - ? this.#routeBuilder({ entityType: item.entityType }) + `edit/${item.unique}` + ? this.#routeBuilder({ entityType: item.entityType }) + + UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateLocal({ unique: item.unique }) : ''; return {