implement edit workflow

src/demo/approval_workflows.json

@@ -63,6 +63,7 @@
                 "stepType": "approval-by",
                 "stepNumber": 5,
                 "completed": false,
+                "finalStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -145,6 +146,7 @@
                 "completed": true,
                 "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
                 "completedDate": 1737712243906,
+                "finalStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",

src/pages/approval-workflows/[id]/edit.tsx

@@ -0,0 +1,153 @@
+import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
+import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
+import Status from "@/components/ApprovalWorkflows/Status";
+import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
+import Layout from "@/components/High/Layout";
+import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getEntityUsers } from "@/utils/users.be";
+import { motion } from "framer-motion";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { BsChevronLeft } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+
+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 };
+
+    // replace later with await getApprovalWorkflow(id).
+    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
+    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+
+    if (!workflow)
+        return redirect("/approval-workflows")
+
+    return {
+        props: serialize({
+            user,
+            workflow,
+            workflowEntityTeachers: await getEntityUsers(workflow.entityId, undefined, { type: "teacher" }),
+            workflowEntityCorporates: await getEntityUsers(workflow.entityId, undefined, { type: "corporate" }),
+        }),
+    };
+}, sessionOptions);
+
+interface Props {
+    user: User,
+    workflow: ApprovalWorkflow,
+    workflowEntityTeachers: TeacherUser[],
+    workflowEntityCorporates: CorporateUser[],
+}
+
+export default function Home({ user, workflow, workflowEntityTeachers, workflowEntityCorporates }: Props) {
+    const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
+
+    useEffect(() => {
+        const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
+            key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
+            stepType: step.stepType,
+            stepNumber: step.stepNumber,
+            assignees: step.assignees.map(id => id),
+            firstStep: step.firstStep || false,
+            finalStep: step.finalStep || false,
+            onDelete: undefined,
+        }));
+
+        const editableWorkflow: EditableApprovalWorkflow = {
+            id: workflow.id,
+            name: workflow.name,
+            entityId: workflow.entityId,
+            requester: user.id, // should it change to the editor?
+            startDate: workflow.startDate,
+            modules: workflow.modules,
+            status: workflow.status,
+            steps: editableSteps,
+        };
+
+        setUpdatedWorkflow(editableWorkflow);
+    }, []);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        console.log("Form submitted! Values:", updatedWorkflow);
+    };
+
+    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
+        setUpdatedWorkflow(wf);
+    }
+
+    return (
+        <>
+            <Head>
+                <title> Edit Workflow | 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 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">{workflow.name}</h1>
+                    </section>
+
+                    <section className="flex flex-col gap-6">
+                        <div className="flex flex-row gap-6">
+                            <RequestedBy
+                                prefix={getUserTypeLabelShort(user.type)}
+                                name={user.name}
+                                profileImage="/blue-stock-photo.png" //{user.profilePicture}
+                            />
+                            <StartedOn
+                                date={workflow.startDate}
+                            />
+                            <Status
+                                status={workflow.status}
+                            />
+                        </div>
+                    </section>
+
+                    <form onSubmit={handleSubmit}>
+                        <motion.div
+                            key="form"
+                            initial={{ opacity: 0, y: -30 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, x: 60 }}
+                            transition={{ duration: 0.20 }}
+                        >
+                            {updatedWorkflow &&
+                                <WorkflowForm
+                                    workflow={updatedWorkflow}
+                                    onWorkflowChange={onWorkflowChange}
+                                    entityTeachers={workflowEntityTeachers}
+                                    entityCorporates={workflowEntityCorporates}
+                                />
+                            }
+                        </motion.div>
+                    </form>
+                </Layout>
+            )}
+        </>
+    );
+}

src/pages/approval-workflows/[id]/index.tsx

@@ -21,7 +21,7 @@ import { MdOutlineDoubleArrow } from "react-icons/md";
 import { RiThumbUpLine } from "react-icons/ri";
 import { ToastContainer } from "react-toastify";
 
-import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
 import Tip from "@/components/ApprovalWorkflows/Tip";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 

src/pages/approval-workflows/create.tsx

@@ -102,8 +102,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             startDate: Date.now(),
             status: "pending",
             steps: [
-                { key: Date.now(), stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
+                { key: 9998, stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
-                { key: Date.now() + 1, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
+                { key: 9999, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);

src/pages/approval-workflows/index.tsx

@@ -242,15 +242,15 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                 );
             },
         }),
-        {
+        columnHelper.accessor("steps", {
             header: "ACTIONS",
             id: "actions",
-            cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
+            cell: ({ row }) => {
+                const steps = row.original.steps;
+                const currentStep = steps.find((step) => !step.completed);
+
                 return (
                     <div className="flex gap-4">
-                        <Link onClick={(e) => e.stopPropagation()} data-tip="Edit" href={`/approval-workflows/${row.original.id}/edit`} 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"
@@ -261,10 +261,21 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                         >
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </button>
+
+                        {currentStep && (
+                            <Link
+                                onClick={(e) => e.stopPropagation()}
+                                data-tip="Edit"
+                                href={`/approval-workflows/${row.original.id}/edit`}
+                                className="cursor-pointer tooltip"
+                            >
+                                <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                            </Link>
+                        )}
                     </div>
                 );
             },
-        },
+        })
     ];
 
     const table = useReactTable({