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/auth/hooks/use-trackable-changes.ts

@@ -0,0 +1,71 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { useAppDispatch } from '@sdk/app'
+
+export type ModifiedCell = Record<string, any>
+
+export interface ModifiedCellsAction {
+  modifiedCells: ModifiedCell
+}
+
+export interface TrackableChangesDraft {
+  modified: boolean
+  changes: Record<string, boolean>
+  modifiedCells: ModifiedCell
+}
+
+interface UseTrackableChangesReturn {
+  resetChanges: (state: TrackableChangesDraft, action: PayloadAction<void>) => void
+  setModifiedCells: (state: TrackableChangesDraft, action: PayloadAction<ModifiedCellsAction>) => void
+}
+
+export const useTrackableChangesReducers = (): UseTrackableChangesReturn => {
+  const resetChanges = (state: TrackableChangesDraft): void => {
+    state.changes = {}
+    state.modifiedCells = {}
+    state.modified = false
+  }
+
+  const setModifiedCells = (state: TrackableChangesDraft, action: PayloadAction<ModifiedCellsAction>): void => {
+    state.modifiedCells = {
+      ...state.modifiedCells,
+      ...action.payload.modifiedCells
+    }
+    state.modified = true
+  }
+
+  return {
+    resetChanges,
+    setModifiedCells
+  }
+}
+
+export interface UseTrackableChangesDraftReturn {
+  removeTrackedChanges: () => void
+  setModifiedCells: (modifiedCells: ModifiedCell) => void
+}
+
+export const useTrackableChangesDraft = (
+  resetChangesAction: () => PayloadAction<void>,
+  setModifiedCellsAction: (action: ModifiedCellsAction) => PayloadAction<ModifiedCellsAction>
+): UseTrackableChangesDraftReturn => {
+  const dispatch = useAppDispatch()
+
+  return {
+    removeTrackedChanges: (): void => {
+      dispatch(resetChangesAction())
+    },
+    setModifiedCells: (modifiedCells: ModifiedCell): void => {
+      dispatch(setModifiedCellsAction({ modifiedCells }))
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { useAppSelector } from '@sdk/app'
+import {
+  resetChanges, setModifiedCells, selectCurrentUser
+} from '../user/user-slice'
+import { useEffect, useState } from 'react'
+import {
+  useTrackableChangesDraft,
+  type UseTrackableChangesDraftReturn
+} from '@Pimcore/modules/auth/hooks/use-trackable-changes'
+import { type UserInformation } from '@Pimcore/modules/auth/user/user-api-slice-enhanced'
+
+interface IExtendsUserInformation extends UserInformation {
+  modified?: boolean
+  modifiedCells?: Record<string, boolean>
+}
+export interface UseUserDraftReturn extends UseTrackableChangesDraftReturn {
+  isLoading: boolean
+  user: IExtendsUserInformation
+}
+
+export const useUserDraft = (): UseUserDraftReturn => {
+  const user = useAppSelector(state => selectCurrentUser(state))
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    if (user === undefined) {
+      setIsLoading(true)
+    } else {
+      setIsLoading(false)
+    }
+  }, [user])
+
+  const trackableChangesActions = useTrackableChangesDraft(
+    () => resetChanges(),
+    (action) => setModifiedCells(action)
+  )
+
+  return {
+    isLoading,
+    user,
+    ...trackableChangesActions
+  }
+}

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

@@ -0,0 +1,83 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { useAppDispatch } from '@sdk/app'
+import {
+  api,
+  type Error, type UserUpdateProfileApiResponse
+} from '@Pimcore/modules/auth/user/user-api-slice-enhanced'
+import { useNotification } from '@Pimcore/components/notification/useNotification'
+import { useTranslation } from 'react-i18next'
+import { userProfileUpdated } from '@Pimcore/modules/auth/user/user-slice'
+import { type KeyBindingForAUser } from '@Pimcore/modules/auth/user/user-api-slice.gen'
+
+interface UseUserReturn {
+  updateUserProfile: (user) => Promise<{ data: UserUpdateProfileApiResponse, error: any }>
+}
+
+export const useUserHelper = (): UseUserReturn => {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const [notificationApi] = useNotification()
+
+  const handleNotification = (successMessage, error): void => {
+    if (error !== undefined) {
+      notificationApi.open({
+        type: 'error',
+        message: error.data?.message ?? t('user-management.save-user.error')
+      })
+    } else {
+      notificationApi.open({
+        type: 'success',
+        message: successMessage
+      })
+    }
+  }
+
+  async function updateUserProfile (user): Promise<{ data: UserUpdateProfileApiResponse, error: Error }> {
+    if (user.modifiedCells !== undefined) {
+      const mergedKeyBindings = Array.from(([...(user.keyBindings ?? []), ...(user.modifiedCells.keyBindings ?? [])].reduce(
+        (map, item: KeyBindingForAUser) => map.set(item.action, item), new Map<string, KeyBindingForAUser>()) as Map<string, KeyBindingForAUser>
+      ).values()
+      )
+
+      const { keyBindings, ...restModifiedCells } = user.modifiedCells
+
+      user = {
+        ...user,
+        ...restModifiedCells,
+        keyBindings: mergedKeyBindings
+      }
+    }
+
+    const { data, error }: any = await dispatch(api.endpoints.userUpdateProfile.initiate({
+      updateUserProfile: {
+        firstname: user.firstname,
+        lastname: user.lastname,
+        email: user.email,
+        language: user.language,
+        dateTimeLocale: user.dateTimeLocale,
+        welcomeScreen: user.welcomeScreen,
+        memorizeTabs: user.memorizeTabs,
+        contentLanguages: user.contentLanguages,
+        keyBindings: user.keyBindings
+      }
+    }))
+
+    handleNotification(t('user-management.save-user.success'), error)
+
+    dispatch(userProfileUpdated(data))
+    return data
+  }
+
+  return {
+    updateUserProfile
+  }
+}

assets/js/src/core/modules/auth/hooks/use-user.ts

@@ -13,7 +13,12 @@ import { useSelector } from 'react-redux'
 import { selectCurrentUser } from '@Pimcore/modules/auth/user/user-slice'
 import { type UserInformation } from '../user/user-api-slice.gen'
 
-export const useUser = (): UserInformation => {
+interface IExtendsUserInformation extends UserInformation {
+  modified?: boolean
+  modifiedCells?: Record<string, boolean>
+}
+
+export const useUser = (): IExtendsUserInformation => {
   const user = useSelector(selectCurrentUser)
 
   return useMemo(() => (user), [user])

assets/js/src/core/modules/auth/profile/profile-container.tsx

@@ -0,0 +1,53 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import React from 'react'
+import type { WidgetManagerTabConfig } from '@Pimcore/modules/widget-manager/widget-manager-slice'
+import { ContentLayout } from '@Pimcore/components/content-layout/content-layout'
+import { Content } from '@Pimcore/components/content/content'
+import { useUser } from '@Pimcore/modules/auth/hooks/use-user'
+import { useUserDraft } from '@Pimcore/modules/auth/hooks/use-user-draft'
+import { Toolbar } from '@Pimcore/modules/auth/profile/toolbar/toolbar'
+import { ProfileDetail } from '@Pimcore/modules/auth/profile/profile-detail'
+
+export const USERPROFILE: WidgetManagerTabConfig = {
+  component: 'user-profile',
+  name: 'user-profile',
+  id: 'user-profile',
+  config: {
+    translationKey: 'user-profile.label',
+    icon: {
+      type: 'name',
+      value: 'user'
+    }
+  }
+}
+
+const ProfileContainer = (): React.JSX.Element => {
+  const user = useUser()
+  const { isLoading } = useUserDraft()
+
+  return (
+    <ContentLayout
+      renderToolbar={
+        <Toolbar id={ user.id } />
+        }
+    >
+      <Content
+        loading={ isLoading }
+        padded
+      >
+        <ProfileDetail id={ user.id } />
+      </Content>
+    </ContentLayout>
+  )
+}
+
+export { ProfileContainer }