yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dispatch events for select and deselect

Browse Source
This commit is contained in:
Mads Rasmussen
2023-10-02 14:43:32 +02:00
parent 2b7eabc708
commit 38bfdca9b3
1 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Umbraco.Web.UI.Client/src/packages/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
View File

@@ -4,6 +4,8 @@ import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoff
import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
import { UmbSelectedEvent, UmbDeselectedEvent } from '@umbraco-cms/backoffice/events';
@customElement('umb-user-group-picker-modal')
export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any> {
@@ -23,10 +25,30 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
this.observe(asObservable(), (items) => (this._userGroups = items));
}
#onSelected(event: UUIMenuItemEvent, item: UserGroupResponseModel) {
if (!item.id) throw new Error('User group id is required');
event.stopPropagation();
this.#selectionManager.select(item.id);
this.#updateSelectionValue();
this.requestUpdate();
this.modalContext?.dispatchEvent(new UmbSelectedEvent(item.id));
}
#onDeselected(event: UUIMenuItemEvent, item: UserGroupResponseModel) {
if (!item.id) throw new Error('User group id is required');
event.stopPropagation();
this.#selectionManager.deselect(item.id);
this.#updateSelectionValue();
this.requestUpdate();
this.modalContext?.dispatchEvent(new UmbDeselectedEvent(item.id));
}
#updateSelectionValue() {
this.modalContext?.updateValue({ selection: this.#selectionManager.getSelection() });
}
#submit() {
this.modalContext?.submit({
selection: this.#selectionManager.getSelection(),
});
this.modalContext?.submit(this._value);
}
#close() {
@@ -42,8 +64,8 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
<uui-menu-item
label=${ifDefined(item.name)}
selectable
@selected=${() => this.#selectionManager.select(item.id!)}
@deselected=${() => this.#selectionManager.deselect(item.id!)}
@selected=${(event: UUIMenuItemEvent) => this.#onSelected(event, item)}
@deselected=${(event: UUIMenuItemEvent) => this.#onDeselected(event, item)}
?selected=${this.#selectionManager.isSelected(item.id!)}>
<uui-icon .name=${item.icon || null} slot="icon"></uui-icon>
</uui-menu-item>