implement user information in user name
This commit is contained in:
@@ -27,7 +27,8 @@ class UserProfileController extends ControllerAbstract
|
|||||||
{
|
{
|
||||||
$userId = $this->userIdentity->identifier();
|
$userId = $this->userIdentity->identifier();
|
||||||
|
|
||||||
$profile = $this->userService->fetchProfile($userId);
|
// Get profile with editability metadata
|
||||||
|
$profile = $this->userService->getEditableFields($userId);
|
||||||
|
|
||||||
return new JsonResponse($profile, JsonResponse::HTTP_OK);
|
return new JsonResponse($profile, JsonResponse::HTTP_OK);
|
||||||
}
|
}
|
||||||
@@ -57,8 +58,8 @@ class UserProfileController extends ControllerAbstract
|
|||||||
// storeProfile automatically filters out provider-managed fields
|
// storeProfile automatically filters out provider-managed fields
|
||||||
$this->userService->storeProfile($userId, $data);
|
$this->userService->storeProfile($userId, $data);
|
||||||
|
|
||||||
// Return updated profile
|
// Return updated profile with metadata
|
||||||
$updatedProfile = $this->userService->fetchProfile($userId);
|
$updatedProfile = $this->userService->getEditableFields($userId);
|
||||||
|
|
||||||
return new JsonResponse($updatedProfile, JsonResponse::HTTP_OK);
|
return new JsonResponse($updatedProfile, JsonResponse::HTTP_OK);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,10 +5,12 @@ import { useLayoutStore } from '@KTXC/stores/layoutStore';
|
|||||||
import LayoutUserMenu from '@KTXC/layouts/menus/LayoutUserMenu.vue';
|
import LayoutUserMenu from '@KTXC/layouts/menus/LayoutUserMenu.vue';
|
||||||
import NotificationDD from './NotificationDD.vue';
|
import NotificationDD from './NotificationDD.vue';
|
||||||
import Searchbar from './SearchBarPanel.vue';
|
import Searchbar from './SearchBarPanel.vue';
|
||||||
|
import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
|
||||||
|
|
||||||
const layoutStore = useLayoutStore();
|
const layoutStore = useLayoutStore();
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const identityData = computed(() => userStore.user);
|
const userAuth = computed(() => userStore.auth);
|
||||||
|
const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -86,11 +88,11 @@ const identityData = computed(() => userStore.user);
|
|||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props">
|
<v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props">
|
||||||
<div class="d-flex align-center">
|
<div class="d-flex align-center">
|
||||||
<v-avatar class="mr-sm-2 mr-0 py-2">
|
<v-avatar class="mr-sm-2 mr-0" size="32">
|
||||||
<img src="@KTXC/assets/images/users/avatar-1.png" alt="Julia" />
|
<v-img :src="userAvatar" :alt="userAuth?.label || 'User'" cover />
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
<h6 class="text-subtitle-1 mb-0 d-sm-block d-none">
|
<h6 class="text-subtitle-1 mb-0 d-sm-block d-none">
|
||||||
{{ identityData?.label }}
|
{{ userAuth?.label }}
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { useUserStore } from '@KTXC/stores/userStore';
|
|||||||
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
|
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
|
||||||
import { useLayoutStore } from '@KTXC/stores/layoutStore';
|
import { useLayoutStore } from '@KTXC/stores/layoutStore';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
|
||||||
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -12,8 +13,16 @@ const userStore = useUserStore();
|
|||||||
const integrationStore = useIntegrationStore();
|
const integrationStore = useIntegrationStore();
|
||||||
const layoutStore = useLayoutStore();
|
const layoutStore = useLayoutStore();
|
||||||
|
|
||||||
const identityData = computed(() => userStore.auth);
|
const userAuth = computed(() => userStore.auth);
|
||||||
const profileMenuItems = computed(() => integrationStore.getItems('profile_menu'));
|
const profileMenuItems = computed(() => integrationStore.getItems('profile_menu'));
|
||||||
|
const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
|
||||||
|
const userName = computed(() => {
|
||||||
|
const given = userStore.getProfileField('name_given');
|
||||||
|
const family = userStore.getProfileField('name_family');
|
||||||
|
if (given && family) return `${given} ${family}`;
|
||||||
|
return userAuth.value?.label || 'User';
|
||||||
|
});
|
||||||
|
const userEmail = computed(() => userStore.getProfileField('email') || '');
|
||||||
|
|
||||||
// Theme toggle
|
// Theme toggle
|
||||||
const isDarkMode = computed(() => theme.global.name.value === 'dark');
|
const isDarkMode = computed(() => theme.global.name.value === 'dark');
|
||||||
@@ -37,15 +46,15 @@ const goToSettings = () => {
|
|||||||
<!-- ---------------------------------------------- -->
|
<!-- ---------------------------------------------- -->
|
||||||
<div>
|
<div>
|
||||||
<!-- User Info Header -->
|
<!-- User Info Header -->
|
||||||
<div class="d-flex align-center pa-5">
|
<div class="d-flex align-center pa-5 pb-4">
|
||||||
<v-avatar size="32" class="mr-2">
|
<v-avatar size="40" class="mr-3">
|
||||||
<img src="@KTXC/assets/images/users/avatar-1.png" width="32" />
|
<v-img :src="userAvatar" :alt="userName" cover />
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
<div>
|
<div class="flex-grow-1">
|
||||||
<h6 class="text-h6 mb-0">
|
<h6 class="text-h6 mb-0 font-weight-medium">
|
||||||
{{ identityData?.label || 'User Name' }}
|
{{ userName }}
|
||||||
</h6>
|
</h6>
|
||||||
<p class="text-caption mb-0">{{ userStore.getProfileField('email') || '' }}</p>
|
<p class="text-caption mb-0 text-medium-emphasis">{{ userEmail }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
|
|||||||
Reference in New Issue
Block a user