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

Implement reordering of steps

Browse Source
This commit is contained in:
Joao Correia
2025-01-19 22:26:02 +00:00
parent f485c782f3
commit 50d2841349
3 changed files with 104 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,8 @@ import Option from "@/interfaces/option";
import clsx from "clsx";
import { useState } from "react";
import { BsTrash } from "react-icons/bs";
import { FaWpforms } from "react-icons/fa6";
import { LuGripHorizontal } from "react-icons/lu";
import WorkflowStepNumber from "./WorkflowStepNumber";
import WorkflowStepSelects from "./WorkflowStepSelects";
@@ -57,13 +59,16 @@ export default function WorkflowStep({
return (
<div
className={clsx(
'flex items-center space-x-3 w-[600px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
'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-shrink-0">
<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' */}
@@ -83,6 +88,20 @@ export default function WorkflowStep({
</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>
</div>
</div>
)}
{editView && stepNumber !== 1 && !finalStep && (
<button
data-tip="Delete"

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

@@ -27,7 +27,7 @@ export default function WorkflowStepSelects({
className={"flex flex-row gap-0"}
>
{/* Left Select */}
<div className="flex-1 w-[175px]">
<div className="flex-1 w-[275px]">
<Select
options={leftOptions}
value={leftValue}
@@ -38,7 +38,7 @@ export default function WorkflowStepSelects({
/>
</div>
{/* Right Select */}
<div className="flex-1 w-[175px]">
<div className="flex-1 w-[275px]">
<Select
options={rightOptions}
value={rightValue}