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

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

Browse Source
This commit is contained in:
Joao Correia
2025-01-20 23:32:32 +00:00
parent 39a397d262
commit 01222b3a13
7 changed files with 435 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,13 +5,10 @@ import { sessionOptions } from "@/lib/session";
import { redirect } from "@/utils";
import { requestUser } from "@/utils/api";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { AnimatePresence, Reorder } from "framer-motion";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { BsChevronLeft } from "react-icons/bs";
import { FaRegCheckCircle } from "react-icons/fa";
import { IoIosAddCircleOutline } from "react-icons/io";
import { ToastContainer } from "react-toastify";
@@ -20,26 +17,9 @@ import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to te
import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
import Status from "@/components/ApprovalWorkflows/Status";
import WorkflowStep, { StepType } from "@/components/ApprovalWorkflows/WorkflowStep";
import Button from "@/components/Low/Button";
import { useState } from "react";
interface Step {
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)
const user = await requestUser(req, res);
if (!user) return redirect("/login")
if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
@@ -59,54 +39,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
const { user } = useUser({ redirectTo: "/login" });
const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms");
const [steps, setSteps] = useState<Step[]>([
{ 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 newStep: Step = {
key: stepCounter,
stepType: "approval-by",
};
setStepCounter((count) => count + 1);
return [...prev.slice(0, -1), newStep, lastStep];
});
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Handle form submission logic
console.log("Form submitted!", steps);
};
const handleDelete = (key: number) => {
setSteps((prev) => prev.filter((step) => step.key !== key));
};
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);
}
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 (
<>
@@ -145,85 +78,6 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
status="pending"
/>
</div>
<div className="flex flex-row gap-6">
<Button
color="purple"
variant={selectedButton === "forms" ? "solid" : "outline"}
onClick={() => setSelectedButton("forms")}
className="transition-all duration-300 w-56 text-lg font-medium"
>
Forms
</Button>
<Button
color="purple"
variant={selectedButton === "progress" ? "solid" : "outline"}
onClick={() => setSelectedButton("progress")}
className="transition-all duration-300 w-56 text-lg font-medium"
>
Progress
</Button>
</div>
<form onSubmit={handleSubmit}>
<div className="flex flex-col gap-6">
<Button
color="purple"
variant="solid"
onClick={addStep}
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)}
>
<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>
</Layout>
)}