devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement clone in new builder and fix typo

Browse Source
This commit is contained in:
Joao Correia
2025-02-05 13:03:42 +00:00
parent 6692c201e4
commit d48c7b0d03
4 changed files with 33 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/api/approval-workflows/[id]/clone.ts
View File

@@ -1,27 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
import { sessionOptions } from "@/lib/session";
import { requestUser } from "@/utils/api";
import { createApprovalWorkflow } from "@/utils/approval.workflows.be";
import { withIronSessionApiRoute } from "iron-session/next";
import type { NextApiRequest, NextApiResponse } from "next";
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "POST") return await post(req, res);
}
async function post(req: NextApiRequest, res: NextApiResponse) {
const user = await requestUser(req, res);
if (!user) return res.status(401).json({ ok: false });
if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
return res.status(403).json({ ok: false });
}
const approvalWorkflow: ApprovalWorkflow = req.body;
if (approvalWorkflow)
return res.status(201).json(await createApprovalWorkflow("configured-workflows", approvalWorkflow));
}

303
src/pages/approval-workflows/[id]/clone.tsx
View File

@@ -1,303 +0,0 @@
import Tip from "@/components/ApprovalWorkflows/Tip";
import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
import Layout from "@/components/High/Layout";
import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
import { Entity } from "@/interfaces/entity";
import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getEntities } from "@/utils/entities.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getEntitiesUsers } from "@/utils/users.be";
import { uuidv4 } from "@firebase/util";
import { AnimatePresence, LayoutGroup, 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 { GrClearOption } from "react-icons/gr";
import { toast, ToastContainer } from "react-toastify";
import { useRouter } from "next/router";
import axios from "axios";
import { getApprovalWorkflow, getFormIntakersByEntity } from "@/utils/approval.workflows.be";
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 workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
if (!workflow)
return redirect("/approval-workflows")
const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
return {
props: serialize({
user,
workflow,
userEntitiesWithLabel,
entityUnavailableFormIntakers: await getFormIntakersByEntity(workflow.entityId),
userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}),
};
}, sessionOptions);
interface Props {
user: User,
workflow: ApprovalWorkflow,
userEntitiesWithLabel: Entity[],
entityUnavailableFormIntakers: string[],
userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}
export default function Home({ user, workflow, userEntitiesWithLabel, entityUnavailableFormIntakers, userEntitiesApprovers }: Props) {
const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
const router = useRouter();
useEffect(() => {
if (entityId) {
setEntityApprovers(
userEntitiesApprovers.filter(approver =>
approver.entities.some(entity => entity.id === entityId)
)
);
} else {
setEntityApprovers([]);
}
}, [entityId, userEntitiesApprovers]);
const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
label: entity.label,
value: entity.id,
filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
}));
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,
completed: false,
assignees: step.assignees.map(id => id),
firstStep: step.firstStep || false,
finalStep: step.finalStep || false,
onDelete: undefined,
}));
const editableWorkflow: EditableApprovalWorkflow = {
id: uuidv4(), // this id is only used in UI. it is ommited on submission to DB and lets mongo handle unique id.
name: workflow.name,
entityId: workflow.entityId,
requester: user.id,
startDate: Date.now(),
modules: workflow.modules,
status: "pending",
steps: editableSteps,
};
setCloneWorkflow(editableWorkflow);
}, []);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsLoading(true);
if (!cloneWorkflow) {
setIsLoading(false);
return;
}
for (const step of cloneWorkflow.steps) {
if (step.assignees.every(x => !x)) {
toast.warning("There is at least one empty step in the workflow.");
setIsLoading(false);
return;
}
}
const filteredWorkflow: ApprovalWorkflow = {
...cloneWorkflow,
steps: cloneWorkflow.steps.map(step => ({
...step,
completed: false,
assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
}))
};
axios
.post(`/api/approval-workflows/${workflow._id}/clone`, filteredWorkflow)
.then(() => {
toast.success("Approval Workflow cloned successfully.");
setIsRedirecting(true);
router.push("/approval-workflows");
})
.catch((reason) => {
if (reason.response.status === 401) {
toast.error("Not logged in!");
} else if (reason.response.status === 403) {
toast.error("You do not have permission to clone Approval Workflows!");
} else {
toast.error("Something went wrong, please try again later.");
}
setIsLoading(false);
console.log("Submitted Values:", filteredWorkflow);
return;
})
};
const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
setCloneWorkflow(wf);
}
const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
const updatedWorkflow = {
...wf,
entityId: entityId,
steps: wf.steps.map(step => ({
...step,
assignees: step.assignees.map(() => null)
}))
}
onWorkflowChange(updatedWorkflow);
}
const handleResetWorkflow = () => {
if (!confirm("This action will reset all the fields in this workflow. Are you sure you want to proceed?")) return;
const newId = uuidv4();
const newWorkflow: EditableApprovalWorkflow = {
id: newId,
name: "",
entityId: "",
modules: [],
requester: user.id,
startDate: Date.now(),
status: "pending",
steps: [
{ key: 9998, stepType: "form-intake", stepNumber: 1, completed: false, firstStep: true, finalStep: false, assignees: [null] },
{ key: 9999, stepType: "approval-by", stepNumber: 2, completed: false, firstStep: false, finalStep: true, assignees: [null] },
],
};
setCloneWorkflow(newWorkflow);
}
return (
<>
<Head>
<title> Clone 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">Clone Workflow</h1>
</section>
<form onSubmit={handleSubmit}>
{cloneWorkflow && (
<>
<div className="mb-8 flex flex-row gap-6 items-end">
<Input
label="Name:"
type="text"
name={cloneWorkflow.name}
placeholder="Enter workflow name"
value={cloneWorkflow.name}
onChange={(updatedName) => {
const updatedWorkflow = {
...cloneWorkflow,
name: updatedName,
};
onWorkflowChange(updatedWorkflow);
}}
/>
<Select
label="Entity:"
options={ENTITY_OPTIONS}
value={
cloneWorkflow.entityId === ""
? null
: ENTITY_OPTIONS.find(option => option.value === cloneWorkflow.entityId)
}
onChange={(selectedEntity) => {
if (cloneWorkflow.entityId) {
if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
}
if (selectedEntity?.value) {
setEntityId(selectedEntity.value);
handleEntityChange(cloneWorkflow, selectedEntity.value);
}
}}
isClearable
placeholder="Enter workflow entity"
/>
<Button
color="red"
variant="solid"
onClick={handleResetWorkflow}
type="button"
className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
>
Clear Workflow
<GrClearOption className="size-6" />
</Button>
</div>
<AnimatePresence mode="wait">
<LayoutGroup key="workflow">
<motion.div
key="form"
initial={{ opacity: 0, y: -30 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: 60 }}
transition={{ duration: 0.20 }}
>
{(!cloneWorkflow.name || !cloneWorkflow.entityId) && (
<Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
)}
<WorkflowForm
workflow={cloneWorkflow}
onWorkflowChange={onWorkflowChange}
entityApprovers={entityApprovers}
entityAvailableFormIntakers={entityApprovers.filter(approver => !entityUnavailableFormIntakers.includes(approver.id))}
isLoading={isLoading}
isRedirecting={isRedirecting}
/>
</motion.div>
</LayoutGroup>
</AnimatePresence>
</>
)}
</form>
</Layout>
)}
</>
);
}

33
src/pages/approval-workflows/create.tsx
View File

@@ -22,6 +22,7 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { BsChevronLeft, BsTrash } from "react-icons/bs"; import { BsChevronLeft, BsTrash } from "react-icons/bs";
import { FaRegClone } from "react-icons/fa6";
import { MdFormatListBulletedAdd } from "react-icons/md"; import { MdFormatListBulletedAdd } from "react-icons/md";
import { toast, ToastContainer } from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
@@ -207,6 +208,26 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
} }
}; };
const handleCloneWorkflow = (id: string) => {
const workflowToClone = workflows.find(wf => wf.id === id);
if (!workflowToClone) return;
const newId = uuidv4();
const clonedWorkflow: EditableApprovalWorkflow = {
...workflowToClone,
id: newId,
steps: workflowToClone.steps.map(step => ({
...step,
assignees: step.firstStep ? [] : [...step.assignees], // we can't have more than one form intaker per teacher per entity
})),
};
setWorkflows(prev => [...prev, clonedWorkflow]);
handleSelectWorkflow(newId);
};
const handleDeleteWorkflow = (id: string) => { const handleDeleteWorkflow = (id: string) => {
if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return; if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
@@ -256,7 +277,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
</div> </div>
</section> </section>
<Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instanciated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/> <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instantiated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
<section className="flex flex-row gap-6"> <section className="flex flex-row gap-6">
<Button <Button
@@ -329,6 +350,16 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
isClearable isClearable
placeholder="Enter workflow entity" placeholder="Enter workflow entity"
/> />
<Button
color="gray"
variant="solid"
onClick={() => handleCloneWorkflow(currentWorkflow.id)}
type="button"
className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
>
Clone Workflow
<FaRegClone className="size-6" />
</Button>
<Button <Button
color="red" color="red"
variant="solid" variant="solid"

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

@@ -24,7 +24,6 @@ import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { BsTrash } from "react-icons/bs"; import { BsTrash } from "react-icons/bs";
import { FaRegEdit } from "react-icons/fa"; import { FaRegEdit } from "react-icons/fa";
import { FaRegClone } from "react-icons/fa6";
import { IoIosAddCircleOutline } from "react-icons/io"; import { IoIosAddCircleOutline } from "react-icons/io";
import { toast, ToastContainer } from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
@@ -279,15 +278,6 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" /> <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</button> </button>
<Link
onClick={(e) => e.stopPropagation()}
data-tip="Clone"
href={`/approval-workflows/${row.original._id?.toString()}/clone`}
className="cursor-pointer tooltip"
>
<FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</Link>
{currentStep && !rejected && ( {currentStep && !rejected && (
<Link <Link
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@@ -372,7 +362,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
</div> </div>
</div> </div>
<Tip text="An exam submission will instanciate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip> <Tip text="An exam submission will instantiate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
<div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40"> <div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
<table <table