Merge pull request #1451 from umbraco/bugfix/property-editor/user-picker

Bugfix: User Picker UI

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/user-picker/property-editor-ui-user-picker.element.ts

@@ -1,7 +1,9 @@
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbUserInputElement } from '@umbraco-cms/backoffice/user';
 
 /**
  * @element umb-property-editor-ui-user-picker
@@ -9,14 +11,19 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 @customElement('umb-property-editor-ui-user-picker')
 export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property()
-	value = '';
+	value?: string = '';
 
 	@property({ attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
-	// TODO: implement config
+	#onChange(event: CustomEvent) {
+		const element = event.target as UmbUserInputElement;
+		this.value = element.selection.join(',');
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
+
 	render() {
-		return html` <umb-user-input></umb-user-input>`;
+		return html`<umb-user-input max="1" .value=${this.value ?? ''} @change=${this.#onChange}></umb-user-input>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts

@@ -1,12 +1,14 @@
 import type { UmbUserItemModel } from '../../repository/index.js';
 import { UmbUserPickerContext } from './user-input.context.js';
-import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-user-input')
 export class UmbUserInputElement extends FormControlMixin(UmbLitElement) {
+	// TODO: [LK] Add sorting!
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -105,31 +107,42 @@ export class UmbUserInputElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
+	#openPicker() {
+		this.#pickerContext.openPicker({});
+	}
+
 	render() {
 		return html`
-			<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
-			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open"
-				>Add</uui-button
-			>
+			<uui-ref-list> ${this._items?.map((item) => this.#renderItem(item))} </uui-ref-list>
+			${this.#renderAddButton()}
 		`;
 	}
 
-	private _renderItem(item: UmbUserItemModel) {
+	#renderItem(item: UmbUserItemModel) {
 		if (!item.unique) return;
 		return html`
-			<uui-ref-node-user name=${ifDefined(item.name)}>
+			<uui-ref-node-user name=${item.name}>
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.unique)} label="Remove ${item.name}"
-						>Remove</uui-button
-					>
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
+						label=${this.localize.term('general_remove')}></uui-button>
 				</uui-action-bar>
 			</uui-ref-node-user>
 		`;
 	}
 
+	#renderAddButton() {
+		if (this.max === 1 && this.selection.length >= this.max) return nothing;
+		return html`<uui-button
+			id="btn-add"
+			look="placeholder"
+			@click=${this.#openPicker}
+			label=${this.localize.term('general_add')}></uui-button>`;
+	}
+
 	static styles = [
 		css`
-			#add-button {
+			#btn-add {
 				width: 100%;
 			}
 		`,

src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts

@@ -48,7 +48,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
 
 	render() {
 		return html`
-			<umb-body-layout headline="Select Users">
+			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectUsers')}>
 				<uui-box>
 					${this._users.map(
 						(user) => html`