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

work on non editable approval workflow steps view

Browse Source
This commit is contained in:
Joao Correia
2025-01-21 20:42:03 +00:00
parent 48187fc7f2
commit 73e2e95449
8 changed files with 155 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import Layout from "@/components/High/Layout";
import useUser from "@/hooks/useUser";
import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
import { sessionOptions } from "@/lib/session";
import { redirect } from "@/utils";
import { requestUser } from "@/utils/api";
@@ -17,6 +17,10 @@ import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to te
import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
import Status from "@/components/ApprovalWorkflows/Status";
import { useState } from "react";
import Button from "@/components/Low/Button";
import WorkflowEditableStepComponent from "@/components/ApprovalWorkflows/WorkflowEditableStepComponent";
import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
const user = await requestUser(req, res);
@@ -27,24 +31,31 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
const { id } = params as { id: string };
const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id); // await getApprovalWorkflow(id);
if (!approvalWorkflow)
const workflow = approvalWorkflowsData.find(workflow => workflow.id === id); // await getApprovalWorkflow(id);
if (!workflow)
return redirect("/approval-workflows")
return {
props: { user, approvalWorkflow },
props: { user, workflow },
};
}, sessionOptions);
export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
const { user } = useUser({ redirectTo: "/login" });
const steps = workflow.steps;
const [selectedIndex, setSelectedIndex] = useState(steps.length - 1);
const handleStepClick = (index: number) => {
setSelectedIndex(index);
};
return (
<>
<Head>
<title> {approvalWorkflow.name} | EnCoach</title>
<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."
@@ -62,7 +73,7 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
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">{approvalWorkflow.name}</h1>
<h1 className="text-2xl font-semibold">{workflow.name}</h1>
</div>
</section>
<section className="flex flex-col gap-6">
@@ -79,6 +90,23 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
/>
</div>
</section>
<section className="flex flex-col gap-0">
{steps.map((step, index) => (
<WorkflowStepComponent
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} // Determine selected state
onClick={() => handleStepClick(index)} // Add click handler
/>
))}
</section>
</Layout>
)}
</>