Merge pull request #305 from umbraco/feature/user-section-v2

src/Umbraco.Web.UI.Client/src/backoffice/components/input-list-base/input-list-base.ts

@@ -5,9 +5,9 @@ import { UmbPickerData } from '../../../core/services/modal/layouts/modal-layout
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 
 //TODO: These should probably be imported dynamically.
-import '../input-section/picker-layout-section.element';
-import '../input-user-group/picker-layout-user-group.element';
-import '../input-user/picker-layout-user.element';
+import '../../../core/services/modal/layouts/picker-section/picker-layout-section.element';
+import '../../../core/services/modal/layouts/picker-user-group/picker-layout-user-group.element';
+import '../../../core/services/modal/layouts/picker-user/picker-layout-user.element';
 import { UmbModalService, UmbModalType } from '@umbraco-cms/services';
 
 /** TODO: Make use of UUI FORM Mixin, to make it easily take part of a form. */

src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout-picker-base.ts

@@ -6,7 +6,7 @@ export interface UmbPickerData<selectType = string> {
 	selection: Array<selectType>;
 }
 
-export class UmbPickerLayoutBase<selectType = string> extends UmbModalLayoutElement<UmbPickerData<selectType>> {
+export class UmbModalLayoutPickerBase<selectType = string> extends UmbModalLayoutElement<UmbPickerData<selectType>> {
 	
 	@state()
 	private _selection: Array<selectType> = [];
@@ -30,10 +30,11 @@ export class UmbPickerLayoutBase<selectType = string> extends UmbModalLayoutElem
 		}
 	}
 
+	/* TODO: Write test for this select/deselect method. */
 	protected _handleItemClick(key: selectType) {
 		if (this.data?.multiple) {
 			if (this._isSelected(key)) {
-				this._selection = this._selection.filter((key) => key !== key);
+				this._selection = this._selection.filter((selectedKey) => selectedKey !== key);
 			} else {
 				this._selection.push(key);
 			}

src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/picker-section/picker-layout-section.element.ts

@@ -1,14 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerLayoutBase } from '../../../core/services/modal/layouts/modal-layout-picker-base';
+import { UmbModalLayoutPickerBase } from '../modal-layout-picker-base';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 import type { ManifestSection } from '@umbraco-cms/models';
 
 @customElement('umb-picker-layout-section')
-export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutBase)) {
+export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbModalLayoutPickerBase)) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -65,8 +65,6 @@ export class UmbPickerLayoutSectionElement extends UmbContextConsumerMixin(UmbOb
 		});
 	}
 
-	//todo: save section aliasess in array
-
 	render() {
 		return html`
 			<umb-editor-entity-layout headline="Select sections">

src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/picker-user-group/picker-layout-user-group.element.ts

@@ -1,14 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerLayoutBase } from '../../../core/services/modal/layouts/modal-layout-picker-base';
+import { UmbModalLayoutPickerBase } from '../modal-layout-picker-base';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import type { UserGroupDetails } from '@umbraco-cms/models';
 import { UmbUserGroupStore } from '@umbraco-cms/stores/user/user-group.store';
 
 @customElement('umb-picker-layout-user-group')
-export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutBase)) {
+export class UmbPickerLayoutUserGroupElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbModalLayoutPickerBase)) {
 	static styles = [
 		UUITextStyles,
 		css`

src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/picker-user/picker-layout-user.element.ts

@@ -1,14 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbPickerLayoutBase } from '../../../core/services/modal/layouts/modal-layout-picker-base';
+import { UmbModalLayoutPickerBase } from '../modal-layout-picker-base';
 import type { UserDetails } from '@umbraco-cms/models';
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { UmbUserStore } from '@umbraco-cms/stores/user/user.store';
 
 @customElement('umb-picker-layout-user')
-export class UmbPickerLayoutUserElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbPickerLayoutBase)) {
+export class UmbPickerLayoutUserElement extends UmbContextConsumerMixin(UmbObserverMixin(UmbModalLayoutPickerBase)) {
 	static styles = [
 		UUITextStyles,
 		css`