Close fix and multiselect

src/Umbraco.Web.UI.Client/src/backoffice/property-editors/modal-content-picker.element.ts

@@ -0,0 +1,121 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import UmbModalHandler from '../../core/services/modalHandler';
+import { UmbPropertyEditorContentPicker } from './property-editor-content-picker.element';
+
+@customElement('umb-modal-content-picker')
+class UmbModalContentPicker extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: 16px;
+				margin-right: 16px;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	modalHandler?: UmbModalHandler;
+
+	private _tempContent = [
+		{
+			id: 1,
+			name: 'Content 1',
+			description: 'Content 1 description',
+			icon: 'icon-umb-content',
+		},
+		{
+			id: 2,
+			name: 'Content 2',
+			description: 'Content 2 description',
+			icon: 'icon-umb-content',
+		},
+		{
+			id: 3,
+			name: 'Content 3',
+			description: 'Content 3 description',
+			icon: 'icon-umb-content',
+		},
+	];
+
+	@state()
+	_selectedContent: any[] = [];
+
+	private _clickContent(content: any) {
+		if (this._selectedContent.includes(content)) {
+			this._selectedContent = this._selectedContent.filter((c) => c !== content);
+		} else {
+			this._selectedContent.push(content);
+		}
+
+		this.requestUpdate('_selectedContent');
+	}
+
+	private _submit() {
+		this.modalHandler?.close(this._selectedContent);
+	}
+
+	private _close() {
+		this.modalHandler?.close();
+	}
+
+	render() {
+		return html`
+			<umb-editor-layout>
+				<h3 slot="name">Select content</h3>
+				<uui-box>
+					<uui-input></uui-input>
+					<hr />
+					<div id="content-list">
+						${this._tempContent.map(
+							(content, index) =>
+								// eslint-disable-next-line lit-a11y/click-events-have-key-events
+								html`<div
+									class=${`content-item ${this._selectedContent.includes(content) ? 'selected' : ''}`}
+									@click=${() => this._clickContent(content)}>
+									${content.name}
+								</div>`
+						)}
+					</div>
+				</uui-box>
+				<div slot="actions">
+					<uui-button label="Close" @click=${this._close}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
+				</div>
+			</umb-editor-layout>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-modal-content-picker': UmbModalContentPicker;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts

@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, query } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 
 import '@umbraco-ui/uui-modal';
 import '@umbraco-ui/uui-modal-sidebar';
@@ -9,10 +9,10 @@ import '@umbraco-ui/uui-modal-dialog';
 import { UmbContextConsumerMixin } from '../../core/context';
 import { UmbModalService } from '../../core/services/modal.service';
 
-import '../../core/services/modal-content-picker.element';
+import './modal-content-picker.element';
 
 @customElement('umb-property-editor-content-picker')
-class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement) {
+export class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -30,11 +30,18 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
 				border-bottom: 1px solid var(--uui-color-divider);
 				margin: 16px 0;
 			}
+
+			#add-button {
+				width: 100%;
+			}
 		`,
 	];
 
 	private _modalService?: UmbModalService;
 
+	@state()
+	private _selectedContent: any[] = [];
+
 	constructor() {
 		super();
 		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
@@ -44,21 +51,30 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
 
 	private _open() {
 		const modalHandler = this._modalService?.openSidebar('umb-modal-content-picker', { size: 'small' });
-		modalHandler?.onClose.then(() => {
-			console.log('Closed the modal for:', this);
+		modalHandler?.onClose.then((result) => {
+			this._selectedContent = [...this._selectedContent, ...result];
+			this.requestUpdate('_selectedContent');
 		});
 	}
 
-	private _tempOpenDialog() {
-		//TODO: remove this
-		this._modalService?.openDialog('umb-modal-content-picker');
+	private _removeContent(index: number) {
+		this._selectedContent.splice(index, 1);
+		this.requestUpdate('_selectedContent');
+	}
+
+	private _renderContent(content: any, index: number) {
+		return html`
+			<uui-ref-node name=${content.name} detail=${content.id}>
+				<uui-action-bar slot="actions">
+					<uui-button @click=${() => this._removeContent(index)}>Remove</uui-button>
+				</uui-action-bar>
+			</uui-ref-node>
+		`;
 	}
 
 	render() {
-		return html`
-			<uui-button look="primary" @click=${this._open} label="open">Open sidebar</uui-button>
-			<uui-button look="primary" @click=${this._tempOpenDialog} label="open">Open dialog</uui-button>
-		`;
+		return html`${this._selectedContent.map((content, index) => this._renderContent(content, index))}
+			<uui-button id="add-button" look="placeholder" @click=${this._open} label="open">Add</uui-button>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/services/modal-content-picker.element.ts

@@ -1,58 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
-import UmbModalHandler from './modalHandler';
-
-@customElement('umb-modal-content-picker')
-class UmbModalContentPicker extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: 16px;
-				margin-right: 16px;
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-		`,
-	];
-
-	@property({ attribute: false })
-	modalHandler?: UmbModalHandler;
-
-	private _close() {
-		this.modalHandler?.close();
-	}
-
-	render() {
-		return html`
-			<umb-editor-layout>
-				<h3 slot="name">Select content</h3>
-				<uui-box>
-					<uui-input></uui-input>
-					<hr />
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab minima et praesentium rem, nesciunt, blanditiis
-					culpa esse tempore perspiciatis recusandae magni voluptas tempora officiis commodi nihil deserunt quidem
-					aliquid sed?
-				</uui-box>
-				<div slot="actions">
-					<uui-button label="close" look="primary" @click=${this._close}></uui-button>
-				</div>
-			</umb-editor-layout>
-		`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-modal-content-picker': UmbModalContentPicker;
-	}
-}

src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts

@@ -35,7 +35,8 @@ export default class UmbModalHandler {
 		this.element.modalHandler = this;
 	}
 
-	public close() {
+	public close(...args: any) {
+		this._closeResolver(...args);
 		this.modal.close();
 	}