From 1e477a055138ebc7fd5ba73519beefb3b0f26a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 19 Dec 2022 14:59:48 +0100
Subject: [PATCH] added collection layout grid

---
 .../collection/collection-toolbar.element.ts   |  4 ++--
 .../layouts/collection-layout-grid.element.ts  | 18 ++++++++++++++++++
 .../components/collection/layouts/manifests.ts | 17 +++++++++++++++++
 .../collection-header-view.models.ts           |  8 ++++----
 .../src/core/extensions-registry/models.ts     |  8 ++++----
 5 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/manifests.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts
index e6e0383fef..fb52592c89 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts
@@ -5,7 +5,7 @@ import '../tooltip-menu.element';
 import { TooltipMenuItem } from '../tooltip-menu.element';
 
 @customElement('umb-collection-toolbar')
-export class UmbCollectionHeaderElement extends LitElement {
+export class UmbCollectionToolbarElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -146,6 +146,6 @@ export class UmbCollectionHeaderElement extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-collection-toolbar': UmbCollectionHeaderElement;
+		'umb-collection-toolbar': UmbCollectionToolbarElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts
new file mode 100644
index 0000000000..dadfb0de09
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts
@@ -0,0 +1,18 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-collection-layout-grid')
+export class UmbCollectionLayoutGridElement extends LitElement {
+	static styles = [UUITextStyles, css``];
+
+	render() {
+		return html`umb-collection-layout-grid`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-collection-layout-grid': UmbCollectionLayoutGridElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/manifests.ts
new file mode 100644
index 0000000000..74f03af213
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/manifests.ts
@@ -0,0 +1,17 @@
+import type { ManifestCollectionBulkAction, ManifestCollectionLayout } from '@umbraco-cms/models';
+
+export const manifests: Array<ManifestCollectionLayout> = [
+	{
+		type: 'collectionLayout',
+		alias: 'Umb.CollectionLayout.Grid',
+		name: 'Grid',
+		elementName: 'umb-collection-bulk-action',
+		loader: () => import('./collection-layout-grid.element'),
+		weight: 100,
+		meta: {
+			label: 'Grid',
+			icon: 'umb:grid',
+			entityType: 'media',
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/collection-header-view.models.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/collection-header-view.models.ts
index 539398470b..97fe75e53c 100644
--- a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/collection-header-view.models.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/collection-header-view.models.ts
@@ -1,11 +1,11 @@
 import type { ManifestElement } from './models';
 
-export interface ManifestCollectionHeaderView extends ManifestElement {
-	type: 'collectionHeaderView';
-	meta: MetaCollectionHeaderView;
+export interface ManifestCollectionLayout extends ManifestElement {
+	type: 'collectionLayout';
+	meta: MetaCollectionLayout;
 }
 
-export interface MetaCollectionHeaderView {
+export interface MetaCollectionLayout {
 	label: string;
 	icon: string;
 	entityType: string;
diff --git a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts
index 8beebab941..023f1a5c99 100644
--- a/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/extensions-registry/models.ts
@@ -13,7 +13,7 @@ import type { ManifestPropertyAction } from './property-action.models';
 import type { ManifestPackageView } from './package-view.models';
 import type { ManifestExternalLoginProvider } from './external-login-provider.models';
 import type { ManifestCollectionBulkAction } from './collection-bulk-action.models';
-import type { ManifestCollectionHeaderView } from './collection-header-view.models';
+import type { ManifestCollectionLayout } from './collection-header-view.models';
 
 export * from './header-app.models';
 export * from './section.models';
@@ -51,7 +51,7 @@ export type ManifestTypes =
 	| ManifestEntrypoint
 	| ManifestCustom
 	| ManifestCollectionBulkAction
-	| ManifestCollectionHeaderView;
+	| ManifestCollectionLayout;
 
 export type ManifestStandardTypes =
 	| 'headerApp'
@@ -71,7 +71,7 @@ export type ManifestStandardTypes =
 	| 'entrypoint'
 	| 'externalLoginProvider'
 	| 'collectionBulkAction'
-	| 'collectionHeaderView';
+	| 'collectionLayout';
 
 export type ManifestElementType =
 	| ManifestSection
@@ -88,7 +88,7 @@ export type ManifestElementType =
 	| ManifestPackageView
 	| ManifestExternalLoginProvider
 	| ManifestCollectionBulkAction
-	| ManifestCollectionHeaderView;
+	| ManifestCollectionLayout;
 
 export interface ManifestBase {
 	type: string;