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>
)}

179
src/pages/approval-workflows/create.tsx Normal file
View File

@@ -0,0 +1,179 @@
import Layout from "@/components/High/Layout";
import useUser from "@/hooks/useUser";
import { sessionOptions } from "@/lib/session";
import { redirect } from "@/utils";
import { requestUser } from "@/utils/api";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { BsChevronLeft, BsTrash } from "react-icons/bs";
import { ToastContainer } from "react-toastify";
import { v4 as uuidv4 } from 'uuid';
import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
import { useState } from "react";
import { MdFormatListBulletedAdd } from "react-icons/md";
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
const user = await requestUser(req, res)
if (!user) return redirect("/login")
if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
return redirect("/")
return {
props: { user },
};
}, sessionOptions);
export default function Home() {
const { user } = useUser({ redirectTo: "/login" });
const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | null>(null);
const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Handle form submission logic
console.log("Form submitted! Values:", workflows);
};
const handleAddNewWorkflow = () => {
const newId = uuidv4();
const newWorkflow: ApprovalWorkflow = {
id: newId,
name: "",
modules: [],
status: "pending",
steps: [
{ key: Date.now(), completed: false , editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true },
{ key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true },
],
};
setWorkflows((prev) => [...prev, newWorkflow]);
setSelectedWorkflowId(newId);
};
const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
setWorkflows(prev =>
prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
);
}
const handleSelectWorkflow = (id: string) => {
setSelectedWorkflowId(id);
};
const handleDeleteWorkflow = (id: string) => {
if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
setWorkflows(prev => prev.filter(wf => wf.id !== id));
if (selectedWorkflowId === id) {
setSelectedWorkflowId(null);
}
};
return (
<>
<Head>
<title> Configure Workflows | 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}>
<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">{"Configure Approval Workflows"}</h1>
</div>
</section>
<section className="flex flex-row gap-6">
<Button
color="purple"
variant="solid"
onClick={handleAddNewWorkflow}
className="min-w-fit max-h-fit text-lg font-medium flex items-center gap-2 text-left"
>
<MdFormatListBulletedAdd className="size-6" />
Add New Workflow
</Button>
<div className="flex flex-wrap gap-2">
{workflows.map((workflow) => (
<Button
key={workflow.id}
color="purple"
variant={
selectedWorkflowId === workflow.id
? "solid"
: "outline"
}
onClick={() => handleSelectWorkflow(workflow.id)}
className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
>
{workflow.name.trim() === "" ? "New Workflow" : workflow.name}
</Button>
))}
</div>
</section>
<form onSubmit={handleSubmit}>
{currentWorkflow && (
<>
<div className="mb-8 flex flex-row">
<Input
type="text"
name={currentWorkflow.name}
required={true}
placeholder="Enter workflow name"
value={currentWorkflow.name}
onChange={(updatedName) => {
const updatedWorkflow = {
...currentWorkflow,
name: updatedName,
};
onWorkflowChange(updatedWorkflow);
}}
/>
<Button
color="purple"
variant="solid"
onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
type="button"
className="min-w-fit text-lg font-medium flex items-center gap-2 text-left ml-4"
>
Delete Workflow
<BsTrash className="size-6" />
</Button>
</div>
<WorkflowForm
workflow={currentWorkflow}
onWorkflowChange={onWorkflowChange}
/>
</>
)}
</form>
</Layout>
)}
</>
);
}

28
src/pages/approval-workflows/index.tsx
View File

@@ -1,8 +1,8 @@
import Layout from "@/components/High/Layout";
import Button from "@/components/Low/Button";
import Select from "@/components/Low/Select";
import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
import useUser from "@/hooks/useUser";
import useUsers from "@/hooks/useUsers";
import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
import { sessionOptions } from "@/lib/session";
import { redirect } from "@/utils";
@@ -17,6 +17,7 @@ import Link from "next/link";
import { useEffect, useState } from "react";
import { BsTrash } from "react-icons/bs";
import { FaRegEdit } from "react-icons/fa";
import { IoIosAddCircleOutline } from "react-icons/io";
import { toast, ToastContainer } from "react-toastify";
const columnHelper = createColumnHelper<ApprovalWorkflow>();
@@ -119,10 +120,10 @@ export default function ApprovalWorkflows() {
header: "Name",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("module", {
/* columnHelper.accessor("module", {
header: "Module",
cell: (info) => info.getValue(),
}),
}), */
columnHelper.accessor("status", {
header: "Status",
cell: (info) => (
@@ -131,26 +132,26 @@ export default function ApprovalWorkflows() {
</span>
),
}),
columnHelper.accessor("approvers", {
/* columnHelper.accessor("approvers", {
header: "Approvers",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("step", {
header: "Step",
cell: (info) => info.getValue(),
}),
}), */
{
header: "Actions",
id: "actions",
cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
return (
<div className="flex gap-4">
<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" />
</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>
<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" />
</button>
</div>
);
},
@@ -179,6 +180,17 @@ export default function ApprovalWorkflows() {
<Layout user={user} className="gap-6">
<h1 className="text-2xl font-semibold">Approval Workflows</h1>
<Link href={"/approval-workflows/create"}>
<Button
color="purple"
variant="solid"
className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
>
<IoIosAddCircleOutline className="size-6" />
Configure New Workflows
</Button>
</Link>
<div className="flex w-full items-center gap-4">
<div className="flex w-full flex-col gap-3">
<label className="text-mti-gray-dim text-base font-normal">Status</label>