233 lines
10 KiB
TypeScript
233 lines
10 KiB
TypeScript
import Layout from "@/components/High/Layout";
|
|
import useUser from "@/hooks/useUser";
|
|
import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
|
|
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";
|
|
|
|
|
|
import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
|
|
|
|
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)
|
|
if (!user) return redirect("/login")
|
|
|
|
if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
|
|
return redirect("/")
|
|
|
|
const { id } = params as { id: string };
|
|
|
|
const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id); // await getApprovalWorkflow(id);
|
|
if (!approvalWorkflow)
|
|
return redirect("/approval-workflows")
|
|
|
|
return {
|
|
props: { user, approvalWorkflow },
|
|
};
|
|
}, sessionOptions);
|
|
|
|
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 (
|
|
<>
|
|
<Head>
|
|
<title> {approvalWorkflow.name} | EnCoach</title>
|
|
<meta
|
|
name="description"
|
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<ToastContainer />
|
|
{user && (
|
|
<Layout user={user} className="gap-6">
|
|
<section className="flex flex-col gap-0">
|
|
<div className="flex items-center gap-2">
|
|
<Link
|
|
href="/approval-workflows"
|
|
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
|
|
<BsChevronLeft />
|
|
</Link>
|
|
<h1 className="text-2xl font-semibold">{approvalWorkflow.name}</h1>
|
|
</div>
|
|
</section>
|
|
<section className="flex flex-col gap-6">
|
|
<div className="flex flex-row gap-6">
|
|
<RequestedBy
|
|
name="Prof. Álvaro Dória"
|
|
profileImage="/blue-stock-photo.png"
|
|
/>
|
|
<StartedOn
|
|
date="15/12/2024"
|
|
/>
|
|
<Status
|
|
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-4"
|
|
>
|
|
|
|
<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>
|
|
)}
|
|
</>
|
|
);
|
|
}
|