From dcd25465fd2126f6b0f97754b172a11355caaf9b Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 23 Jan 2025 22:56:45 +0000
Subject: [PATCH] on workflow builder, only render steps if name and entity are
 set. reset workflow on entity reset.

---
 .../ApprovalWorkflows/WorkflowForm.tsx        | 117 +++++++++---------
 src/pages/approval-workflows/create.tsx       |  15 ++-
 2 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 9361ded4..bb4bdddf 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -44,7 +44,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         setStepCounter((count) => count + 1);
 
         const updatedSteps = [
-            ...workflow.steps.slice(0, -1), 
+            ...workflow.steps.slice(0, -1),
             newStep,
             lastStep
         ];
@@ -95,66 +95,69 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         onWorkflowChange({ ...workflow, steps: renumberSteps(newOrder) });
     };
 
+
     return (
-        <div className="flex flex-col gap-6">
-            <Button
-                color="purple"
-                variant="solid"
-                onClick={addStep}
-                type="button"
-                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-9"
-            >
-                <IoIosAddCircleOutline className="size-6" />
-                Add Step
-            </Button>
+        <>
+            {workflow.entityId && workflow.name &&
+                <div className="flex flex-col gap-6">
+                    <Button
+                        color="purple"
+                        variant="solid"
+                        onClick={addStep}
+                        type="button"
+                        className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-9"
+                    >
+                        <IoIosAddCircleOutline className="size-6" />
+                        Add Step
+                    </Button>
 
-            <Reorder.Group
-                axis="y"
-                values={workflow.steps}
-                onReorder={handleReorder}
-                className="flex flex-col gap-0"
-            >
-
-                <AnimatePresence>
-                    {workflow.steps.map((step, index) => (
-                        <Reorder.Item
-                            key={step.key}
-                            value={step}
-                            variants={itemVariants}
-                            initial="initial"
-                            animate="animate"
-                            exit="exit"
-                            transition={{ duration: 0.3 }}
-                            layout
-                            drag={!(step.firstStep || step.finalStep)}
-                        >
-                            <WorkflowEditableStepComponent
-                                stepNumber={index + 1}
-                                assignees={step.assignees}
-                                finalStep={step.finalStep}
-                                onDelete={() => handleDelete(step.key)}
-                                onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
-                                entityTeachers={entityTeachers}
-                                entityCorporates={entityCorporates}
-                            />
-                            {step.finalStep &&
-                                <Button
-                                    type="submit"
-                                    color="purple"
-                                    variant="solid"
-                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
+                    <Reorder.Group
+                        axis="y"
+                        values={workflow.steps}
+                        onReorder={handleReorder}
+                        className="flex flex-col gap-0"
+                    >
+                        <AnimatePresence>
+                            {workflow.steps.map((step, index) => (
+                                <Reorder.Item
+                                    key={step.key}
+                                    value={step}
+                                    variants={itemVariants}
+                                    initial="initial"
+                                    animate="animate"
+                                    exit="exit"
+                                    transition={{ duration: 0.3 }}
+                                    layout
+                                    drag={!(step.firstStep || step.finalStep)}
                                 >
-                                    <FaRegCheckCircle className="size-5" />
-                                    Confirm Exam Workflow Pipeline
-                                </Button>
-                            }
-                        </Reorder.Item>
-                    ))}
-
-                </AnimatePresence>
-            </Reorder.Group>
-        </div>
 
+                                    <WorkflowEditableStepComponent
+                                        stepNumber={index + 1}
+                                        assignees={step.assignees}
+                                        finalStep={step.finalStep}
+                                        onDelete={() => handleDelete(step.key)}
+                                        onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
+                                        entityTeachers={entityTeachers}
+                                        entityCorporates={entityCorporates}
+                                    />
 
+                                    {step.finalStep &&
+                                        <Button
+                                            type="submit"
+                                            color="purple"
+                                            variant="solid"
+                                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
+                                        >
+                                            <FaRegCheckCircle className="size-5" />
+                                            Confirm Exam Workflow Pipeline
+                                        </Button>
+                                    }
+                                </Reorder.Item>
+                            ))}
+                        </AnimatePresence>
+                    </Reorder.Group>
+                </div>
+            }
+        </>
     );
 };
\ No newline at end of file
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 46e4f922..83a50ccf 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -51,7 +51,7 @@ interface Props {
 export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
     const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
-    const [entityId, setEntityId] = useState<string | undefined>(undefined);
+    const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
 
@@ -122,6 +122,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         }
     };
 
+    const handleResetWorkflow = (id: string) => {
+        setWorkflows(prev => prev.filter(wf => wf.id !== id));
+        handleAddNewWorkflow();
+    }
+
     return (
         <>
             <Head>
@@ -201,6 +206,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                     />
                                     <Select
                                         options={ENTITY_OPTIONS}
+                                        value={
+                                            currentWorkflow.entityId === ""
+                                                ? null
+                                                : ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
+                                        }
                                         onChange={(selectedEntity) => {
                                             if (selectedEntity?.value) {
                                                 setEntityId(selectedEntity.value);
@@ -209,6 +219,9 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                                     entityId: selectedEntity.value,
                                                 };
                                                 onWorkflowChange(updatedWorkflow);
+                                            } else if (selectedEntity === null) {
+                                                if (!confirm("Clearing entity will reset this workflow. Are you sure you want to proceed?")) return;
+                                                handleResetWorkflow(currentWorkflow.id);
                                             }
                                         }}
                                         isClearable