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

make element to render a list of user permissions based on an entity

Browse Source
This commit is contained in:
Mads Rasmussen
2023-09-28 16:22:33 +02:00
parent dfb20aa4d7
commit 8b064da828
8 changed files with 154 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.ts
View File

@@ -40,6 +40,9 @@ export class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
return html`
<umb-body-layout headline="Hello">
<uui-box>
<umb-entity-user-permission-settings
entity-type=${this.data?.entityType}></umb-entity-user-permission-settings>
Render user permissions for ${this.data?.entityType} ${this.data?.unique}
${this._userPermissionManifests.map((permission) => this.#renderPermission(permission))}

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

@@ -2,3 +2,4 @@ export * from './current-user/index.js';
export * from './user-groups/index.js';
export * from './users/index.js';
export * from './manifests.js';
export * from './user-permission/index.js';

1
src/Umbraco.Web.UI.Client/src/packages/users/manifests.ts
View File

@@ -6,5 +6,6 @@ import { manifests as currentUserManifests } from './current-user/manifests.js';
// We need to load any components that are not loaded by the user management bundle to register them in the browser.
import './user-groups/components/index.js';
import './users/components/index.js';
import './user-permission/components/index.js';
export const manifests = [...userGroupManifests, ...userManifests, ...userSectionManifests, ...currentUserManifests];

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

@@ -1,20 +1,14 @@
import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context.js';
import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
import { html, customElement, state } 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 { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
import { type UmbUserPermissionSettingElement } from '@umbraco-cms/backoffice/users';
import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
@customElement('umb-user-group-default-permission-list')
export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
@state()
private _userGroup?: UserGroupResponseModel;
@state()
private _manifests: Array<ManifestUserPermission> = [];
private _userGroupDefaultPermissions?: Array<string>;
@state()
private _entityTypes: Array<string> = [];
@@ -28,27 +22,23 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => {
this.#userGroupWorkspaceContext = instance;
this.observe(this.#userGroupWorkspaceContext.data, (userGroup) => (this._userGroup = userGroup));
this.observe(
this.#userGroupWorkspaceContext.data,
(userGroup) => (this._userGroupDefaultPermissions = userGroup?.permissions),
);
});
}
#observeUserPermissions() {
this.observe(umbExtensionsRegistry.extensionsOfType('userPermission'), (userPermissionManifests) => {
this._manifests = userPermissionManifests;
this._entityTypes = [...new Set(userPermissionManifests.map((manifest) => manifest.meta.entityType))];
});
}
#onChangeUserPermission(event: UmbChangeEvent, userPermissionManifest: ManifestUserPermission) {
const target = event.target as UmbUserPermissionSettingElement;
target.allowed
? this.#userGroupWorkspaceContext?.addPermission(userPermissionManifest.alias)
: this.#userGroupWorkspaceContext?.removePermission(userPermissionManifest.alias);
}
#isAllowed(permissionAlias: string) {
return this._userGroup?.permissions?.includes(permissionAlias);
#onSelectedUserPermission(event: UmbSelectedEvent) {
const target = event.target as any;
const selection = target.selectedPermissions;
this.#userGroupWorkspaceContext?.setDefaultPermissions(selection);
}
render() {
@@ -56,38 +46,15 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement {
}
#renderPermissionsByEntityType(entityType: string) {
const permissionsForEntityType = this._manifests.filter((manifest) => manifest.meta.entityType === entityType);
return html`
<h4><umb-localize .key=${`user_permissionsEntityGroup_${entityType}`}>${entityType}</umb-localize></h4>
${this.#renderGroupedPermissions(permissionsForEntityType)}
<umb-entity-user-permission-settings-list
.entityType=${entityType}
.selectedPermissions=${this._userGroupDefaultPermissions || []}
@selected=${this.#onSelectedUserPermission}></umb-entity-user-permission-settings-list>
`;
}
#renderGroupedPermissions(permissions: Array<ManifestUserPermission>) {
const groupedPermissions = groupBy(permissions, (manifest) => manifest.meta.group);
return html`
${Object.entries(groupedPermissions).map(
([group, manifests]) => html`
${group !== 'undefined'
? html` <h5><umb-localize .key=${`actionCategories_${group}`}>${group}</umb-localize></h5> `
: nothing}
${manifests.map((manifest) => html` ${this.#renderPermission(manifest)} `)}
`,
)}
`;
}
#renderPermission(manifest: ManifestUserPermission) {
return html` <umb-user-permission-setting
label=${ifDefined(manifest.meta.labelKey ? this.localize.term(manifest.meta.labelKey) : manifest.meta.label)}
description=${ifDefined(
manifest.meta.descriptionKey ? this.localize.term(manifest.meta.descriptionKey) : manifest.meta.description,
)}
?allowed=${this.#isAllowed(manifest.alias)}
@change=${(event: UmbChangeEvent) =>
this.#onChangeUserPermission(event, manifest)}></umb-user-permission-setting>`;
}
static styles = [UmbTextStyles];
}

25
src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/user-group-workspace.context.ts
View File

@@ -107,22 +107,39 @@ export class UmbUserGroupWorkspaceContext
}
/**
* Adds a permission to the user group permission array.
* Sets the user group default permissions.
* @param {Array<string>} permissionAliases
* @memberof UmbUserGroupWorkspaceContext
*/
setDefaultPermissions(permissionAliases: Array<string>) {
this.#data.update({ permissions: permissionAliases });
}
/**
* Gets the user group default permissions.
* @memberof UmbUserGroupWorkspaceContext
*/
getDefaultPermissions() {
return this.#data.getValue()?.permissions ?? [];
}
/**
* Allows a default permission on the user group.
* @param {string} permissionAlias
* @memberof UmbUserGroupWorkspaceContext
*/
addPermission(permissionAlias: string) {
allowDefaultPermission(permissionAlias: string) {
const permissions = this.#data.getValue()?.permissions ?? [];
const newValue = [...permissions, permissionAlias];
this.#data.update({ permissions: newValue });
}
/**
* Removes a permission from the user group permission array.
* Disallows a default permission on the user group.
* @param {string} permissionAlias
* @memberof UmbUserGroupWorkspaceContext
*/
removePermission(permissionAlias: string) {
disallowDefaultPermission(permissionAlias: string) {
const permissions = this.#data.getValue()?.permissions ?? [];
const newValue = permissions.filter((alias) => alias !== permissionAlias);
this.#data.update({ permissions: newValue });

108
src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/entity-user-permission-settings-list/entity-user-permission-settings-list.element.ts Normal file
View File

@@ -0,0 +1,108 @@
import { UmbChangeEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
import {
ManifestEntityAction,
ManifestUserPermission,
umbExtensionsRegistry,
} from '@umbraco-cms/backoffice/extension-registry';
import { css, html, customElement, property, state, nothing, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
import { UmbUserPermissionSettingElement } from '@umbraco-cms/backoffice/users';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@customElement('umb-entity-user-permission-settings-list')
export class UmbEntityUserPermissionSettingsListElement extends UmbLitElement {
@property({ type: String, attribute: 'entity-type' })
public get entityType(): string {
return this._entityType;
}
public set entityType(value: string) {
if (value === this._entityType) return;
this._entityType = value;
this.#observeUserPermissions();
}
private _entityType: string = '';
@property({ attribute: false })
selectedPermissions: Array<string> = [];
@state()
private _manifests: Array<ManifestUserPermission> = [];
#manifestObserver?: UmbObserverController<Array<ManifestUserPermission>>;
#isAllowed(permissionAlias: string) {
return this.selectedPermissions?.includes(permissionAlias);
}
#observeUserPermissions() {
this.#manifestObserver?.destroy();
this.#manifestObserver = this.observe(
umbExtensionsRegistry.extensionsOfType('userPermission'),
(userPermissionManifests) => {
this._manifests = userPermissionManifests.filter((manifest) => manifest.meta.entityType === this.entityType);
},
);
}
#onChangeUserPermission(event: UmbChangeEvent, permissionAlias: string) {
event.stopPropagation();
const target = event.target as UmbUserPermissionSettingElement;
target.allowed ? this.#addUserPermission(permissionAlias) : this.#removeUserPermission(permissionAlias);
}
#addUserPermission(permissionAlias: string) {
this.selectedPermissions = [...this.selectedPermissions, permissionAlias];
this.dispatchEvent(new UmbSelectedEvent());
}
#removeUserPermission(permissionAlias: string) {
this.selectedPermissions = this.selectedPermissions.filter((alias) => alias !== permissionAlias);
this.dispatchEvent(new UmbSelectedEvent());
}
render() {
return html`${this.#renderGroupedPermissions(this._manifests)} `;
}
#renderGroupedPermissions(permissionManifests: Array<ManifestUserPermission>) {
const groupedPermissions = groupBy(permissionManifests, (manifest) => manifest.meta.group);
return html`
${Object.entries(groupedPermissions).map(
([group, manifests]) => html`
${group !== 'undefined'
? html` <h5><umb-localize .key=${`actionCategories_${group}`}>${group}</umb-localize></h5> `
: nothing}
${manifests.map((manifest) => html` ${this.#renderPermission(manifest)} `)}
`,
)}
`;
}
#renderPermission(manifest: ManifestUserPermission) {
return html` <umb-user-permission-setting
label=${ifDefined(manifest.meta.labelKey ? this.localize.term(manifest.meta.labelKey) : manifest.meta.label)}
description=${ifDefined(
manifest.meta.descriptionKey ? this.localize.term(manifest.meta.descriptionKey) : manifest.meta.description,
)}
?allowed=${this.#isAllowed(manifest.alias)}
@change=${(event: UmbChangeEvent) =>
this.#onChangeUserPermission(event, manifest.alias)}></umb-user-permission-setting>`;
}
disconnectedCallback() {
super.disconnectedCallback();
this.#manifestObserver?.destroy();
}
static styles = [css``];
}
export default UmbEntityUserPermissionSettingsListElement;
declare global {
interface HTMLElementTagNameMap {
'umb-entity-user-permission-settings-list': UmbEntityUserPermissionSettingsListElement;
}
}

3
src/Umbraco.Web.UI.Client/src/packages/users/user-permission/components/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import './entity-user-permission-settings-list/entity-user-permission-settings-list.element.js';
export * from './entity-user-permission-settings-list/entity-user-permission-settings-list.element.js';

1
src/Umbraco.Web.UI.Client/src/packages/users/user-permission/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './components/index.js';