diff --git a/src/Components/SideMenu/index.js b/src/Components/SideMenu/index.js index 0aea869..2e22dab 100644 --- a/src/Components/SideMenu/index.js +++ b/src/Components/SideMenu/index.js @@ -94,11 +94,8 @@ export default function SideMenu({ setUserSession }) { label: " " + webSocketContext.User.Username, icon: ( user.Id === webSocketContext.User.Id - )?.Avatar - } + allUsers={webSocketContext.AllUsers} + userId={webSocketContext.User.Id} /> ), key: "/user-profile", diff --git a/src/Pages/GroupTasks/GroupTasksTableList.js b/src/Pages/GroupTasks/GroupTasksTableList.js index dabcfb1..308ed8c 100644 --- a/src/Pages/GroupTasks/GroupTasksTableList.js +++ b/src/Pages/GroupTasks/GroupTasksTableList.js @@ -5,16 +5,22 @@ import { Constants, FormatDatetime, GetDuration, + MyAvatar, SentMessagesCommands, WebSocketContext, } from "../../utils"; import { useContext } from "react"; const columns = [ - { + /*{ title: "ID", dataIndex: "id", key: "id", + },*/ + { + title: "Creator", + dataIndex: "creator", + key: "creator", }, { title: "Group Name", @@ -52,7 +58,7 @@ const columns = [ key: "action", render: (_, record) => ( - + View @@ -91,9 +97,18 @@ export default function GroupTaskTableList({ groupTasks.forEach((groupTask) => { if (groupTask.Category === categoryGroup.category) { + const user = webSocketContext.AllUsers.find( + (user) => user.Id === groupTask.CreatorUserId + ); + items.push({ key: groupTask.Id, - id: groupTask.Id, + //id: groupTask.Id, + creator: ( + <> + {user?.Username} + + ), groupName: groupTask.GroupName, step: `${groupTask.CurrentTasksStep} / ${groupTask.NumberOfSteps}`, status: getStatusBadge(groupTask.Status), diff --git a/src/Pages/GroupTasks/GroupTasksViewModal.js b/src/Pages/GroupTasks/GroupTasksViewModal.js index 823a6ea..a8f070d 100644 --- a/src/Pages/GroupTasks/GroupTasksViewModal.js +++ b/src/Pages/GroupTasks/GroupTasksViewModal.js @@ -7,7 +7,6 @@ import { Modal, Popover, Result, - Space, Steps, Tag, notification, @@ -20,6 +19,7 @@ import { WebSocketContext, SentMessagesCommands, GetDuration, + MyAvatar, } from "../../utils"; import { InfoCircleOutlined } from "@ant-design/icons"; @@ -280,10 +280,26 @@ export default function GroupTasksViewModal({ isOpen }) { verticalAlign: "middle", }} /> - + {" "} + {groupTaskSteps[index]?.CreatorUserId !== undefined && ( + + )} ) : ( - <>{groupTask.name} + <> + {groupTask.name}{" "} + {groupTaskSteps[index]?.CreatorUserId !== undefined && ( + + )} + ), status: groupTaskSteps[index] !== undefined @@ -454,6 +470,11 @@ export default function GroupTasksViewModal({ isOpen }) { }} /> {" "} + diff --git a/src/Pages/UserProfile/index.js b/src/Pages/UserProfile/index.js index 6c6276e..59c17bf 100644 --- a/src/Pages/UserProfile/index.js +++ b/src/Pages/UserProfile/index.js @@ -110,12 +110,9 @@ export default function UserProfile() { }} > user.Id === webSocketContext.User.Id - )?.Avatar - } avatarWidth={200} + allUsers={webSocketContext.AllUsers} + userId={webSocketContext.User.Id} /> diff --git a/src/utils.js b/src/utils.js index d47ba0b..872ef70 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,5 +1,5 @@ import { UserOutlined } from "@ant-design/icons"; -import { Avatar, Badge } from "antd"; +import { Avatar, Badge, Tooltip } from "antd"; import { createContext, useEffect, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -361,13 +361,49 @@ export function getConnectionStatusItem(connectionStatus) { ); } -export function MyAvatar({ avatarWidth, avatar }) { - return avatar !== undefined && avatar !== "" ? ( - - ) : ( - } /> - ); +export function MyAvatar({ + avatarWidth, + avatar, + tooltip, + tooltipTitle, + allUsers, + userId, +}) { + const MyDefaultAvatar = () => { + return } />; + }; + + if (avatar === undefined || avatar === null) { + if (allUsers !== undefined && userId !== undefined) { + const user = allUsers.find((u) => u.Id === userId); + + if (user === undefined) return ; + + avatar = user.Avatar; + tooltipTitle = user.Username; + } else { + return ; + } + } + + const MyAvat = () => { + return ( + + ); + }; + + if (tooltip) { + return ( + + <> + + + + ); + } + + return ; }