add element to render a user-permission-setting

umbraco · Sep 26, 2023 · 6fa7c06 · 6fa7c06
1 parent d720ffb
commit 6fa7c06
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 41 deletions.
diff --git a/...ages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts b/...ages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts
@@ -1,11 +1,12 @@
 import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context.js';
-import { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { ManifestUserPermission, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+import { type UmbUserPermissionSettingElement } from '@umbraco-cms/backoffice/users';
 
 @customElement('umb-user-group-default-permission-list')
 export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
@@ -15,16 +16,16 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
 	@state()
 	private _groupedUserPermissionManifests: Record<string, Array<ManifestUserPermission>> = {};
 
-	#workspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE;
+	#userGroupWorkspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE;
 
 	constructor() {
 		super();
 
 		this.#observeUserPermissions();
 
 		this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => {
-			this.#workspaceContext = instance;
-			this.observe(this.#workspaceContext.data, (userGroup) => (this._userGroup = userGroup));
+			this.#userGroupWorkspaceContext = instance;
+			this.observe(this.#userGroupWorkspaceContext.data, (userGroup) => (this._userGroup = userGroup));
 		});
 	}
 
@@ -34,17 +35,23 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
 		});
 	}
 
-	#onChangeUserPermission(event: UUIBooleanInputEvent, userPermissionManifest: ManifestUserPermission) {
-		event.target.checked
-			? this.#workspaceContext?.addPermission(userPermissionManifest.alias)
-			: this.#workspaceContext?.removePermission(userPermissionManifest.alias);
+	#onChangeUserPermission(event: UmbChangeEvent, userPermissionManifest: ManifestUserPermission) {
+		const target = event.target as UmbUserPermissionSettingElement;
+
+		target.allowed
+			? this.#userGroupWorkspaceContext?.addPermission(userPermissionManifest.alias)
+			: this.#userGroupWorkspaceContext?.removePermission(userPermissionManifest.alias);
 	}
 
 	#isAllowed(userPermissionManifest: ManifestUserPermission) {
 		return this._userGroup?.permissions?.includes(userPermissionManifest.alias);
 	}
 
 	render() {
+		return html`${this.#renderEntityGroups()}`;
+	}
+
+	#renderEntityGroups() {
 		const entityGroups = [];
 
 		for (const [key, value] of Object.entries(this._groupedUserPermissionManifests)) {
@@ -58,40 +65,15 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
 	}
 
 	#renderPermission(userPermissionManifest: ManifestUserPermission) {
-		return html`<div
-			style="display: flex; align-items:center; border-bottom: 1px solid var(--uui-color-divider); padding: 9px 0 12px 0;">
-			<uui-toggle
-				label=${userPermissionManifest.meta.label}
-				?checked=${this.#isAllowed(userPermissionManifest)}
-				@change=${(event: UUIBooleanInputEvent) => this.#onChangeUserPermission(event, userPermissionManifest)}>
-				<div class="permission-meta">
-					<div class="permission-name">${userPermissionManifest.meta.label}</div>
-					<small>${userPermissionManifest.meta.description}</small>
-				</div>
-			</uui-toggle>
-		</div>`;
+		return html` <umb-user-permission-setting
+			label=${userPermissionManifest.meta.label}
+			description=${ifDefined(userPermissionManifest.meta.description)}
+			?allowed=${this.#isAllowed(userPermissionManifest)}
+			@change=${(event: UmbChangeEvent) =>
+				this.#onChangeUserPermission(event, userPermissionManifest)}></umb-user-permission-setting>`;
 	}
 
-	static styles = [
-		UmbTextStyles,
-		css`
-			.permission-toggle {
-				display: flex;
-				align-items: center;
-				border-bottom: 1px solid var(--uui-color-divider);
-				padding: var(--uui-size-space-3) 0 var(--uui-size-space-4) 0;
-			}
-
-			.permission-meta {
-				margin-left: var(--uui-size-space-4);
-				line-height: 1.2em;
-			}
-
-			.permission-name {
-				font-weight: bold;
-			}
-		`,
-	];
+	static styles = [UmbTextStyles];
 }
 
 export default UmbUserGroupDefaultPermissionListElement;

diff --git a/src/packages/users/users/components/index.ts b/src/packages/users/users/components/index.ts
@@ -1,3 +1,5 @@
 import './user-input/user-input.element.js';
+import './user-permission-setting/user-permission-setting.element.js';
 
 export * from './user-input/user-input.element.js';
+export * from './user-permission-setting/user-permission-setting.element.js';
diff --git a/...ackages/users/users/components/user-permission-setting/user-permission-setting.element.ts b/...ackages/users/users/components/user-permission-setting/user-permission-setting.element.ts
@@ -0,0 +1,63 @@
+import { type UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
+
+@customElement('umb-user-permission-setting')
+export class UmbUserPermissionSettingElement extends UmbLitElement {
+	@property({ type: String, attribute: true })
+	label: string = '';
+
+	@property({ type: String, attribute: true })
+	description?: string = '';
+
+	@property({ type: Boolean, attribute: true })
+	allowed: boolean = false;
+
+	#onChange(event: UUIBooleanInputEvent) {
+		event.stopPropagation();
+		this.allowed = event.target.checked;
+		this.dispatchEvent(new UmbChangeEvent());
+	}
+
+	render() {
+		return html`<div id="setting">
+			<uui-toggle label=${this.label} ?checked=${this.allowed} @change=${this.#onChange}>
+				<div id="meta">
+					<div id="name">${this.label}</div>
+					<small>${this.description}</small>
+				</div>
+			</uui-toggle>
+		</div>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			#setting {
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid var(--uui-color-divider);
+				padding: var(--uui-size-space-3) 0 var(--uui-size-space-4) 0;
+			}
+
+			#meta {
+				margin-left: var(--uui-size-space-4);
+				line-height: 1.2em;
+			}
+
+			#name {
+				font-weight: bold;
+			}
+		`,
+	];
+}
+
+export default UmbUserPermissionSettingElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-user-permission-setting': UmbUserPermissionSettingElement;
+	}
+}