implement UmbLitElement

src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/bulk-actions/collection-bulk-action-media-delete.element.ts

@@ -1,13 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { UmbCollectionContext } from '../collection.context';
 import type { ManifestCollectionBulkAction } from '@umbraco-cms/models';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from 'src/core/element/lit-element.element';
 
 @customElement('umb-collection-bulk-action-media-delete')
-export class UmbCollectionBulkActionDeleteElement extends UmbContextConsumerMixin(LitElement) {
+export class UmbCollectionBulkActionDeleteElement extends UmbLitElement {
 	static styles = [UUITextStyles, css``];
 
 	// TODO: make a UmbCollectionContextMedia:

src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts

@@ -1,5 +1,5 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 import { map } from 'rxjs';
 import './collection-selection-actions.element';
@@ -7,12 +7,12 @@ import './collection-toolbar.element';
 import type { UmbCollectionContext } from './collection.context';
 import { createExtensionElement } from '@umbraco-cms/extensions-api';
 import type { ManifestCollectionView, MediaDetails } from '@umbraco-cms/models';
-import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbLitElement } from 'src/core/element/lit-element.element';
+import type { UmbObserverController } from 'src/core/observable-api/observer.controller';
 
 @customElement('umb-collection')
-export class UmbCollectionElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
+export class UmbCollectionElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -34,7 +34,7 @@ export class UmbCollectionElement extends UmbContextConsumerMixin(UmbObserverMix
 	private _routes: Array<any> = [];
 
 	@state()
-	private _selection: Array<string> = [];
+	private _selection?: Array<string> | null;
 
 	private _collectionContext?: UmbCollectionContext<MediaDetails>;
 
@@ -48,7 +48,7 @@ export class UmbCollectionElement extends UmbContextConsumerMixin(UmbObserverMix
 		this._observeCollectionViews();
 	}
 
-	private _collectionViewUnsubscribe?: () => void;
+	private _collectionViewUnsubscribe?: UmbObserverController;
 
 	constructor() {
 		super();
@@ -68,29 +68,31 @@ export class UmbCollectionElement extends UmbContextConsumerMixin(UmbObserverMix
 	}
 
 	private _observeCollectionViews() {
-		this._collectionViewUnsubscribe?.();
+		this._collectionViewUnsubscribe?.destroy();
 		this._collectionViewUnsubscribe = this.observe<Array<ManifestCollectionView>>(
+			// TODO: could we make some helper methods for this scenario:
 			umbExtensionsRegistry?.extensionsOfType('collectionView').pipe(
 				map((extensions) => {
 					return extensions.filter((extension) => extension.meta.entityType === this._entityType);
 				})
 			),
 			(views) => {
-				if (views?.length === 0) return;
 				this._createRoutes(views);
 			}
 		);
 	}
 
-	private _createRoutes(views: ManifestCollectionView[]) {
+	private _createRoutes(views: ManifestCollectionView[] | null) {
 		this._routes = [];
 
-		this._routes = views.map((view) => {
-			return {
-				path: `${view.meta.pathName}`,
-				component: () => createExtensionElement(view),
-			};
-		});
+		if(views) {
+			this._routes = views.map((view) => {
+				return {
+					path: `${view.meta.pathName}`,
+					component: () => createExtensionElement(view),
+				};
+			});
+		}
 
 		this._routes.push({
 			path: '**',
@@ -103,7 +105,7 @@ export class UmbCollectionElement extends UmbContextConsumerMixin(UmbObserverMix
 			<umb-body-layout no-header-background>
 				<umb-collection-toolbar slot="header"></umb-collection-toolbar>
 				<router-slot id="router-slot" .routes="${this._routes}"></router-slot>
-				${this._selection.length > 0
+				${this._selection && this._selection.length > 0
 					? html`<umb-collection-selection-actions slot="footer"></umb-collection-selection-actions>`
 					: nothing}
 			</umb-body-layout>

src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts

@@ -1,14 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import type { UmbCollectionContext } from '../collection.context';
 import type { MediaDetails } from '@umbraco-cms/models';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
-import { UmbObserverMixin } from '@umbraco-cms/observable-api';
+import { UmbLitElement } from 'src/core/element/lit-element.element';
 
 @customElement('umb-collection-view-media-grid')
-export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
+export class UmbCollectionViewsMediaGridElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -66,19 +65,19 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(
 	];
 
 	@state()
-	private _mediaItems: Array<MediaDetails> = [];
+	private _mediaItems?: Array<MediaDetails>;
 
 	@state()
-	private _selection: Array<string> = [];
+	private _selection?: Array<string>;
 
 	private _collectionContext?: UmbCollectionContext<MediaDetails>;
 
 	constructor() {
 		super();
-		document.addEventListener('dragenter', (e) => {
+		document.addEventListener('dragenter', () => {
 			this.toggleAttribute('dragging', true);
 		});
-		document.addEventListener('dragleave', (e) => {
+		document.addEventListener('dragleave', () => {
 			this.toggleAttribute('dragging', false);
 		});
 		document.addEventListener('drop', (e) => {
@@ -96,11 +95,11 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(
 		if (!this._collectionContext) return;
 
 		this.observe<Array<MediaDetails>>(this._collectionContext.data, (mediaItems) => {
-			this._mediaItems = mediaItems.sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1));
+			this._mediaItems = mediaItems?.sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1));
 		});
 
 		this.observe<Array<string>>(this._collectionContext.selection, (selection) => {
-			this._selection = selection;
+			this._selection = selection || undefined;
 		});
 	}
 
@@ -118,7 +117,7 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(
 	}
 
 	private _isSelected(mediaItem: MediaDetails) {
-		return this._selection.includes(mediaItem.key);
+		return this._selection?.includes(mediaItem.key);
 	}
 
 	private _renderMediaItem(item: MediaDetails) {
@@ -126,7 +125,7 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(
 		//TODO: fix the file extension when media items have a file extension.
 		return html`<uui-card-media
 			selectable
-			?select-only=${this._selection.length > 0}
+			?select-only=${this._selection && this._selection.length > 0}
 			?selected=${this._isSelected(item)}
 			@open=${() => this._handleOpenItem(item)}
 			@selected=${() => this._handleSelect(item)}
@@ -145,11 +144,11 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin(
 				label="Drop files here"
 				accept=""></uui-file-dropzone>
 			<div id="media-files">
-				${repeat(
+				${this._mediaItems ? repeat(
 					this._mediaItems,
 					(file, index) => file.key + index,
 					(file) => this._renderMediaItem(file)
-				)}
+				) : ''}
 			</div>
 		`;
 	}