diff --git a/src/Umbraco.Web.UI.Client/examples/user-permission/localization/en.ts b/src/Umbraco.Web.UI.Client/examples/user-permission/localization/en.ts index bf0bbd904606..ff52ddc79a8c 100644 --- a/src/Umbraco.Web.UI.Client/examples/user-permission/localization/en.ts +++ b/src/Umbraco.Web.UI.Client/examples/user-permission/localization/en.ts @@ -1,6 +1,6 @@ export default { user: { // eslint-disable-next-line @typescript-eslint/naming-convention - permissionsEntityGroup_dictionary: 'Dictionary', + permissionsEntityGroup_dictionary: 'Dictionary permissions', }, }; diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts index fad3f6064c53..2b08aaf2f510 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts @@ -80,6 +80,7 @@ export default { content: 'Indhold', administration: 'Administration', structure: 'Struktur', + general: 'Generelt', other: 'Andet', }, actionDescriptions: { @@ -2082,10 +2083,10 @@ export default { permissionsGranularHelp: 'Sæt rettigheder for specifikke noder', granularRightsLabel: 'Dokumenter', granularRightsDescription: 'Tillad adgang til specifikke dokumenter', - permissionsEntityGroup_document: 'Indhold', - permissionsEntityGroup_media: 'Medie', - permissionsEntityGroup_member: 'Medlemmer', - 'permissionsEntityGroup_document-property-value': 'Dokumentegenskabsværdi', + permissionsEntityGroup_document: 'Indholdsrettigheder', + permissionsEntityGroup_media: 'Medierettigheder', + permissionsEntityGroup_member: 'Medlemsrettigheder', + 'permissionsEntityGroup_document-property-value': 'Feltrettigheder', permissionNoVerbs: 'Ingen tilladte rettigheder', profile: 'Profil', searchAllChildren: "Søg alle 'børn'", diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 20bfbf1a2580..d91f0234bb81 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -80,6 +80,7 @@ export default { content: 'Content', administration: 'Administration', structure: 'Structure', + general: 'General', other: 'Other', }, actionDescriptions: { @@ -2104,10 +2105,10 @@ export default { permissionsGranularHelp: 'Set permissions for specific nodes', granularRightsLabel: 'Documents', granularRightsDescription: 'Assign permissions to specific documents', - permissionsEntityGroup_document: 'Document', - permissionsEntityGroup_media: 'Media', - permissionsEntityGroup_member: 'Member', - 'permissionsEntityGroup_document-property-value': 'Document Property Value', + permissionsEntityGroup_document: 'Document permissions', + permissionsEntityGroup_media: 'Media permissions', + permissionsEntityGroup_member: 'Member permissions', + 'permissionsEntityGroup_document-property-value': 'Document Property Value permissions', permissionNoVerbs: 'No allowed permissions', profile: 'Profile', searchAllChildren: 'Search all children', diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document-property-value/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document-property-value/manifests.ts index 3141019a4a12..4f608eaa6752 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document-property-value/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document-property-value/manifests.ts @@ -39,13 +39,14 @@ export const manifests: Array = alias: 'Umb.UserGranularPermission.Document.PropertyValue', name: 'Document Property Values Granular User Permission', weight: 950, + forEntityTypes: [UMB_DOCUMENT_PROPERTY_VALUE_ENTITY_TYPE], element: () => import( './input-document-property-value-user-permission/input-document-property-value-user-permission.element.js' ), meta: { schemaType: 'DocumentPropertyValuePermissionPresentationModel', - label: 'Document Property Values', + label: '#user_permissionsGranular', description: 'Assign permissions to Document property values', }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/input-document-granular-user-permission/input-document-granular-user-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/input-document-granular-user-permission/input-document-granular-user-permission.element.ts index 4aacd927b47d..a71c2f1db880 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/input-document-granular-user-permission/input-document-granular-user-permission.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/input-document-granular-user-permission/input-document-granular-user-permission.element.ts @@ -28,7 +28,7 @@ export class UmbInputDocumentGranularUserPermissionElement extends UUIFormContro } @property({ type: Array, attribute: false }) - fallbackPermissions: Array = []; + public fallbackPermissions: Array = []; @state() private _items?: Array; @@ -50,7 +50,13 @@ export class UmbInputDocumentGranularUserPermissionElement extends UUIFormContro async #observePickedDocuments(uniques: Array) { const { asObservable } = await this.#documentItemRepository.requestItems(uniques); - this.observe(asObservable?.(), (items) => (this._items = items), 'observeItems'); + this.observe( + asObservable?.(), + (items) => { + this._items = items; + }, + 'observeItems', + ); } async #editGranularPermission(item: UmbDocumentItemModel) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/manifests.ts index 03bebae42416..2801a9521433 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/document/manifests.ts @@ -6,7 +6,6 @@ import { UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_NOTIFICATIONS, UMB_USER_PERMISSION_DOCUMENT_PUBLISH, - UMB_USER_PERMISSION_DOCUMENT_PERMISSIONS, UMB_USER_PERMISSION_DOCUMENT_UNPUBLISH, UMB_USER_PERMISSION_DOCUMENT_UPDATE, UMB_USER_PERMISSION_DOCUMENT_DUPLICATE, @@ -91,7 +90,7 @@ const permissions: Array = [ description: '#actionDescriptions_publish', }, }, - { + /*{ type: 'entityUserPermission', alias: UMB_USER_PERMISSION_DOCUMENT_PERMISSIONS, name: 'Document Permissions User Permission', @@ -101,7 +100,7 @@ const permissions: Array = [ label: '#actions_setPermissions', description: '#actionDescriptions_rights', }, - }, + },*/ { type: 'entityUserPermission', alias: UMB_USER_PERMISSION_DOCUMENT_UNPUBLISH, @@ -204,11 +203,12 @@ export const granularPermissions: Array = [ alias: 'Umb.UserGranularPermission.Document', name: 'Document Granular User Permission', weight: 1000, + forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE], element: () => import('./input-document-granular-user-permission/input-document-granular-user-permission.element.js'), meta: { schemaType: 'DocumentPermissionPresentationModel', - label: '#user_granularRightsLabel', + label: '#user_permissionsGranular', description: '{#user_granularRightsDescription}', }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-granular-permission-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-granular-permissions.element.ts similarity index 81% rename from src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-granular-permission-list.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-granular-permissions.element.ts index 3721b899855a..9fb9d3771553 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-granular-permission-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-granular-permissions.element.ts @@ -2,12 +2,15 @@ import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.contex import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api'; import type { ManifestGranularUserPermission } from '@umbraco-cms/backoffice/user-permission'; -import { html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, state, nothing, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { filterFrozenArray } from '@umbraco-cms/backoffice/observable-api'; -@customElement('umb-user-group-granular-permission-list') +@customElement('umb-user-group-entity-type-granular-permissions') export class UmbUserGroupGranularPermissionListElement extends UmbLitElement { + @property() + public entityType?: string; + @state() private _userGroupPermissions?: Array; @@ -57,9 +60,21 @@ export class UmbUserGroupGranularPermissionListElement extends UmbLitElement { override render() { if (!this._userGroupPermissions) return; + + if (!this.entityType) { + return html` + + manifest.forEntityTypes === undefined || manifest.forEntityTypes?.length === 0} + .renderMethod=${this.#renderProperty}> + `; + } + return html` + manifest.forEntityTypes?.includes(this.entityType!) || manifest.forEntityTypes?.length === 0} .renderMethod=${this.#renderProperty}>`; } @@ -95,6 +110,6 @@ export default UmbUserGroupGranularPermissionListElement; declare global { interface HTMLElementTagNameMap { - 'umb-user-group-granular-permission-list': UmbUserGroupGranularPermissionListElement; + 'umb-user-group-entity-type-granular-permissions': UmbUserGroupGranularPermissionListElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permission-groups.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permission-groups.element.ts new file mode 100644 index 000000000000..2d2d09dff9a0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permission-groups.element.ts @@ -0,0 +1,92 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { html, customElement, state, repeat, css, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; + +import './user-group-entity-type-permissions.element.js'; +import './user-group-entity-type-granular-permissions.element.js'; + +@customElement('umb-user-group-entity-type-permission-groups') +export class UmbUserGroupEntityTypePermissionGroupsElement extends UmbLitElement { + @state() + private _groups: Array<{ entityType: string; headline: string }> = []; + + @state() + private _hasGranularPermissionsWithNoEntityType = false; + + constructor() { + super(); + + this.observe( + umbExtensionsRegistry.byType('entityUserPermission'), + (manifests) => { + const entityTypes = [...new Set(manifests.flatMap((manifest) => manifest.forEntityTypes))]; + this._groups = entityTypes + .map((entityType) => { + return { + entityType, + headline: this.localize.term(`user_permissionsEntityGroup_${entityType}`), + }; + }) + .sort((a, b) => a.headline.localeCompare(b.headline)); + }, + 'umbUserPermissionsObserver', + ); + + this.#observeGranularPermissionsWithNoEntityType(); + } + + #observeGranularPermissionsWithNoEntityType() { + this.observe( + umbExtensionsRegistry.byTypeAndFilter( + 'userGranularPermission', + (manifest) => manifest.forEntityTypes === undefined || manifest.forEntityTypes.length === 0, + ), + (manifests) => { + this._hasGranularPermissionsWithNoEntityType = manifests.length > 0; + }, + ); + } + + override render() { + return html`${repeat( + this._groups, + (group) => group.entityType, + (group) => + html` +
${group.headline}
+ + + + + `, + )} + ${this.#renderUngroupedGranularPermissions()}`; + } + + #renderUngroupedGranularPermissions() { + if (!this._hasGranularPermissionsWithNoEntityType) return nothing; + return html` + `; + } + + static override styles = [ + UmbTextStyles, + css` + uui-box { + margin-top: var(--uui-size-space-6); + } + `, + ]; +} + +export default UmbUserGroupEntityTypePermissionGroupsElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-user-group-entity-type-permission-groups': UmbUserGroupEntityTypePermissionGroupsElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permissions.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permissions.element.ts new file mode 100644 index 000000000000..0edd3e9c33aa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-type-permissions.element.ts @@ -0,0 +1,60 @@ +import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context-token.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { html, customElement, state, nothing, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event'; + +@customElement('umb-user-group-entity-type-permissions') +export class UmbUserGroupEntityTypePermissionsElement extends UmbLitElement { + @property() + public entityType?: string; + + @state() + private _fallBackPermissions?: Array; + + #userGroupWorkspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE; + + constructor() { + super(); + + this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => { + this.#userGroupWorkspaceContext = instance; + this.observe( + this.#userGroupWorkspaceContext?.fallbackPermissions, + (fallbackPermissions) => { + this._fallBackPermissions = fallbackPermissions; + }, + 'umbUserGroupEntityUserPermissionsObserver', + ); + }); + } + + #onPermissionChange(event: UmbSelectionChangeEvent) { + event.stopPropagation(); + const target = event.target as any; + const verbs = target.allowedVerbs; + if (verbs === undefined || verbs === null) throw new Error('The verbs are not defined'); + this.#userGroupWorkspaceContext?.setFallbackPermissions(verbs); + } + + override render() { + return this.entityType + ? html` + + ` + : nothing; + } + + static override styles = [UmbTextStyles]; +} + +export default UmbUserGroupEntityTypePermissionsElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-user-group-entity-type-permissions': UmbUserGroupEntityTypePermissionsElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-user-permission-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-user-permission-list.element.ts deleted file mode 100644 index d9ecbdbf19ed..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/components/user-group-entity-user-permission-list.element.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from '../user-group-workspace.context-token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; - -@customElement('umb-user-group-entity-user-permission-list') -export class UmbUserGroupEntityUserPermissionListElement extends UmbLitElement { - @state() - private _fallBackPermissions?: Array; - - @state() - private _groups: Array<{ entityType: string; headline: string }> = []; - - #userGroupWorkspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.#observeEntityUserPermissions(); - - this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => { - this.#userGroupWorkspaceContext = instance; - this.observe( - this.#userGroupWorkspaceContext?.fallbackPermissions, - (fallbackPermissions) => { - this._fallBackPermissions = fallbackPermissions; - }, - 'umbUserGroupEntityUserPermissionsObserver', - ); - }); - } - - #observeEntityUserPermissions() { - this.observe( - umbExtensionsRegistry.byType('entityUserPermission'), - (manifests) => { - const entityTypes = [...new Set(manifests.flatMap((manifest) => manifest.forEntityTypes))]; - this._groups = entityTypes - .map((entityType) => { - return { - entityType, - headline: this.localize.term(`user_permissionsEntityGroup_${entityType}`), - }; - }) - .sort((a, b) => a.headline.localeCompare(b.headline)); - }, - 'umbUserPermissionsObserver', - ); - } - - #onPermissionChange(event: UmbSelectionChangeEvent) { - event.stopPropagation(); - const target = event.target as any; - const verbs = target.allowedVerbs; - if (verbs === undefined || verbs === null) throw new Error('The verbs are not defined'); - this.#userGroupWorkspaceContext?.setFallbackPermissions(verbs); - } - - override render() { - return html` ${this._groups.map((group) => this.#renderPermissionsForEntityType(group))}`; - } - - #renderPermissionsForEntityType(group: { entityType: string; headline: string }) { - return html` -

${group.headline}

- - `; - } - - static override styles = [UmbTextStyles]; -} - -export default UmbUserGroupEntityUserPermissionListElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-user-group-default-permission-list': UmbUserGroupEntityUserPermissionListElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace-editor.element.ts index 701ff856e9c1..cbbad3824f57 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/user-group-workspace-editor.element.ts @@ -12,8 +12,7 @@ import type { UmbInputLanguageElement } from '@umbraco-cms/backoffice/language'; import { UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/icon'; import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components'; -import './components/user-group-entity-user-permission-list.element.js'; -import './components/user-group-granular-permission-list.element.js'; +import './components/user-group-entity-type-permission-groups.element.js'; @customElement('umb-user-group-workspace-editor') export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { @@ -33,7 +32,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { private _aliasCanBeChanged?: UmbUserGroupDetailModel['aliasCanBeChanged'] = true; @state() - private _icon: UmbUserGroupDetailModel['icon'] = null; + private _icon?: UmbUserGroupDetailModel['icon']; @state() private _sections: UmbUserGroupDetailModel['sections'] = []; @@ -68,45 +67,44 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { } #observeUserGroup() { - if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.isNew, (value) => (this._isNew = value), '_observeIsNew'); - this.observe(this.#workspaceContext.unique, (value) => (this._unique = value ?? undefined), '_observeUnique'); - this.observe(this.#workspaceContext.name, (value) => (this._name = value), '_observeName'); - this.observe(this.#workspaceContext.alias, (value) => (this._alias = value), '_observeAlias'); + this.observe(this.#workspaceContext?.isNew, (value) => (this._isNew = value), '_observeIsNew'); + this.observe(this.#workspaceContext?.unique, (value) => (this._unique = value ?? undefined), '_observeUnique'); + this.observe(this.#workspaceContext?.name, (value) => (this._name = value), '_observeName'); + this.observe(this.#workspaceContext?.alias, (value) => (this._alias = value), '_observeAlias'); this.observe( - this.#workspaceContext.aliasCanBeChanged, + this.#workspaceContext?.aliasCanBeChanged, (value) => (this._aliasCanBeChanged = value), '_observeAliasCanBeChanged', ); - this.observe(this.#workspaceContext.icon, (value) => (this._icon = value), '_observeIcon'); - this.observe(this.#workspaceContext.sections, (value) => (this._sections = value), '_observeSections'); - this.observe(this.#workspaceContext.languages, (value) => (this._languages = value), '_observeLanguages'); + this.observe(this.#workspaceContext?.icon, (value) => (this._icon = value), '_observeIcon'); + this.observe(this.#workspaceContext?.sections, (value) => (this._sections = value ?? []), '_observeSections'); + this.observe(this.#workspaceContext?.languages, (value) => (this._languages = value ?? []), '_observeLanguages'); this.observe( - this.#workspaceContext.hasAccessToAllLanguages, - (value) => (this._hasAccessToAllLanguages = value), + this.#workspaceContext?.hasAccessToAllLanguages, + (value) => (this._hasAccessToAllLanguages = value ?? false), '_observeHasAccessToAllLanguages', ); this.observe( - this.#workspaceContext.documentRootAccess, - (value) => (this._documentRootAccess = value), + this.#workspaceContext?.documentRootAccess, + (value) => (this._documentRootAccess = value ?? false), '_observeDocumentRootAccess', ); this.observe( - this.#workspaceContext.documentStartNode, + this.#workspaceContext?.documentStartNode, (value) => (this._documentStartNode = value), '_observeDocumentStartNode', ); this.observe( - this.#workspaceContext.mediaRootAccess, - (value) => (this._mediaRootAccess = value), + this.#workspaceContext?.mediaRootAccess, + (value) => (this._mediaRootAccess = value ?? false), '_observeMediaRootAccess', ); this.observe( - this.#workspaceContext.mediaStartNode, + this.#workspaceContext?.mediaStartNode, (value) => (this._mediaStartNode = value), '_observeMediaStartNode', ); @@ -242,20 +240,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { ${this.#renderLanguageAccess()} ${this.#renderDocumentAccess()} ${this.#renderMediaAccess()} - -
- - - - - - - -
- - + ${this.#renderPermissionGroups()} `; @@ -337,6 +322,10 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { `; } + #renderPermissionGroups() { + return html` `; + } + static override styles = [ UmbTextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts index f6fe7c2b9c81..5c654b5ed8cd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts @@ -1,7 +1,7 @@ import type { ManifestEntityUserPermission } from '../../entity-user-permission.extension.js'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property, state, nothing, ifDefined, css } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, ifDefined, css, repeat } from '@umbraco-cms/backoffice/external/lit'; import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; import type { UmbUserPermissionVerbElement } from '@umbraco-cms/backoffice/user'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -24,7 +24,7 @@ export class UmbInputEntityUserPermissionElement extends UmbFormControlMixin(Umb allowedVerbs: Array = []; @state() - private _manifests: Array = []; + private _groupedPermissions: Array<[string, ManifestEntityUserPermission[]]> = []; #manifestObserver?: UmbObserverController>; @@ -40,11 +40,18 @@ export class UmbInputEntityUserPermissionElement extends UmbFormControlMixin(Umb this.#manifestObserver?.destroy(); this.#manifestObserver = this.observe( - umbExtensionsRegistry.byType('entityUserPermission'), - (userPermissionManifests) => { - this._manifests = userPermissionManifests.filter((manifest) => - manifest.forEntityTypes.includes(this.entityType), - ); + umbExtensionsRegistry.byTypeAndFilter('entityUserPermission', (manifest) => + manifest.forEntityTypes.includes(this.entityType), + ), + (manifests) => { + // TODO: groupBy is not known by TS yet + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + const groupedPermissions = Object.groupBy( + manifests, + (manifest: ManifestEntityUserPermission) => manifest.meta.group, + ) as Record>; + this._groupedPermissions = Object.entries(groupedPermissions); }, 'umbUserPermissionManifestsObserver', ); @@ -73,27 +80,14 @@ export class UmbInputEntityUserPermissionElement extends UmbFormControlMixin(Umb } override render() { - return html`${this.#renderGroupedPermissions(this._manifests)} `; - } - - #renderGroupedPermissions(permissionManifests: Array) { - // TODO: groupBy is not known by TS yet - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - const groupedPermissions = Object.groupBy( - permissionManifests, - (manifest: ManifestEntityUserPermission) => manifest.meta.group, - ) as Record>; - return html` - ${Object.entries(groupedPermissions).map( - ([group, manifests]) => html` - ${group !== 'undefined' - ? html`
${group}
` - : nothing} -
${manifests.map((manifest) => html` ${this.#renderPermission(manifest)} `)}
- `, - )} - `; + return repeat(this._groupedPermissions, ([group, manifests]) => { + const headline = group !== 'undefined' ? `#actionCategories_${group}` : `#actionCategories_general`; + return html` + +
${repeat(manifests, (manifest) => html` ${this.#renderPermission(manifest)} `)}
+ + `; + }); } #renderPermission(manifest: ManifestEntityUserPermission) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.token.ts index 974200ac951a..ffbbf3fc47dc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/modals/settings/entity-user-permission-settings-modal.token.ts @@ -16,5 +16,6 @@ export const UMB_ENTITY_USER_PERMISSION_MODAL = new UmbModalToken< >('Umb.Modal.EntityUserPermissionSettings', { modal: { type: 'sidebar', + size: 'medium', }, }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/user-granular-permission.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/user-granular-permission.extension.ts index 70801b97b36d..5023055136ec 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/user-granular-permission.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/user-granular-permission.extension.ts @@ -2,6 +2,7 @@ import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; export interface ManifestGranularUserPermission extends ManifestElement { type: 'userGranularPermission'; + forEntityTypes?: Array; meta: MetaGranularUserPermission; }