Merge branch 'main' into v15/feature/select-all-option-in-publishing-dialogs

Author: madsrasmussen

.storybook/preview.js

@@ -88,6 +88,12 @@ const documentTreeStoreProvider = (story) => html`
 export const decorators = [documentStoreProvider, documentTreeStoreProvider, dataTypeStoreProvider, storybookProvider];
 
 export const parameters = {
+	docs: {
+		source: {
+			excludeDecorators: true,
+			format: 'html', // see storybook docs for more info on this format https://storybook.js.org/docs/api/doc-blocks/doc-block-source#format
+		},
+	},
 	options: {
 		storySort: {
 			method: 'alphabetical',

src/packages/core/collection/default/collection-default.context.ts

@@ -37,21 +37,21 @@ export class UmbDefaultCollectionContext<
 	implements UmbCollectionContext, UmbApi
 {
 	#config?: UmbCollectionConfiguration = { pageSize: 50 };
-	#manifest?: ManifestCollection;
-	#repository?: UmbCollectionRepository;
+	protected _manifest?: ManifestCollection;
+	protected _repository?: UmbCollectionRepository;
 
 	// TODO: replace with a state manager
-	#loading = new UmbObjectState<boolean>(false);
-	public readonly loading = this.#loading.asObservable();
+	protected _loading = new UmbObjectState<boolean>(false);
+	public readonly loading = this._loading.asObservable();
 
-	#items = new UmbArrayState<CollectionItemType>([], (x) => x.unique);
-	public readonly items = this.#items.asObservable();
+	protected _items = new UmbArrayState<CollectionItemType>([], (x) => x.unique);
+	public readonly items = this._items.asObservable();
 
-	#totalItems = new UmbNumberState(0);
-	public readonly totalItems = this.#totalItems.asObservable();
+	protected _totalItems = new UmbNumberState(0);
+	public readonly totalItems = this._totalItems.asObservable();
 
-	#filter = new UmbObjectState<FilterModelType | object>({});
-	public readonly filter = this.#filter.asObservable();
+	protected _filter = new UmbObjectState<FilterModelType | object>({});
+	public readonly filter = this._filter.asObservable();
 
 	#userDefinedProperties = new UmbArrayState<UmbCollectionColumnConfiguration>([], (x) => x.alias);
 	public readonly userDefinedProperties = this.#userDefinedProperties.asObservable();
@@ -69,7 +69,7 @@ export class UmbDefaultCollectionContext<
 	#initResolver?: () => void;
 	#initialized = false;
 
-	#init = new Promise<void>((resolve) => {
+	protected _init = new Promise<void>((resolve) => {
 		if (this.#initialized) {
 			resolve();
 		} else {
@@ -115,9 +115,9 @@ export class UmbDefaultCollectionContext<
 		});
 	}
 
-	#configured = false;
+	protected _configured = false;
 
-	#configure() {
+	protected _configure() {
 		if (!this.#config) return;
 
 		this.selection.setMultiple(true);
@@ -126,9 +126,9 @@ export class UmbDefaultCollectionContext<
 			this.pagination.setPageSize(this.#config.pageSize);
 		}
 
-		const filterValue = this.#filter.getValue() as FilterModelType;
+		const filterValue = this._filter.getValue() as FilterModelType;
 
-		this.#filter.setValue({
+		this._filter.setValue({
 			...this.#defaultFilter,
 			...this.#config,
 			...filterValue,
@@ -148,11 +148,11 @@ export class UmbDefaultCollectionContext<
 
 		this.view.setConfig(viewManagerConfig);
 
-		this.#configured = true;
+		this._configured = true;
 	}
 
 	#checkIfInitialized() {
-		if (this.#repository) {
+		if (this._repository) {
 			this.#initialized = true;
 			this.#initResolver?.();
 		}
@@ -167,7 +167,7 @@ export class UmbDefaultCollectionContext<
 			repositoryAlias,
 			[this._host],
 			(permitted, ctrl) => {
-				this.#repository = permitted ? ctrl.api : undefined;
+				this._repository = permitted ? ctrl.api : undefined;
 				this.#checkIfInitialized();
 			},
 		);
@@ -193,12 +193,12 @@ export class UmbDefaultCollectionContext<
 	}
 
 	public set manifest(manifest: ManifestCollection | undefined) {
-		if (this.#manifest === manifest) return;
-		this.#manifest = manifest;
-		this.#observeRepository(this.#manifest?.meta.repositoryAlias);
+		if (this._manifest === manifest) return;
+		this._manifest = manifest;
+		this.#observeRepository(this._manifest?.meta.repositoryAlias);
 	}
 	public get manifest() {
-		return this.#manifest;
+		return this._manifest;
 	}
 
 	/**
@@ -207,24 +207,24 @@ export class UmbDefaultCollectionContext<
 	 * @memberof UmbCollectionContext
 	 */
 	public async requestCollection() {
-		await this.#init;
+		await this._init;
 
-		if (!this.#configured) this.#configure();
+		if (!this._configured) this._configure();
 
-		if (!this.#repository) throw new Error(`Missing repository for ${this.#manifest}`);
+		if (!this._repository) throw new Error(`Missing repository for ${this._manifest}`);
 
-		this.#loading.setValue(true);
+		this._loading.setValue(true);
 
-		const filter = this.#filter.getValue();
-		const { data } = await this.#repository.requestCollection(filter);
+		const filter = this._filter.getValue();
+		const { data } = await this._repository.requestCollection(filter);
 
 		if (data) {
-			this.#items.setValue(data.items);
-			this.#totalItems.setValue(data.total);
+			this._items.setValue(data.items);
+			this._totalItems.setValue(data.total);
 			this.pagination.setTotalItems(data.total);
 		}
 
-		this.#loading.setValue(false);
+		this._loading.setValue(false);
 	}
 
 	/**
@@ -233,7 +233,7 @@ export class UmbDefaultCollectionContext<
 	 * @memberof UmbCollectionContext
 	 */
 	public setFilter(filter: Partial<FilterModelType>) {
-		this.#filter.setValue({ ...this.#filter.getValue(), ...filter });
+		this._filter.setValue({ ...this._filter.getValue(), ...filter });
 		this.requestCollection();
 	}
 
@@ -258,7 +258,7 @@ export class UmbDefaultCollectionContext<
 	}
 
 	#onReloadStructureRequest = (event: UmbRequestReloadStructureForEntityEvent) => {
-		const items = this.#items.getValue();
+		const items = this._items.getValue();
 		const hasItem = items.some((item) => item.unique === event.getUnique());
 		if (hasItem) {
 			this.requestCollection();
@@ -297,11 +297,11 @@ export class UmbDefaultCollectionContext<
 	 * @deprecated Use set the `.manifest` property instead.
 	 */
 	public setManifest(manifest: ManifestCollection | undefined) {
-		if (this.#manifest === manifest) return;
-		this.#manifest = manifest;
+		if (this._manifest === manifest) return;
+		this._manifest = manifest;
 
-		if (!this.#manifest) return;
-		this.#observeRepository(this.#manifest.meta.repositoryAlias);
+		if (!this._manifest) return;
+		this.#observeRepository(this._manifest.meta.repositoryAlias);
 	}
 
 	/**
@@ -311,6 +311,6 @@ export class UmbDefaultCollectionContext<
 	 * @deprecated Use get the `.manifest` property instead.
 	 */
 	public getManifest() {
-		return this.#manifest;
+		return this._manifest;
 	}
 }

src/packages/core/temporary-file/components/temporary-file-badge.element.ts

@@ -19,11 +19,16 @@ export class UmbTemporaryFileBadgeElement extends UmbLitElement {
 		return this._progress;
 	}
 
+	@property({ type: Boolean, reflect: true })
+	public complete = false;
+
 	override render() {
 		return html`<uui-badge>
 			<div id="wrapper">
-				<uui-loader-circle progress=${this.progress}></uui-loader-circle>
-				<uui-icon name="icon-arrow-up"></uui-icon>
+				<uui-loader-circle .progress=${this.complete ? 100 : this.progress}></uui-loader-circle>
+				${this.complete
+					? html`<uui-icon name="icon-check"></uui-icon>`
+					: html`<uui-icon name="icon-arrow-up"></uui-icon>`}
 			</div>
 		</uui-badge>`;
 	}
@@ -42,8 +47,16 @@ export class UmbTemporaryFileBadgeElement extends UmbLitElement {
 			font-size: var(--uui-size-6);
 		}
 
+		:host([complete]) #wrapper {
+			background-color: var(--uui-color-positive);
+		}
+		:host([complete]) uui-loader-circle {
+			color: var(--uui-color-positive);
+		}
+
 		uui-loader-circle {
 			display: absolute;
+			z-index: 2;
 			inset: 0;
 			color: var(--uui-color-focus);
 			font-size: var(--uui-size-12);

src/packages/media/media/collection/media-collection.context.ts

@@ -1,8 +1,10 @@
-import type { UmbMediaCollectionFilterModel, UmbMediaCollectionItemModel } from './types.js';
+import { UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE } from '../entity.js';
+import type { UmbFileDropzoneItemStatus } from '../dropzone/types.js';
 import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS } from './views/index.js';
+import type { UmbMediaCollectionFilterModel, UmbMediaCollectionItemModel } from './types.js';
 import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 export class UmbMediaCollectionContext extends UmbDefaultCollectionContext<
 	UmbMediaCollectionItemModel,
 	UmbMediaCollectionFilterModel
@@ -13,9 +15,77 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext<
 	 */
 	public readonly thumbnailItems = this.items;
 
+	#placeholders = new UmbArrayState<UmbMediaCollectionItemModel>([], (x) => x.unique);
+	public readonly placeholders = this.#placeholders.asObservable();
+
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS);
 	}
+
+	setPlaceholders(partial: Array<{ unique: string; status: UmbFileDropzoneItemStatus; name?: string }>) {
+		const items = this._items.getValue();
+
+		// We do not want to set a placeholder which unique already exists in the collection.
+		const date = new Date();
+		const placeholders: Array<UmbMediaCollectionItemModel> = partial
+			.filter((placeholder) => !items.find((item) => item.unique === placeholder.unique))
+			.map((placeholder) => ({
+				updateDate: date,
+				createDate: date,
+				entityType: UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE,
+				...placeholder,
+			}))
+			.reverse();
+		this.#placeholders.setValue(placeholders);
+
+		this._items.setValue([...placeholders, ...items]);
+		this._totalItems.setValue(placeholders.length + items.length);
+		this.pagination.setTotalItems(placeholders.length + items.length);
+	}
+
+	updatePlaceholderStatus(unique: string, status?: UmbFileDropzoneItemStatus) {
+		this._items.updateOne(unique, { status });
+		this.#placeholders.updateOne(unique, { status });
+	}
+
+	/**
+	 * Requests the collection from the repository.
+	 * @returns {*}
+	 * @memberof UmbCollectionContext
+	 */
+	public override async requestCollection() {
+		await this._init;
+
+		if (!this._configured) this._configure();
+
+		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);
+
+		if (data) {
+			this.#cleanupPlaceholdersFromCollection(data.items);
+			const placeholders = this.#placeholders.getValue();
+
+			this._items.setValue([...placeholders, ...data.items]);
+			this._totalItems.setValue(placeholders.length + data.total);
+			this.pagination.setTotalItems(placeholders.length + data.total);
+		}
+
+		this._loading.setValue(false);
+	}
+
+	#cleanupPlaceholdersFromCollection(collection: Array<UmbMediaCollectionItemModel>) {
+		const placeholderItems = this.#placeholders.getValue();
+
+		const dataSet = new Set(collection.map((item) => item.unique));
+		const completedPlaceholders = placeholderItems.filter((item) => dataSet.has(item.unique));
+		completedPlaceholders.forEach((placeholder) => {
+			this.#placeholders.removeOne(placeholder.unique);
+		});
+	}
 }
 
 export { UmbMediaCollectionContext as api };

src/packages/media/media/collection/media-collection.element.ts

@@ -1,8 +1,10 @@
 import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../entity.js';
 import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../workspace/media-workspace.context-token.js';
+import { UmbFileDropzoneItemStatus, type UmbUploadableItem } from '../dropzone/types.js';
+import type { UmbDropzoneElement } from '../dropzone/dropzone.element.js';
 import type { UmbMediaCollectionContext } from './media-collection.context.js';
 import { UMB_MEDIA_COLLECTION_CONTEXT } from './media-collection.context-token.js';
-import { customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, query, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 import './media-collection-toolbar.element.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
@@ -18,6 +20,9 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	@state()
 	private _unique: string | null = null;
 
+	@query('#dropzone')
+	private _dropzone!: UmbDropzoneElement;
+
 	constructor() {
 		super();
 		this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (instance) => {
@@ -30,6 +35,32 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 		});
 	}
 
+	#observeProgressItems() {
+		this.observe(
+			this._dropzone.progressItems(),
+			(progressItems) => {
+				progressItems.forEach((item) => {
+					if (item.status === UmbFileDropzoneItemStatus.COMPLETE && !item.folder?.name) {
+						// We do not update folders as it may have children still being uploaded.
+						this.#mediaCollection?.updatePlaceholderStatus(item.unique, UmbFileDropzoneItemStatus.COMPLETE);
+					}
+				});
+			},
+			'_observeProgressItems',
+		);
+	}
+
+	async #setupPlaceholders(event: CustomEvent) {
+		event.preventDefault();
+		const uploadable = event.detail as Array<UmbUploadableItem>;
+		const placeholders = uploadable
+			.filter((p) => p.parentUnique === this._unique)
+			.map((p) => ({ unique: p.unique, status: p.status, name: p.temporaryFile?.file.name ?? p.folder?.name }));
+
+		this.#mediaCollection?.setPlaceholders(placeholders);
+		this.#observeProgressItems();
+	}
+
 	async #onComplete() {
 		this._progress = -1;
 		this.#mediaCollection?.requestCollection();
@@ -54,8 +85,10 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 			<umb-media-collection-toolbar slot="header"></umb-media-collection-toolbar>
 			${when(this._progress >= 0, () => html`<uui-loader-bar progress=${this._progress}></uui-loader-bar>`)}
 			<umb-dropzone
+				id="dropzone"
 				multiple
 				.parentUnique=${this._unique}
+				@submitted=${this.#setupPlaceholders}
 				@complete=${this.#onComplete}
 				@progress=${this.#onProgress}></umb-dropzone>
 		`;