devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish Approval Workflow builder for the most part. TODO: implement permissions

Browse Source
This commit is contained in:
Joao Correia
2025-01-24 00:33:45 +00:00
parent dcd25465fd
commit f6b0c96b3b
3 changed files with 80 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ApprovalWorkflows/Tip.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { MdTipsAndUpdates } from "react-icons/md";
interface Props {
text: string;
}
export default function Tip({ text }: Props) {
return (
<div className="flex flex-row gap-3 text-gray-500 font-medium">
<MdTipsAndUpdates size={25} />
<p>{text}</p>
</div>
);
};

54
src/components/ApprovalWorkflows/WorkflowForm.tsx
View File

@@ -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 &&
<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"
<div>
<motion.div
className="flex flex-col gap-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: 20 }}
transition={{ duration: 0.3 }}
>
<IoIosAddCircleOutline className="size-6" />
Add Step
</Button>
<Tip text="Introduce here all the steps associated with this instance." />
<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-7"
>
<IoIosAddCircleOutline className="size-6" />
Add Step
</Button>
</motion.div>
<Reorder.Group
axis="y"
@@ -122,10 +125,9 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
<Reorder.Item
key={step.key}
value={step}
variants={itemVariants}
initial="initial"
animate="animate"
exit="exit"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: 20 }}
transition={{ duration: 0.3 }}
layout
drag={!(step.firstStep || step.finalStep)}
@@ -146,7 +148,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
type="submit"
color="purple"
variant="solid"
className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
className="max-w-fit text-lg font-medium flex items-center gap-2 text-left -mt-4"
>
<FaRegCheckCircle className="size-5" />
Confirm Exam Workflow Pipeline