From 50d2841349bf3c30877be3b357658d9caec27e98 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.g.correia@inesctec.pt>
Date: Sun, 19 Jan 2025 22:26:02 +0000
Subject: [PATCH] Implement reordering of steps

---
 .../ApprovalWorkflows/WorkflowStep.tsx        |  23 +++-
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |   4 +-
 src/pages/approval-workflows/[id].tsx         | 130 +++++++++++-------
 3 files changed, 104 insertions(+), 53 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowStep.tsx
index e451744d..f17a8574 100644
--- a/src/components/ApprovalWorkflows/WorkflowStep.tsx
+++ b/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"
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index 63e30cfa..78c5b10c 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/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}
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 1ba5f088..f9f0d42f 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/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 },
-        { 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>
-                                <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
-                                        >
-                                            <WorkflowStep
-                                                editView
-                                                stepNumber={step.stepNumber}
-                                                finalStep={step.finalStep}
-                                                stepType={step.stepType}
-                                                requestedBy="Prof. foo"
-                                                onDelete={() => handleDelete(index)} // Pass index for deletion
-                                            />
-                                        </motion.div>
-                                    ))}
-                                </AnimatePresence>
 
-                                <Button
-                                    type="submit"
-                                    color="purple"
-                                    variant="solid"
-                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                <Reorder.Group
+                                    axis="y"
+                                    values={steps}
+                                    onReorder={handleReorder}
+                                    className="flex flex-col gap-4"
                                 >
-                                    <FaRegCheckCircle className="size-5" />
-                                    Confirm Exam Workflow Pipeline
-                                </Button>
+
+                                    <AnimatePresence>
+                                        {steps.map((step, index) => (
+                                            <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={index + 1}
+                                                    stepType={step.stepType}
+                                                    requestedBy="Prof. Foo"
+                                                    finalStep={step.finalStep}
+                                                    onDelete={() => handleDelete(step.key)}
+                                                />
+                                                {step.finalStep &&
+                                                    <Button
+                                                        type="submit"
+                                                        color="purple"
+                                                        variant="solid"
+                                                        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>