Feature: Media Section View

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/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/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;
+	}
+}

src/packages/media/section.manifests.ts

@@ -1,6 +1,4 @@
-import { UMB_MEDIA_DETAIL_REPOSITORY_ALIAS } from './media/repository/index.js';
 import type {
-	ManifestDashboardCollection,
 	ManifestSection,
 	ManifestTypes,
 } from '@umbraco-cms/backoffice/extension-registry';
@@ -14,29 +12,11 @@ const section: ManifestSection = {
 	weight: 500,
 	meta: {
 		label: 'Media',
-		pathname: 'media',
+		pathname: 'media-management',
 	},
 	conditions: [],
 };
 
-const dashboards: Array<ManifestDashboardCollection> = [
-	{
-		type: 'dashboardCollection',
-		alias: 'Umb.Dashboard.MediaCollection',
-		name: 'Media Dashboard',
-		weight: 10,
-		meta: {
-			label: 'Media',
-			pathname: 'media-management',
-			repositoryAlias: UMB_MEDIA_DETAIL_REPOSITORY_ALIAS,
-		},
-		conditions: {
-			sections: [sectionAlias],
-			entityType: 'media',
-		},
-	},
-];
-
 const menuSectionSidebarApp: ManifestTypes = {
 	type: 'sectionSidebarApp',
 	kind: 'menu',
@@ -55,4 +35,4 @@ const menuSectionSidebarApp: ManifestTypes = {
 	],
 };
 
-export const manifests = [section, menuSectionSidebarApp, ...dashboards];
+export const manifests = [section, menuSectionSidebarApp];