From e07b563b04fdc6519cbc39ff8808eec9d3a2a2f0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 21 Nov 2023 14:21:50 +0100 Subject: [PATCH] utilize the selection manager directly in the collection context --- .../core/collection/collection.context.ts | 60 +------------------ .../collection-selection-actions.element.ts | 6 +- .../core/extension-registry/models/index.ts | 2 + .../document-table-collection-view.element.ts | 8 +-- .../media-grid-collection-view.element.ts | 10 ++-- .../media-table-collection-view.element.ts | 6 +- .../user-group-collection-view.element.ts | 22 ++++--- .../user/user/collection/manifests.ts | 2 + .../grid/user-grid-collection-view.element.ts | 8 +-- .../user-table-collection-view.element.ts | 6 +- 10 files changed, 43 insertions(+), 87 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts index 8159835107..6b2dd11986 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts @@ -25,9 +25,6 @@ export class UmbCollectionContext< #totalItems = new UmbNumberState(0); public readonly totalItems = this.#totalItems.asObservable(); - #selectionManager = new UmbSelectionManager(); - public readonly selection = this.#selectionManager.selection; - #filter = new UmbObjectState({}); public readonly filter = this.#filter.asObservable(); @@ -48,6 +45,7 @@ export class UmbCollectionContext< }); public readonly pagination = new UmbPaginationManager(); + public readonly selection = new UmbSelectionManager(); constructor(host: UmbControllerHostElement, config: UmbCollectionConfiguration = { pageSize: 50 }) { super(host); @@ -82,60 +80,6 @@ export class UmbCollectionContext< return this.#alias; } - /** - * Returns true if the given id is selected. - * @param {string} id - * @return {Boolean} - * @memberof UmbCollectionContext - */ - public isSelected(id: string) { - return this.#selectionManager.isSelected(id); - } - - /** - * Sets the current selection. - * @param {Array} selection - * @memberof UmbCollectionContext - */ - public setSelection(selection: Array) { - this.#selectionManager.setSelection(selection); - } - - /** - * Returns the current selection. - * @return {Array} - * @memberof UmbCollectionContext - */ - public getSelection() { - this.#selectionManager.getSelection(); - } - - /** - * Clears the current selection. - * @memberof UmbCollectionContext - */ - public clearSelection() { - this.#selectionManager.clearSelection(); - } - - /** - * Appends the given id to the current selection. - * @param {string} id - * @memberof UmbCollectionContext - */ - public select(id: string) { - this.#selectionManager.select(id); - } - - /** - * Removes the given id from the current selection. - * @param {string} id - * @memberof UmbCollectionContext - */ - public deselect(id: string) { - this.#selectionManager.deselect(id); - } - /** * Requests the collection from the repository. * @return {*} @@ -185,7 +129,7 @@ export class UmbCollectionContext< } #configure(configuration: UmbCollectionConfiguration) { - this.#selectionManager.setMultiple(true); + this.selection.setMultiple(true); this.pagination.setPageSize(configuration.pageSize); this.#filter.next({ ...this.#filter.getValue(), skip: 0, take: configuration.pageSize }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-selection-actions.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-selection-actions.element.ts index 8e5e0a16dd..70b02df7c9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-selection-actions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-selection-actions.element.ts @@ -34,7 +34,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { } private _handleClearSelection() { - this._collectionContext?.clearSelection(); + this._collectionContext?.selection.clearSelection(); } private _observeCollectionContext() { @@ -49,7 +49,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { ); this.observe( - this._collectionContext.selection, + this._collectionContext.selection.selection, (selection) => { this._selectionLength = selection.length; this._selection = selection; @@ -65,7 +65,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { #onActionExecuted(event: UmbActionExecutedEvent) { event.stopPropagation(); - this._collectionContext?.clearSelection(); + this._collectionContext?.selection.clearSelection(); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts index f4fcd99848..93a3e4e17c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts @@ -40,6 +40,8 @@ import type { ManifestEntryPoint, } from '@umbraco-cms/backoffice/extension-api'; +export * from './collection.models.js'; +export * from './collection-action.model.js'; export * from './collection-view.model.js'; export * from './dashboard-collection.model.js'; export * from './dashboard.model.js'; 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 7fc39a9f3a..f7c76b5cc5 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,4 @@ -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { @@ -68,7 +68,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { this._createTableItems(this._items); }); - this.observe(this._collectionContext.selection, (selection) => { + this.observe(this._collectionContext.selection.selection, (selection) => { this._selection = selection; }); } @@ -99,14 +99,14 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this._collectionContext?.setSelection(selection); + this._collectionContext?.selection.setSelection(selection); } private _handleDeselect(event: UmbTableDeselectedEvent) { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this._collectionContext?.setSelection(selection); + this._collectionContext?.selection.setSelection(selection); } private _handleOrdering(event: UmbTableOrderedEvent) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts index e1bf80179d..e4c23b2f21 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts @@ -1,4 +1,4 @@ -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbCollectionContext, UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -52,7 +52,7 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement { this._mediaItems = [...mediaItems].sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1)); }); - this.observe(this._collectionContext.selection, (selection) => { + this.observe(this._collectionContext.selection.selection, (selection) => { this._selection = selection; }); } @@ -64,13 +64,13 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement { private _handleSelect(mediaItem: EntityTreeItemResponseModel) { if (mediaItem.id) { - this._collectionContext?.select(mediaItem.id); + this._collectionContext?.selection.select(mediaItem.id); } } private _handleDeselect(mediaItem: EntityTreeItemResponseModel) { if (mediaItem.id) { - this._collectionContext?.deselect(mediaItem.id); + this._collectionContext?.selection.deselect(mediaItem.id); } } @@ -109,7 +109,7 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement { ? repeat( this._mediaItems, (file, index) => (file.id || '') + index, - (file) => this._renderMediaItem(file) + (file) => this._renderMediaItem(file), ) : ''} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts index 9ce6114ae9..8de0d79e29 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts @@ -56,7 +56,7 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement { this._createTableItems(this._mediaItems); }); - this.observe(this._collectionContext.selection, (selection) => { + this.observe(this._collectionContext.selection.selection, (selection) => { this._selection = selection; }); } @@ -81,14 +81,14 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this._collectionContext?.setSelection(selection); + this._collectionContext?.selection.setSelection(selection); } private _handleDeselect(event: UmbTableDeselectedEvent) { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this._collectionContext?.setSelection(selection); + this._collectionContext?.selection.setSelection(selection); } private _handleOrdering(event: UmbTableOrderedEvent) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/views/user-group-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/views/user-group-collection-view.element.ts index 8dff0c8e0f..e00c322370 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/views/user-group-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/views/user-group-collection-view.element.ts @@ -61,11 +61,19 @@ export class UmbUserGroupCollectionTableViewElement extends UmbLitElement { this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => { this.#collectionContext = instance; - this.observe(this.#collectionContext.selection, (selection) => (this._selection = selection), 'umbCollectionSelectionObserver'); - this.observe(this.#collectionContext.items, (items) => { - this._userGroups = items; - this._createTableItems(items); - }, 'umbCollectionItemsObserver'); + this.observe( + this.#collectionContext.selection.selection, + (selection) => (this._selection = selection), + 'umbCollectionSelectionObserver', + ); + this.observe( + this.#collectionContext.items, + (items) => { + this._userGroups = items; + this._createTableItems(items); + }, + 'umbCollectionItemsObserver', + ); }); } @@ -102,14 +110,14 @@ export class UmbUserGroupCollectionTableViewElement extends UmbLitElement { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this.#collectionContext?.setSelection(selection); + this.#collectionContext?.selection.setSelection(selection); } private _handleDeselected(event: UmbTableDeselectedEvent) { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this.#collectionContext?.setSelection(selection); + this.#collectionContext?.selection.setSelection(selection); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts index 47717fff23..2f1f69555c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts @@ -2,6 +2,7 @@ import { UMB_USER_COLLECTION_REPOSITORY_ALIAS } from './repository/index.js'; import { manifests as collectionRepositoryManifests } from './repository/manifests.js'; import { manifests as collectionViewManifests } from './views/manifests.js'; import { manifests as collectionActionManifests } from './action/manifests.js'; +import { UmbUserCollectionContext } from './user-collection.context.js'; import { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_USER_COLLECTION_ALIAS = 'Umb.Collection.User'; @@ -9,6 +10,7 @@ const collectionManifest: ManifestTypes = { type: 'collection', alias: UMB_USER_COLLECTION_ALIAS, name: 'User Collection', + api: UmbUserCollectionContext, meta: { repositoryAlias: UMB_USER_COLLECTION_REPOSITORY_ALIAS, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts index 137da292c0..817bc7040e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts @@ -29,7 +29,7 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement { this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => { this.#collectionContext = instance as UmbUserCollectionContext; this.observe( - this.#collectionContext.selection, + this.#collectionContext.selection.selection, (selection) => (this._selection = selection), 'umbCollectionSelectionObserver', ); @@ -54,11 +54,11 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement { } #onSelect(user: UmbUserDetail) { - this.#collectionContext?.select(user.id ?? ''); + this.#collectionContext?.selection.select(user.id ?? ''); } #onDeselect(user: UmbUserDetail) { - this.#collectionContext?.deselect(user.id ?? ''); + this.#collectionContext?.selection.deselect(user.id ?? ''); } render() { @@ -80,7 +80,7 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement { .name=${user.name ?? 'Unnamed user'} selectable ?select-only=${this._selection.length > 0} - ?selected=${this.#collectionContext?.isSelected(user.id ?? '')} + ?selected=${this.#collectionContext?.selection.isSelected(user.id ?? '')} @open=${() => this._handleOpenCard(user.id ?? '')} @selected=${() => this.#onSelect(user)} @deselected=${() => this.#onDeselect(user)}> diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/table/user-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/table/user-table-collection-view.element.ts index ece3e3b9f2..8654d7674a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/table/user-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/table/user-table-collection-view.element.ts @@ -70,7 +70,7 @@ export class UmbUserTableCollectionViewElement extends UmbLitElement { this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => { this.#collectionContext = instance as UmbUserCollectionContext; this.observe( - this.#collectionContext.selection, + this.#collectionContext.selection.selection, (selection) => (this._selection = selection), 'umbCollectionSelectionObserver', ); @@ -142,14 +142,14 @@ export class UmbUserTableCollectionViewElement extends UmbLitElement { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this.#collectionContext?.setSelection(selection); + this.#collectionContext?.selection.setSelection(selection); } #onDeselected(event: UmbTableDeselectedEvent) { event.stopPropagation(); const table = event.target as UmbTableElement; const selection = table.selection; - this.#collectionContext?.setSelection(selection); + this.#collectionContext?.selection.setSelection(selection); } #onOrdering(event: UmbTableOrderedEvent) {