Fix name showing undefined in users tab and fix initials always being PC

4 years ago · e47fbf2df1
1 changed files with 36 additions and 6 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -44,6 +44,8 @@
  $: hasGroupsLicense = $auth.user?.license.features.includes(
    Constants.Features.USER_GROUPS
  )
+  $: nameLabel = getNameLabel($userFetch)
+  $: initials = getInitials(nameLabel, $userFetch)

  $: allAppList = $apps
    .filter(x => {
@ -86,6 +88,38 @@

  const userFetch = fetchData(`/api/global/users/${userId}`)

+  const getNameLabel = userFetch => {
+    const { firstName, lastName } = userFetch?.data || {}
+    if (!firstName && !lastName) {
+      return "Name unavailable"
+    }
+    let label
+    if (firstName) {
+      label = firstName
+      if (lastName) {
+        label += ` ${lastName}`
+      }
+    } else {
+      label = lastName
+    }
+    return label
+  }
+
+  const getInitials = (nameLabel, userFetch) => {
+    if (nameLabel !== "Name unavailable") {
+      return nameLabel
+        .split(" ")
+        .slice(0, 2)
+        .map(x => x[0])
+        .join("")
+    }
+    const { email } = userFetch?.data || {}
+    if (!email) {
+      return "PC"
+    }
+    return email.substring(0, 2)
+  }
+
  function getHighestRole(roles) {
    let highestRole
    let highestRoleNumber = 0
@ -186,13 +220,9 @@
    <div class="title">
      <div>
        <div style="display: flex;">
-          <Avatar size="XXL" initials="PC" />
+          <Avatar size="XXL" {initials} />
          <div class="subtitle">
-            <Heading size="S"
-              >{$userFetch?.data?.firstName +
-                " " +
-                $userFetch?.data?.lastName}</Heading
-            >
+            <Heading size="S">{nameLabel}</Heading>
            <Body size="XS">{$userFetch?.data?.email}</Body>
          </div>
        </div>