1492 profile page

assets/js/src/core/components/accordion/accordion.styles.ts

@@ -179,7 +179,7 @@ export const useStyles = createStyles(({ token, css }) => {
           }
 
           .ant-collapse-header {
-            padding: ${token.paddingXXS}px ${token.paddingSM}px;
+            padding: ${token.paddingXS}px ${token.paddingSM}px;
           }
         }
       }

assets/js/src/core/modules/app/base-layout/user-menu/user-menu.tsx

@@ -17,6 +17,7 @@ import { useStyle } from './user-menu.styles'
 import { useLogoutMutation } from '@Pimcore/modules/auth/authorization-api-slice.gen'
 import trackError, { ApiError } from '@Pimcore/modules/app/error-handler'
 import { NOTIFICATIONS } from '@Pimcore/modules/notifications'
+import { USERPROFILE } from '@Pimcore/modules/user/profile/profile-container'
 import { Button } from '@Pimcore/components/button/button'
 import { useWidgetManager } from '@sdk/modules/widget-manager'
 import { SendNotificationModal } from '@Pimcore/modules/notifications/send-notification/send-notification-modal'
@@ -67,10 +68,8 @@ export const UserMenu = ({ className }: IUserMenuProps): React.JSX.Element => {
     {
       key: 'myprofile',
       label: t('user-menu.my-profile'),
-      icon: <Icon value={ 'user' } />,
-      onClick: () => {
-        console.log('My Profile clicked')
-      }
+      icon: <Icon value={'user'}/>,
+      onClick: () => {openMainWidget(USERPROFILE)},
     },
     {
       key: 'logout',

assets/js/src/core/modules/user/hooks/use-user-draft.tsx

@@ -55,7 +55,6 @@ export const useUserDraft = (id: number): UseUserReturnDraft => {
   }
 
   function reloadUser (): void {
-    removeUserFromState()
     getUser()
   }
 
@@ -110,13 +109,15 @@ export const useUserDraft = (id: number): UseUserReturnDraft => {
   }
 
   function updateUserKeyBinding (name: string, code: object): void {
-    const updatedKeyBindings = user.keyBindings.map((keyBinding: any) => {
-      if (keyBinding.action === name) {
-        keyBinding = code
-        return keyBinding
-      }
-      return keyBinding
-    })
+    const updatedKeyBindings = [...user.keyBindings];
+    const existingKeyBindingIndex = updatedKeyBindings.findIndex((keyBinding: any) => keyBinding.action === name);
+
+    if (existingKeyBindingIndex !== -1) {
+      updatedKeyBindings[existingKeyBindingIndex] = code;
+    } else {
+      updatedKeyBindings.push(code);
+    }
+
     dispatch(changeUser({ id: user.id, changes: { keyBindings: updatedKeyBindings } }))
   }
 

assets/js/src/core/modules/user/index.ts

@@ -9,7 +9,6 @@
  */
 
 import { type WidgetRegistry } from '@Pimcore/modules/widget-manager/services/widget-registry'
-// import '@Pimcore/modules/asset/editor'
 import { ManagementContainer } from '@Pimcore/modules/user/management/management-container'
 import { RoleContainer } from '@Pimcore/modules/user/roles/container'
 import { container } from '@Pimcore/app/depency-injection'
@@ -18,7 +17,7 @@ import { moduleSystem } from '@Pimcore/app/module-system/module-system'
 import { type MainNavRegistry } from '../app/base-layout/main-nav/services/main-nav-registry'
 import { NavPermission } from '../perspectives/enums/nav-permission'
 import { UserPermission } from '../auth/enums/user-permission'
-// import '@Pimcore/modules/asset/tree'
+import {ProfileContainer} from "@Pimcore/modules/user/profile/profile-container";
 
 moduleSystem.registerModule({
   onInit: () => {
@@ -81,5 +80,10 @@ moduleSystem.registerModule({
       name: 'role-management',
       component: RoleContainer
     })
+
+    widgetRegistryService.registerWidget({
+      name: 'user-profile',
+      component: ProfileContainer
+    })
   }
 })

assets/js/src/core/modules/user/management/detail/tabs/key-bindings/key-bindings-container.tsx

@@ -9,279 +9,43 @@
  */
 
 import React from 'react'
-import { Input, Col, Row, Alert, Flex } from 'antd'
 import { Form } from '@Pimcore/components/form/form'
-import { Accordion } from '@Pimcore/components/accordion/accordion'
-import { useTranslation } from 'react-i18next'
 import { useUserDraft } from '@Pimcore/modules/user/hooks/use-user-draft'
 import { useUserContext } from '@Pimcore/modules/user/hooks/use-user-context'
 import { Content } from '@Pimcore/components/content/content'
-import { Button } from '@Pimcore/components/button/button'
 import { useUserHelper } from '@Pimcore/modules/user/hooks/use-user-helper'
+import {KeyBindings} from "@Pimcore/modules/user/management/detail/tabs/key-bindings/key-bindings";
 
 const KeyBindingsContainer = ({ ...props }): React.JSX.Element => {
   const [form] = Form.useForm()
-  const { t } = useTranslation()
   const { id } = useUserContext()
   const { user, isLoading, updateUserKeyBinding, changeUserInState } = useUserDraft(id)
   const { resetUserKeyBindings, getDefaultKeyBindings } = useUserHelper()
 
-  const getKeyName = (key: number): string => {
-    let name = ''
-    if (key >= 112 && key <= 123) {
-      name = 'F' + (key - 111)
-    } else if (key === 32) {
-      name = 'Space'
-    } else {
-      name = String.fromCharCode(key)
-    }
-    return name
-  }
-
-  const renderKeyCombination = (keyBinding: any): string => {
-    return `${keyBinding.ctrl !== false ? 'Ctrl + ' : ''}${keyBinding.alt !== false ? 'Alt + ' : ''}${keyBinding.shift !== false ? 'Shift + ' : ''}${getKeyName(keyBinding.key as number)}`
-  }
-
-  const setDataToForm = (data: any): void => {
-    data.forEach((keyBinding: any) => {
-      form.setFieldsValue({
-        [keyBinding.action]: renderKeyCombination(keyBinding)
-      })
-    })
+  const handleOnChange = (name: string, code: object): void => {
+    updateUserKeyBinding(name, code)
   }
 
   if (!isLoading) {
     if (user?.keyBindings?.length === 0) {
       getDefaultKeyBindings().then((data) => {
-        setDataToForm(data.items)
         changeUserInState({ keyBindings: data.items })
       }).catch((error) => {
         console.error('error setting default key bindings', error)
       })
     }
-    setDataToForm(user?.keyBindings)
   }
+
   if (isLoading) {
     return <Content loading></Content>
   }
-  const handleInputChange = (evt: any, name: string): object | boolean => {
-    const key = evt.keyCode
-    evt.preventDefault()
-
-    const code = {
-      action: name,
-      ctrl: false,
-      alt: false,
-      shift: false,
-      key
-    }
-
-    if (key === 9 || key === 8 || key === 27 || key === 46) {
-      return false
-    }
-
-    code.ctrl = evt.ctrlKey
-    code.alt = evt.altKey
-    code.shift = evt.shiftKey
-
-    form.setFieldsValue({
-      [name]: renderKeyCombination(code)
-    })
-    updateUserKeyBinding(name, code)
-    return code
-  }
-
-  const generalFields = ['save', 'publish', 'unpublish', 'rename', 'refresh']
-  const generalAccordion = [
-    {
-      key: '1',
-      title: <>{ t('user-management.key-bindings.general') }</>,
-      children: <Row gutter={ [40, 0] }>
-        {generalFields.map((field) => (
-          <Col
-            key={ field }
-            span={ 12 }
-          >
-            <Form.Item
-              label={ t(`user-management.key-bindings.${field}`) }
-              name={ field as any }
-            >
-              <Input
-                onKeyDown={ (evt) => handleInputChange(evt, field) }
-              />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    }
-  ]
-
-  const navigationFields = ['openDocument', 'openAsset', 'openObject', 'openClassEditor', 'openInTree', 'closeAllTabs']
-  const navigationAccordion = [
-    {
-      key: '1',
-      title: <>{ t('user-management.key-bindings.navigation') }</>,
-      children: <Row gutter={ [40, 0] }>
-        {navigationFields.map((field) => (
-          <Col
-            key={ field }
-            span={ 12 }
-          >
-            <Form.Item
-              label={ t(`user-management.key-bindings.${field}`) }
-              name={ field as any }
-            >
-              <Input
-                onKeyDown={ (evt) => handleInputChange(evt, field) }
-              />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    }
-  ]
-
-  const seoFields = ['redirects', 'tagManager', 'tagConfiguration', 'seoDocumentEditor', 'robots']
-  const seoAccordion = [
-    {
-      key: '1',
-      title: <>{ t('user-management.key-bindings.seo') }</>,
-      children: <Row gutter={ [40, 0] }>
-        {seoFields.map((field) => (
-          <Col
-            key={ field }
-            span={ 12 }
-          >
-            <Form.Item
-              label={ t(`user-management.key-bindings.${field}`) }
-              name={ field as any }
-            >
-              <Input
-                onKeyDown={ (evt) => handleInputChange(evt, field) }
-              />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    }
-  ]
-
-  const systemFields = ['showMetaInfo', 'showElementHistory', 'sharedTranslations', 'recycleBin', 'notesEvents', 'users', 'roles', 'clearAllCaches', 'clearDataCache', 'customReports', 'reports', 'applicationLogger', 'glossary', 'httpErrorLog']
-  const systemAccordion = [
-    {
-      key: '1',
-      title: <>{ t('user-management.key-bindings.system') }</>,
-      children: <Row gutter={ [40, 0] }>
-        {systemFields.map((field) => (
-          <Col
-            key={ field }
-            span={ 12 }
-          >
-            <Form.Item
-              label={ t(`user-management.key-bindings.${field}`) }
-              name={ field as any }
-            >
-              <Input
-                onKeyDown={ (evt) => handleInputChange(evt, field) }
-              />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    }
-  ]
-
-  const searchFields = ['searchDocument', 'searchAsset', 'searchObject', 'searchAndReplaceAssignments', 'quickSearch']
-  const searchAccordion = [
-    {
-      key: '1',
-      title: <>{ t('user-management.key-bindings.search') }</>,
-      children: <Row gutter={ [40, 0] }>
-        {searchFields.map((field) => (
-          <Col
-            key={ field }
-            span={ 12 }
-          >
-            <Form.Item
-              label={ t(`user-management.key-bindings.${field}`) }
-              name={ field as any }
-            >
-              <Input
-                onKeyDown={ (evt) => handleInputChange(evt, field) }
-              />
-            </Form.Item>
-          </Col>
-        ))}
-      </Row>
-    }
-  ]
 
   return (
     <Form
       form={ form }
       layout="vertical"
     >
-      <Row gutter={ [10, 10] }>
-        <Col span={ 14 }>
-          <Flex
-            align={ 'center' }
-            justify={ 'space-between' }
-          >
-            <Alert
-              message={ t('user-management.key-bindings.info') }
-              showIcon
-              type={ 'info' }
-            />
-
-            <Button onClick={ async () => await resetUserKeyBindings(id) }>{ t('user-management.key-bindings.reset') }</Button>
-          </Flex>
-        </Col>
-        <Col span={ 14 }>
-          <Accordion
-            activeKey={ '1' }
-            bordered
-            items={ generalAccordion }
-            size={ 'small' }
-          >
-          </Accordion>
-        </Col>
-        <Col span={ 14 }>
-          <Accordion
-            activeKey={ '1' }
-            bordered
-            items={ navigationAccordion }
-            size={ 'small' }
-          >
-          </Accordion>
-        </Col>
-        <Col span={ 14 }>
-          <Accordion
-            activeKey={ '1' }
-            bordered
-            items={ searchAccordion }
-            size={ 'small' }
-          >
-          </Accordion>
-        </Col>
-        <Col span={ 14 }>
-          <Accordion
-            activeKey={ '1' }
-            bordered
-            items={ systemAccordion }
-            size={ 'small' }
-          >
-          </Accordion>
-        </Col>
-        <Col span={ 14 }>
-          <Accordion
-            activeKey={ '1' }
-            bordered
-            items={ seoAccordion }
-            size={ 'small' }
-          >
-          </Accordion>
-        </Col>
-      </Row>
+      <KeyBindings values={user?.keyBindings} onResetKeyBindings={async () => await resetUserKeyBindings(id)} onChange={handleOnChange} />
     </Form>
   )
 }