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

add element to render a user-permission-setting

Browse Source
This commit is contained in:
Mads Rasmussen
2023-09-26 15:59:11 +02:00
parent ce8dc7f7fb
commit d816145ba0
3 changed files with 88 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts
View File

@@ -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,7 +16,7 @@ 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();
@@ -23,8 +24,8 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
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,10 +35,12 @@ 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) {
@@ -45,6 +48,10 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
}
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;

2
src/Umbraco.Web.UI.Client/src/packages/users/users/components/index.ts
View File

@@ -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';

63
src/Umbraco.Web.UI.Client/src/packages/users/users/components/user-permission-setting/user-permission-setting.element.ts Normal file
View File

@@ -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;
}
}