render picked apps

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/default/dashboard.element.ts

@@ -1,11 +1,14 @@
 import type { ManifestDashboardApp } from '../dashboard-app.extension.js';
 import { UMB_DASHBOARD_APP_PICKER_MODAL } from '../app/picker/picker-modal.token.js';
-import type { UmbDashboardAppDetailModel } from '../app/types.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, nothing, ifDefined, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
+import {
+	UmbExtensionsElementInitializer,
+	type UmbExtensionElementInitializer,
+} from '@umbraco-cms/backoffice/extension-api';
 import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-dashboard')
 export class UmbDashboardElement extends UmbLitElement {
@@ -17,17 +20,49 @@ export class UmbDashboardElement extends UmbLitElement {
 		['large', 'large'],
 	]);
 
+	#extensionsController?: UmbExtensionsElementInitializer<UmbExtensionManifest, 'dashboardApp', ManifestDashboardApp>;
+
 	@state()
-	_apps: Array<UmbDashboardAppDetailModel> = [];
+	_appElements: Array<any> = [];
 
-	// TODO: this is just a temp value. We need to look up the item data.
 	@state()
 	_appUniques: Array<string> = [];
 
 	constructor() {
 		super();
 	}
 
+	#observeDashboardApps(): void {
+		this.#extensionsController?.destroy();
+		this.#extensionsController = new UmbExtensionsElementInitializer<
+			UmbExtensionManifest,
+			'dashboardApp',
+			ManifestDashboardApp
+		>(
+			this,
+			umbExtensionsRegistry,
+			'dashboardApp',
+			(manifest) => this._appUniques.includes(manifest.alias),
+			(extensionControllers) => {
+				this._appElements = extensionControllers.map((controller) => {
+					if (controller.component && controller.manifest) {
+						const size = this.#sizeMap.get(controller.manifest.meta?.size) ?? this.#defaultSize;
+						const headline = controller.manifest?.meta?.headline
+							? this.localize.string(controller.manifest?.meta?.headline)
+							: undefined;
+
+						return html`<uui-box part="umb-dashboard-app-${size}" headline=${ifDefined(headline)}
+							>${controller.component}</uui-box
+						>`;
+					} else {
+						return html`<uui-box part="umb-dashboard-app-${this.#defaultSize}">Not Found</uui-box>`;
+					}
+				});
+			},
+			undefined, // We can leave the alias to undefined, as we destroy this our selfs.
+		);
+	}
+
 	async #openAppPicker() {
 		const value = await umbOpenModal(this, UMB_DASHBOARD_APP_PICKER_MODAL, {
 			data: {
@@ -39,22 +74,22 @@ export class UmbDashboardElement extends UmbLitElement {
 		}).catch(() => undefined);
 
 		if (value) {
-			//this._apps = value.selection;
 			this._appUniques = value.selection.filter((item) => item !== null) as Array<string>;
+			this.#observeDashboardApps();
 		}
 	}
 
 	override render() {
 		return html`
 			<section id="content">
 				<uui-button look="placeholder" @click=${this.#openAppPicker}>Add</uui-button>
-				${repeat(
-					this._appUniques,
-					(unique) => unique,
-					(unique) => {
-						return html`${unique}`;
-					},
-				)}
+				<div class="grid-container">
+					${repeat(
+						this._appElements,
+						(element) => element,
+						(element) => element,
+					)}
+				</div>
 				<umb-extension-slot
 					type="dashboardApp"
 					.renderMethod=${this.#extensionSlotRenderMethod}
@@ -83,7 +118,6 @@ export class UmbDashboardElement extends UmbLitElement {
 			.grid-container {
 				display: grid;
 				grid-template-columns: repeat(4, 1fr);
-				grid-template-rows: repeat(100, 225px);
 				margin: calc(var(--uui-size-space-3) * -1);
 			}