devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add approval by to step details panel and add text size prop to UserWithProfilePicture component

Browse Source
This commit is contained in:
Joao Correia
2025-01-25 04:23:28 +00:00
parent f71a7182dd
commit 2eff08bf86
2 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ApprovalWorkflows/UserWithProfilePic.tsx
View File

@@ -4,12 +4,14 @@ interface Props {
prefix: string; prefix: string;
name: string; name: string;
profileImage: string; profileImage: string;
textSize?: string;
} }
export default function UserWithProfilePic({ prefix, name, profileImage }: Props) { export default function UserWithProfilePic({ prefix, name, profileImage, textSize }: Props) {
const textClassName = `${textSize ? textSize : "text-xs"} font-medium`
return ( return (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<p className="text-xs font-medium">{prefix} {name}</p> <p className={textClassName}>{prefix} {name}</p>
<Image <Image
src={profileImage} src={profileImage}
alt={name} alt={name}

23
src/pages/approval-workflows/[id].tsx
View File

@@ -180,7 +180,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
</div> </div>
{selectedStep.completed ? ( {selectedStep.completed ? (
<div className={"text-base font-medium text-gray-500 my-7"}> <div className={"text-base font-medium text-gray-500 flex flex-col gap-6"}>
Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", { Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
year: "numeric", year: "numeric",
month: "2-digit", month: "2-digit",
@@ -190,7 +190,25 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
second: "2-digit", second: "2-digit",
hour12: false, hour12: false,
}).replace(", ", " at ")} }).replace(", ", " at ")}
<p className="my-4 text-sm">No additional actions are required.</p> <div className="flex flex-row gap-1 text-sm">
<p className="text-base">Approved by:</p>
{(() => {
const assignee = workflowAssignees.find(
(assignee) => assignee.id === selectedStep.completedBy
);
return assignee ? (
<UserWithProfilePic
textSize="text-base"
prefix={getUserTypeLabelShort(assignee.type)}
name={assignee.name}
profileImage={assignee.profilePicture}
/>
) : (
"Unknown"
);
})()}
</div>
<p className="text-sm">No additional actions are required.</p>
</div> </div>
) : ( ) : (
@@ -200,6 +218,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
{workflowAssignees.map(user => ( {workflowAssignees.map(user => (
<span key={user.id}> <span key={user.id}>
<UserWithProfilePic <UserWithProfilePic
textSize="text-sm"
prefix={getUserTypeLabelShort(user.type)} prefix={getUserTypeLabelShort(user.type)}
name={user.name} name={user.name}
profileImage={user.profilePicture} profileImage={user.profilePicture}