diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts index 595996c49c..121447158b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts @@ -1,13 +1,12 @@ import type { UmbMemberGroupItemModel } from '../../repository/index.js'; import { UmbMemberPickerContext } from './input-member-group.context.js'; import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit'; -import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api'; import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; -import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; +import { UmbModalRouteRegistrationController, UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal'; +import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-input-member-group') export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElement, '') { @@ -89,7 +88,6 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen @property() public set value(idsString: string) { - // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. this.selection = splitStringToArray(idsString); } public get value(): string { @@ -110,7 +108,6 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen constructor() { super(); - // TODO: This would have to be more specific if used in a property editor context... [NL] new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) .addAdditionalPath('member-group') .onSetup(() => { @@ -120,10 +117,8 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen this._editMemberGroupPath = routeBuilder({}); }); - this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(','))); - this.observe(this.#pickerContext.selectedItems, (selectedItems) => { - this._items = selectedItems; - }); + this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection'); + this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observeItems'); } connectedCallback(): void { @@ -142,16 +137,6 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen ); } - protected _openPicker() { - this.#pickerContext.openPicker({ - hideTreeRoot: true, - }); - } - - protected _requestRemoveItem(item: UmbMemberGroupItemModel) { - this.#pickerContext.requestRemoveItem(item.unique!); - } - protected getFormElement() { return undefined; } @@ -162,29 +147,31 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen }); } - #requestRemoveItem(item: MemberItemResponseModel) { - this.#pickerContext.requestRemoveItem(item.id!); + #removeItem(item: UmbMemberGroupItemModel) { + this.#pickerContext.requestRemoveItem(item.unique); } render() { - return html` ${this.#renderItems()} ${this.#renderAddButton()} `; + return html`${this.#renderItems()} ${this.#renderAddButton()}`; } #renderItems() { if (!this._items) return; - return html` - ${repeat( - this._items, - (item) => item.unique, - (item) => this.#renderItem(item), - )} - `; + return html` + + ${repeat( + this._items, + (item) => item.unique, + (item) => this.#renderItem(item), + )} + + `; } #renderAddButton() { if (this.max === 1 && this.selection.length >= this.max) return; return html``; @@ -192,17 +179,11 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen #renderItem(item: UmbMemberGroupItemModel) { if (!item.unique) return; - // TODO: get the correct variant name - const name = item.name; return html` ${this.#renderOpenButton(item)} - this._requestRemoveItem(item)} - label="${this.localize.term('general_remove')} ${name}"> - ${this.localize.term('general_remove')} - + this.#removeItem(item)} label=${this.localize.term('general_remove')}> `; @@ -210,21 +191,18 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen #renderOpenButton(item: UmbMemberGroupItemModel) { if (!this.showOpenButton) return; - // TODO: get the correct variant name - const name = item.name; return html` - + label="${this.localize.term('general_open')} ${item.name}"> + ${this.localize.term('general_open')} `; } static styles = [ css` - #add-button { + #btn-add { width: 100%; }