wip dashboard app picker

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/collection.repository.ts

@@ -0,0 +1,38 @@
+import type { UmbDashboardAppDetailModel } from './types.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbCollectionFilterModel, UmbCollectionRepository } from '@umbraco-cms/backoffice/collection';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbDashboardAppCollectionFilterModel extends UmbCollectionFilterModel {}
+
+export class UmbDashboardAppCollectionRepository extends UmbControllerBase implements UmbCollectionRepository {
+	async requestCollection(args: UmbDashboardAppCollectionFilterModel) {
+		let manifests: Array<UmbDashboardAppDetailModel> = umbExtensionsRegistry
+			.getByType('dashboardApp')
+			.map((manifest) => {
+				return {
+					unique: manifest.alias,
+					entityType: manifest.type,
+					name: manifest.meta.headline,
+				};
+			});
+
+		const skip = args.skip || 0;
+		const take = args.take || 100;
+
+		if (args.filter) {
+			const text = args.filter.toLowerCase();
+			manifests = manifests.filter((x) => x.name.toLowerCase().includes(text));
+		}
+
+		manifests.sort((a, b) => a.name.localeCompare(b.name));
+
+		const total = manifests.length;
+		const items = manifests.slice(skip, skip + take);
+		const data = { items, total };
+		return { data };
+	}
+}
+
+export { UmbDashboardAppCollectionRepository as api };

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/manifests.ts

@@ -0,0 +1,3 @@
+import { manifests as pickerManifests } from './picker/manifests.js';
+
+export const manifests: Array<UmbExtensionManifest> = [...pickerManifests];

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/picker/manifests.ts

@@ -0,0 +1,8 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.DashboardAppPicker',
+		name: 'Umb Dashboard App Picker Modal',
+		js: () => import('./picker-modal.element.js'),
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/picker/picker-modal.element.ts

@@ -0,0 +1,95 @@
+import type { UmbDashboardAppDetailModel } from '../types.js';
+import type { UmbDashboardAppPickerModalValue, UmbDashboardAppPickerModalData } from './picker-modal.token.js';
+import { UmbDashboardAppPickerContext } from './picker.context.js';
+import { html, customElement, state, repeat, nothing, type PropertyValues } from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+
+@customElement('umb-dashboard-app-picker-modal')
+export class UmbDashboardAppPickerModalElement extends UmbModalBaseElement<
+	UmbDashboardAppPickerModalData,
+	UmbDashboardAppPickerModalValue
+> {
+	@state()
+	private _items: Array<UmbDashboardAppDetailModel> = [];
+
+	@state()
+	private _searchQuery: string | undefined;
+
+	#pickerContext = new UmbDashboardAppPickerContext(this);
+
+	constructor() {
+		super();
+		this.#observeSelection();
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.#pickerContext.selection.setSelectable(true);
+		this.#pickerContext.selection.setMultiple(this.data?.multiple ?? false);
+		this.#pickerContext.selection.setSelection(this.value?.selection ?? []);
+
+		this.observe(this.#pickerContext.items, (options) => {
+			this._items = options;
+		});
+	}
+
+	protected override firstUpdated(_changedProperties: PropertyValues): void {
+		super.firstUpdated(_changedProperties);
+		this.#pickerContext.loadData();
+	}
+
+	#observeSelection() {
+		this.observe(
+			this.#pickerContext.selection.selection,
+			(selection) => {
+				this.updateValue({ selection });
+			},
+			'uopObserveSelection',
+		);
+	}
+	override render() {
+		return html`<umb-body-layout headline="Select item(s)">
+			<uui-box>${this.#renderMenu()}</uui-box>
+			${this.#renderActions()}
+		</umb-body-layout> `;
+	}
+
+	#renderMenu() {
+		if (this._searchQuery) {
+			return nothing;
+		}
+
+		return html`
+			${repeat(
+				this._items,
+				(item) => item.unique,
+				(item) => html`
+					<uui-menu-item
+						label=${this.localize.string(item.name ?? '')}
+						selectable
+						@selected=${() => this.#pickerContext.selection.select(item.unique)}
+						@deselected=${() => this.#pickerContext.selection.deselect(item.unique)}
+						?selected=${this.value.selection.includes(item.unique)}>
+					</uui-menu-item>
+				`,
+			)}
+		`;
+	}
+
+	#renderActions() {
+		return html`
+			<div slot="actions">
+				<uui-button label="Close" @click=${this._rejectModal}></uui-button>
+				<uui-button label="Submit" look="primary" color="positive" @click=${this._submitModal}></uui-button>
+			</div>
+		`;
+	}
+}
+
+export { UmbDashboardAppPickerModalElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'uop-data-configuration-type-picker-modal': UmbDashboardAppPickerModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/picker/picker-modal.token.ts

@@ -0,0 +1,19 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbDashboardAppPickerModalData {
+	multiple?: boolean;
+}
+
+export interface UmbDashboardAppPickerModalValue {
+	selection: Array<string | null>;
+}
+
+export const UMB_DASHBOARD_APP_PICKER_MODAL = new UmbModalToken<
+	UmbDashboardAppPickerModalData,
+	UmbDashboardAppPickerModalValue
+>('Umb.Modal.DashboardAppPicker', {
+	modal: {
+		type: 'sidebar',
+		size: 'small',
+	},
+});

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/picker/picker.context.token.ts

@@ -0,0 +1,6 @@
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UmbDashboardAppPickerContext } from './picker.context';
+
+export const UMB_DASHBOARD_APP_PICKER_CONTEXT = new UmbContextToken<UmbDashboardAppPickerContext>(
+	'Umb.Modal.DashboardAppPicker',
+);

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/picker/picker.context.ts

@@ -0,0 +1,28 @@
+import type { UmbDashboardAppDetailModel } from '../types.js';
+import { UmbDashboardAppCollectionRepository } from '../collection.repository.js';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbCollectionItemPickerContext } from '@umbraco-cms/backoffice/collection';
+
+export class UmbDashboardAppPickerContext extends UmbCollectionItemPickerContext {
+	public getUnique = (item: UmbDashboardAppDetailModel) => item.unique;
+
+	#items = new UmbArrayState<UmbDashboardAppDetailModel>([], (x) => x.unique);
+	public items = this.#items.asObservable();
+
+	#take = 100;
+	#collectionRepository = new UmbDashboardAppCollectionRepository(this);
+
+	async loadData() {
+		const { data, error } = await this.#collectionRepository.requestCollection({
+			take: this.#take,
+		});
+
+		if (error) {
+			this.#items.setValue([]);
+		}
+
+		if (data) {
+			this.#items.setValue(data.items);
+		}
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/app/types.ts

@@ -0,0 +1,5 @@
+import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+
+export interface UmbDashboardAppDetailModel extends UmbEntityModel {
+	name: string;
+}

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

@@ -1,8 +1,11 @@
 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 } from '@umbraco-cms/backoffice/external/lit';
+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 { umbOpenModal } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-dashboard')
 export class UmbDashboardElement extends UmbLitElement {
@@ -14,9 +17,44 @@ export class UmbDashboardElement extends UmbLitElement {
 		['large', 'large'],
 	]);
 
+	@state()
+	_apps: Array<UmbDashboardAppDetailModel> = [];
+
+	// TODO: this is just a temp value. We need to look up the item data.
+	@state()
+	_appUniques: Array<string> = [];
+
+	constructor() {
+		super();
+	}
+
+	async #openAppPicker() {
+		const value = await umbOpenModal(this, UMB_DASHBOARD_APP_PICKER_MODAL, {
+			data: {
+				multiple: true,
+			},
+			value: {
+				selection: this._appUniques,
+			},
+		}).catch(() => undefined);
+
+		if (value) {
+			//this._apps = value.selection;
+			this._appUniques = value.selection.filter((item) => item !== null) as Array<string>;
+		}
+	}
+
 	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}`;
+					},
+				)}
 				<umb-extension-slot
 					type="dashboardApp"
 					.renderMethod=${this.#extensionSlotRenderMethod}

src/Umbraco.Web.UI.Client/src/packages/core/dashboard/manifests.ts

@@ -1,8 +1,10 @@
 import type { UmbExtensionManifestKind } from '../extension-registry/registry.js';
-import { manifests as defaultManifests } from './default/manifests.js';
+import { manifests as appManifests } from './app/manifests.js';
 import { manifests as conditionManifests } from './conditions/manifests.js';
+import { manifests as defaultManifests } from './default/manifests.js';
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
-	...defaultManifests,
+	...appManifests,
 	...conditionManifests,
+	...defaultManifests,
 ];