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

Add progress vertical bars to pipeline steps

Browse Source
This commit is contained in:
Joao Correia
2025-01-20 11:44:29 +00:00
parent 50d2841349
commit 39a397d262
4 changed files with 51 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/ApprovalWorkflows/WorkflowStep.tsx
View File

@@ -57,61 +57,65 @@ export default function WorkflowStep({
}
return (
<div
className={clsx(
'flex items-center space-x-3 w-[800px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
{ 'bg-mti-purple-ultralight': isSelected }
)}
>
<div className="flex w-full items-center">
<div className="flex items-center space-x-3">
<WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
{stepNumber !== 1 && !finalStep &&
<LuGripHorizontal className="cursor-grab active:cursor-grabbing" size={25} />
}
</div>
{/* Only show selects if editView === true and stepType === 'approval-by' */}
{showSelects && (
<div className="ml-auto">
<WorkflowStepSelects
// Provide any relevant options:
leftOptions={teacherOptions}
rightOptions={teacherOptions}
leftValue={leftValue}
rightValue={rightValue}
onLeftChange={setLeftValue}
onRightChange={setRightValue}
leftPlaceholder={leftPlaceholder}
rightPlaceholder={rightPlaceholder}
/>
</div>
<div className="flex w-full">
<div className="flex flex-col items-center">
<WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
{/* Vertical Bar connecting steps */}
{!finalStep && (
<div className="w-1 h-10 bg-mti-purple-dark"></div>
)}
</div>
{stepNumber === 1 && (
<div className="ml-auto">
<div className={"flex flex-row gap-0"}>
<div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-l-2xl border-mti-gray-platinum">
<FaWpforms size={20} />
<span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
</div>
<div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-r-2xl border-mti-gray-platinum">
<span className="text-sm font-normal focus:outline-none">Prof. X</span>
</div>
{stepNumber !== 1 && !finalStep
? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
: <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
}
{/* Only show selects if editView === true and stepType === 'approval-by' */}
{showSelects && (
<div className="ml-10">
<WorkflowStepSelects
leftOptions={teacherOptions}
rightOptions={teacherOptions}
leftValue={leftValue}
rightValue={rightValue}
onLeftChange={setLeftValue}
onRightChange={setRightValue}
leftPlaceholder={leftPlaceholder}
rightPlaceholder={rightPlaceholder}
/>
</div>
)}
{stepNumber === 1 && (
<div className="ml-10">
<div className={"flex flex-row gap-0"}>
{/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
<div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
<FaWpforms size={20} />
<span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
</div>
<div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
<span className="text-sm font-normal focus:outline-none">Prof. X</span>
</div>
</div>
)}
</div>
)}
{editView && stepNumber !== 1 && !finalStep && (
{editView && stepNumber !== 1 && !finalStep && (
<div className="ml-4 mt-2">
<button
data-tip="Delete"
className="ml-4 cursor-pointer tooltip"
className="cursor-pointer tooltip"
onClick={onDelete}
>
<BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
</button>
)}
</div>
</div>
)}
</div>
);
};

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

@@ -12,7 +12,7 @@ export default function WorkflowStepNumber({ number, isSelected = false }: Props
return (
<div
className={clsx(
'flex items-center justify-center w-10 h-10 rounded-full',
'flex items-center justify-center w-11 h-11 rounded-full',
{
'bg-mti-purple text-mti-purple-ultralight': isSelected,
'bg-mti-purple-ultralight text-gray-500': !isSelected,

4
src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
View File

@@ -34,7 +34,7 @@ export default function WorkflowStepSelects({
onChange={onLeftChange}
placeholder={leftPlaceholder}
flat
className={"px-2 py-1 rounded-none rounded-l-2xl"}
className={"px-2 rounded-none rounded-l-2xl"}
/>
</div>
{/* Right Select */}
@@ -45,7 +45,7 @@ export default function WorkflowStepSelects({
onChange={onRightChange}
placeholder={rightPlaceholder}
flat
className="px-2 py-1 rounded-none rounded-r-2xl"
className="px-2 rounded-none rounded-r-2xl"
/>
</div>
</div>