From 44e3fdc4a7401f7729592dcf998ac6899aba58e9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 8 May 2023 19:44:46 +0200
Subject: [PATCH] use selection manager in user picker

---
 .../modal/token/user-picker-modal.token.ts    |  2 +-
 .../user-picker/user-picker-modal.element.ts  | 34 ++++++++-----------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/user-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/user-picker-modal.token.ts
index 43cced8222..51eaf7d76f 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/user-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/user-picker-modal.token.ts
@@ -4,7 +4,7 @@ import { UserResponseModel } from '@umbraco-cms/backoffice/backend-api';
 export type UmbUserPickerModalData = UmbPickerModalData<UserResponseModel>;
 
 export interface UmbUserPickerModalResult {
-	selection: Array<string>;
+	selection: Array<string | null>;
 }
 
 export const UMB_USER_PICKER_MODAL = new UmbModalToken<UmbUserPickerModalData, UmbUserPickerModalResult>(
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
index 3b806610de..a3902aa277 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
@@ -1,30 +1,20 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { UmbUserRepository } from '../../repository/user.repository';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalHandler, UmbUserPickerModalData, UmbUserPickerModalResult } from '@umbraco-cms/backoffice/modal';
+import { UmbUserPickerModalData, UmbUserPickerModalResult } from '@umbraco-cms/backoffice/modal';
 import { createExtensionClass, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UserResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
+import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-user-picker-modal')
-export class UmbUserPickerModalElement extends UmbLitElement {
-	@property({ attribute: false })
-	modalHandler?: UmbModalHandler<UmbUserPickerModalData, UmbUserPickerModalResult>;
-
-	@property({ type: Object, attribute: false })
-	data?: UmbUserPickerModalData;
-
-	@state()
-	_selection: Array<string> = [];
-
-	@state()
-	_multiple = false;
-
+export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPickerModalData, UmbUserPickerModalResult> {
 	@state()
 	private _users: Array<UserResponseModel> = [];
 
+	#selectionManager = new UmbSelectionManagerBase();
 	#userRepository?: UmbUserRepository;
 
 	constructor() {
@@ -59,7 +49,7 @@ export class UmbUserPickerModalElement extends UmbLitElement {
 	}
 
 	#submit() {
-		this.modalHandler?.submit({ selection: this._selection });
+		this.modalHandler?.submit({ selection: this.#selectionManager.getSelection() });
 	}
 
 	#close() {
@@ -72,10 +62,14 @@ export class UmbUserPickerModalElement extends UmbLitElement {
 				<uui-box>
 					${this._users.map(
 						(user) => html`
-							<uui-menu-item label=${user.name} selectable>
+							<uui-menu-item
+								label=${user.name}
+								selectable
+								@selected=${() => this.#selectionManager.select(user.id!)}
+								@unselected=${() => this.#selectionManager.deselect(user.id!)}
+								?selected=${this.#selectionManager.isSelected(user.id!)}>
 								<uui-avatar slot="icon" name=${user.name}></uui-avatar>
-								Hello</uui-menu-item
-							>
+							</uui-menu-item>
 						`
 					)}
 				</uui-box>