Merge pull request #1840 from umbraco/feature/media-picker-filter-and-media-input-config

Feature: MediaPickerModal Filters & InputMedia Configuration

Author: leekelleher

src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts

@@ -153,6 +153,13 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
 				grid-auto-rows: 200px;
 				gap: var(--uui-size-space-5);
 			}
+
+			img {
+				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
+				background-size: 10px 10px;
+				background-repeat: repeat;
+			}
+
 			umb-icon {
 				font-size: var(--uui-size-8);
 			}

src/packages/media/media/components/input-media/input-media.context.ts

@@ -1,11 +1,11 @@
-import { UMB_MEDIA_PICKER_MODAL, type UmbMediaCardItemModel } from '../../modals/index.js';
+import {
+	UMB_MEDIA_PICKER_MODAL,
+	type UmbMediaPickerModalData,
+	type UmbMediaPickerModalValue,
+	type UmbMediaCardItemModel,
+} from '../../modals/index.js';
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
 import type { UmbMediaItemModel } from '../../repository/item/types.js';
-import type { UmbMediaTreeItemModel } from '../../tree/index.js';
-import type {
-	UmbMediaTreePickerModalData,
-	UmbMediaTreePickerModalValue,
-} from '../../tree/media-tree-picker-modal.token.js';
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
@@ -14,9 +14,9 @@ import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api
 
 export class UmbMediaPickerContext extends UmbPickerInputContext<
 	UmbMediaItemModel,
-	UmbMediaTreeItemModel,
-	UmbMediaTreePickerModalData,
-	UmbMediaTreePickerModalValue
+	UmbMediaItemModel,
+	UmbMediaPickerModalData<UmbMediaItemModel>,
+	UmbMediaPickerModalValue
 > {
 	#imagingRepository: UmbImagingRepository;
 
@@ -40,14 +40,7 @@ export class UmbMediaPickerContext extends UmbPickerInputContext<
 			this.#cardItems.setValue(
 				selectedItems.map((item) => {
 					const url = data?.find((x) => x.unique === item.unique)?.url;
-					return {
-						icon: item.mediaType.icon,
-						name: item.name,
-						unique: item.unique,
-						isTrashed: item.isTrashed,
-						entityType: item.entityType,
-						url,
-					};
+					return { ...item, url };
 				}),
 			);
 		});

src/packages/media/media/components/input-media/input-media.element.ts

@@ -8,7 +8,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbModalRouteRegistrationController, UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
-import type { UmbUploadableFileModel } from '@umbraco-cms/backoffice/media';
 
 @customElement('umb-input-media')
 export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
@@ -22,9 +21,10 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 		identifier: 'Umb.SorterIdentifier.InputMedia',
 		itemSelector: 'uui-card-media',
 		containerSelector: '.container',
+		/** TODO: This component probably needs some grid-like logic for resolve placement... [LI] */
+		resolvePlacement: () => false,
 		onChange: ({ model }) => {
 			this.selection = model;
-
 			this.dispatchEvent(new UmbChangeEvent());
 		},
 	});
@@ -89,6 +89,12 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 	@property({ type: Boolean })
 	showOpenButton?: boolean;
 
+	@property({ type: String })
+	startNode = '';
+
+	@property({ type: Boolean })
+	multiple = false;
+
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
@@ -99,10 +105,10 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 	}
 
 	@state()
-	private _editMediaPath = '';
+	protected editMediaPath = '';
 
 	@state()
-	private _items?: Array<UmbMediaCardItemModel>;
+	protected items?: Array<UmbMediaCardItemModel>;
 
 	#pickerContext = new UmbMediaPickerContext(this);
 
@@ -115,12 +121,12 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 				return { data: { entityType: 'media', preset: {} } };
 			})
 			.observeRouteBuilder((routeBuilder) => {
-				this._editMediaPath = routeBuilder({});
+				this.editMediaPath = routeBuilder({});
 			});
 
 		this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
 		this.observe(this.#pickerContext.cardItems, (cardItems) => {
-			this._items = cardItems;
+			this.items = cardItems;
 		});
 
 		this.addValidator(
@@ -149,43 +155,31 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 
 	#openPicker() {
 		this.#pickerContext.openPicker({
-			hideTreeRoot: true,
+			multiple: this.multiple,
+			startNode: this.startNode,
 			pickableFilter: this.#pickableFilter,
 		});
 	}
 
-	async #onUploadCompleted(e: CustomEvent) {
-		const completed = e.detail?.completed as Array<UmbUploadableFileModel>;
-		const uploaded = completed.map((file) => file.unique);
-
-		this.selection = [...this.selection, ...uploaded];
-		this.dispatchEvent(new UmbChangeEvent());
+	protected onRemove(item: UmbMediaCardItemModel) {
+		this.#pickerContext.requestRemoveItem(item.unique);
 	}
 
 	render() {
-		return html`${this.#renderDropzone()}
-			<div class="container">${this.#renderItems()} ${this.#renderAddButton()}</div>`;
-	}
-
-	#renderDropzone() {
-		if (this._items && this._items.length >= this.max) return;
-		return html`<umb-dropzone
-			id="dropzone"
-			?multiple=${this.max === 1}
-			@change=${this.#onUploadCompleted}></umb-dropzone>`;
+		return html`<div class="container">${this.#renderItems()} ${this.#renderAddButton()}</div>`;
 	}
 
 	#renderItems() {
-		if (!this._items?.length) return;
+		if (!this.items?.length) return;
 		return html`${repeat(
-			this._items,
+			this.items,
 			(item) => item.unique,
-			(item) => this.#renderItem(item),
+			(item) => this.renderItem(item),
 		)}`;
 	}
 
 	#renderAddButton() {
-		if (this._items && this.max && this._items.length >= this.max) return;
+		if ((this.items && this.max && this.items.length >= this.max) || (this.items?.length && !this.multiple)) return;
 		return html`
 			<uui-button
 				id="btn-add"
@@ -198,30 +192,29 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 		`;
 	}
 
-	#renderItem(item: UmbMediaCardItemModel) {
+	protected renderItem(item: UmbMediaCardItemModel) {
 		return html`
-			<uui-card-media name=${ifDefined(item.name === null ? undefined : item.name)} detail=${ifDefined(item.unique)}>
+			<uui-card-media
+				name=${ifDefined(item.name === null ? undefined : item.name)}
+				detail=${ifDefined(item.unique)}
+				href="${this.editMediaPath}edit/${item.unique}">
 				${item.url
 					? html`<img src=${item.url} alt=${item.name} />`
-					: html`<umb-icon name=${ifDefined(item.icon)}></umb-icon>`}
-				${this.#renderIsTrashed(item)}
+					: html`<umb-icon name=${ifDefined(item.mediaType.icon)}></umb-icon>`}
+				${this.renderIsTrashed(item)}
 				<uui-action-bar slot="actions">
-					${this.#renderOpenButton(item)}
-					<uui-button label="Copy media" look="secondary">
-						<uui-icon name="icon-documents"></uui-icon>
-					</uui-button>
 					<uui-button
+						label=${this.localize.term('general_remove')}
 						look="secondary"
-						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
-						label="Remove media ${item.name}">
+						@click=${() => this.onRemove(item)}>
 						<uui-icon name="icon-trash"></uui-icon>
 					</uui-button>
 				</uui-action-bar>
 			</uui-card-media>
 		`;
 	}
 
-	#renderIsTrashed(item: UmbMediaCardItemModel) {
+	protected renderIsTrashed(item: UmbMediaCardItemModel) {
 		if (!item.isTrashed) return;
 		return html`
 			<uui-tag size="s" slot="tag" color="danger">
@@ -230,18 +223,6 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 		`;
 	}
 
-	#renderOpenButton(item: UmbMediaCardItemModel) {
-		if (!this.showOpenButton) return;
-		return html`
-			<uui-button
-				compact
-				href="${this._editMediaPath}edit/${item.unique}"
-				label=${this.localize.term('general_edit') + ` ${item.name}`}>
-				<uui-icon name="icon-edit"></uui-icon>
-			</uui-button>
-		`;
-	}
-
 	static styles = [
 		css`
 			:host {
@@ -250,8 +231,8 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 			.container {
 				display: grid;
 				gap: var(--uui-size-space-3);
-				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-				grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
+				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+				grid-auto-rows: 150px;
 			}
 
 			#btn-add {