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

- initial selected step

Browse Source 
- assignees id to name on table view
This commit is contained in:
Joao Correia
2025-01-24 17:09:37 +00:00
parent 41d09eaad8
commit 1f7639a30e
5 changed files with 97 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ interface Props {
export default function UserWithProfilePic({ prefix, name, profileImage }: Props) {
return (
<div className="flex items-center space-x-2">
<p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
<p className="text-xs font-medium">{prefix} {name}</p>
<Image
src={profileImage}
alt={name}

51
src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
View File

@@ -23,8 +23,6 @@ export default function WorkflowStepComponent({
assigneesType,
onClick,
}: Props) {
console.log(workflowAssignees);
console.log(completedBy)
const completedByUser = workflowAssignees.find((assignee) => assignee.id === completedBy);
const assigneesUsers = workflowAssignees.filter(user => assignees!.includes(user.id));
@@ -59,31 +57,46 @@ export default function WorkflowStepComponent({
<>
<p className="text-sm font-medium text-gray-800">Form: Intake</p>
{completed && completedBy && (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Completed by {getUserTypeLabelShort(completedByUser?.type)} {completedByUser?.name}
</p>
<div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
<UserWithProfilePic
prefix={`Completed by: ${getUserTypeLabelShort(completedByUser!.type)}`}
name={completedByUser!.name}
profileImage={completedByUser!.profilePicture}
/>
</div>
)}
{!completed && completedBy && (
<>
{assigneesUsers.map(user => (
<p key={user.id} className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
{getUserTypeLabelShort(user.type)} {user.name}
</p>
))}
</>
<div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
In Progress... Assignees:
<div className="flex flex-row flex-wrap gap-3 items-center">
{assigneesUsers.map(user => (
<span key={user.id}>
<UserWithProfilePic
prefix={getUserTypeLabelShort(user.type)}
name={user.name}
profileImage={user.profilePicture}
/>
</span>
))}
</div>
</div>
)}
</>
) : (
stepType === "approval-by" && (
<>
<p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(assigneesType)}</p>
{completed ? (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Approved by {workflowAssignees.find((assignee) => assignee.id === completedBy)?.name || "Unknown"}
</p>
{completed && completedBy ? (
<div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
<UserWithProfilePic
prefix={`Approved by: ${getUserTypeLabelShort(completedByUser!.type)}`}
name={completedByUser!.name}
profileImage={completedByUser!.profilePicture}
/>
</div>
) : !completed && currentStep ? (
<div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
In Progress... Assignees:
In Progress... Assignees:
<div className="flex flex-row flex-wrap gap-3 items-center">
{assigneesUsers.map(user => (
<span key={user.id}>
@@ -97,9 +110,9 @@ export default function WorkflowStepComponent({
</div>
</div>
) : (
<p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
<div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
Waiting for previous steps...
</p>
</div>
)}
</>
)