user group picker layout extends picker layout

This commit is contained in:
Jesper Møller Jensen
2022-11-25 16:27:20 +01:00
parent acb8a2fe59
commit 1b176bf642

View File

@@ -1,19 +1,14 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbModalLayoutElement } from '../../../core/services/modal/layouts/modal-layout.element';
import { UmbUserGroupStore } from '../../../core/stores/user/user-group.store';
import { UmbPickerData } from './picker.element';
import { UmbPickerLayoutElement } from './picker-layout.element';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import type { UserGroupDetails } from '@umbraco-cms/models';
@customElement('umb-picker-layout-user-group')
export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(
UmbObserverMixin(UmbModalLayoutElement<UmbPickerData>)
) {
export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutElement)) {
static styles = [
UUITextStyles,
css`
@@ -59,8 +54,6 @@ export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(
}
`,
];
@state()
private _selection: Array<string> = [];
@state()
private _userGroups: Array<UserGroupDetails> = [];
@@ -69,7 +62,6 @@ export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(
connectedCallback(): void {
super.connectedCallback();
this._selection = this.data?.selection || [];
this.consumeContext('umbUserGroupStore', (userGroupStore: UmbUserGroupStore) => {
this._userGroupStore = userGroupStore;
this._observeUserGroups();
@@ -84,38 +76,6 @@ export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(
);
}
private _submit() {
this.modalHandler?.close({ selection: this._selection });
}
private _close() {
this.modalHandler?.close();
}
private _handleKeydown(e: KeyboardEvent, key: string) {
if (e.key === 'Enter') {
this._handleItemClick(key);
}
}
private _handleItemClick(clickedKey: string) {
if (this.data?.multiple) {
if (this._isSelected(clickedKey)) {
this._selection = this._selection.filter((key) => key !== clickedKey);
} else {
this._selection.push(clickedKey);
}
} else {
this._selection = [clickedKey];
}
this.requestUpdate('_selection');
}
private _isSelected(key: string): boolean {
return this._selection.includes(key);
}
render() {
return html`
<umb-editor-entity-layout headline="Select user groups">