diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts index b7bd8482f0..6816fc77ff 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts @@ -2,7 +2,6 @@ import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { repeat } from 'lit/directives/repeat.js'; import type { UserGroupDetails } from '../types'; import { UmbUserGroupWorkspaceContext } from './user-group-workspace.context'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -20,63 +19,62 @@ export class UmbUserGroupWorkspaceEditElement extends UmbLitElement { private _userKeys?: Array; #workspaceContext?: UmbUserGroupWorkspaceContext; - #defaultPermissions = tempDefaultPermissions; constructor() { super(); this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance as UmbUserGroupWorkspaceContext; - this.#observeUserGroup(); + this.observe(this.#workspaceContext.data, (userGroup) => (this._userGroup = userGroup as any)); }); } - #observeUserGroup() { - if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.data, (userGroup) => (this._userGroup = userGroup as any)); - } - - private _updateUserKeys(userKeys: Array) { + #onUsersChange(userKeys: Array) { this._userKeys = userKeys; // TODO: make a method on the UmbWorkspaceUserGroupContext: //this._workspaceContext.setUsers(); } - private _updatePermission(permission: { name: string; description: string; value: boolean }) { - if (!this.#workspaceContext) return; + #updateSections(value: string[]) { + this.#workspaceContext?.updateProperty('sections', value); + } - const checkValue = this._checkPermission(permission); - //const selectedPermissions = this._workspaceContext.getData().permissions; - // TODO: make a method on the UmbWorkspaceUserGroupContext: - //const selectedPermissions = this._workspaceContext.getPermissions(); + #onNameChange(event: UUIInputEvent) { + if (event instanceof UUIInputEvent) { + const target = event.composedPath()[0] as UUIInputElement; - /* - let newPermissions = []; - if (checkValue === false) { - newPermissions = [...selectedPermissions, permission.name]; - } else { - newPermissions = selectedPermissions.filter((p) => p !== permission.name); + if (typeof target?.value === 'string') { + this.#workspaceContext?.updateProperty('name', target.value); + } } - */ - - //this._updateProperty('permissions', newPermissions); - // TODO: make a method on the UmbWorkspaceUserGroupContext: - //this._workspaceContext.setPermissions(); } - private _checkPermission(permission: { name: string; description: string; value: boolean }) { - if (!this.#workspaceContext) return false; + render() { + if (!this._userGroup) return nothing; - //return this._workspaceContext.getPermissions().includes(permission.name); - return false; + return html` + + ${this.#renderHeader()} +
+
${this.#renderLeftColumn()}
+
${this.#renderRightColumn()}
+
+ + `; } - private _updateSections(value: string[]) { - console.log('To be done'); - //this._workspaceContext.setSections(value); + #renderHeader() { + return html` + + `; } - private renderLeftColumn() { + #renderLeftColumn() { if (!this._userGroup) return nothing; return html` @@ -85,7 +83,7 @@ export class UmbUserGroupWorkspaceEditElement extends UmbLitElement { this._updateSections(e.target.value)}> + @change=${(e: any) => this.#updateSections(e.target.value)}>
Default Permissions
-
- ${repeat( - this.#defaultPermissions, - (defaultPermission) => html` -
- ${defaultPermission.name} - ${repeat( - defaultPermission.permissions, - (permission) => html` -
- this._updatePermission(permission)}> -
- ${permission.name} - ${permission.description} -
-
- ` - )} -
- ` - )} -
+ PERMISSIONS NOT IMPLEMENTED YET
Granular permissions
+ PERMISSIONS NOT IMPLEMENTED YET `; } - private renderRightColumn() { + #renderRightColumn() { return html`
Users
this._updateUserKeys((e.target as any).value)} + @change=${(e: Event) => this.#onUsersChange((e.target as any).value)} .value=${this._userKeys || []}> `; } - // TODO. find a way where we don't have to do this for all workspaces. - #onNameChange(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.updateProperty('name', target.value); - } - } - } - - render() { - if (!this._userGroup) return nothing; - - return html` - - ${this.#renderHeader()} -
-
${this.renderLeftColumn()}
-
${this.renderRightColumn()}
-
- - `; - } - - #renderHeader() { - return html` - - `; - } - static styles = [ UUITextStyles, css` @@ -222,152 +162,10 @@ export class UmbUserGroupWorkspaceEditElement extends UmbLitElement { uui-input { width: 100%; } - .faded-text { - color: var(--uui-color-text-alt); - font-size: 0.8rem; - } - #default-permissions { - display: flex; - flex-direction: column; - gap: var(--uui-size-space-4); - } - .default-permission { - display: flex; - align-items: center; - gap: var(--uui-size-space-4); - padding: var(--uui-size-space-2); - } - .default-permission:not(:last-child) { - border-bottom: 1px solid var(--uui-color-divider); - } - .permission-info { - display: flex; - flex-direction: column; - } `, ]; } -// TEMP MOCK DATA -type TempPermissionGroup = { - name: string; - permissions: Array; -}; - -type TempPermission = { - name: string; - description: string; - value: boolean; -}; - -const tempDefaultPermissions: Array = [ - { - name: 'Administration', - permissions: [ - { - name: 'Culture and Hostnames', - description: 'Allow access to assign culture and hostnames', - value: false, - }, - { - name: 'Restrict Public Access', - description: 'Allow access to set and change access restrictions for a node', - value: false, - }, - { - name: 'Rollback', - description: 'Allow access to roll back a node to a previous state', - value: false, - }, - ], - }, - { - name: 'Content', - permissions: [ - { - name: 'Browse Node', - description: 'Allow access to view a node', - value: false, - }, - { - name: 'Create Content Template', - description: 'Allow access to create a Content Template', - value: false, - }, - { - name: 'Delete', - description: 'Allow access to delete nodes', - value: false, - }, - { - name: 'Create', - description: 'Allow access to create nodes', - value: false, - }, - { - name: 'Publish', - description: 'Allow access to publish nodes', - value: false, - }, - { - name: 'Permissions', - description: 'Allow access to change permissions for a node', - value: false, - }, - { - name: 'Send To Publish', - description: 'Allow access to send a node for approval before publishing', - value: false, - }, - { - name: 'Unpublish', - description: 'Allow access to unpublish a node', - value: false, - }, - { - name: 'Update', - description: 'Allow access to save a node', - value: false, - }, - { - name: 'Full restore', - description: 'Allow the user to restore items', - value: false, - }, - { - name: 'Partial restore', - description: 'Allow the user to partial restore items', - value: false, - }, - { - name: 'Queue for transfer', - description: 'Allow the user to queue item(s)', - value: false, - }, - ], - }, - { - name: 'Structure', - permissions: [ - { - name: 'Copy', - description: 'Allow access to copy a node', - value: false, - }, - { - name: 'Move', - description: 'Allow access to move a node', - value: false, - }, - { - name: 'Sort', - description: 'Allow access to change the sort order for nodes', - value: false, - }, - ], - }, -]; - export default UmbUserGroupWorkspaceEditElement; declare global {