Work on workflow builder:

- Made number of approvers dynamic with many select inputs as needed
- Tracking approval select input changes with step.assignees
- Fetching teachers and corporates from backend
- Responsive styling when rendering several select inputs

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,40 +1,47 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { AiOutlineUserAdd } from "react-icons/ai";
 
-const teacherOptions: Option[] = [
-    // fetch from database?
-]
-
-const directorOptions: Option[] = [
-    // fetch from database?
-]
+interface Props extends WorkflowStep {
+    entityTeachers: TeacherUser[];
+    entityCorporates: CorporateUser[];
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+}
 
 export default function WorkflowEditableStepComponent({
     stepType,
     stepNumber,
-    completed = false,
     finalStep,
     onDelete,
-}: WorkflowStep) {
+    onSelectChange,
+    entityTeachers,
+    entityCorporates,
+}: Props) {
 
-    const [leftValue, setLeftValue] = useState<Option | null>(null);
-    const [rightValue, setRightValue] = useState<Option | null>(null);
+    const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
 
-    let showSelects = false;
-    let leftPlaceholder = "";
-    let rightPlaceholder = "";
+    const showSelects = stepType === "approval-by";
 
-    if (stepType === "approval-by") {
-        // Show the selects only if it's an 'approval-by' step and in edit mode
-        showSelects = true;
-        leftPlaceholder = "Approval by";
-        rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
-    }
+    const handleAddSelectComponent = () => {
+        setSelects((prev) => {
+            const updated = [...prev, null];
+            onSelectChange(updated.length, updated.length - 1, null);
+            return updated;
+        });
+    };
+
+    const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
+        const updated = [...selects];
+        updated[index] = option;
+        setSelects(updated);
+        onSelectChange(numberOfSelects, index, option);
+    };
 
     return (
         <div className="flex w-full">
@@ -43,26 +50,22 @@ export default function WorkflowEditableStepComponent({
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
-                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                    <div className="w-1 h-full min-h-10 bg-mti-purple-dark"></div>
                 )}
             </div>
 
             {stepNumber !== 1 && !finalStep
-                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing min-w-[25px] min-h-[25px]" />
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
             {showSelects && (
-                <div className="ml-10">
+                <div className="ml-10 mb-12">
                     <WorkflowStepSelects
-                        leftOptions={teacherOptions}
-                        rightOptions={teacherOptions}
-                        leftValue={leftValue}
-                        rightValue={rightValue}
-                        onLeftChange={setLeftValue}
-                        onRightChange={setRightValue}
-                        leftPlaceholder={leftPlaceholder}
-                        rightPlaceholder={rightPlaceholder}
+                        teachers={entityTeachers}
+                        corporates={entityCorporates}
+                        selects={selects}
+                        onSelectChange={handleSelectChangeAt}
                     />
                 </div>
             )}
@@ -81,18 +84,27 @@ export default function WorkflowEditableStepComponent({
                 </div>
             )}
 
-            {stepNumber !== 1 && !finalStep && (
-                <div className="ml-4 mt-2">
+            {stepNumber !== 1 && (
+                <div className="flex flex-row items-start mt-1.5 ml-3">
                     <button
-                        data-tip="Delete"
-                        className="cursor-pointer tooltip"
-                        onClick={onDelete}
                         type="button"
+                        onClick={handleAddSelectComponent}
+                        className="cursor-pointer"
                     >
-                        <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
+                    {!finalStep && (
+                        <button
+                            className="cursor-pointer"
+                            onClick={onDelete}
+                            type="button"
+                        >
+                            <BsTrash className="size-6 mt-0.5 ml-3 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </button>
+                    )}
                 </div>
             )}
+
         </div>
 
     );

src/components/ApprovalWorkflows/WorkflowForm.tsx

@@ -6,14 +6,7 @@ import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
 import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
-
-const teacherOptions: Option[] = [
-    // fetch from database?
-]
-
-const directorOptions: Option[] = [
-    // fetch from database?
-]
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
 
 // Variants for animating steps when they are added/removed
 const itemVariants = {
@@ -25,9 +18,11 @@ const itemVariants = {
 interface Props {
     workflow: ApprovalWorkflow;
     onWorkflowChange: (workflow: ApprovalWorkflow) => void;
+    entityTeachers: TeacherUser[];
+    entityCorporates: CorporateUser[];
 }
 
-export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
+export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates }: Props) {
     const [steps, setSteps] = useState<WorkflowStep[]>(workflow.steps);
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = steps[steps.length - 1];
@@ -55,6 +50,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
                 stepType: "approval-by",
                 stepNumber: steps.length,
                 completed: false,
+                assignees: [null],
             };
             setStepCounter((count) => count + 1);
 
@@ -72,6 +68,27 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
         }
     };
 
+    const handleSelectChange = (key: number | undefined, numberOfSelects: number, index: number, selectedOption: Option | null) => {
+        if (key === undefined) return;
+
+        setSteps((prevSteps) =>
+            prevSteps.map((step) => {
+                if (step.key !== key) return step;
+
+                const assignees = step.assignees ?? [];
+                let newAssignees = [...assignees];
+
+                if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
+                    newAssignees[index] = selectedOption?.value;
+                } else if (numberOfSelects === assignees.length + 1) { // means a new select was added
+                    newAssignees.push(selectedOption?.value || null);
+                } 
+
+                return { ...step, assignees: newAssignees };
+            })
+        );
+    };
+
     const handleReorder = (newOrder: WorkflowStep[]) => {
         const firstIndex = newOrder.findIndex((s) => s.firstStep);
         if (firstIndex !== -1 && firstIndex !== 0) {
@@ -126,9 +143,11 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
                                 editView
                                 stepNumber={index + 1}
                                 stepType={step.stepType}
-                                requestedBy="Prof. Foo"
                                 finalStep={step.finalStep}
                                 onDelete={() => handleDelete(step.key)}
+                                onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
+                                entityTeachers={entityTeachers}
+                                entityCorporates={entityCorporates}
                             />
                             {step.finalStep &&
                                 <Button

src/components/ApprovalWorkflows/WorkflowStepNumber.tsx

@@ -6,7 +6,7 @@ export default function WorkflowStepNumber({ stepNumber, selected = false, compl
     return (
         <div
             className={clsx(
-                'flex items-center justify-center w-11 h-11 rounded-full',
+                'flex items-center justify-center min-w-11 min-h-11 rounded-full',
                 {
                     'bg-mti-purple-dark text-mti-purple-ultralight': selected,
                     'bg-mti-purple-ultralight text-gray-500': !selected,

src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

@@ -1,53 +1,60 @@
 import Option from "@/interfaces/option";
 import Select from "../Low/Select";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
 
 interface Props {
-    leftOptions: Option[];
-    rightOptions: Option[];
-    leftValue?: Option | null;
-    rightValue?: Option | null;
-    onLeftChange: (value: Option | null) => void;
-    onRightChange: (value: Option | null) => void;
-    leftPlaceholder?: string;
-    rightPlaceholder?: string;
+    teachers: TeacherUser[];
+    corporates: CorporateUser[];
+    selects: (Option | null | undefined)[];
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
 export default function WorkflowStepSelects({
-    leftOptions,
-    rightOptions,
-    leftValue,
-    rightValue,
-    onLeftChange,
-    onRightChange,
-    leftPlaceholder = "Select",
-    rightPlaceholder = "Select",
+    teachers,
+    corporates,
+    selects,
+    onSelectChange,
 }: Props) {
+
+    const teacherOptions: Option[] = teachers.map((teacher) => ({
+        value: teacher.id,
+        label: teacher.name,
+        icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+    }));
+    const corporateOptions: Option[] = corporates.map((corporate) => ({
+        value: corporate.id,
+        label: corporate.name,
+        icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+    }));
+
     return (
         <div
-            className={"flex flex-row gap-0"}
+            className={"flex flex-wrap gap-0"}
         >
-            {/* Left Select */}
-            <div className="flex-1 w-[275px]">
-                <Select
-                    options={leftOptions}
-                    value={leftValue}
-                    onChange={onLeftChange}
-                    placeholder={leftPlaceholder}
-                    flat
-                    className={"px-2 rounded-none rounded-l-2xl"}
-                />
-            </div>
-            {/* Right Select */}
-            <div className="flex-1 w-[275px]">
-                <Select
-                    options={rightOptions}
-                    value={rightValue}
-                    onChange={onRightChange}
-                    placeholder={rightPlaceholder}
-                    flat
-                    className="px-2 rounded-none rounded-r-2xl"
-                />
-            </div>
+            {selects.map((option, index) => {
+                let classes = "px-2 rounded-none";
+                if (index === 0 && selects.length === 1) {
+                    classes += " rounded-l-2xl rounded-r-2xl";
+                } else if (index === 0) {
+                    classes += " rounded-l-2xl";
+                } else if (index === selects.length - 1) {
+                    classes += " rounded-r-2xl";
+                }
+
+                return (
+                    <div key={index} className="min-w-fit">
+                        <Select
+                            options={[...teacherOptions, ...corporateOptions]}
+                            value={option}
+                            onChange={(option) => onSelectChange(selects.length, index, option)}
+                            placeholder={"Approval By:"}
+                            flat
+                            isClearable
+                            className={classes}
+                        />
+                    </div>
+                );
+            })}
         </div>
     );
 }