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

143
src/components/ApprovalWorkflows/WorkflowForm.tsx Normal file
View File

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

27
src/components/ApprovalWorkflows/WorkflowStep.tsx
View File

@@ -1,11 +1,11 @@
import Option from "@/interfaces/option";
import clsx from "clsx";
import { useState } from "react";
import { BsTrash } from "react-icons/bs";
import { FaWpforms } from "react-icons/fa6";
import { LuGripHorizontal } from "react-icons/lu";
import WorkflowStepNumber from "./WorkflowStepNumber";
import WorkflowStepSelects from "./WorkflowStepSelects";
import { WorkflowStep } from "@/interfaces/approval.workflow";
export type StepType = "form-intake" | "approval-by";
@@ -17,26 +17,16 @@ const directorOptions: Option[] = [
// fetch from database?
]
interface Props {
editView?: boolean,
finalStep?: boolean,
isSelected?: boolean,
stepNumber: number,
stepType: StepType,
requestedBy: string,
//requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
onDelete?: () => void;
}
export default function WorkflowStep({
export default function WorkflowStepComponent({
stepType,
stepNumber,
completed = false,
editView = false,
finalStep = false,
isSelected = false,
stepNumber,
stepType,
requestedBy,
onDelete,
}: Props) {
}: WorkflowStep) {
// disable selectability of step if in editView
const effectiveIsSelected = editView ? false : isSelected;
@@ -57,7 +47,6 @@ export default function WorkflowStep({
}
return (
<div className="flex w-full">
<div className="flex flex-col items-center">
<WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
@@ -94,8 +83,7 @@ export default function WorkflowStep({
<div className={"flex flex-row gap-0"}>
{/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
<div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
<FaWpforms size={20} />
<span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
<span className="text-sm font-normal focus:outline-none">Form Intake</span>
</div>
<div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
<span className="text-sm font-normal focus:outline-none">Prof. X</span>
@@ -110,6 +98,7 @@ export default function WorkflowStep({
data-tip="Delete"
className="cursor-pointer tooltip"
onClick={onDelete}
type="button"
>
<BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
</button>

84
src/demo/approval_workflows.json
View File

@@ -1,42 +1,66 @@
[
{
"id": "local-test-id-1",
"id": "kajhfakscbka-asacaca-acawesae",
"name": "name-1",
"module": "reading",
"status": "approved",
"approvers": "prof-1",
"step": "Concluded"
},
{
"id": "local-test-id-2",
"name": "name-2",
"module": "reading",
"modules": [
"reading",
"writing"
],
"status": "pending",
"approvers": "prof-2",
"step": "Concluded"
"approvers": "prof-1",
"steps": [
{
"stepType": "form-intake",
"stepNumber": 1,
"completed": true,
"completedBy": "Prof. X",
"assignees": [
"Prof. X",
"Prof. Y",
"Prof. Z"
]
},
{
"id": "local-test-id-3",
"name": "name-3",
"module": "listening",
"status": "rejected",
"approvers": "prof-3",
"step": "Concluded"
"stepType": "approval-by",
"stepNumber": 2,
"completed": true,
"completedBy": "Prof. Y",
"assignees": [
"Prof. X",
"Prof. Y",
"Prof. Z"
]
},
{
"id": "local-test-id-4",
"name": "name-4",
"module": "writing",
"status": "approved",
"approvers": "prof-4",
"step": "Concluded"
"stepType": "approval-by",
"stepNumber": 3,
"completed": false,
"assignees": [
"Prof. X",
"Prof. Y",
"Prof. Z"
]
},
{
"id": "local-test-id-5",
"name": "name-5",
"module": "reading",
"status": "approved",
"approvers": "prof-5",
"step": "Concluded"
"stepType": "approval-by",
"stepNumber": 4,
"completed": false,
"assignees": [
"Prof. X",
"Prof. Y",
"Prof. Z"
]
},
{
"stepType": "approval-by",
"stepNumber": 5,
"completed": false,
"assignees": [
"Prof. X",
"Prof. Y",
"Prof. Z"
]
}
]
}
]

29
src/interfaces/approval.workflow.ts
View File

@@ -1,12 +1,29 @@
import {Module} from ".";
export interface ApprovalWorkflow {
id: string;
name: string;
module: Module;
status: ApprovalWorkflowStatus;
approvers: string;
step: string;
id: string,
name: string,
modules: Module[],
status: ApprovalWorkflowStatus,
steps: WorkflowStep[],
}
export type StepType = "form-intake" | "approval-by";
export interface WorkflowStep {
key?: number,
stepType: StepType,
stepNumber: number,
completed: boolean,
completedBy?: string,
assignees?: string[],
editView?: boolean,
firstStep?: boolean,
finalStep?: boolean,
isSelected?: boolean,
requestedBy?: string,
//requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
onDelete?: () => void;
}
export type ApprovalWorkflowStatus = "approved" | "pending" | "rejected";

148
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>