on workflow builder, only render steps if name and entity are set. reset workflow on entity reset.
This commit is contained in:
@@ -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>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user