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

- Implement cloning of workflow

Browse Source 
- Entity change will now only clear the assignees instead of the whole workflow
- Fix bug where side panel was showing all workflow assignees instead of just selected step assignees
This commit is contained in:
Joao Correia
2025-01-26 04:31:36 +00:00
parent 73610dc273
commit ab81a1753d
5 changed files with 349 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/demo/approval_workflows.json
View File

@@ -17,6 +17,7 @@
"completed": true,
"completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
"completedDate": 1737712243906,
"firstStep": true,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -28,11 +29,11 @@
"stepType": "approval-by",
"stepNumber": 2,
"completed": true,
"completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
"completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"completedDate": 1737712243906,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
"rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
],
"comments": "This is a random comment"
@@ -53,9 +54,7 @@
"stepNumber": 4,
"completed": false,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
"fd5fce42-4bcc-4150-a143-b484e750b265"
],
"comments": "This is a random comment"
},
@@ -65,8 +64,7 @@
"completed": false,
"finalStep": true,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
"rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
],
"comments": "This is a random comment"
@@ -94,6 +92,7 @@
"completed": true,
"completedBy": "fd5fce42-4bcc-4150-a143-b484e750b265",
"completedDate": 1737712243906,
"firstStep": true,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -105,11 +104,11 @@
"stepType": "approval-by",
"stepNumber": 2,
"completed": true,
"completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
"completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"completedDate": 1737712243906,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
"rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
],
"comments": "This is a random comment"
@@ -134,9 +133,7 @@
"completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
"completedDate": 1737712243906,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
"fd5fce42-4bcc-4150-a143-b484e750b265"
],
"comments": "This is a random comment"
},
@@ -147,11 +144,59 @@
"completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
"completedDate": 1737712243906,
"finalStep": true,
"assignees": [
"rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
],
"comments": "This is a random comment"
}
]
},
{
"id": "bbbbkscbka-asacaca-acawesae",
"name": "English Exam 3rd Quarter 2025",
"entityId": "49ed2f0c-7d0d-46e4-9576-7cf19edc4980",
"modules": [
"reading"
],
"requester": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"startDate": 1737712243906,
"status": "rejected",
"steps": [
{
"stepType": "form-intake",
"stepNumber": 1,
"completed": true,
"completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
"completedDate": 1737712243906,
"firstStep": true,
"assignees": [
"fd5fce42-4bcc-4150-a143-b484e750b265",
"231c84b2-a65a-49a9-803c-c664d84b13e0",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
],
"comments": "This is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\n"
},
{
"stepType": "approval-by",
"stepNumber": 2,
"completed": true,
"completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"completedDate": 1737712243906,
"assignees": [
"rTh9yz6Z1WOidHlVOSGInlpoxrk1",
"c5fc1514-1a94-4f8c-a046-a62099097a50"
],
"comments": "This is a random comment"
},
{
"stepType": "approval-by",
"stepNumber": 3,
"completed": false,
"finalStep": true,
"assignees": [
"rTh9yz6Z1WOidHlVOSGInlpoxrk1"
],
"comments": "This is a random comment"
}
]

260
src/pages/approval-workflows/[id]/clone.tsx Normal file
View File

@@ -0,0 +1,260 @@
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, 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 { ToastContainer } from "react-toastify";
import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
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).
const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
if (!workflow)
return redirect("/approval-workflows")
const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
return {
props: serialize({
user,
workflow,
userEntitiesWithLabel,
userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
}),
};
}, sessionOptions);
interface Props {
user: User,
workflow: ApprovalWorkflow,
userEntitiesWithLabel: Entity[],
userEntitiesTeachers: TeacherUser[],
userEntitiesCorporates: CorporateUser[],
}
export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
useEffect(() => {
if (entityId) {
setEntityTeachers(
userEntitiesTeachers.filter(teacher =>
teacher.entities.some(entity => entity.id === entityId)
)
);
setEntityCorporates(
userEntitiesCorporates.filter(corporate =>
corporate.entities.some(entity => entity.id === entityId)
)
);
} else {
setEntityTeachers([]);
setEntityCorporates([]);
}
}, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
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,
assignees: step.assignees.map(id => id),
firstStep: step.firstStep || false,
finalStep: step.finalStep || false,
onDelete: undefined,
}));
const editableWorkflow: EditableApprovalWorkflow = {
id: uuidv4(),
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();
console.log("Form submitted! Values:", cloneWorkflow);
};
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, firstStep: true, finalStep: false, assignees: [null] },
{ key: 9999, stepType: "approval-by", stepNumber: 2, 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}
entityTeachers={entityTeachers}
entityCorporates={entityCorporates}
/>
</motion.div>
</LayoutGroup>
</AnimatePresence>
</>
)}
</form>
</Layout>
)}
</>
);
}

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

@@ -230,7 +230,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
<div className={"text-base font-medium text-gray-500"}>
One assignee is required to sign off to complete this step:
<div className="flex flex-col gap-2 mt-3">
{workflowAssignees.map(user => (
{workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
<span key={user.id}>
<UserWithProfilePic
textSize="text-sm"

36
src/pages/approval-workflows/create.tsx
View File

@@ -140,9 +140,16 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
}
};
const handleResetWorkflow = (id: string) => {
setWorkflows(prev => prev.filter(wf => wf.id !== id));
handleAddNewWorkflow();
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 (
@@ -207,11 +214,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
<form onSubmit={handleSubmit}>
{currentWorkflow && (
<>
<div className="mb-8 flex flex-row gap-6">
<div className="mb-8 flex flex-row gap-6 items-end">
<Input
label="Name:"
type="text"
name={currentWorkflow.name}
required={true}
placeholder="Enter workflow name"
value={currentWorkflow.name}
onChange={(updatedName) => {
@@ -223,6 +230,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
}}
/>
<Select
label="Entity:"
options={ENTITY_OPTIONS}
value={
currentWorkflow.entityId === ""
@@ -230,27 +238,23 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
: ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
}
onChange={(selectedEntity) => {
if (!currentWorkflow.entityId && selectedEntity?.value) {
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);
const updatedWorkflow = {
...currentWorkflow,
entityId: selectedEntity.value,
};
onWorkflowChange(updatedWorkflow);
} else {
if (!confirm("Clearing or changing entity will reset this workflow. Are you sure you want to proceed?")) return;
handleResetWorkflow(currentWorkflow.id);
handleEntityChange(currentWorkflow, selectedEntity.value);
}
}}
isClearable
placeholder="Entity..."
placeholder="Enter workflow entity"
/>
<Button
color="red"
variant="solid"
onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
type="button"
className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
>
Delete Workflow
<BsTrash className="size-6" />

16
src/pages/approval-workflows/index.tsx
View File

@@ -24,6 +24,7 @@ import { IoIosAddCircleOutline } from "react-icons/io";
import { toast, ToastContainer } from "react-toastify";
import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
import { FaRegClone } from "react-icons/fa6";
const columnHelper = createColumnHelper<ApprovalWorkflow>();
@@ -156,10 +157,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
/* .finally(reload); */
};
const editApprovalWorkflow = (id: string) => {
};
const columns = [
columnHelper.accessor("name", {
header: "NAME",
@@ -262,6 +259,15 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
<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}/clone`}
className="cursor-pointer tooltip"
>
<FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</Link>
{currentStep && (
<Link
onClick={(e) => e.stopPropagation()}
@@ -368,7 +374,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
{row.getVisibleCells().map((cell, cellIndex) => {
const lastCellIndex = row.getVisibleCells().length - 1;
let cellClasses = "px-3 py-2 bg-purple-50 border-y-2 border-purple-300";
let cellClasses = "pl-3 pr-4 py-2 bg-purple-50 border-y-2 border-purple-300";
if (cellIndex === 0) {
cellClasses += " border-l-2 rounded-l-2xl";
}