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

render user permissions on user-group-ref

Browse Source
This commit is contained in:
Mads Rasmussen
2023-10-04 13:12:13 +02:00
parent 4edab183de
commit c95f21af67
2 changed files with 141 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/permissions-modal.element.ts
View File

@@ -1,33 +1,80 @@
import { UmbUserGroupCollectionRepository } from '@umbraco-cms/backoffice/user-group';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbUserGroupRepository } from '@umbraco-cms/backoffice/user-group';
import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
UMB_ENTITY_USER_PERMISSION_MODAL,
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
UMB_USER_GROUP_PICKER_MODAL,
UmbEntityUserPermissionSettingsModalData,
UmbEntityUserPermissionSettingsModalResult,
UmbEntityUserPermissionSettingsModalValue,
UmbModalContext,
UmbModalManagerContext,
} from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UserGroupItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbSelectedEvent } from '@umbraco-cms/backoffice/events';
import { UmbId } from '@umbraco-cms/backoffice/id';
import {
UMB_USER_PERMISSION_DOCUMENT_CREATE,
UMB_USER_PERMISSION_DOCUMENT_READ,
} from '@umbraco-cms/backoffice/document';
type UserPermissionModel<PermissionTargetType> = {
id: string;
target: PermissionTargetType;
permissions: Array<string>;
};
type DocumentGranularPermission = {
entityType: 'document';
documentId: string;
userGroupId: string;
};
type UmbUserGroupRefData = {
id: string;
name?: string;
icon?: string | null;
permissions: Array<string>;
};
@customElement('umb-permissions-modal')
export class UmbPermissionsModalElement extends UmbLitElement {
@property({ attribute: false })
modalContext?: UmbModalContext<UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalResult>;
modalContext?: UmbModalContext<UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalValue>;
@property({ type: Object })
data?: UmbEntityUserPermissionSettingsModalData;
@state()
_userGroups: Array<UserGroupItemResponseModel> = [];
_userGroups: Array<UmbUserGroupRefData> = [];
#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
@state()
_permissions: Array<UserPermissionModel<DocumentGranularPermission>> = [
{
id: new UmbId().toString(),
target: {
entityType: 'document',
documentId: '1234-1234-1234',
userGroupId: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
},
permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE],
},
{
id: new UmbId().toString(),
target: {
entityType: 'document',
documentId: '1234-1234-1234',
userGroupId: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa',
},
permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
},
];
#userGroupRepository = new UmbUserGroupRepository(this);
#modalManagerContext?: UmbModalManagerContext;
#userGroupPickerModal?: UmbModalContext;
private _handleConfirm() {
this.modalContext?.submit();
}
@@ -44,20 +91,33 @@ export class UmbPermissionsModalElement extends UmbLitElement {
});
}
async connectedCallback(): Promise<void> {
super.connectedCallback();
const userGroupIds = [...new Set(this._permissions.map((permission) => permission.target.userGroupId))];
const { data } = await this.#userGroupRepository.requestItems(userGroupIds);
const userGroups = data ?? [];
this._userGroups = this._permissions.map((entry) => {
const userGroup = userGroups.find((userGroup) => userGroup.id == entry.target.userGroupId);
return {
id: entry.target.userGroupId,
name: userGroup?.name,
icon: userGroup?.icon,
permissions: entry.permissions,
};
});
}
#openUserGroupPickerModal() {
if (!this.#modalManagerContext) return;
const modalContext = this.#modalManagerContext.open(UMB_USER_GROUP_PICKER_MODAL);
this.#userGroupPickerModal = this.#modalManagerContext.open(UMB_USER_GROUP_PICKER_MODAL);
modalContext.addEventListener(UmbSelectedEvent.TYPE, (event) => {
const selectedEvent = event as UmbSelectedEvent;
this.#openUserPermissionsModal(selectedEvent.unique);
});
modalContext?.onSubmit().then((result) => {
console.log(result);
debugger;
});
this.#userGroupPickerModal.addEventListener(UmbSelectedEvent.TYPE, (event) =>
this.#openUserPermissionsModal((event as UmbSelectedEvent).unique),
);
}
#openUserPermissionsModal(id: string) {
@@ -65,34 +125,32 @@ export class UmbPermissionsModalElement extends UmbLitElement {
const modalContext = this.#modalManagerContext?.open(UMB_ENTITY_USER_PERMISSION_MODAL, {
unique: id,
entityType: ['user-group'],
entityType: ['document'],
});
modalContext?.onSubmit().then((result) => {
console.log(result);
debugger;
modalContext?.onSubmit().then((value) => {
console.log(value);
});
}
async firstUpdated() {
const { data } = await this.#userGroupCollectionRepository.requestCollection();
if (data) {
this._userGroups = data.items;
}
}
render() {
return html`
<umb-body-layout headline="Permissions">
<uui-box>
<uui-button @click=${this.#openUserGroupPickerModal} look="placeholder">Open</uui-button>
<uui-ref-list>
${this._userGroups.map(
(userGroup) =>
html`<umb-user-group-ref
name=${ifDefined(userGroup.name)}
.userPermissionAliases=${userGroup.permissions}
border>
<uui-icon slot="icon" .icon=${userGroup.icon}></uui-icon>
</umb-user-group-ref>`,
)}
</uui-ref-list>
<uui-button style="width: 100%;" @click=${this.#openUserGroupPickerModal} look="placeholder">Open</uui-button>
</uui-box>
<ul>
${this._userGroups.map((group) => html`<li>${group}</li>`)}
</ul>
<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
<uui-button
slot="actions"

50
src/Umbraco.Web.UI.Client/src/packages/users/user-groups/components/user-group-ref/user-group-ref.element.ts
View File

@@ -1,6 +1,8 @@
import { UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { ManifestUserPermission, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { map } from '@umbraco-cms/backoffice/external/rxjs';
/**
* @element umb-user-group-ref
@@ -9,6 +11,52 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
*/
@customElement('umb-user-group-ref')
export class UmbUserGroupRefElement extends UmbElementMixin(UUIRefNodeElement) {
@property({ type: Array, attribute: 'user-permission-aliases' })
public get userPermissionAliases(): Array<string> {
return [];
}
public set userPermissionAliases(value: Array<string>) {
this.#observeUserPermissions(value);
}
#userPermissionLabels: Array<string> = [];
async #observeUserPermissions(value: Array<string>) {
if (value) {
this.observe(
umbExtensionsRegistry.extensionsOfType('userPermission').pipe(
map((manifests) => {
return manifests.filter((manifest) => manifest.alias && value.includes(manifest.alias));
}),
),
(userPermissionManifests) => this.#setUserPermissionLabels(userPermissionManifests),
'userPermissionLabels',
);
} else {
this.removeControllerByAlias('userPermissionLabels');
}
}
#setUserPermissionLabels(manifests: Array<ManifestUserPermission>) {
this.#userPermissionLabels = manifests.map((manifest) =>
manifest.meta.labelKey ? this.localize.term(manifest.meta.labelKey) : manifest.meta.label ?? '',
);
}
protected renderDetail() {
const details: string[] = [];
if (this.#userPermissionLabels.length > 0) {
details.push(this.#userPermissionLabels.join(', '));
}
if (this.detail !== '') {
details.push(this.detail);
}
return html`<small id="detail">${details.join(' | ')}<slot name="detail"></slot></small>`;
}
static styles = [...UUIRefNodeElement.styles];
}