Start implementing workflow step form behaviour
This commit is contained in:
Joao Correia
@@ -5,17 +5,31 @@ 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 { 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 {
|
||||
stepNumber: number;
|
||||
stepType: StepType;
|
||||
finalStep?: boolean;
|
||||
key: number;
|
||||
}
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
|
||||
const user = await requestUser(req, res)
|
||||
@@ -38,6 +52,47 @@ 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[]>([
|
||||
{ stepNumber: 1, stepType: "form-intake", key: 1 },
|
||||
{ stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 },
|
||||
]);
|
||||
const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
|
||||
|
||||
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 updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 };
|
||||
|
||||
setStepCounter((prev) => prev + 1); //update counter
|
||||
|
||||
return [...nonFinalSteps, newStep, updatedFinalStep];
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission logic
|
||||
console.log("Form submitted!", steps);
|
||||
};
|
||||
|
||||
const handleDelete = (index: number) => {
|
||||
setSteps((prev) => {
|
||||
const updatedSteps = prev.filter((_, i) => i !== index);
|
||||
|
||||
const recalculatedSteps = updatedSteps.map((step, idx) => ({
|
||||
...step,
|
||||
stepNumber: idx + 1,
|
||||
}));
|
||||
|
||||
return recalculatedSteps;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -62,17 +117,81 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
|
||||
<h1 className="text-2xl font-semibold">{approvalWorkflow.name}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section 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"
|
||||
/>
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<FaRegCheckCircle className="size-5" />
|
||||
Confirm Exam Workflow Pipeline
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</Layout>
|
||||
)}
|
||||
|
||||
@@ -145,9 +145,9 @@ export default function ApprovalWorkflows() {
|
||||
cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
|
||||
<button data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
|
||||
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</div>
|
||||
</button>
|
||||
<Link data-tip="Edit" href={`/approval-workflows/${row.original.id}`} className="cursor-pointer tooltip">
|
||||
<FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user