Merge pull request #1275 from umbraco/feature/media-section-view-collection-amends

Media section view collection amends

src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts

@@ -810,7 +810,7 @@ export const data: Array<UmbMockDataTypeModel> = [
 		isDeletable: false,
 		canIgnoreStartNodes: false,
 		values: [
-			{ alias: 'pageSize', value: 2 },
+			{ alias: 'pageSize', value: 25 },
 			{ alias: 'orderDirection', value: 'desc' },
 			{
 				alias: 'includeProperties',
@@ -844,6 +844,51 @@ export const data: Array<UmbMockDataTypeModel> = [
 			{ alias: 'useInfiniteEditor', value: true },
 		],
 	},
+	{
+		name: 'Collection View - Media',
+		id: '3a0156c4-3b8c-4803-bdc1-6871faa83fff',
+		parent: null,
+		editorAlias: 'Umbraco.ListView',
+		editorUiAlias: 'Umb.PropertyEditorUi.CollectionView',
+		hasChildren: false,
+		isFolder: false,
+		isDeletable: false,
+		canIgnoreStartNodes: false,
+		values: [
+			{ alias: 'pageSize', value: 2 },
+			{ alias: 'orderDirection', value: 'desc' },
+			{
+				alias: 'includeProperties',
+				value: [
+					{ alias: 'sortOrder', header: 'Sort order', isSystem: true, nameTemplate: '' },
+					{ alias: 'updateDate', header: 'Last edited', isSystem: true },
+					{ alias: 'owner', header: 'Created by', isSystem: true },
+				],
+			},
+			{ alias: 'orderBy', value: 'updateDate' },
+			{
+				alias: 'bulkActionPermissions',
+				value: {
+					allowBulkPublish: false,
+					allowBulkUnpublish: false,
+					allowBulkCopy: true,
+					allowBulkMove: true,
+					allowBulkDelete: true,
+				},
+			},
+			{
+				alias: 'layouts',
+				value: [
+					{ icon: 'icon-grid', isSystem: true, name: 'Grid', path: '', selected: true },
+					{ icon: 'icon-list', isSystem: true, name: 'Table', path: '', selected: true },
+				],
+			},
+			{ alias: 'icon', value: 'icon-layers' },
+			{ alias: 'tabName', value: 'Items' },
+			{ alias: 'showContentFirst', value: false },
+			{ alias: 'useInfiniteEditor', value: true },
+		],
+	},
 	{
 		name: 'Icon Picker',
 		id: 'dt-iconPicker',

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/repository/media-collection.repository.ts

@@ -10,6 +10,13 @@ export class UmbMediaCollectionRepository implements UmbCollectionRepository {
 		this.#collectionSource = new UmbMediaCollectionServerDataSource(host);
 	}
 
+	async getDefaultConfiguration() {
+		return {
+			// TODO: The default Collection data-type ID (for the Media ListView) will come from the server soon.  [LK]
+			defaultDataTypeId: '3a0156c4-3b8c-4803-bdc1-6871faa83fff',
+		};
+	}
+
 	async requestCollection(query: UmbMediaCollectionFilterModel) {
 		return this.#collectionSource.getCollection(query);
 	}

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/repository/media-collection.server.data-source.ts

@@ -13,9 +13,9 @@ export class UmbMediaCollectionServerDataSource implements UmbCollectionDataSour
 	}
 
 	async getCollection(query: UmbMediaCollectionFilterModel) {
-		// if (!query.dataTypeId) {
-		// 	throw new Error('Data type ID is required to fetch a collection.');
-		// }
+		if (!query.dataTypeId) {
+			throw new Error('Data type ID is required to fetch a collection.');
+		}
 
 		const params = {
 			id: query.unique ?? '',

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts

@@ -51,6 +51,9 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _selection: Array<string> = [];
 
+	@state()
+	private _skip: number = 0;
+
 	#collectionContext?: UmbDefaultCollectionContext<UmbMediaCollectionItemModel, UmbMediaCollectionFilterModel>;
 
 	constructor() {
@@ -89,6 +92,14 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 			},
 			'umbCollectionSelectionObserver',
 		);
+
+		this.observe(
+			this.#collectionContext.pagination.skip,
+			(skip) => {
+				this._skip = skip;
+			},
+			'umbCollectionSkipObserver',
+		);
 	}
 
 	#createTableHeadings() {
@@ -113,14 +124,16 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 			this.#createTableHeadings();
 		}
 
-		this._tableItems = items.map((item) => {
+		this._tableItems = items.map((item, rowIndex) => {
 			if (!item.unique) throw new Error('Item id is missing.');
 
+			const sortOrder = this._skip + rowIndex;
+
 			const data =
 				this._tableColumns?.map((column) => {
 					return {
 						columnAlias: column.alias,
-						value: column.elementName ? item : this.#getPropertyValueByAlias(item, column.alias),
+						value: column.elementName ? item : this.#getPropertyValueByAlias(sortOrder, item, column.alias),
 					};
 				}) ?? [];
 
@@ -132,7 +145,7 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 		});
 	}
 
-	#getPropertyValueByAlias(item: UmbMediaCollectionItemModel, alias: string) {
+	#getPropertyValueByAlias(sortOrder: number, item: UmbMediaCollectionItemModel, alias: string) {
 		switch (alias) {
 			case 'createDate':
 				return item.createDate.toLocaleString();
@@ -140,6 +153,8 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 				return item.name;
 			case 'owner':
 				return item.creator;
+			case 'sortOrder':
+				return sortOrder;
 			case 'updateDate':
 				return item.updateDate.toLocaleString();
 			default:

src/Umbraco.Web.UI.Client/src/packages/media/media/section-view/media-section-view.element.ts

@@ -1,48 +1,80 @@
 import { UMB_MEDIA_COLLECTION_ALIAS } from '../collection/index.js';
-import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbMediaCollectionRepository } from '../collection/repository/index.js';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbCollectionElement } from '@umbraco-cms/backoffice/collection';
+import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
+import type {
+	UmbCollectionBulkActionPermissions,
+	UmbCollectionConfiguration,
+} from '@umbraco-cms/backoffice/collection';
+import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
 import type { UmbRoute } from '@umbraco-cms/backoffice/router';
+import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
 @customElement('umb-media-section-view')
 export class UmbMediaSectionViewElement extends UmbLitElement {
-	#routes: UmbRoute[] = [
-		{
-			path: 'collection',
-			component: () => {
+	#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
+	#mediaCollectionRepository = new UmbMediaCollectionRepository(this);
 
-				// TODO: [LK] Work-in-progress. Need to get the data-type configuration for the Media Collection.
-				const config = {
-					unique: '',
-					dataTypeId: '', //'3a0156c4-3b8c-4803-bdc1-6871faa83fff', //'dt-collectionView',
-					allowedEntityBulkActions: {
-						allowBulkCopy: true,
-						allowBulkDelete: true,
-						allowBulkMove: true,
-						allowBulkPublish: false,
-						allowBulkUnpublish: false,
+	@state()
+	private _routes?: UmbRoute[];
+
+	constructor() {
+		super();
+
+		this.#defineRoutes();
+	}
+
+	async #defineRoutes() {
+		const config = await this.#mediaCollectionRepository.getDefaultConfiguration();
+
+		await this.#dataTypeDetailRepository.requestByUnique(config.defaultDataTypeId);
+
+		this.observe(
+			await this.#dataTypeDetailRepository.byUnique(config.defaultDataTypeId),
+			(dataType) => {
+				if (!dataType) return;
+
+				const dataTypeConfig = this.#mapDataTypeConfigToCollectionConfig(dataType);
+
+				this._routes = [
+					{
+						path: 'collection',
+						component: () => {
+							const element = new UmbCollectionElement();
+							element.alias = UMB_MEDIA_COLLECTION_ALIAS;
+							element.config = dataTypeConfig;
+							return element;
+						},
 					},
-					orderBy: 'updateDate',
-					orderDirection: 'asc',
-					pageSize: 50,
-					useInfiniteEditor: false,
-					userDefinedProperties: undefined,
-				};
-
-				const element = new UmbCollectionElement();
-				element.alias = UMB_MEDIA_COLLECTION_ALIAS;
-				element.config = config;
-				return element;
+					{
+						path: '',
+						redirectTo: 'collection',
+					},
+				];
 			},
-		},
-		{
-			path: '',
-			redirectTo: 'collection',
-		},
-	];
+			'_observeConfigDataType',
+		);
+	}
+
+	#mapDataTypeConfigToCollectionConfig(dataType: UmbDataTypeDetailModel): UmbCollectionConfiguration {
+		const config = new UmbPropertyEditorConfigCollection(dataType.values);
+		return {
+			unique: '',
+			dataTypeId: dataType.unique,
+			allowedEntityBulkActions: config?.getValueByAlias<UmbCollectionBulkActionPermissions>('bulkActionPermissions'),
+			orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate',
+			orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc',
+			pageSize: Number(config?.getValueByAlias('pageSize')) ?? 50,
+			useInfiniteEditor: config?.getValueByAlias('useInfiniteEditor') ?? false,
+			userDefinedProperties: config?.getValueByAlias('includeProperties'),
+		};
+	}
 
 	render() {
-		return html`<umb-router-slot id="router-slot" .routes=${this.#routes}></umb-router-slot>`;
+		if (!this._routes) return;
+		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
 
 	static styles = [