Prevent same input on selects from the same step.

Change behaviour of initial step to allow multiple assignees

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,12 +1,12 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { useEffect, useState } from "react";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { useMemo, useState } from "react";
+import { AiOutlineUserAdd } from "react-icons/ai";
 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";
 
 interface Props extends WorkflowStep {
     entityTeachers: TeacherUser[];
@@ -15,7 +15,6 @@ interface Props extends WorkflowStep {
 }
 
 export default function WorkflowEditableStepComponent({
-    stepType,
     stepNumber,
     finalStep,
     onDelete,
@@ -26,7 +25,42 @@ export default function WorkflowEditableStepComponent({
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
 
-    const showSelects = stepType === "approval-by";
+    const teacherOptions: Option[] = useMemo(() => 
+        entityTeachers
+            .map((teacher) => ({
+                value: teacher.id,
+                label: teacher.name,
+                icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        [entityTeachers]
+    );
+
+    const corporateOptions: Option[] = useMemo(() => 
+        entityCorporates
+            .map((corporate) => ({
+                value: corporate.id,
+                label: corporate.name,
+                icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        [entityCorporates]
+    );
+
+    const selectedValues = useMemo(() => 
+        selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
+        [selects]
+    );
+
+    const availableTeacherOptions = useMemo(() => 
+        teacherOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [teacherOptions, selectedValues]
+    );
+
+    const availableCorporateOptions = useMemo(() => 
+        corporateOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [corporateOptions, selectedValues]
+    );
 
     const handleAddSelectComponent = () => {
         setSelects((prev) => {
@@ -59,52 +93,34 @@ export default function WorkflowEditableStepComponent({
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
-            {showSelects && (
-                <div className="ml-10 mb-12">
-                    <WorkflowStepSelects
-                        teachers={entityTeachers}
-                        corporates={entityCorporates}
-                        selects={selects}
-                        onSelectChange={handleSelectChangeAt}
-                    />
-                </div>
-            )}
+            <div className="ml-10 mb-12">
+                <WorkflowStepSelects
+                    teachers={availableTeacherOptions}
+                    corporates={availableCorporateOptions}
+                    selects={selects}
+                    placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
+                    onSelectChange={handleSelectChangeAt}
+                />
+            </div>
 
-            {stepNumber === 1 && (
-                <div className="ml-10">
-                    <div className={"flex flex-row gap-0"}>
-                        {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
-                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
-                            <span className="text-sm font-normal focus:outline-none">Form Intake</span>
-                        </div>
-                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
-                            <span className="text-sm font-normal focus:outline-none">Prof. X</span>
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {stepNumber !== 1 && (
-                <div className="flex flex-row items-start mt-1.5 ml-3">
+            <div className="flex flex-row items-start mt-1.5 ml-3">
+                <button
+                    type="button"
+                    onClick={handleAddSelectComponent}
+                    className="cursor-pointer"
+                >
+                    <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                </button>
+                {stepNumber !== 1 && !finalStep && (
                     <button
-                        type="button"
-                        onClick={handleAddSelectComponent}
                         className="cursor-pointer"
+                        onClick={onDelete}
+                        type="button"
                     >
-                        <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        <BsTrash className="size-6 mt-0.5 ml-3 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>
         </div>
 
     );