feat: display formatted email if member has not set display name

2025-01-31 16:47:45 +00:00
parent 7db21596f1
commit e421b4326c
7 changed files with 108 additions and 43 deletions
--- a/apps/web/src/components/LabelIcon.tsx
+++ b/apps/web/src/components/LabelIcon.tsx
@@ -0,0 +1,12 @@
+const LabelIcon = ({ colourCode }: { colourCode: string | null }) => (
+  <svg
+    fill={colourCode ?? "#3730a3"}
+    className="h-2 w-2"
+    viewBox="0 0 6 6"
+    aria-hidden="true"
+  >
+    <circle cx={3} cy={3} r={3} />
+  </svg>
+);
+
+export default LabelIcon;
--- a/apps/web/src/utils/helpers.ts
+++ b/apps/web/src/utils/helpers.ts
@@ -28,3 +28,17 @@ export const getInitialsFromName = (name: string) => {
    .map((namePart) => namePart.charAt(0).toUpperCase())
    .join("");
 };
+
+export const formatMemberDisplayName = (
+  name: string | null,
+  email: string | null,
+) => {
+  if (name) return name;
+  if (!email) return "";
+
+  const localPart = email.split("@")[0];
+
+  if (!localPart) return "";
+
+  return localPart.replace(/[_-]/g, ".");
+};
--- a/apps/web/src/views/board/components/Filters.tsx
+++ b/apps/web/src/views/board/components/Filters.tsx
@@ -9,7 +9,8 @@ import { IoFilterOutline } from "react-icons/io5";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
-import { formatToArray } from "~/utils/helpers";
+import LabelIcon from "~/components/LabelIcon";
+import { formatMemberDisplayName, formatToArray } from "~/utils/helpers";
 import { getPublicUrl } from "~/utils/supabase/getPublicUrl";

 interface BoardData {
@@ -58,17 +59,6 @@ interface BoardData {
  }[];
 }

-const LabelIcon = ({ colourCode }: { colourCode: string | null }) => (
-  <svg
-    fill={colourCode ?? "#3730a3"}
-    className="h-2 w-2"
-    viewBox="0 0 6 6"
-    aria-hidden="true"
-  >
-    <circle cx={3} cy={3} r={3} />
-  </svg>
-);
-
 const Filters = ({
  position = "right",
  boardData,
@@ -95,7 +85,10 @@ const Filters = ({
  const formattedMembers =
    boardData?.workspace?.members?.map((member) => ({
      key: member.publicId,
-      value: member.user?.name ?? "",
+      value: formatMemberDisplayName(
+        member.user?.name ?? null,
+        member.user?.email ?? null,
+      ),
      selected: !!router.query.members?.includes(member.publicId),
      leftIcon: (
        <Avatar
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/apps/web/src/views/board/components/NewCardForm.tsx
@@ -8,14 +8,18 @@ import {

 import type { NewCardInput } from "@kan/api/types";

+import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
 import Input from "~/components/Input";
+import LabelIcon from "~/components/LabelIcon";
 import Toggle from "~/components/Toggle";
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
+import { formatMemberDisplayName } from "~/utils/helpers";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";

 type NewCardFormInput = NewCardInput & {
  isCreateAnotherEnabled: boolean;
@@ -73,7 +77,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
    boardData?.labels.map((label) => ({
      key: label.publicId,
      value: label.name,
-      selected: labelPublicIds.includes(label.publicId),
+      leftIcon: <LabelIcon colourCode={label.colourCode} />,
    })) ?? [];

  const formattedLists =
@@ -86,8 +90,20 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
  const formattedMembers =
    boardData?.workspace?.members.map((member) => ({
      key: member.publicId,
-      value: member.user?.name ?? "",
-      selected: memberPublicIds.includes(member.publicId),
+      value: formatMemberDisplayName(
+        member.user?.name ?? null,
+        member.user?.email ?? null,
+      ),
+      leftIcon: (
+        <Avatar
+          size="xs"
+          name={member.user?.name ?? ""}
+          imageUrl={
+            member.user?.image ? getPublicUrl(member.user.image) : undefined
+          }
+          email={member.user?.email ?? ""}
+        />
+      ),
    })) ?? [];

  const onSubmit = (data: NewCardInput) => {
--- a/apps/web/src/views/card/components/LabelSelector.tsx
+++ b/apps/web/src/views/card/components/LabelSelector.tsx
@@ -1,12 +1,11 @@
-import { Fragment } from "react";
-import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
-import { HiMiniPlus } from "react-icons/hi2";
+import { Fragment } from "react";
 import { useForm } from "react-hook-form";
+import { HiEllipsisHorizontal, HiMiniPlus } from "react-icons/hi2";

+import LabelIcon from "~/components/LabelIcon";
 import { useModal } from "~/providers/modal";
-
-import { HiEllipsisHorizontal } from "react-icons/hi2";
+import { api } from "~/utils/api";

 interface LabelSelectorProps {
  cardPublicId: string;
@@ -37,7 +36,7 @@ export default function LabelSelector({

  const { register, handleSubmit, setValue, watch } = useForm({
    values: Object.fromEntries(
-      labels?.map((label) => [label.publicId, label.selected]) ?? [],
+      labels.map((label) => [label.publicId, label.selected]) ?? [],
    ),
  });

@@ -100,7 +99,7 @@ export default function LabelSelector({
            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
              <div className="p-2">
                <form onSubmit={handleSubmit(onSubmit)}>
-                  {labels?.map((label) => (
+                  {labels.map((label) => (
                    <Menu.Item key={label.publicId}>
                      {() => (
                        <div
@@ -127,12 +126,18 @@ export default function LabelSelector({
                            checked={watch(label.publicId)}
                          />
                          <div className="flex w-full items-center justify-between">
-                            <label
-                              htmlFor={label.publicId}
-                              className="ml-3 text-sm"
-                            >
-                              {label.name}
-                            </label>
+                            <div className="flex items-center">
+                              <span className="ml-3 flex items-center">
+                                <LabelIcon colourCode={label.colourCode} />
+                              </span>
+                              <label
+                                htmlFor={label.publicId}
+                                className="ml-3 text-sm"
+                              >
+                                {label.name}
+                              </label>
+                            </div>
+
                            <button
                              className="invisible group-hover:visible"
                              onClick={(event) => {
--- a/apps/web/src/views/card/components/MemberSelector.tsx
+++ b/apps/web/src/views/card/components/MemberSelector.tsx
@@ -1,8 +1,12 @@
-import { Fragment } from "react";
-import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
-import { HiMiniPlus } from "react-icons/hi2";
+import { Fragment } from "react";
 import { useForm } from "react-hook-form";
+import { HiMiniPlus } from "react-icons/hi2";
+
+import Avatar from "~/components/Avatar";
+import { api } from "~/utils/api";
+import { formatMemberDisplayName } from "~/utils/helpers";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";

 interface MemberSelectorProps {
  cardPublicId: string;
@@ -11,6 +15,8 @@ interface MemberSelectorProps {
    user: {
      id: string;
      name: string | null;
+      image: string | null;
+      email: string | null;
    };
    selected: boolean;
  }[];
@@ -34,7 +40,7 @@ export default function MemberSelector({

  const { register, handleSubmit, setValue, watch } = useForm({
    values: Object.fromEntries(
-      members?.map((member) => [member.publicId, member.selected]) ?? [],
+      members.map((member) => [member.publicId, member.selected]) ?? [],
    ),
  });

@@ -64,8 +70,8 @@ export default function MemberSelector({
                    className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
                  >
                    <span className="text-[10px] font-medium leading-none text-white">
-                      {member.user?.name
-                        ? member.user?.name
+                      {member.user.name
+                        ? member.user.name
                            .split(" ")
                            .map((namePart) => namePart.charAt(0).toUpperCase())
                            .join("")
@@ -94,7 +100,7 @@ export default function MemberSelector({
            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
              <div className="p-2">
                <form onSubmit={handleSubmit(onSubmit)}>
-                  {members?.map((member) => (
+                  {members.map((member) => (
                    <Menu.Item key={member.publicId}>
                      {() => (
                        <div
@@ -120,12 +126,29 @@ export default function MemberSelector({
                            {...register(member.publicId)}
                            checked={watch(member.publicId)}
                          />
-                          <label
-                            htmlFor={member.publicId}
-                            className="ml-3 text-sm"
-                          >
-                            {member?.user?.name}
-                          </label>
+                          <div className="flex items-center">
+                            <span className="ml-3 flex items-center">
+                              <Avatar
+                                size="xs"
+                                name={member.user.name ?? ""}
+                                imageUrl={
+                                  member.user.image
+                                    ? getPublicUrl(member.user.image)
+                                    : undefined
+                                }
+                                email={member.user.email ?? ""}
+                              />
+                            </span>
+                            <label
+                              htmlFor={member.publicId}
+                              className="ml-3 text-sm"
+                            >
+                              {formatMemberDisplayName(
+                                member.user.name,
+                                member.user.email,
+                              )}
+                            </label>
+                          </div>
                        </div>
                      )}
                    </Menu.Item>
--- a/packages/db/src/repository/card.repo.ts
+++ b/packages/db/src/repository/card.repo.ts
@@ -237,7 +237,9 @@ export const getWithListAndMembersByPublicId = async (
                publicId,
                user!workspace_members_userId_user_id_fk (
                  id,
-                  name
+                  name,
+                  email,
+                  image
                )
              )
            )