Improve name and email display on user details page

This commit is contained in:
Andrew Kingston 2022-08-01 12:04:44 +01:00
parent 7ae433814e
commit 6e31e69528
1 changed files with 18 additions and 17 deletions

View File

@ -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,19 +111,15 @@
return label return label
} }
const getInitials = (nameLabel, userFetch) => { const getInitials = nameLabel => {
if (nameLabel !== "Name unavailable") { if (!nameLabel) {
return nameLabel return "?"
.split(" ")
.slice(0, 2)
.map(x => x[0])
.join("")
} }
const { email } = userFetch?.data || {} return nameLabel
if (!email) { .split(" ")
return "PC" .slice(0, 2)
} .map(x => x[0])
return email.substring(0, 2) .join("")
} }
const getRoleLabel = roleId => { const getRoleLabel = 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>
<Body size="XS">{$userFetch?.data?.email}</Body> {#if nameLabel !== $userFetch?.data?.email}
<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 {