138 lines
5.8 KiB
TypeScript
138 lines
5.8 KiB
TypeScript
import Layout from "@/components/High/Layout";
|
|
import useUser from "@/hooks/useUser";
|
|
import { ApprovalWorkflow, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
|
|
import { sessionOptions } from "@/lib/session";
|
|
import { redirect, serialize } 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 } from "react-icons/bs";
|
|
import { ToastContainer } from "react-toastify";
|
|
|
|
import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
|
|
|
|
import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
|
|
import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
|
|
import Status from "@/components/ApprovalWorkflows/Status";
|
|
import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
|
|
import { useState } from "react";
|
|
import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
|
|
import { User } from "@/interfaces/user";
|
|
import { getSpecificUsers, getUser, getUsers } from "@/utils/users.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 };
|
|
|
|
// replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;
|
|
|
|
const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
|
|
const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
|
|
|
|
if (!workflow)
|
|
return redirect("/approval-workflows")
|
|
|
|
const allAssigneeIds: string[] = [
|
|
...new Set(
|
|
workflow.steps
|
|
.map(step => step.assignees)
|
|
.flat() as string[] // we are sure assignees coming from a db workflow are all valid strings.
|
|
)
|
|
];
|
|
|
|
return {
|
|
props: serialize({
|
|
user,
|
|
workflow,
|
|
workflowAssignees: await getSpecificUsers(allAssigneeIds),
|
|
workflowRequester: await getUser(workflow.requester),
|
|
}),
|
|
};
|
|
}, sessionOptions);
|
|
|
|
interface Props {
|
|
user: User,
|
|
workflow: ApprovalWorkflow,
|
|
workflowAssignees: User[],
|
|
workflowRequester: User,
|
|
}
|
|
|
|
export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
|
|
const steps = workflow.steps;
|
|
|
|
const [selectedIndex, setSelectedIndex] = useState(steps.length - 1);
|
|
|
|
const handleStepClick = (index: number) => {
|
|
setSelectedIndex(index);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title> {workflow.name} | 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 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">{workflow.name}</h1>
|
|
</div>
|
|
</section>
|
|
<section className="flex flex-col gap-6">
|
|
<div className="flex flex-row gap-6">
|
|
<RequestedBy
|
|
prefix={getUserTypeLabelShort(workflowRequester.type)}
|
|
name={workflowRequester.name}
|
|
profileImage="/blue-stock-photo.png" //{workflowRequester.profilePicture}
|
|
/>
|
|
<StartedOn
|
|
date={workflow.startDate}
|
|
/>
|
|
<Status
|
|
status={workflow.status}
|
|
/>
|
|
</div>
|
|
</section>
|
|
<section className="flex flex-col gap-0">
|
|
{steps.map((step, index) => (
|
|
<WorkflowStepComponent
|
|
workflowAssignees={workflowAssignees}
|
|
key={index}
|
|
completed={step.completed}
|
|
completedBy={step.completedBy}
|
|
stepNumber={step.stepNumber}
|
|
stepType={step.stepType}
|
|
assignees={step.assignees}
|
|
assigneesType={step.assigneesType}
|
|
finalStep={index === steps.length - 1}
|
|
currentStep={steps.findIndex(step => !step.completed) === index}
|
|
selected={index === selectedIndex}
|
|
onClick={() => handleStepClick(index)}
|
|
/>
|
|
))}
|
|
</section>
|
|
</Layout>
|
|
)}
|
|
</>
|
|
);
|
|
}
|