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

refactor fetched users into single array and replace Image tag with img

Browse Source
This commit is contained in:
Joao Correia
2025-01-31 10:37:14 +00:00
parent f89b42c41c
commit 9de4cba8e8
9 changed files with 88 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
import { Entity } from "@/interfaces/entity";
import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
@@ -22,7 +22,6 @@ import { useEffect, useState } from "react";
import { BsChevronLeft } from "react-icons/bs";
import { GrClearOption } from "react-icons/gr";
import { toast, ToastContainer } from "react-toastify";
import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
import { useRouter } from "next/router";
import axios from "axios";
@@ -48,8 +47,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
user,
workflow,
userEntitiesWithLabel,
userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}),
};
}, sessionOptions);
@@ -58,15 +56,13 @@ interface Props {
user: User,
workflow: ApprovalWorkflow,
userEntitiesWithLabel: Entity[],
userEntitiesTeachers: TeacherUser[],
userEntitiesCorporates: CorporateUser[],
userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}
export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -74,21 +70,15 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
useEffect(() => {
if (entityId) {
setEntityTeachers(
userEntitiesTeachers.filter(teacher =>
teacher.entities.some(entity => entity.id === entityId)
)
);
setEntityCorporates(
userEntitiesCorporates.filter(corporate =>
corporate.entities.some(entity => entity.id === entityId)
setEntityApprovers(
userEntitiesApprovers.filter(approver =>
approver.entities.some(entity => entity.id === entityId)
)
);
} else {
setEntityTeachers([]);
setEntityCorporates([]);
setEntityApprovers([]);
}
}, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
}, [entityId, userEntitiesApprovers]);
const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
label: entity.label,
@@ -289,8 +279,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
<WorkflowForm
workflow={cloneWorkflow}
onWorkflowChange={onWorkflowChange}
entityTeachers={entityTeachers}
entityCorporates={entityCorporates}
entityApprovers={entityApprovers}
isLoading={isLoading}
isRedirecting={isRedirecting}
/>

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

@@ -4,7 +4,7 @@ import Status from "@/components/ApprovalWorkflows/Status";
import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
import Layout from "@/components/High/Layout";
import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
@@ -39,8 +39,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
props: serialize({
user,
workflow,
workflowEntityTeachers: await getEntityUsers(workflow.entityId, undefined, { type: "teacher" }),
workflowEntityCorporates: await getEntityUsers(workflow.entityId, undefined, { type: "corporate" }),
workflowEntityApprovers: await getEntityUsers(workflow.entityId, undefined, { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}),
};
}, sessionOptions);
@@ -48,11 +47,10 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
interface Props {
user: User,
workflow: ApprovalWorkflow,
workflowEntityTeachers: TeacherUser[],
workflowEntityCorporates: CorporateUser[],
workflowEntityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}
export default function Home({ user, workflow, workflowEntityTeachers, workflowEntityCorporates }: Props) {
export default function Home({ user, workflow, workflowEntityApprovers }: Props) {
const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -184,8 +182,7 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
<WorkflowForm
workflow={updatedWorkflow}
onWorkflowChange={onWorkflowChange}
entityTeachers={workflowEntityTeachers}
entityCorporates={workflowEntityCorporates}
entityApprovers={workflowEntityApprovers}
isLoading={isLoading}
isRedirecting={isRedirecting}
/>

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

@@ -5,6 +5,7 @@ import Tip from "@/components/ApprovalWorkflows/Tip";
import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePic";
import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
import Layout from "@/components/High/Layout";
import Button from "@/components/Low/Button";
import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
import { User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
@@ -82,10 +83,14 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
setIsPanelOpen(true);
};
const saveComments = () => {
const handleSaveComments = () => {
};
const handleApproveStep = () => {
};
return (
<>
<Head>
@@ -99,7 +104,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
</Head>
<ToastContainer />
{user && (
<Layout user={user} className="gap-6">
<Layout user={user} className="gap-6 min-h-[900px]">
<section className="flex items-center gap-2">
<Link
@@ -224,7 +229,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
</div>
) : (
<div className={"text-base font-medium text-gray-500"}>
<div className={"text-base font-medium text-gray-500 mb-6"}>
One assignee is required to sign off to complete this step:
<div className="flex flex-col gap-2 mt-3">
{workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
@@ -240,6 +245,19 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
</div>
</div>
)}
{selectedStepIndex === currentStep &&
<Button
color="purple"
variant="solid"
disabled={!selectedStep.assignees.includes(user.id)}
onClick={handleApproveStep}
padding="px-6 py-2"
className="mb-3 w-full text-lg"
>
Approve Step
</Button>
}
<hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
@@ -247,11 +265,19 @@ 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 shadow-lg focus:border-mti-purple focus:outline-none mt-4"
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 onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
<Button
color="purple"
variant="solid"
onClick={handleSaveComments}
padding="px-6 py-2"
className="mt-6 mb-3 w-full text-lg"
>
Save Comments
</button>
</Button>
<hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
</div>
</motion.div>

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

@@ -6,7 +6,7 @@ import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
import { Entity } from "@/interfaces/entity";
import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
@@ -38,8 +38,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
props: serialize({
user,
userEntitiesWithLabel,
userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}),
};
}, sessionOptions);
@@ -47,16 +46,14 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
interface Props {
user: User,
userEntitiesWithLabel: Entity[],
userEntitiesTeachers: TeacherUser[],
userEntitiesCorporates: CorporateUser[],
userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
}
export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
export default function Home({ user, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]);
const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
const [entityId, setEntityId] = useState<string | null | undefined>(null);
const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -65,21 +62,15 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
useEffect(() => {
if (entityId) {
setEntityTeachers(
userEntitiesTeachers.filter(teacher =>
teacher.entities.some(entity => entity.id === entityId)
)
);
setEntityCorporates(
userEntitiesCorporates.filter(corporate =>
corporate.entities.some(entity => entity.id === entityId)
setEntityApprovers(
userEntitiesApprovers.filter(approver =>
approver.entities.some(entity => entity.id === entityId)
)
);
} else {
setEntityTeachers([]);
setEntityCorporates([]);
setEntityApprovers([]);
}
}, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
}, [entityId, userEntitiesApprovers]);
const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
@@ -129,7 +120,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
setIsLoading(false);
return;
})
console.log("Form submitted! Filtered Values:", filteredWorkflows);
};
@@ -321,8 +312,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
<WorkflowForm
workflow={currentWorkflow}
onWorkflowChange={onWorkflowChange}
entityTeachers={entityTeachers}
entityCorporates={entityCorporates}
entityApprovers={entityApprovers}
isLoading={isLoading}
isRedirecting={isRedirecting}
/>