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}

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

@@ -5,7 +5,7 @@ import { sessionOptions } from "@/lib/session";
import { redirect } from "@/utils";
import { requestUser } from "@/utils/api";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { AnimatePresence, motion } from "framer-motion";
import { AnimatePresence, Reorder } from "framer-motion";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
@@ -25,12 +25,19 @@ import Button from "@/components/Low/Button";
import { useState } from "react";
interface Step {
stepNumber: number;
stepType: StepType;
firstStep?: boolean;
finalStep?: boolean;
key: number;
}
// Variants for animating steps when they are added/removed
const itemVariants = {
initial: { opacity: 0, y: -20 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, x: 20 },
};
export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
const user = await requestUser(req, res)
if (!user) return redirect("/login")
@@ -55,22 +62,23 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms");
const [steps, setSteps] = useState<Step[]>([
{ stepNumber: 1, stepType: "form-intake", key: 1 },
{ stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 },
{ stepType: "form-intake", firstStep: true, key: 1 },
{ stepType: "approval-by", finalStep: true, key: 2 },
]);
const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
const firstStep = steps[0];
const lastStep = steps[steps.length - 1];
const middleSteps = steps.slice(1, steps.length - 1);
const addStep = () => {
setSteps((prev) => {
const nonFinalSteps = prev.slice(0, -1);
const finalStep = prev[prev.length - 1];
const newStep: Step = { stepNumber: finalStep.stepNumber, stepType: "approval-by", key: stepCounter };
const newStep: Step = {
key: stepCounter,
stepType: "approval-by",
};
setStepCounter((count) => count + 1);
const updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 };
setStepCounter((prev) => prev + 1); //update counter
return [...nonFinalSteps, newStep, updatedFinalStep];
return [...prev.slice(0, -1), newStep, lastStep];
});
};
@@ -80,17 +88,24 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
console.log("Form submitted!", steps);
};
const handleDelete = (index: number) => {
setSteps((prev) => {
const updatedSteps = prev.filter((_, i) => i !== index);
const handleDelete = (key: number) => {
setSteps((prev) => prev.filter((step) => step.key !== key));
};
const recalculatedSteps = updatedSteps.map((step, idx) => ({
...step,
stepNumber: idx + 1,
}));
const handleReorder = (newOrder: Step[]) => {
const firstIndex = newOrder.findIndex((s) => s.firstStep);
if (firstIndex !== -1 && firstIndex !== 0) {
const [first] = newOrder.splice(firstIndex, 1);
newOrder.unshift(first);
}
return recalculatedSteps;
});
const finalIndex = newOrder.findIndex((s) => s.finalStep);
if (finalIndex !== -1 && finalIndex !== newOrder.length - 1) {
const [final] = newOrder.splice(finalIndex, 1);
newOrder.push(final);
}
setSteps(newOrder);
};
return (
@@ -160,36 +175,53 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
<IoIosAddCircleOutline className="size-6" />
Add Step
</Button>
<Reorder.Group
axis="y"
values={steps}
onReorder={handleReorder}
className="flex flex-col gap-4"
>
<AnimatePresence>
{steps.map((step, index) => (
<motion.div
key={step.key} // Use step.stepNumber as the unique key
initial={{ opacity: 0, y: -20 }} // Animation on enter
animate={{ opacity: 1, y: 0 }} // Animation on update
exit={{ opacity: 0, x: 20 }} // Animation on exit
transition={{ duration: 0.3 }} // Animation duration
<Reorder.Item
key={step.key}
value={step}
variants={itemVariants}
initial="initial"
animate="animate"
exit="exit"
transition={{ duration: 0.3 }}
layout
drag={!(step.firstStep || step.finalStep)}
>
<WorkflowStep
editView
stepNumber={step.stepNumber}
finalStep={step.finalStep}
stepNumber={index + 1}
stepType={step.stepType}
requestedBy="Prof. foo"
onDelete={() => handleDelete(index)} // Pass index for deletion
requestedBy="Prof. Foo"
finalStep={step.finalStep}
onDelete={() => handleDelete(step.key)}
/>
</motion.div>
))}
</AnimatePresence>
{step.finalStep &&
<Button
type="submit"
color="purple"
variant="solid"
className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
>
<FaRegCheckCircle className="size-5" />
Confirm Exam Workflow Pipeline
</Button>
}
</Reorder.Item>
))}
</AnimatePresence>
</Reorder.Group>
</div>
</form>
</section>