From 051981c1ecba436a2bbc80f9a14bec56c0aa84e4 Mon Sep 17 00:00:00 2001
From: Craig Yu <craig.yu93@gmail.com>
Date: Thu, 3 Oct 2024 13:01:37 -0700
Subject: [PATCH] fix: #1540 add dashes to null name (#1616)

---
 .../src/components/UserSummaryCard/index.vue  |  3 +-
 frontend/src/utils/UserUtils.ts               | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/UserSummaryCard/index.vue b/frontend/src/components/UserSummaryCard/index.vue
index 813c9df0e..0b5e91133 100644
--- a/frontend/src/components/UserSummaryCard/index.vue
+++ b/frontend/src/components/UserSummaryCard/index.vue
@@ -5,6 +5,7 @@ import Card from 'primevue/card';
 import { AppActlApiService } from '@/services/ApiServiceFactory';
 import { DEFAULT_COL_SIZE } from '@/components/UserSummaryCard/constants';
 import CardTextCol from '@/components/CardTextCol/index.vue';
+import { formatFullName } from '@/utils/UserUtils';
 
 const props = defineProps<{
     userId: string; // Fam User ID
@@ -41,7 +42,7 @@ const userQuery = useQuery(
                     :description="userQuery.data.value?.user_name" :is-loading="userQuery.isFetching.value" />
 
                 <CardTextCol :class="DEFAULT_COL_SIZE" id="full-name" label="Full name"
-                    :description="`${userQuery.data.value?.first_name} ${userQuery.data.value?.last_name}`"
+                    :description="formatFullName(userQuery.data.value?.first_name, userQuery.data.value?.last_name)"
                     :is-loading="userQuery.isFetching.value" />
 
                 <CardTextCol :class="DEFAULT_COL_SIZE" id="domain" label="Domain"
diff --git a/frontend/src/utils/UserUtils.ts b/frontend/src/utils/UserUtils.ts
index 126e7d6fb..2032d9f68 100644
--- a/frontend/src/utils/UserUtils.ts
+++ b/frontend/src/utils/UserUtils.ts
@@ -1,3 +1,5 @@
+import { PLACE_HOLDER } from "@/constants/constants";
+
 /**
  * Formats a user's full name and ID (userName) into a readable string.
  * If both first and last names are missing, it returns the ID only.
@@ -31,3 +33,35 @@ export const formatUserNameAndId = (
 
     return `${firstName} ${lastName} (${userName})`;
 }
+
+/**
+ * Formats a user's full name into a readable string.
+ * If both first and last names are missing, it returns an empty string.
+ * If either the first or last name is missing, it formats the remaining name.
+ * If both names are present, it combines them.
+ *
+ * @param {string} [firstName] - The optional first name of the user. Can be null.
+ * @param {string} [lastName] - The optional last name of the user. Can be null.
+ * @returns {string} - The formatted string in the format: "FirstName LastName",
+ *                     or just "LastName" if the first name is missing,
+ *                     or "FirstName" if the last name is missing,
+ *                     or a PLACE_HOLDER string if both names are missing.
+ */
+export const formatFullName = (
+    firstName?: string | null,
+    lastName?: string | null,
+): string => {
+    if (!firstName && !lastName) {
+        return PLACE_HOLDER;
+    }
+
+    if (!firstName) {
+        return lastName!;
+    }
+
+    if (!lastName) {
+        return firstName!;
+    }
+
+    return `${firstName} ${lastName}`;
+}