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

Fix animations

Browse Source
This commit is contained in:
Joao Correia
2025-01-25 15:10:52 +00:00
parent 2eff08bf86
commit 2c0153e055
4 changed files with 29 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,12 +95,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
<> <>
{workflow.entityId && workflow.name && {workflow.entityId && workflow.name &&
<div> <div>
<motion.div <div
className="flex flex-col gap-6" 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 }}
> >
<Tip text="Introduce here all the steps associated with this instance." /> <Tip text="Introduce here all the steps associated with this instance." />
<Button <Button
@@ -113,7 +109,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
<IoIosAddCircleOutline className="size-6" /> <IoIosAddCircleOutline className="size-6" />
Add Step Add Step
</Button> </Button>
</motion.div> </div>
<Reorder.Group <Reorder.Group
axis="y" axis="y"
@@ -126,10 +122,10 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
<Reorder.Item <Reorder.Item
key={step.key} key={step.key}
value={step} value={step}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: -30 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: 20 }} exit={{ opacity: 0, x: 30 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.20 }}
layout layout
drag={!(step.firstStep || step.finalStep)} drag={!(step.firstStep || step.finalStep)}
> >

2
src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
View File

@@ -29,7 +29,7 @@ export default function WorkflowStepComponent({
return ( return (
<div <div
onClick={onClick} onClick={onClick}
className={clsx("flex flex-row gap-5 w-[600px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", { className={clsx("flex flex-row gap-5 w-[600px] p-6 mb-5 rounded-2xl transition ease-in-out duration-300 cursor-pointer", {
"bg-mti-purple-ultralight": selected, "bg-mti-purple-ultralight": selected,
})} })}
> >

6
src/pages/approval-workflows/[id].tsx
View File

@@ -22,6 +22,7 @@ import { RiThumbUpLine } from "react-icons/ri";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
import Tip from "@/components/ApprovalWorkflows/Tip";
export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => { export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
const user = await requestUser(req, res); const user = await requestUser(req, res);
@@ -125,6 +126,9 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
status={workflow.status} status={workflow.status}
/> />
</div> </div>
{steps.find((step) => !step.completed) === undefined &&
<Tip text="All steps in this instance have been completed." />
}
</section> </section>
<section className="flex flex-col gap-0"> <section className="flex flex-col gap-0">
@@ -235,7 +239,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
value={comments} value={comments}
onChange={(e) => setComments(e.target.value)} onChange={(e) => setComments(e.target.value)}
placeholder="Input comments here" placeholder="Input comments here"
className="w-full h-80 p-2 border-2 rounded-xl focus:border-mti-purple focus:outline-none mt-4" className="w-full h-80 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-4"
/> />
<button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full"> <button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
Save Comments Save Comments

29
src/pages/approval-workflows/create.tsx
View File

@@ -13,7 +13,7 @@ import { requestUser } from "@/utils/api";
import { getEntities } from "@/utils/entities.be"; import { getEntities } from "@/utils/entities.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled"; import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getEntitiesUsers } from "@/utils/users.be"; import { getEntitiesUsers } from "@/utils/users.be";
import { LayoutGroup, motion } from "framer-motion"; import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
import { withIronSessionSsr } from "iron-session/next"; import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
@@ -251,26 +251,18 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
</Button> </Button>
</div> </div>
<LayoutGroup> <AnimatePresence mode="wait">
<LayoutGroup key={currentWorkflow.id}>
<motion.div
key="form"
initial={{ opacity: 0, y: -30 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: 60 }}
transition={{ duration: 0.20 }}
>
{(!currentWorkflow.name || !currentWorkflow.entityId) && ( {(!currentWorkflow.name || !currentWorkflow.entityId) && (
<motion.div
key={0}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
>
<Tip text="Please fill in workflow name and associated entity to start configuring workflow." /> <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
</motion.div>
)} )}
<motion.div
key={1}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
>
<WorkflowForm <WorkflowForm
workflow={currentWorkflow} workflow={currentWorkflow}
onWorkflowChange={onWorkflowChange} onWorkflowChange={onWorkflowChange}
@@ -279,6 +271,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
/> />
</motion.div> </motion.div>
</LayoutGroup> </LayoutGroup>
</AnimatePresence>
</> </>
)} )}
</form> </form>