Improve name and email display on user details page
This commit is contained in:
parent
7ae433814e
commit
6e31e69528
|
@ -51,7 +51,7 @@
|
||||||
Constants.Features.USER_GROUPS
|
Constants.Features.USER_GROUPS
|
||||||
)
|
)
|
||||||
$: nameLabel = getNameLabel($userFetch)
|
$: nameLabel = getNameLabel($userFetch)
|
||||||
$: initials = getInitials(nameLabel, $userFetch)
|
$: initials = getInitials(nameLabel)
|
||||||
|
|
||||||
$: allAppList = $apps
|
$: allAppList = $apps
|
||||||
.filter(x => {
|
.filter(x => {
|
||||||
|
@ -95,9 +95,9 @@
|
||||||
const userFetch = fetchData(`/api/global/users/${userId}`)
|
const userFetch = fetchData(`/api/global/users/${userId}`)
|
||||||
|
|
||||||
const getNameLabel = userFetch => {
|
const getNameLabel = userFetch => {
|
||||||
const { firstName, lastName } = userFetch?.data || {}
|
const { firstName, lastName, email } = userFetch?.data || {}
|
||||||
if (!firstName && !lastName) {
|
if (!firstName && !lastName) {
|
||||||
return "Name unavailable"
|
return email || ""
|
||||||
}
|
}
|
||||||
let label
|
let label
|
||||||
if (firstName) {
|
if (firstName) {
|
||||||
|
@ -111,20 +111,16 @@
|
||||||
return label
|
return label
|
||||||
}
|
}
|
||||||
|
|
||||||
const getInitials = (nameLabel, userFetch) => {
|
const getInitials = nameLabel => {
|
||||||
if (nameLabel !== "Name unavailable") {
|
if (!nameLabel) {
|
||||||
|
return "?"
|
||||||
|
}
|
||||||
return nameLabel
|
return nameLabel
|
||||||
.split(" ")
|
.split(" ")
|
||||||
.slice(0, 2)
|
.slice(0, 2)
|
||||||
.map(x => x[0])
|
.map(x => x[0])
|
||||||
.join("")
|
.join("")
|
||||||
}
|
}
|
||||||
const { email } = userFetch?.data || {}
|
|
||||||
if (!email) {
|
|
||||||
return "PC"
|
|
||||||
}
|
|
||||||
return email.substring(0, 2)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getRoleLabel = roleId => {
|
const getRoleLabel = roleId => {
|
||||||
const role = $roles.find(x => x._id === roleId)
|
const role = $roles.find(x => x._id === roleId)
|
||||||
|
@ -235,7 +231,9 @@
|
||||||
<Avatar size="XXL" {initials} />
|
<Avatar size="XXL" {initials} />
|
||||||
<div class="subtitle">
|
<div class="subtitle">
|
||||||
<Heading size="S">{nameLabel}</Heading>
|
<Heading size="S">{nameLabel}</Heading>
|
||||||
|
{#if nameLabel !== $userFetch?.data?.email}
|
||||||
<Body size="XS">{$userFetch?.data?.email}</Body>
|
<Body size="XS">{$userFetch?.data?.email}</Body>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -410,7 +408,10 @@
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
padding: 0 0 0 var(--spacing-m);
|
padding: 0 0 0 var(--spacing-m);
|
||||||
display: inline-block;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appsTitle {
|
.appsTitle {
|
||||||
|
|
Loading…
Reference in New Issue