dynamic list of new workflows in workflow builder and some code refactoring

2025-01-20 23:32:32 +00:00
parent 39a397d262
commit 01222b3a13
7 changed files with 435 additions and 217 deletions
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -0,0 +1,143 @@
+import Option from "@/interfaces/option";
+import { AnimatePresence, Reorder } from "framer-motion";
+import { useEffect, useState } from "react";
+import { FaRegCheckCircle } from "react-icons/fa";
+import { IoIosAddCircleOutline } from "react-icons/io";
+import Button from "../Low/Button";
+import WorkflowStepComponent from "./WorkflowStep";
+import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
+
+const teacherOptions: Option[] = [
+    // fetch from database?
+]
+
+const directorOptions: Option[] = [
+    // fetch from database?
+]
+
+// 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 },
+};
+
+interface Props {
+    workflow: ApprovalWorkflow;
+    onWorkflowChange: (workflow: ApprovalWorkflow) => void;
+}
+
+export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
+    const [steps, setSteps] = useState<WorkflowStep[]>(workflow.steps);
+    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
+    const lastStep = steps[steps.length - 1];
+
+    useEffect(() => {
+        setSteps(workflow.steps);
+    }, [workflow]);
+
+    useEffect(() => {
+        const updatedWorkflow = { ...workflow, steps };
+        onWorkflowChange(updatedWorkflow);
+    }, [steps]);
+
+    const addStep = () => {
+        setSteps((prev) => {
+            const newStep: WorkflowStep = {
+                key: stepCounter,
+                stepType: "approval-by",
+                stepNumber: steps.length - 1,
+                completed: false,
+            };
+            setStepCounter((count) => count + 1);
+
+            return [...prev.slice(0, -1), newStep, lastStep];
+        });
+    };
+
+    const handleDelete = (key: number | undefined) => {
+        if (key){
+            setSteps((prev) => prev.filter((step) => step.key !== key));
+        }
+    };
+
+    const handleReorder = (newOrder: WorkflowStep[]) => {
+        const firstIndex = newOrder.findIndex((s) => s.firstStep);
+        if (firstIndex !== -1 && firstIndex !== 0) {
+            const [first] = newOrder.splice(firstIndex, 1);
+            newOrder.unshift(first);
+        }
+
+        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 (
+        <div className="flex flex-col gap-6">
+            <Button
+                color="purple"
+                variant="solid"
+                onClick={addStep}
+                type="button"
+                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+            >
+                <IoIosAddCircleOutline className="size-6" />
+                Add Step
+            </Button>
+
+            <Reorder.Group
+                axis="y"
+                values={steps}
+                onReorder={handleReorder}
+                className="flex flex-col gap-0"
+            >
+
+                <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)}
+                        >
+                            <WorkflowStepComponent
+                                key={step.key}
+                                completed={false}
+                                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>
+
+
+    );
+};