-
+
+
+
{/* Vertical Bar connecting steps */}
{!finalStep && (
-
+
+ )}
+
+
+
+ {stepType === "approval-by" ? (
+
+ ) : (
+
+ )
+ }
+
+
+
+ {stepType === "form-intake" ? (
+ <>
+
Form: Intake
+ {completed && (
+
+ Completed by {completedBy}
+
+ )}
+ {!completed && (
+
+ In progress...
+
+ )}
+
+ ) : (
+ stepType === "approval-by" && (
+ <>
+
Approval: {getUserTypeLabel(assigneesType)}
+ {completed ? (
+
+ Approved by {completedBy}
+
+ ) : !completed && currentStep ? (
+
+ In progress...
+
+ ) : (
+
+ Waiting for previous steps...
+
+ )}
+
+ )
)}
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
index 393f19b9..588ed60c 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -1,25 +1,25 @@
-import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import { WorkflowStep } from "@/interfaces/approval.workflow";
import clsx from "clsx";
-import React from "react";
-import { RiProgress5Line } from "react-icons/ri";
+import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
-interface Props {
- number: number;
- isSelected?: boolean;
-}
-
-export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
+export default function WorkflowStepNumber({ stepNumber, selected = false, completed, finalStep }: WorkflowStep) {
return (
- {number}
+ {completed && finalStep ? (
+
+ ) : completed && !finalStep ? (
+
+ ) : (
+ {stepNumber}
+ )}
);
};
\ No newline at end of file
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index b56a6920..af95a5c8 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -18,7 +18,8 @@
"Prof. X",
"Prof. Y",
"Prof. Z"
- ]
+ ],
+ "assigneesType": "teacher"
},
{
"stepType": "approval-by",
@@ -29,7 +30,8 @@
"Prof. X",
"Prof. Y",
"Prof. Z"
- ]
+ ],
+ "assigneesType": "teacher"
},
{
"stepType": "approval-by",
@@ -39,7 +41,8 @@
"Prof. X",
"Prof. Y",
"Prof. Z"
- ]
+ ],
+ "assigneesType": "teacher"
},
{
"stepType": "approval-by",
@@ -49,17 +52,19 @@
"Prof. X",
"Prof. Y",
"Prof. Z"
- ]
+ ],
+ "assigneesType": "teacher"
},
{
"stepType": "approval-by",
"stepNumber": 5,
"completed": false,
"assignees": [
- "Prof. X",
- "Prof. Y",
- "Prof. Z"
- ]
+ "Dir. X",
+ "Dir. Y",
+ "Dir. Z"
+ ],
+ "assigneesType": "corporate"
}
]
}
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 51fd4239..845e071f 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -1,4 +1,5 @@
import {Module} from ".";
+import { CorporateUser, MasterCorporateUser, TeacherUser, userTypeLabels } from "./user";
export interface ApprovalWorkflow {
id: string,
@@ -10,20 +11,30 @@ export interface ApprovalWorkflow {
export type StepType = "form-intake" | "approval-by";
+type AssigneesType = TeacherUser["type"] | CorporateUser["type"] | MasterCorporateUser["type"];
+
export interface WorkflowStep {
key?: number,
- stepType: StepType,
+ stepType?: StepType,
stepNumber: number,
- completed: boolean,
+ completed?: boolean,
completedBy?: string,
assignees?: string[],
+ assigneesType?: AssigneesType,
editView?: boolean,
firstStep?: boolean,
+ currentStep?: boolean,
finalStep?: boolean,
- isSelected?: boolean,
+ selected?: boolean,
requestedBy?: string,
//requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
onDelete?: () => void;
+ onClick?: React.MouseEventHandler
+}
+
+export function getUserTypeLabel(type: AssigneesType | undefined): string {
+ if (type) return userTypeLabels[type];
+ return '';
}
export type ApprovalWorkflowStatus = "approved" | "pending" | "rejected";
diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts
index b1ed48bc..e61ceece 100644
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -170,4 +170,14 @@ export interface Code {
export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent" | "mastercorporate";
export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"];
+export const userTypeLabels: Record = {
+ student: "Student",
+ teacher: "Teacher",
+ corporate: "Corporate",
+ admin: "Admin",
+ developer: "Developer",
+ agent: "Agent",
+ mastercorporate: "Master Corporate",
+};
+
export type WithUser = T extends { participants: string[] } ? Omit & { participants: User[] } : T;
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 30e2abe1..3b8e154d 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -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 (
<>
- {approvalWorkflow.name} | EnCoach
+ {workflow.name} | EnCoach
- {approvalWorkflow.name}
+ {workflow.name}