Added Media Section View

to display the Media Collection component.

The `umb-media-section-view` component is still a work-in-progress.
It needs to have the default collection data-type configuration wired up.

src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts

@@ -5,6 +5,7 @@ import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/m
 import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as propertyEditorsManifests } from './property-editors/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as sectionViewManifests } from './section-view/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as userPermissionManifests } from './user-permissions/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
@@ -17,6 +18,7 @@ export const manifests = [
 	...menuItemManifests,
 	...propertyEditorsManifests,
 	...repositoryManifests,
+	...sectionViewManifests,
 	...treeManifests,
 	...userPermissionManifests,
 	...workspaceManifests,

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

@@ -0,0 +1,24 @@
+import type { ManifestSectionView } from '@umbraco-cms/backoffice/extension-registry';
+
+const sectionsViews: Array<ManifestSectionView> = [
+	{
+		type: 'sectionView',
+		alias: 'Umb.SectionView.Media',
+		name: 'Media Section View',
+		element: () => import('./media-section-view.element.js'),
+		weight: 200,
+		meta: {
+			label: 'Media',
+			pathname: 'media',
+			icon: 'icon-user',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.SectionAlias',
+				match: 'Umb.Section.Media',
+			},
+		],
+	},
+];
+
+export const manifests = [...sectionsViews];

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

@@ -0,0 +1,67 @@
+import { UMB_MEDIA_COLLECTION_ALIAS } from '../collection/index.js';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbCollectionElement } from '@umbraco-cms/backoffice/collection';
+import type { UmbRoute } from '@umbraco-cms/backoffice/router';
+
+@customElement('umb-media-section-view')
+export class UmbMediaSectionViewElement extends UmbLitElement {
+	#routes: UmbRoute[] = [
+		{
+			path: 'collection',
+			component: () => {
+
+				// TODO: [LK] Work-in-progress. Need to get the data-type configuration for the Media Collection.
+				const config = {
+					unique: '',
+					dataTypeId: 'dt-collectionView',
+					allowedEntityBulkActions: {
+						allowBulkCopy: true,
+						allowBulkDelete: true,
+						allowBulkMove: true,
+						allowBulkPublish: false,
+						allowBulkUnpublish: false,
+					},
+					orderBy: 'entityName',
+					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',
+		},
+	];
+
+	render() {
+		return html`<umb-router-slot id="router-slot" .routes=${this.#routes}></umb-router-slot>`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				height: 100%;
+			}
+
+			#router-slot {
+				height: calc(100% - var(--umb-header-layout-height));
+			}
+		`,
+	];
+}
+
+export default UmbMediaSectionViewElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-section-view': UmbMediaSectionViewElement;
+	}
+}