Implement reordering of steps

src/components/ApprovalWorkflows/WorkflowStep.tsx

@@ -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"

src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

@@ -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}

src/pages/approval-workflows/[id].tsx

@@ -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 },
+        { stepType: "form-intake", firstStep: true, key: 1 },
-        { stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 },
+        { 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 newStep: Step = {
-            const finalStep = prev[prev.length - 1];
+                key: stepCounter,
-            const newStep: Step = { stepNumber: finalStep.stepNumber, stepType: "approval-by", key: stepCounter };
+                stepType: "approval-by",
+            };
+            setStepCounter((count) => count + 1);
 
-            const updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 };
+            return [...prev.slice(0, -1), newStep, lastStep];
-
-            setStepCounter((prev) => prev + 1); //update counter
-
-            return [...nonFinalSteps, newStep, updatedFinalStep];
         });
     };
 
@@ -80,17 +88,24 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
         console.log("Form submitted!", steps);
     };
 
-    const handleDelete = (index: number) => {
+    const handleDelete = (key: number) => {
-        setSteps((prev) => {
+        setSteps((prev) => prev.filter((step) => step.key !== key));
-            const updatedSteps = prev.filter((_, i) => i !== index);
+    };
 
-            const recalculatedSteps = updatedSteps.map((step, idx) => ({
+    const handleReorder = (newOrder: Step[]) => {
-                ...step,
+        const firstIndex = newOrder.findIndex((s) => s.firstStep);
-                stepNumber: idx + 1,
+        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
+                                            <Reorder.Item
-                                            key={step.key} // Use step.stepNumber as the unique key
+                                                key={step.key}
-                                            initial={{ opacity: 0, y: -20 }} // Animation on enter
+                                                value={step}
-                                            animate={{ opacity: 1, y: 0 }}   // Animation on update
+                                                variants={itemVariants}
-                                            exit={{ opacity: 0, x: 20 }}     // Animation on exit
+                                                initial="initial"
-                                            transition={{ duration: 0.3 }}   // Animation duration
+                                                animate="animate"
+                                                exit="exit"
+                                                transition={{ duration: 0.3 }}
+                                                layout
+                                                drag={!(step.firstStep || step.finalStep)}
                                             >
                                                 <WorkflowStep
                                                     editView
-                                                stepNumber={step.stepNumber}
+                                                    stepNumber={index + 1}
-                                                finalStep={step.finalStep}
                                                     stepType={step.stepType}
-                                                requestedBy="Prof. foo"
+                                                    requestedBy="Prof. Foo"
-                                                onDelete={() => handleDelete(index)} // Pass index for deletion
+                                                    finalStep={step.finalStep}
+                                                    onDelete={() => handleDelete(step.key)}
                                                 />
-                                        </motion.div>
+                                                {step.finalStep &&
-                                    ))}
-                                </AnimatePresence>
-
                                                     <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>