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

- implement approval of steps

Browse Source 
- remove currentStep field from step
- implement save comments on step
- fix _id issue when saving to mongo
This commit is contained in:
Joao Correia
2025-01-31 17:01:20 +00:00
parent 9de4cba8e8
commit 662e3b0266
8 changed files with 184 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -124,7 +124,6 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
...cloneWorkflow,
steps: cloneWorkflow.steps.map(step => ({
...step,
currentStep: step.stepNumber === 1 ? true : false,
completed: false,
assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
}))
@@ -137,23 +136,21 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
setIsRedirecting(true);
setTimeout(() => {
router.push("/approval-workflows");
}, 2000);
}, 1000);
})
.catch((reason) => {
if (reason.response.status === 401) {
toast.error("Not logged in!");
return router.push("/login");
}
if (reason.response.status === 403) {
} else if (reason.response.status === 403) {
toast.error("You do not have permission to clone Approval Workflows!");
return router.push("/approval-workflows");
} else {
toast.error("Something went wrong, please try again later.");
}
toast.error("Something went wrong, please try again later.");
setIsLoading(false);
console.log("Submitted Values:", filteredWorkflow);
return;
})
console.log("Form submitted! Filtered Values:", filteredWorkflow);
};
const onWorkflowChange = (wf: EditableApprovalWorkflow) => {

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

@@ -95,12 +95,11 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
...updatedWorkflow,
steps: updatedWorkflow.steps.map(step => ({
...step,
currentStep: step.stepNumber === 1 ? true : false,
completed: false,
assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
}))
};
axios
.put(`/api/approval-workflows/${updatedWorkflow.id}/edit`, filteredWorkflow)
.then(() => {
@@ -108,23 +107,20 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
setIsRedirecting(true);
setTimeout(() => {
router.push("/approval-workflows");
}, 2000);
}, 1000);
})
.catch((reason) => {
if (reason.response.status === 401) {
toast.error("Not logged in!");
return router.push("/login");
}
if (reason.response.status === 403) {
} else if (reason.response.status === 403) {
toast.error("You do not have permission to edit Approval Workflows!");
return router.push("/approval-workflows");
} else {
toast.error("Something went wrong, please try again later.");
}
toast.error("Something went wrong, please try again later.");
setIsLoading(false);
console.log("Submitted Values:", filteredWorkflow);
return;
})
console.log("Form submitted! Filtered Values:", filteredWorkflow);
};
const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
@@ -159,7 +155,7 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
<RequestedBy
prefix={getUserTypeLabelShort(user.type)}
name={user.name}
profileImage="/blue-stock-photo.png" //{user.profilePicture}
profileImage={user.profilePicture}
/>
<StartedOn
date={workflow.startDate}

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

@@ -14,16 +14,20 @@ import { requestUser } from "@/utils/api";
import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { getSpecificUsers, getUser } from "@/utils/users.be";
import axios from "axios";
import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import { BsChevronLeft } from "react-icons/bs";
import { FaWpforms } from "react-icons/fa6";
import { FaSpinner, FaWpforms } from "react-icons/fa6";
import { MdOutlineDoubleArrow } from "react-icons/md";
import { RiThumbUpLine } from "react-icons/ri";
import { ToastContainer } from "react-toastify";
import { toast, ToastContainer } from "react-toastify";
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { FiSave } from "react-icons/fi";
export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
const user = await requestUser(req, res);
@@ -75,6 +79,9 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
const [selectedStep, setSelectedStep] = useState<WorkflowStep>(steps[selectedStepIndex]);
const [isPanelOpen, setIsPanelOpen] = useState(true);
const [comments, setComments] = useState<string>(selectedStep.comments || "");
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
const router = useRouter();
const handleStepClick = (index: number, stepInfo: WorkflowStep) => {
setSelectedStep(stepInfo);
@@ -84,11 +91,82 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
};
const handleSaveComments = () => {
setIsLoading(true);
const updatedWorkflow: ApprovalWorkflow = {
...workflow,
steps: workflow.steps.map((step, index) =>
index === selectedStepIndex ?
{
...step,
comments: comments,
}
: step
)
};
axios
.put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
.then(() => {
toast.success("Comments saved successfully.");
setIsRedirecting(true);
setTimeout(() => {
router.reload();
}, 1000);
})
.catch((reason) => {
if (reason.response.status === 401) {
toast.error("Not logged in!");
} else if (reason.response.status === 403) {
toast.error("You do not have permission to approve this step!");
} else {
toast.error("Something went wrong, please try again later.");
}
setIsLoading(false);
console.log("Submitted Values:", updatedWorkflow);
return;
})
};
const handleApproveStep = () => {
if (!confirm(`Are you sure you want to approve this step?`)) return;
setIsLoading(true);
const updatedWorkflow: ApprovalWorkflow = {
...workflow,
steps: workflow.steps.map((step, index) =>
index === selectedStepIndex ?
{
...step,
completed: true,
completedBy: user.id,
completedDate: Date.now(),
}
: step
)
};
axios
.put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
.then(() => {
toast.success("Step approved successfully.");
setIsRedirecting(true);
setTimeout(() => {
router.reload();
}, 1000);
})
.catch((reason) => {
if (reason.response.status === 401) {
toast.error("Not logged in!");
} else if (reason.response.status === 403) {
toast.error("You do not have permission to approve this step!");
} else {
toast.error("Something went wrong, please try again later.");
}
setIsLoading(false);
console.log("Submitted Values:", updatedWorkflow);
return;
})
};
return (
@@ -120,7 +198,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
<RequestedBy
prefix={getUserTypeLabelShort(workflowRequester.type)}
name={workflowRequester.name}
profileImage="/blue-stock-photo.png" //{workflowRequester.profilePicture}
profileImage={workflowRequester.profilePicture}
/>
<StartedOn
date={workflow.startDate}
@@ -245,17 +323,33 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
</div>
</div>
)}
{selectedStepIndex === currentStep &&
{selectedStepIndex === currentStep && !selectedStep.completed &&
<Button
type="submit"
color="purple"
variant="solid"
disabled={!selectedStep.assignees.includes(user.id)}
disabled={!selectedStep.assignees.includes(user.id) || isLoading}
onClick={handleApproveStep}
padding="px-6 py-2"
className="mb-3 w-full text-lg"
className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
>
Approve Step
{isRedirecting ? (
<>
<FaSpinner className="animate-spin size-5" />
Reloading...
</>
) : isLoading ? (
<>
<FaSpinner className="animate-spin size-5" />
Loading...
</>
) : (
<>
<IoMdCheckmarkCircleOutline size={20} />
Approve Step
</>
)}
</Button>
}
@@ -267,14 +361,32 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
placeholder="Input comments here"
className="w-full h-64 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
/>
<Button
type="submit"
color="purple"
variant="solid"
onClick={handleSaveComments}
disabled={isLoading}
padding="px-6 py-2"
className="mt-6 mb-3 w-full text-lg"
className="mt-6 mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
>
Save Comments
{isRedirecting ? (
<>
<FaSpinner className="animate-spin size-5" />
Reloading...
</>
) : isLoading ? (
<>
<FaSpinner className="animate-spin size-5" />
Loading...
</>
) : (
<>
<FiSave size={20} />
Save Comments
</>
)}
</Button>
<hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />

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

@@ -86,13 +86,13 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesApprover
if (workflows.length === 0) {
setIsLoading(false);
return;
}
const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
...workflow,
steps: workflow.steps.map(step => ({
...step,
currentStep: step.stepNumber === 1 ? true : false,
completed: false,
assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
}))
@@ -105,23 +105,22 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesApprover
setIsRedirecting(true);
setTimeout(() => {
router.push("/approval-workflows");
}, 2000);
}, 1000);
})
.catch((reason) => {
if (reason.response.status === 401) {
toast.error("Not logged in!");
return router.push("/login");
}
if (reason.response.status === 403) {
else if (reason.response.status === 403) {
toast.error("You do not have permission to create Approval Workflows!");
return router.push("/approval-workflows");
}
toast.error("Something went wrong, please try again later.");
else {
toast.error("Something went wrong, please try again later.");
}
setIsLoading(false);
console.log("Submitted Values:", filteredWorkflows);
return;
})
console.log("Form submitted! Filtered Values:", filteredWorkflows);
};
const handleAddNewWorkflow = () => {

17
src/pages/approval-workflows/index.tsx
View File

@@ -27,6 +27,7 @@ import Input from "@/components/Low/Input";
import { FaRegClone } from "react-icons/fa6";
import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
import { useRouter } from "next/router";
const columnHelper = createColumnHelper<ApprovalWorkflow>();
@@ -110,6 +111,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
const [nameFilter, setNameFilter] = useState<string>("");
const router = useRouter();
useEffect(() => {
const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
@@ -154,21 +156,18 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
.then(() => {
toast.success(`Successfully deleted ${name} Approval Workflow.`);
setTimeout(() => {
window.location.reload();
}, 2000);
router.reload();
}, 1000);
})
.catch((reason) => {
if (reason.response.status === 404) {
toast.error("Approval Workflow not found!");
return;
}
if (reason.response.status === 403) {
} else if (reason.response.status === 403) {
toast.error("You do not have permission to delete an Approval Workflow!");
return;
} else {
toast.error("Something went wrong, please try again later.");
}
toast.error("Something went wrong, please try again later.");
return;
})
};