From 94639858f2f513d59ad0e986dfd942810940aaf0 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Mon, 20 Jul 2026 10:11:43 +0330 Subject: [PATCH] profile picture --- src/pages/taskmanager/components/UserAvatar.tsx | 16 ++++++++++++++++ .../task-detail/TaskDetailMetadataPreview.tsx | 13 ++----------- .../components/task-detail/TaskDetailToolbar.tsx | 14 ++++++++++++-- .../task-detail/users/TaskDetailUsersList.tsx | 3 ++- src/pages/taskmanager/project/Update.tsx | 1 + .../project/components/CreateProjectSidebar.tsx | 9 ++++++++- .../taskmanager/project/types/ProjectTypes.ts | 1 + src/pages/taskmanager/task/types/TaskTypes.ts | 1 + src/pages/taskmanager/workspace/Update.tsx | 1 + .../components/CreateWorkspaceSidebar.tsx | 9 ++++++++- .../workspace/types/WorkspaceTypes.ts | 1 + 11 files changed, 53 insertions(+), 16 deletions(-) create mode 100644 src/pages/taskmanager/components/UserAvatar.tsx diff --git a/src/pages/taskmanager/components/UserAvatar.tsx b/src/pages/taskmanager/components/UserAvatar.tsx new file mode 100644 index 0000000..1bc2e64 --- /dev/null +++ b/src/pages/taskmanager/components/UserAvatar.tsx @@ -0,0 +1,16 @@ +import { type FC } from "react"; +import AvatarImage from "../../../assets/images/avatar_image.png"; + +type Props = { + src?: string | null; + alt?: string; + className?: string; +}; + +const UserAvatar: FC = ({ src, alt = "", className = "size-6" }) => ( +
+ {alt} +
+); + +export default UserAvatar; diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx index febf89e..d6e0c94 100644 --- a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx +++ b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx @@ -2,7 +2,7 @@ import { Add } from "iconsax-react"; import { type FC } from "react"; import type DateObject from "react-date-object"; import { useTranslation } from "react-i18next"; -import AvatarImage from "../../../../assets/images/avatar_image.png"; +import UserAvatar from "../UserAvatar"; import { formatDateRange } from "./date/utils"; import type { TaskLabel } from "./labels/types"; import type { TaskUser } from "./users/types"; @@ -52,16 +52,7 @@ const TaskDetailMetadataPreview: FC = ({ selectedLabels, selectedUsers, s
{t("taskmanager.users")}
{selectedUsers.map((user) => ( -
- {user.name} -
+ ))}
); diff --git a/src/pages/taskmanager/project/Update.tsx b/src/pages/taskmanager/project/Update.tsx index 8f770b3..8977d52 100644 --- a/src/pages/taskmanager/project/Update.tsx +++ b/src/pages/taskmanager/project/Update.tsx @@ -135,6 +135,7 @@ const UpdateProject: FC = () => { project.users.map((user) => ({ id: user.id, name: `${user.firstName} ${user.lastName}`, + profilePic: user.profilePic, })), ); } else if (project.userIds?.length) { diff --git a/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx b/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx index 7c9830d..272c29c 100644 --- a/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx +++ b/src/pages/taskmanager/project/components/CreateProjectSidebar.tsx @@ -8,10 +8,12 @@ import { UserItemType } from "../../../users/types/UserTypes"; import { useGetWorkspaces } from "../../workspace/hooks/useWorkspaceData"; import { WorkspaceItemType } from "../../workspace/types/WorkspaceTypes"; import WorkspaceColorPicker from "../../workspace/components/WorkspaceColorPicker"; +import UserAvatar from "../../components/UserAvatar"; export type SelectedUser = { id: string; name: string; + profilePic?: string; }; export const BACKGROUND_PRESETS = [ @@ -95,7 +97,11 @@ const CreateProjectSidebar: FC = ({ if (user) { onSelectedUsersChange([ ...selectedUsers, - { id: user.id, name: `${user.firstName} ${user.lastName}` }, + { + id: user.id, + name: `${user.firstName} ${user.lastName}`, + profilePic: user.profilePic, + }, ]); } @@ -142,6 +148,7 @@ const CreateProjectSidebar: FC = ({ ) : ( selectedUsers.map((user) => (
+
{user.name}
handleRemoveUser(user.id)} />
diff --git a/src/pages/taskmanager/project/types/ProjectTypes.ts b/src/pages/taskmanager/project/types/ProjectTypes.ts index d52b8cc..692035a 100644 --- a/src/pages/taskmanager/project/types/ProjectTypes.ts +++ b/src/pages/taskmanager/project/types/ProjectTypes.ts @@ -12,6 +12,7 @@ export type ProjectUserType = { id: string; firstName: string; lastName: string; + profilePic?: string; }; export type CreateProjectType = { diff --git a/src/pages/taskmanager/task/types/TaskTypes.ts b/src/pages/taskmanager/task/types/TaskTypes.ts index 3f784a1..0f291e5 100644 --- a/src/pages/taskmanager/task/types/TaskTypes.ts +++ b/src/pages/taskmanager/task/types/TaskTypes.ts @@ -59,6 +59,7 @@ export type TaskUserType = { id: string; firstName: string; lastName: string; + profilePic?: string; }; export type TaskChecklistItemType = { diff --git a/src/pages/taskmanager/workspace/Update.tsx b/src/pages/taskmanager/workspace/Update.tsx index feea07b..e91b215 100644 --- a/src/pages/taskmanager/workspace/Update.tsx +++ b/src/pages/taskmanager/workspace/Update.tsx @@ -89,6 +89,7 @@ const UpdateWorkspace: FC = () => { workspace.users.map((user) => ({ id: user.id, name: `${user.firstName} ${user.lastName}`, + profilePic: user.profilePic, })), ); } else if (workspace.userIds?.length) { diff --git a/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx b/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx index 046e030..538741b 100644 --- a/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx +++ b/src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx @@ -6,10 +6,12 @@ import Select from "../../../../components/Select"; import { useGetUsers } from "../../../users/hooks/useUserData"; import { UserItemType } from "../../../users/types/UserTypes"; import WorkspaceColorPicker from "./WorkspaceColorPicker"; +import UserAvatar from "../../components/UserAvatar"; export type SelectedUser = { id: string; name: string; + profilePic?: string; }; type Props = { @@ -55,7 +57,11 @@ const CreateWorkspaceSidebar: FC = ({ if (user) { onSelectedUsersChange([ ...selectedUsers, - { id: user.id, name: `${user.firstName} ${user.lastName}` }, + { + id: user.id, + name: `${user.firstName} ${user.lastName}`, + profilePic: user.profilePic, + }, ]); } @@ -107,6 +113,7 @@ const CreateWorkspaceSidebar: FC = ({ key={user.id} className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg" > +
{user.name}