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/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