From f4fcb484f81230f25beb4ffdd80ea8e92cff5b5e Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 16 Apr 2024 11:17:24 +0200 Subject: [PATCH] bugfix: add missing user group icon picker --- .../user-group-workspace-editor.element.ts | 101 +++++++++++++++--- 1 file changed, 86 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts index b939981bb6..1677018db2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts @@ -3,13 +3,14 @@ import { UMB_USER_GROUP_ENTITY_TYPE } from '../index.js'; import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from './user-group-workspace.context-token.js'; import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, nothing, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document'; import type { UmbInputSectionElement } from '@umbraco-cms/backoffice/section'; import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media'; +import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import './components/user-group-entity-user-permission-list.element.js'; import './components/user-group-granular-permission-list.element.js'; @@ -17,7 +18,22 @@ import './components/user-group-granular-permission-list.element.js'; @customElement('umb-user-group-workspace-editor') export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { @state() - private _userGroup?: UmbUserGroupDetailModel; + private _unique?: UmbUserGroupDetailModel['unique']; + + @state() + private _name?: UmbUserGroupDetailModel['name']; + + @state() + private _icon: UmbUserGroupDetailModel['icon'] = null; + + @state() + private _sections: UmbUserGroupDetailModel['sections'] = []; + + @state() + private _documentStartNode?: UmbUserGroupDetailModel['documentStartNode']; + + @state() + private _mediaStartNode?: UmbUserGroupDetailModel['mediaStartNode']; #workspaceContext?: typeof UMB_USER_GROUP_WORKSPACE_CONTEXT.TYPE; @@ -26,10 +42,28 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance; - this.observe(this.#workspaceContext.data, (userGroup) => (this._userGroup = userGroup), 'umbUserGroupObserver'); + this.#observeUserGroup(); }); } + #observeUserGroup() { + if (!this.#workspaceContext) return; + this.observe(this.#workspaceContext.unique, (value) => (this._unique = value), '_observeUnique'); + this.observe(this.#workspaceContext.name, (value) => (this._name = value), '_observeName'); + this.observe(this.#workspaceContext.icon, (value) => (this._icon = value), '_observeIcon'); + this.observe(this.#workspaceContext.sections, (value) => (this._sections = value), '_observeSections'); + this.observe( + this.#workspaceContext.documentStartNode, + (value) => (this._documentStartNode = value), + '_observeDocumentStartNode', + ); + this.observe( + this.#workspaceContext.mediaStartNode, + (value) => (this._mediaStartNode = value), + '_observeDocumentStartNode', + ); + } + #onSectionsChange(event: UmbChangeEvent) { event.stopPropagation(); const target = event.target as UmbInputSectionElement; @@ -59,7 +93,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { } render() { - if (!this._userGroup) return nothing; + if (!this._unique) return nothing; return html` @@ -72,16 +106,40 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { `; } + async #onIconClick() { + const [alias, color] = this._icon?.replace('color-', '')?.split(' ') ?? []; + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + const modalContext = modalManager.open(this, UMB_ICON_PICKER_MODAL, { + value: { + icon: alias, + color: color, + }, + }); + + modalContext?.onSubmit().then((saved) => { + if (saved.icon && saved.color) { + this.#workspaceContext?.updateProperty('icon', `${saved.icon} color-${saved.color}`); + } else if (saved.icon) { + this.#workspaceContext?.updateProperty('icon', saved.icon); + } + }); + } + #renderHeader() { return html` @@ -89,7 +147,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { } #renderLeftColumn() { - if (!this._userGroup) return nothing; + if (!this._unique) return nothing; return html` @@ -99,7 +157,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { description=${this.localize.term('user_sectionsHelp')}> @@ -139,9 +197,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { #renderRightColumn() { return html` - `; } @@ -152,28 +208,43 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement { display: block; height: 100%; } + #header { - width: 100%; - display: grid; - grid-template-columns: var(--uui-size-layout-1) 1fr; + display: flex; + flex: 1 1 auto; + gap: var(--uui-size-space-3); } + + #icon { + font-size: calc(var(--uui-size-layout-3) / 2); + } + + #name { + width: 100%; + flex: 1 1 auto; + align-items: center; + } + #main { display: grid; grid-template-columns: 1fr 350px; gap: var(--uui-size-layout-1); padding: var(--uui-size-layout-1); } + #left-column, #right-column { display: flex; flex-direction: column; gap: var(--uui-size-space-4); } + #right-column > uui-box > div { display: flex; flex-direction: column; gap: var(--uui-size-space-2); } + uui-input { width: 100%; }