From de0b507f8dbae98379494d05b47e689236ccbc86 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 7 Sep 2022 13:29:32 +0200
Subject: [PATCH] add another level to packages section to accomodate the
 details page

---
 .../packages/packages-details.element.ts      | 27 +++++++
 .../packages/packages-editor.element.ts       | 73 +++++++++++++++++++
 .../packages-installed-item.element.ts        |  2 +-
 .../packages/packages-section.element.ts      | 66 +++++------------
 4 files changed, 119 insertions(+), 49 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-details.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-editor.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-details.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-details.element.ts
new file mode 100644
index 0000000000..fb546600a2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-details.element.ts
@@ -0,0 +1,27 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { UmbContextConsumerMixin } from '../../../core/context';
+
+@customElement('umb-packages-details')
+export class UmbPackagesDetails extends UmbContextConsumerMixin(LitElement) {
+	@property()
+	id!: string;
+
+	connectedCallback() {
+		super.connectedCallback();
+		console.log(this.id);
+	}
+
+	render() {
+		return html` <h1>Showing details of ${this.id}</h1> `;
+	}
+}
+
+export default UmbPackagesDetails;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-packages-details': UmbPackagesDetails;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-editor.element.ts
new file mode 100644
index 0000000000..7f693e51bf
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-editor.element.ts
@@ -0,0 +1,73 @@
+import '../../editors/shared/editor-entity/editor-entity.element';
+
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { UmbContextConsumerMixin } from '../../../core/context';
+import { UmbExtensionRegistry } from '../../../core/extension';
+
+@customElement('umb-packages-editor')
+export class UmbPackagesEditor extends UmbContextConsumerMixin(LitElement) {
+	private umbExtensionRegistry?: UmbExtensionRegistry;
+
+	constructor() {
+		super();
+
+		this.consumeContext('umbExtensionRegistry', (umbExtensionRegistry: UmbExtensionRegistry) => {
+			this.umbExtensionRegistry = umbExtensionRegistry;
+			this._registerViews();
+		});
+	}
+
+	private _registerViews() {
+		this.umbExtensionRegistry?.register({
+			alias: 'Umb.Editor.Packages.Overview',
+			name: 'Packages',
+			type: 'editorView',
+			elementName: 'umb-packages-overview',
+			loader: () => import('./packages-overview.element'),
+			meta: {
+				icon: 'document',
+				pathname: 'repo',
+				editors: ['Umb.Editor.Packages'],
+				weight: 10,
+			},
+		});
+
+		this.umbExtensionRegistry?.register({
+			alias: 'Umb.Editor.Packages.Installed',
+			name: 'Installed',
+			type: 'editorView',
+			elementName: 'umb-packages-installed',
+			loader: () => import('./packages-installed.element'),
+			meta: {
+				icon: 'document',
+				pathname: 'installed',
+				editors: ['Umb.Editor.Packages'],
+				weight: 0,
+			},
+		});
+	}
+
+	render() {
+		return html`
+			<uui-icon-registry-essential>
+				<umb-section-layout>
+					<umb-section-main>
+						<umb-editor-entity alias="Umb.Editor.Packages">
+							<h1 slot="name">Packages</h1>
+						</umb-editor-entity>
+					</umb-section-main>
+				</umb-section-layout>
+			</uui-icon-registry-essential>
+		`;
+	}
+}
+
+export default UmbPackagesEditor;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-packages-editor': UmbPackagesEditor;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-installed-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-installed-item.element.ts
index c87bee2d30..759d5029c3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-installed-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-installed-item.element.ts
@@ -83,7 +83,7 @@ export class UmbPackagesInstalledItem extends UmbContextConsumerMixin(LitElement
 	}
 
 	private _onClick() {
-		window.history.pushState({}, '', `/section/packages/view/repo/${this.package.id}`);
+		window.history.pushState({}, '', `/section/packages/details/${this.package.id}`);
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-section.element.ts
index 92983854a7..6c69595639 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-section.element.ts
@@ -2,6 +2,7 @@ import '../../../backoffice/editors/shared/editor-entity/editor-entity.element';
 
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { IRoute, IRoutingInfo } from 'router-slot';
 
 import { UmbContextConsumerMixin } from '../../../core/context';
 import { UmbExtensionRegistry } from '../../../core/extension';
@@ -10,57 +11,26 @@ import { UmbExtensionRegistry } from '../../../core/extension';
 export class UmbPackagesSection extends UmbContextConsumerMixin(LitElement) {
 	private umbExtensionRegistry?: UmbExtensionRegistry;
 
-	constructor() {
-		super();
-
-		this.consumeContext('umbExtensionRegistry', (umbExtensionRegistry: UmbExtensionRegistry) => {
-			this.umbExtensionRegistry = umbExtensionRegistry;
-			this._registerViews();
-		});
-	}
-
-	private _registerViews() {
-		this.umbExtensionRegistry?.register({
-			alias: 'Umb.Editor.Packages.Overview',
-			name: 'Packages',
-			type: 'editorView',
-			elementName: 'umb-packages-overview',
-			loader: () => import('./packages-overview.element'),
-			meta: {
-				icon: 'document',
-				pathname: 'repo',
-				editors: ['Umb.Editor.Packages'],
-				weight: 10,
+	private _routes: IRoute[] = [
+		{
+			path: 'details/:id',
+			component: () => import('./packages-details.element'),
+			setup(component: any, info: IRoutingInfo) {
+				component.id = info.match.params.id;
 			},
-		});
-
-		this.umbExtensionRegistry?.register({
-			alias: 'Umb.Editor.Packages.Installed',
-			name: 'Installed',
-			type: 'editorView',
-			elementName: 'umb-packages-installed',
-			loader: () => import('./packages-installed.element'),
-			meta: {
-				icon: 'document',
-				pathname: 'installed',
-				editors: ['Umb.Editor.Packages'],
-				weight: 0,
-			},
-		});
-	}
+		},
+		{
+			path: '',
+			component: () => import('./packages-editor.element'),
+		},
+		{
+			path: '**',
+			redirectTo: '',
+		},
+	];
 
 	render() {
-		return html`
-			<uui-icon-registry-essential>
-				<umb-section-layout>
-					<umb-section-main>
-						<umb-editor-entity alias="Umb.Editor.Packages">
-							<h1 slot="name">Packages</h1>
-						</umb-editor-entity>
-					</umb-section-main>
-				</umb-section-layout>
-			</uui-icon-registry-essential>
-		`;
+		return html` <router-slot .routes=${this._routes}></router-slot> `;
 	}
 }