Merge pull request #1254 from umbraco/chore/document-collection-tidyup

Chore: Document Collection code tidy-up

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';

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<UmbDocumentCollectionItemModel> = [];
 
+	@state()
+	private _loading = false;
+
 	@state()
 	private _selection: Array<string | null> = [];
 
 	@state()
 	private _userDefinedProperties?: Array<UmbCollectionColumnConfiguration>;
 
-	@state()
-	private _loading = false;
-
 	#collectionContext?: UmbDefaultCollectionContext<UmbDocumentCollectionItemModel, UmbDocumentCollectionFilterModel>;
 
 	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)}>
 				<uui-icon slot="icon" name=${item.icon}></uui-icon>

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',

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}"></umb-table>
+				@selected="${this.#handleSelect}"
+				@deselected="${this.#handleDeselect}"
+				@ordered="${this.#handleOrdering}"></umb-table>
 		`;
 	}
 
@@ -207,6 +208,6 @@ export default UmbDocumentTableCollectionViewElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-collection-view-document-table': UmbDocumentTableCollectionViewElement;
+		'umb-document-table-collection-view': UmbDocumentTableCollectionViewElement;
 	}
 }

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<ManifestEntityBulkAction> = [
 	{
 		type: 'entityBulkAction',