375 lines
18 KiB
TypeScript
375 lines
18 KiB
TypeScript
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 } 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 { getApprovalWorkflowsByEntities } from "@/utils/approval.workflows.be";
|
||
import { getEntities } from "@/utils/entities.be";
|
||
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
||
import { getEntitiesUsers } from "@/utils/users.be";
|
||
import axios from "axios";
|
||
import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
|
||
import { withIronSessionSsr } from "iron-session/next";
|
||
import Head from "next/head";
|
||
import Link from "next/link";
|
||
import { useRouter } from "next/router";
|
||
import { useEffect, useState } from "react";
|
||
import { BsChevronLeft, BsTrash } from "react-icons/bs";
|
||
import { MdFormatListBulletedAdd } from "react-icons/md";
|
||
import { toast, ToastContainer } from "react-toastify";
|
||
import { v4 as uuidv4 } from 'uuid';
|
||
|
||
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("/")
|
||
|
||
const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
|
||
|
||
const allConfiguredWorkflows = await getApprovalWorkflowsByEntities("configured-workflows", userEntitiesWithLabel.map(entity => entity.id));
|
||
|
||
return {
|
||
props: serialize({
|
||
user,
|
||
allConfiguredWorkflows,
|
||
userEntitiesWithLabel,
|
||
userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
|
||
}),
|
||
};
|
||
}, sessionOptions);
|
||
|
||
interface Props {
|
||
user: User,
|
||
allConfiguredWorkflows: EditableApprovalWorkflow[],
|
||
userEntitiesWithLabel: Entity[],
|
||
userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
|
||
}
|
||
|
||
export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
|
||
const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>(allConfiguredWorkflows);
|
||
const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
|
||
const [entityId, setEntityId] = useState<string | null | undefined>(null);
|
||
const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
|
||
const [entityAvailableFormIntakers, setEntityAvailableFormIntakers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
|
||
const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
|
||
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)
|
||
)
|
||
);
|
||
}
|
||
}, [entityId, userEntitiesApprovers]);
|
||
|
||
useEffect(() => {
|
||
if (entityId) {
|
||
// Get all workflows for the selected entity
|
||
const workflowsForEntity = workflows.filter(wf => wf.entityId === entityId);
|
||
|
||
// For all workflows except the current one, collect the first step assignees
|
||
const assignedFormIntakers = workflowsForEntity.reduce<string[]>((acc, wf) => {
|
||
if (wf.id === selectedWorkflowId) return acc; // skip current workflow so its selection isn’t removed
|
||
|
||
const formIntakeStep = wf.steps.find(step => step.stepType === "form-intake");
|
||
if (formIntakeStep) {
|
||
// Only consider non-null assignees
|
||
const validAssignees = formIntakeStep.assignees.filter(
|
||
(assignee): assignee is string => !!assignee
|
||
);
|
||
return acc.concat(validAssignees);
|
||
}
|
||
return acc;
|
||
}, []);
|
||
|
||
// Now filter out any user from entityApprovers whose id is in the assignedFormIntakers list.
|
||
// (The selected one in the current workflow is allowed even if it is in the list.)
|
||
const availableFormIntakers = entityApprovers.filter(assignee =>
|
||
!assignedFormIntakers.includes(assignee.id)
|
||
);
|
||
|
||
setEntityAvailableFormIntakers(availableFormIntakers);
|
||
}
|
||
}, [entityId, entityApprovers, workflows, selectedWorkflowId]);
|
||
|
||
|
||
const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
|
||
|
||
const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
|
||
label: entity.label,
|
||
value: entity.id,
|
||
filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
|
||
}));
|
||
|
||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
|
||
if (workflows.length === 0) {
|
||
setIsLoading(false);
|
||
return;
|
||
}
|
||
|
||
for (const workflow of workflows) {
|
||
for (const step of workflow.steps) {
|
||
if (step.assignees.every(x => !x)) {
|
||
toast.warning("There are empty steps in at least one of the configured workflows.");
|
||
setIsLoading(false);
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
|
||
...workflow,
|
||
steps: workflow.steps.map(step => ({
|
||
...step,
|
||
assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
|
||
}))
|
||
}));
|
||
|
||
const requestData = { filteredWorkflows, userEntitiesWithLabel };
|
||
|
||
axios
|
||
.post(`/api/approval-workflows/create`, requestData)
|
||
.then(() => {
|
||
toast.success("Approval Workflows created 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 create Approval Workflows!");
|
||
}
|
||
else {
|
||
toast.error("Something went wrong, please try again later.");
|
||
}
|
||
setIsLoading(false);
|
||
console.log("Submitted Values:", filteredWorkflows);
|
||
return;
|
||
})
|
||
};
|
||
|
||
const handleAddNewWorkflow = () => {
|
||
if (isAdding) return;
|
||
setIsAdding(true);
|
||
|
||
const newId = uuidv4(); // this id is only used in UI. it is ommited on submission to DB and lets mongo handle unique id.
|
||
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] },
|
||
],
|
||
};
|
||
setWorkflows((prev) => [...prev, newWorkflow]);
|
||
handleSelectWorkflow(newId);
|
||
|
||
setTimeout(() => setIsAdding(false), 300);
|
||
};
|
||
|
||
const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
|
||
setWorkflows(prev =>
|
||
prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
|
||
);
|
||
}
|
||
|
||
const handleSelectWorkflow = (id: string | undefined) => {
|
||
setSelectedWorkflowId(id);
|
||
const selectedWorkflow = workflows.find(wf => wf.id === id);
|
||
if (selectedWorkflow) {
|
||
setEntityId(selectedWorkflow.entityId || null);
|
||
} else {
|
||
setEntityId(null);
|
||
}
|
||
};
|
||
|
||
const handleDeleteWorkflow = (id: string) => {
|
||
if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
|
||
|
||
const updatedWorkflows = workflows.filter(wf => wf.id !== id);
|
||
|
||
setWorkflows(updatedWorkflows);
|
||
|
||
if (selectedWorkflowId === id) {
|
||
handleSelectWorkflow(updatedWorkflows.find(wf => wf.id)?.id);
|
||
}
|
||
};
|
||
|
||
const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
|
||
const updatedWorkflow = {
|
||
...wf,
|
||
entityId: entityId,
|
||
steps: wf.steps.map(step => ({
|
||
...step,
|
||
assignees: step.assignees.map(() => null)
|
||
}))
|
||
}
|
||
onWorkflowChange(updatedWorkflow);
|
||
}
|
||
|
||
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} className="flex flex-col gap-6">
|
||
<section className="flex flex-col">
|
||
<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>
|
||
|
||
<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."/>
|
||
|
||
<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>
|
||
|
||
{workflows.length !== 0 && <div className="bg-gray-300 w-[1px]"></div>}
|
||
|
||
<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() === "" ? "Workflow" : workflow.name}
|
||
</Button>
|
||
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<form onSubmit={handleSubmit}>
|
||
{currentWorkflow && (
|
||
<>
|
||
<div className="mb-8 flex flex-row gap-6 items-end">
|
||
<Input
|
||
label="Name:"
|
||
type="text"
|
||
name={currentWorkflow.name}
|
||
placeholder="Enter workflow name"
|
||
value={currentWorkflow.name}
|
||
onChange={(updatedName) => {
|
||
const updatedWorkflow = {
|
||
...currentWorkflow,
|
||
name: updatedName,
|
||
};
|
||
onWorkflowChange(updatedWorkflow);
|
||
}}
|
||
/>
|
||
<Select
|
||
label="Entity:"
|
||
options={ENTITY_OPTIONS}
|
||
value={
|
||
currentWorkflow.entityId === ""
|
||
? null
|
||
: ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
|
||
}
|
||
onChange={(selectedEntity) => {
|
||
if (currentWorkflow.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(currentWorkflow, selectedEntity.value);
|
||
}
|
||
}}
|
||
isClearable
|
||
placeholder="Enter workflow entity"
|
||
/>
|
||
<Button
|
||
color="red"
|
||
variant="solid"
|
||
onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
|
||
type="button"
|
||
className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
|
||
>
|
||
Delete Workflow
|
||
<BsTrash className="size-6" />
|
||
</Button>
|
||
</div>
|
||
|
||
<AnimatePresence mode="wait">
|
||
<LayoutGroup key={currentWorkflow.id}>
|
||
<motion.div
|
||
key="form"
|
||
initial={{ opacity: 0, y: -30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, x: 60 }}
|
||
transition={{ duration: 0.20 }}
|
||
>
|
||
{(!currentWorkflow.name || !currentWorkflow.entityId) && (
|
||
<Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
|
||
)}
|
||
<WorkflowForm
|
||
workflow={currentWorkflow}
|
||
onWorkflowChange={onWorkflowChange}
|
||
entityApprovers={entityApprovers}
|
||
entityAvailableFormIntakers={entityAvailableFormIntakers}
|
||
isLoading={isLoading}
|
||
isRedirecting={isRedirecting}
|
||
/>
|
||
</motion.div>
|
||
</LayoutGroup>
|
||
</AnimatePresence>
|
||
</>
|
||
)}
|
||
</form>
|
||
</Layout>
|
||
)}
|
||
</>
|
||
);
|
||
}
|