implement clone in new builder and fix typo
This commit is contained in:
Joao Correia
@@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -22,6 +22,7 @@ import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BsChevronLeft, BsTrash } from "react-icons/bs";
|
||||
import { FaRegClone } from "react-icons/fa6";
|
||||
import { MdFormatListBulletedAdd } from "react-icons/md";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
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) => {
|
||||
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>
|
||||
</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">
|
||||
<Button
|
||||
@@ -329,6 +350,16 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
|
||||
isClearable
|
||||
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
|
||||
color="red"
|
||||
variant="solid"
|
||||
|
||||
@@ -24,7 +24,6 @@ import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BsTrash } from "react-icons/bs";
|
||||
import { FaRegEdit } from "react-icons/fa";
|
||||
import { FaRegClone } from "react-icons/fa6";
|
||||
import { IoIosAddCircleOutline } from "react-icons/io";
|
||||
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" />
|
||||
</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 && (
|
||||
<Link
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
@@ -372,7 +362,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
|
||||
</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">
|
||||
<table
|
||||
|
||||
Reference in New Issue
Block a user