From 2c0153e0559fb793e415c852e120406f1ef8dcdd Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 25 Jan 2025 15:10:52 +0000
Subject: [PATCH] Fix animations

---
 .../ApprovalWorkflows/WorkflowForm.tsx        | 14 +++---
 .../WorkflowStepComponent.tsx                 |  2 +-
 src/pages/approval-workflows/[id].tsx         |  6 ++-
 src/pages/approval-workflows/create.tsx       | 43 ++++++++-----------
 4 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index eb393d4d..d730b16a 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -95,12 +95,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         <>
             {workflow.entityId && workflow.name &&
                 <div>
-                    <motion.div
+                    <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 }}
                     >
                         <Tip text="Introduce here all the steps associated with this instance." />
                         <Button
@@ -113,7 +109,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                             <IoIosAddCircleOutline className="size-6" />
                             Add Step
                         </Button>
-                    </motion.div>
+                    </div>
 
                     <Reorder.Group
                         axis="y"
@@ -126,10 +122,10 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                 <Reorder.Item
                                     key={step.key}
                                     value={step}
-                                    initial={{ opacity: 0, y: 20 }}
+                                    initial={{ opacity: 0, y: -30 }}
                                     animate={{ opacity: 1, y: 0 }}
-                                    exit={{ opacity: 0, x: 20 }}
-                                    transition={{ duration: 0.3 }}
+                                    exit={{ opacity: 0, x: 30 }}
+                                    transition={{ duration: 0.20 }}
                                     layout
                                     drag={!(step.firstStep || step.finalStep)}
                                 >
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index a3387201..a6741148 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -29,7 +29,7 @@ export default function WorkflowStepComponent({
     return (
         <div
             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,
             })}
         >
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 38f18439..5ecd6ca2 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -22,6 +22,7 @@ import { RiThumbUpLine } from "react-icons/ri";
 import { ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+import Tip from "@/components/ApprovalWorkflows/Tip";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -125,6 +126,9 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 status={workflow.status}
                             />
                         </div>
+                        {steps.find((step) => !step.completed) === undefined &&
+                            <Tip text="All steps in this instance have been completed." />
+                        }
                     </section>
 
                     <section className="flex flex-col gap-0">
@@ -235,7 +239,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                         value={comments}
                                         onChange={(e) => setComments(e.target.value)}
                                         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">
                                         Save Comments
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index d42bdfab..b78f53c2 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -13,7 +13,7 @@ import { requestUser } from "@/utils/api";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 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 Head from "next/head";
 import Link from "next/link";
@@ -251,34 +251,27 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                     </Button>
                                 </div>
 
-                                <LayoutGroup>
-                                    {(!currentWorkflow.name || !currentWorkflow.entityId) && (
+                                <AnimatePresence mode="wait">
+                                    <LayoutGroup key={currentWorkflow.id}>
                                         <motion.div
-                                            key={0}
-                                            initial={{ opacity: 0, y: -20 }}
+                                            key="form"
+                                            initial={{ opacity: 0, y: -30 }}
                                             animate={{ opacity: 1, y: 0 }}
-                                            exit={{ opacity: 0, y: -20 }}
-                                            transition={{ duration: 0.3 }}
+                                            exit={{ opacity: 0, x: 60 }}
+                                            transition={{ duration: 0.20 }}
                                         >
-                                            <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
+                                            {(!currentWorkflow.name || !currentWorkflow.entityId) && (
+                                                <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
+                                            )}
+                                            <WorkflowForm
+                                                workflow={currentWorkflow}
+                                                onWorkflowChange={onWorkflowChange}
+                                                entityTeachers={entityTeachers}
+                                                entityCorporates={entityCorporates}
+                                            />
                                         </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
-                                            workflow={currentWorkflow}
-                                            onWorkflowChange={onWorkflowChange}
-                                            entityTeachers={entityTeachers}
-                                            entityCorporates={entityCorporates}
-                                        />
-                                    </motion.div>
-                                </LayoutGroup>
+                                    </LayoutGroup>
+                                </AnimatePresence>
                             </>
                         )}
                     </form>