From 2f5c93e182c47e0564d4203c2b678df0692f0efa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Tue, 2 Aug 2022 13:27:51 +0200
Subject: [PATCH] Sidebar now works

---
 .../property-editor-content-picker.element.ts    |  7 ++-----
 .../src/core/services/modal.service.ts           | 16 ++++++++++++----
 .../src/core/services/modalHandler.ts            |  8 ++++----
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
index 6d6d1f6e38..d0615415ac 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts
@@ -3,9 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query } from 'lit/decorators.js';
 
 import '@umbraco-ui/uui-modal';
+import '@umbraco-ui/uui-modal-sidebar';
 import '@umbraco-ui/uui-modal-container';
 import '@umbraco-ui/uui-modal-dialog';
-import { UUIModalSidebarElement } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbContextConsumerMixin } from '../../core/context';
 import { UmbModalService } from '../../core/services/modal.service';
 
@@ -33,9 +33,6 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
 		`,
 	];
 
-	@query('uui-modal-sidebar')
-	sidebar?: UUIModalSidebarElement;
-
 	private _modalService?: UmbModalService;
 
 	constructor() {
@@ -46,7 +43,7 @@ class UmbPropertyEditorContentPicker extends UmbContextConsumerMixin(LitElement)
 	}
 
 	private _open() {
-		const modalHandler = this._modalService?.open('umb-modal-content-picker');
+		const modalHandler = this._modalService?.openSidebar('umb-modal-content-picker');
 		modalHandler?.onClose().then((result) => {
 			console.log('result', result);
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
index 4a231f00be..73525ce0ec 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal.service.ts
@@ -5,12 +5,20 @@ export class UmbModalService {
 	private _modals: BehaviorSubject<Array<UmbModalHandler>> = new BehaviorSubject(<Array<UmbModalHandler>>[]);
 	public readonly modals: Observable<Array<UmbModalHandler>> = this._modals.asObservable();
 
-	public createModal(modalHandler: UmbModalHandler): void {
-		this._modals.next([...this._modals.getValue(), modalHandler]);
+	// public createModal(modalHandler: UmbModalHandler): void {
+	// 	this._modals.next([...this._modals.getValue(), modalHandler]);
+	// }
+
+	public openSidebar(elementName: string): UmbModalHandler {
+		return this._open(elementName, 'uui-modal-sidebar');
 	}
 
-	public open(elementName: string): UmbModalHandler {
-		const modalHandler = new UmbModalHandler(elementName);
+	public openDialog(elementName: string): UmbModalHandler {
+		return this._open(elementName, 'uui-modal-dialog');
+	}
+
+	private _open(elementName: string, modalElementName: string): UmbModalHandler {
+		const modalHandler = new UmbModalHandler(elementName, modalElementName);
 		modalHandler.onClose().then(() => this._close(modalHandler));
 		this._modals.next([...this._modals.getValue(), modalHandler]);
 		return modalHandler;
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts b/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
index 5ebf1b56f5..5e4539643f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modalHandler.ts
@@ -7,17 +7,17 @@ export default class UmbModalHandler {
 	public key: string;
 	public modal: any;
 
-	constructor(elementName: string) {
+	constructor(elementName: string, modalElementName: string) {
 		this.key = Date.now().toString(); //TODO better key
 		this._elementName = elementName;
-		this._createLayoutElement();
+		this._createLayoutElement(modalElementName);
 		this._closePromise = new Promise((res) => {
 			this._closeResolver = res;
 		});
 	}
 
-	private _createLayoutElement() {
-		this.modal = document.createElement('uui-modal-sidebar');
+	private _createLayoutElement(modalElementName: string) {
+		this.modal = document.createElement(modalElementName);
 		this.modal.size = 'small'; //TODO make meta object for settings
 		this.element = document.createElement(this._elementName);
 		this.modal.appendChild(this.element);