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

user group pickers

Browse Source
This commit is contained in:
Niels Lyngsø
2023-12-06 12:17:25 +01:00
parent 2046b8f4e8
commit 4992419286
1 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,16 @@
import { UmbUserGroupCollectionRepository } from '../../collection/repository/index.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { UMB_USER_GROUP_PICKER_MODAL, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
import { UmbSelectedEvent, UmbDeselectedEvent } from '@umbraco-cms/backoffice/event';
@customElement('umb-user-group-picker-modal')
export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any> {
export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<
(typeof UMB_USER_GROUP_PICKER_MODAL)['DATA'],
(typeof UMB_USER_GROUP_PICKER_MODAL)['VALUE']
> {
@state()
private _userGroups: Array<UserGroupResponseModel> = [];
@@ -20,7 +22,8 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
this.#selectionManager.setMultiple(this.data?.multiple ?? false);
this.#selectionManager.setSelection(this.data?.selection ?? []);
this.#selectionManager.setSelection(this._value?.selection ?? []);
this.observe(this.#selectionManager.selection, (selection) => this.updateValue({ selection }), 'selectionObserver');
}
protected firstUpdated(): void {
@@ -37,7 +40,6 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
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));
}
@@ -46,15 +48,10 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
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() });
}
render() {
return html`
<umb-body-layout headline=${this.localize.term('user_selectUserGroup', false)}>
@@ -80,7 +77,7 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
`;
}
static styles = [UmbTextStyles, css``];
static styles = [UmbTextStyles];
}
export default UmbUserGroupPickerModalElement;