From 6e31e695287e54db3c04895cbebc7b537b2a882d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 1 Aug 2022 12:04:44 +0100 Subject: [PATCH] Improve name and email display on user details page --- .../portal/manage/users/[userId].svelte | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte index f13a3f2e6e..3eaba9b6b9 100644 --- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte +++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte @@ -51,7 +51,7 @@ Constants.Features.USER_GROUPS ) $: nameLabel = getNameLabel($userFetch) - $: initials = getInitials(nameLabel, $userFetch) + $: initials = getInitials(nameLabel) $: allAppList = $apps .filter(x => { @@ -95,9 +95,9 @@ const userFetch = fetchData(`/api/global/users/${userId}`) const getNameLabel = userFetch => { - const { firstName, lastName } = userFetch?.data || {} + const { firstName, lastName, email } = userFetch?.data || {} if (!firstName && !lastName) { - return "Name unavailable" + return email || "" } let label if (firstName) { @@ -111,19 +111,15 @@ return label } - const getInitials = (nameLabel, userFetch) => { - if (nameLabel !== "Name unavailable") { - return nameLabel - .split(" ") - .slice(0, 2) - .map(x => x[0]) - .join("") + const getInitials = nameLabel => { + if (!nameLabel) { + return "?" } - const { email } = userFetch?.data || {} - if (!email) { - return "PC" - } - return email.substring(0, 2) + return nameLabel + .split(" ") + .slice(0, 2) + .map(x => x[0]) + .join("") } const getRoleLabel = roleId => { @@ -235,7 +231,9 @@
{nameLabel} - {$userFetch?.data?.email} + {#if nameLabel !== $userFetch?.data?.email} + {$userFetch?.data?.email} + {/if}
@@ -410,7 +408,10 @@ .subtitle { padding: 0 0 0 var(--spacing-m); - display: inline-block; + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; } .appsTitle {