From 3ac290a8e01eeba8999fb01fae07ccd33c5520db Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 20 Feb 2024 18:08:02 +0000 Subject: [PATCH] Document Collection code tidy-up These changes came from aligning code with the Media Collection work in PR #1250. --- ...eate-document-collection-action.element.ts | 3 +- .../document-grid-collection-view.element.ts | 38 +++++++++++-------- .../documents/collection/views/manifests.ts | 4 +- .../document-table-collection-view.element.ts | 21 +++++----- .../entity-bulk-actions/manifests.ts | 1 - 5 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/action/create-document-collection-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/action/create-document-collection-action.element.ts index 372090bdc7..61faa1a331 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/action/create-document-collection-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/action/create-document-collection-action.element.ts @@ -1,5 +1,4 @@ -import type { UmbCollectionConfiguration } from '../../../../core/collection/types.js'; -import { html, customElement, property, state, map, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, map } from '@umbraco-cms/backoffice/external/lit'; import { UmbDocumentTypeStructureRepository } from '@umbraco-cms/backoffice/document-type'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; 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 3ea7d7bd48..b4bd4e4d44 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 @@ -12,22 +12,22 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { @state() private _items: Array = []; + @state() + private _loading = false; + @state() private _selection: Array = []; @state() private _userDefinedProperties?: Array; - @state() - private _loading = false; - #collectionContext?: UmbDefaultCollectionContext; constructor() { super(); - this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => { - this.#collectionContext = instance; + this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (collectionContext) => { + this.#collectionContext = collectionContext; this.#observeCollectionContext(); }); } @@ -35,31 +35,39 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { #observeCollectionContext() { if (!this.#collectionContext) return; - this.observe(this.#collectionContext.userDefinedProperties, (userDefinedProperties) => { - this._userDefinedProperties = userDefinedProperties; - },'umbCollectionUserDefinedPropertiesObserver'); + this.observe( + this.#collectionContext.userDefinedProperties, + (userDefinedProperties) => { + this._userDefinedProperties = userDefinedProperties; + }, + 'umbCollectionUserDefinedPropertiesObserver', + ); + + this.observe(this.#collectionContext.items, (items) => (this._items = items), 'umbCollectionItemsObserver'); this.observe( this.#collectionContext.selection.selection, (selection) => (this._selection = selection), 'umbCollectionSelectionObserver', ); - - this.observe(this.#collectionContext.items, (items) => (this._items = items), 'umbCollectionItemsObserver'); } // TODO: How should we handle url stuff? [?] - private _handleOpenCard(id: string) { + #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); } #onSelect(item: UmbDocumentCollectionItemModel) { - this.#collectionContext?.selection.select(item.unique ?? ''); + this.#collectionContext?.selection.select(item.unique); } #onDeselect(item: UmbDocumentCollectionItemModel) { - this.#collectionContext?.selection.deselect(item.unique ?? ''); + this.#collectionContext?.selection.deselect(item.unique); + } + + #isSelected(item: UmbDocumentCollectionItemModel) { + return this.#collectionContext?.selection.isSelected(item.unique); } render() { @@ -88,8 +96,8 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement { .name=${item.name ?? 'Unnamed Document'} selectable ?select-only=${this._selection.length > 0} - ?selected=${this.#collectionContext?.selection.isSelected(item.unique ?? '')} - @open=${() => this._handleOpenCard(item.unique ?? '')} + ?selected=${this.#isSelected(item)} + @open=${() => this.#onOpen(item.unique ?? '')} @selected=${() => this.#onSelect(item)} @deselected=${() => this.#onDeselect(item)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts index 511c5984a8..16f5867cbf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/manifests.ts @@ -1,8 +1,8 @@ import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection'; import type { ManifestCollectionView } from '@umbraco-cms/backoffice/extension-registry'; -export const UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Document.Table'; export const UMB_DOCUMENT_GRID_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Document.Grid'; +export const UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Document.Table'; const gridViewManifest: ManifestCollectionView = { type: 'collectionView', @@ -28,7 +28,7 @@ const tableViewManifest: ManifestCollectionView = { alias: UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS, name: 'Document Table Collection View', element: () => import('./table/document-table-collection-view.element.js'), - weight: 201, + weight: 300, meta: { label: 'Table', icon: 'icon-list', 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 733b1291d8..64048fe5f0 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 @@ -5,6 +5,7 @@ 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 type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; import type { UmbTableColumn, UmbTableConfig, @@ -14,10 +15,10 @@ import type { UmbTableOrderedEvent, UmbTableSelectedEvent, } from '@umbraco-cms/backoffice/components'; -import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; import './column-layouts/document-table-column-name.element.js'; import './column-layouts/document-table-column-state.element.js'; + @customElement('umb-document-table-collection-view') export class UmbDocumentTableCollectionViewElement extends UmbLitElement { @state() @@ -62,8 +63,8 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { constructor() { super(); - this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => { - this.#collectionContext = instance; + this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (collectionContext) => { + this.#collectionContext = collectionContext; this.#observeCollectionContext(); }); } @@ -133,21 +134,21 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { }); } - private _handleSelect(event: UmbTableSelectedEvent) { + #handleSelect(event: UmbTableSelectedEvent) { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; this.#collectionContext?.selection.setSelection(selection); } - private _handleDeselect(event: UmbTableDeselectedEvent) { + #handleDeselect(event: UmbTableDeselectedEvent) { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; this.#collectionContext?.selection.setSelection(selection); } - private _handleOrdering(event: UmbTableOrderedEvent) { + #handleOrdering(event: UmbTableOrderedEvent) { const table = event.target as UmbTableElement; const orderingColumn = table.orderingColumn; const orderingDesc = table.orderingDesc; @@ -172,9 +173,9 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { .columns=${this._tableColumns} .items=${this._tableItems} .selection=${this._selection} - @selected="${this._handleSelect}" - @deselected="${this._handleDeselect}" - @ordered="${this._handleOrdering}"> + @selected="${this.#handleSelect}" + @deselected="${this.#handleDeselect}" + @ordered="${this.#handleOrdering}"> `; } @@ -207,6 +208,6 @@ export default UmbDocumentTableCollectionViewElement; declare global { interface HTMLElementTagNameMap { - 'umb-collection-view-document-table': UmbDocumentTableCollectionViewElement; + 'umb-document-table-collection-view': UmbDocumentTableCollectionViewElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/manifests.ts index daebc15fee..fda8b13029 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/manifests.ts @@ -12,7 +12,6 @@ import { UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION, } from '@umbraco-cms/backoffice/collection'; -// TODO: [LK] Wondering how these actions could be wired up to the `bulkActionPermissions` config? export const manifests: Array = [ { type: 'entityBulkAction',