From f6b0c96b3b640ba1471f4a6a3a77467abd5693f0 Mon Sep 17 00:00:00 2001 From: Joao Correia Date: Fri, 24 Jan 2025 00:33:45 +0000 Subject: [PATCH] Finish Approval Workflow builder for the most part. TODO: implement permissions --- src/components/ApprovalWorkflows/Tip.tsx | 14 +++++ .../ApprovalWorkflows/WorkflowForm.tsx | 54 ++++++++++--------- src/pages/approval-workflows/create.tsx | 49 +++++++++++++---- 3 files changed, 80 insertions(+), 37 deletions(-) create mode 100644 src/components/ApprovalWorkflows/Tip.tsx diff --git a/src/components/ApprovalWorkflows/Tip.tsx b/src/components/ApprovalWorkflows/Tip.tsx new file mode 100644 index 00000000..5d0b1fbe --- /dev/null +++ b/src/components/ApprovalWorkflows/Tip.tsx @@ -0,0 +1,14 @@ +import { MdTipsAndUpdates } from "react-icons/md"; + +interface Props { + text: string; +} + +export default function Tip({ text }: Props) { + return ( +
+ +

{text}

+
+ ); +}; \ No newline at end of file diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx index bb4bdddf..dbaa05f6 100644 --- a/src/components/ApprovalWorkflows/WorkflowForm.tsx +++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx @@ -1,19 +1,13 @@ +import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow"; import Option from "@/interfaces/option"; -import { AnimatePresence, Reorder } from "framer-motion"; -import { useEffect, useState } from "react"; +import { CorporateUser, TeacherUser } from "@/interfaces/user"; +import { AnimatePresence, AnimateSharedLayout, Reorder, motion } from "framer-motion"; +import { useState } from "react"; import { FaRegCheckCircle } from "react-icons/fa"; import { IoIosAddCircleOutline } from "react-icons/io"; import Button from "../Low/Button"; import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent"; -import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow"; -import { CorporateUser, TeacherUser } from "@/interfaces/user"; - -// Variants for animating steps when they are added/removed -const itemVariants = { - initial: { opacity: 0, y: -20 }, - animate: { opacity: 1, y: 0 }, - exit: { opacity: 0, x: 20 }, -}; +import Tip from "./Tip"; interface Props { workflow: ApprovalWorkflow; @@ -99,17 +93,26 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher return ( <> {workflow.entityId && workflow.name && -
- + + + Confirm Exam Workflow Pipeline diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx index 83a50ccf..3ce00bd5 100644 --- a/src/pages/approval-workflows/create.tsx +++ b/src/pages/approval-workflows/create.tsx @@ -10,6 +10,7 @@ import { BsChevronLeft, BsTrash } from "react-icons/bs"; import { ToastContainer } from "react-toastify"; import { v4 as uuidv4 } from 'uuid'; +import Tip from "@/components/ApprovalWorkflows/Tip"; import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm"; import Button from "@/components/Low/Button"; import Input from "@/components/Low/Input"; @@ -19,6 +20,7 @@ import { Entity } from "@/interfaces/entity"; import { CorporateUser, TeacherUser, User } from "@/interfaces/user"; import { getEntities } from "@/utils/entities.be"; import { getEntitiesUsers } from "@/utils/users.be"; +import { LayoutGroup, motion } from "framer-motion"; import { useEffect, useState } from "react"; import { MdFormatListBulletedAdd } from "react-icons/md"; @@ -116,9 +118,12 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers const handleDeleteWorkflow = (id: string) => { if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return; - setWorkflows(prev => prev.filter(wf => wf.id !== id)); + const updatedWorkflows = workflows.filter(wf => wf.id !== id); + + setWorkflows(updatedWorkflows); + if (selectedWorkflowId === id) { - workflows.length > 0 ? setSelectedWorkflowId(workflows[0].id) : setSelectedWorkflowId(undefined); + setSelectedWorkflowId(updatedWorkflows.find(wf => wf.id)?.id); } }; @@ -212,15 +217,15 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers : ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId) } onChange={(selectedEntity) => { - if (selectedEntity?.value) { + if (!currentWorkflow.entityId && selectedEntity?.value) { setEntityId(selectedEntity.value); const updatedWorkflow = { ...currentWorkflow, 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; + } else { + if (!confirm("Clearing or changing entity will reset this workflow. Are you sure you want to proceed?")) return; handleResetWorkflow(currentWorkflow.id); } }} @@ -239,12 +244,34 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
- + + {(!currentWorkflow.name || !currentWorkflow.entityId) && ( + + + + )} + + + + + )}