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

4
src/components/ApprovalWorkflows/RequestedBy.tsx
View File

@@ -18,12 +18,12 @@ export default function RequestedBy({ prefix, name, profileImage }: Props) {
<p className="text-sm font-medium text-gray-800">Requested by</p> <p className="text-sm font-medium text-gray-800">Requested by</p>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<p className="text-xs font-medium text-gray-800">{prefix} {name}</p> <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
<Image <img
src={profileImage ? profileImage : "/defaultAvatar.png"} src={profileImage ? profileImage : "/defaultAvatar.png"}
alt={name} alt={name}
width={24} width={24}
height={24} height={24}
className="w-6 h-6 rounded-full" className="w-6 h-6 rounded-full border-[1px] border-gray-400 border-opacity-50"
/> />
</div> </div>
</div> </div>

4
src/components/ApprovalWorkflows/UserWithProfilePic.tsx
View File

@@ -12,12 +12,12 @@ export default function UserWithProfilePic({ prefix, name, profileImage, textSiz
return ( return (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<p className={textClassName}>{prefix} {name}</p> <p className={textClassName}>{prefix} {name}</p>
<Image <img
src={profileImage ? profileImage : "/defaultAvatar.png"} src={profileImage ? profileImage : "/defaultAvatar.png"}
alt={name} alt={name}
width={24} width={24}
height={24} height={24}
className="rounded-full h-auto" className="rounded-full h-auto border-[1px] border-gray-400 border-opacity-50"
/> />
</div> </div>
); );

53
src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
View File

@@ -1,6 +1,6 @@
import { EditableWorkflowStep } from "@/interfaces/approval.workflow"; import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
import Option from "@/interfaces/option"; import Option from "@/interfaces/option";
import { CorporateUser, TeacherUser } from "@/interfaces/user"; import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
import Image from "next/image"; import Image from "next/image";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { AiOutlineUserAdd } from "react-icons/ai"; import { AiOutlineUserAdd } from "react-icons/ai";
@@ -10,8 +10,7 @@ import WorkflowStepNumber from "./WorkflowStepNumber";
import WorkflowStepSelects from "./WorkflowStepSelects"; import WorkflowStepSelects from "./WorkflowStepSelects";
interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> { interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
entityTeachers: TeacherUser[]; entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
entityCorporates: CorporateUser[];
onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void; onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
} }
@@ -21,41 +20,27 @@ export default function WorkflowEditableStepComponent({
finalStep, finalStep,
onDelete, onDelete,
onSelectChange, onSelectChange,
entityTeachers, entityApprovers,
entityCorporates,
}: Props) { }: Props) {
const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]); const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
const [isAdding, setIsAdding] = useState(false); const [isAdding, setIsAdding] = useState(false);
const teacherOptions: Option[] = useMemo(() => const approverOptions: Option[] = useMemo(() =>
entityTeachers entityApprovers
.map((teacher) => ({ .map((approver) => ({
value: teacher.id, value: approver.id,
label: teacher.name, label: approver.name,
icon: () => <Image src={teacher.profilePicture} alt={teacher.name} /> icon: () => <img src={approver.profilePicture} alt={approver.name} />
})) }))
.sort((a, b) => a.label.localeCompare(b.label)), .sort((a, b) => a.label.localeCompare(b.label)),
[entityTeachers] [entityApprovers]
); );
const corporateOptions: Option[] = useMemo(() =>
entityCorporates
.map((corporate) => ({
value: corporate.id,
label: corporate.name,
icon: () => <Image src={corporate.profilePicture} alt={corporate.name} />
}))
.sort((a, b) => a.label.localeCompare(b.label)),
[entityCorporates]
);
const allOptions = useMemo(() => [...teacherOptions, ...corporateOptions], [teacherOptions, corporateOptions]);
useEffect(() => { useEffect(() => {
if (assignees && assignees.length > 0) { if (assignees && assignees.length > 0) {
const initialSelects = assignees.map((assignee) => const initialSelects = assignees.map((assignee) =>
typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null typeof assignee === 'string' ? approverOptions.find(option => option.value === assignee) || null : null
); );
setSelects((prevSelects) => { setSelects((prevSelects) => {
@@ -68,21 +53,16 @@ export default function WorkflowEditableStepComponent({
return prevSelects; return prevSelects;
}); });
} }
}, [assignees, allOptions]); }, [assignees, approverOptions]);
const selectedValues = useMemo(() => const selectedValues = useMemo(() =>
selects.filter((opt): opt is Option => !!opt).map(opt => opt.value), selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
[selects] [selects]
); );
const availableTeacherOptions = useMemo(() => const availableApproverOptions = useMemo(() =>
teacherOptions.filter(opt => !selectedValues.includes(opt.value)), approverOptions.filter(opt => !selectedValues.includes(opt.value)),
[teacherOptions, selectedValues] [approverOptions, selectedValues]
);
const availableCorporateOptions = useMemo(() =>
corporateOptions.filter(opt => !selectedValues.includes(opt.value)),
[corporateOptions, selectedValues]
); );
const handleAddSelectComponent = () => { const handleAddSelectComponent = () => {
@@ -122,8 +102,7 @@ export default function WorkflowEditableStepComponent({
<div className="ml-10 mb-12"> <div className="ml-10 mb-12">
<WorkflowStepSelects <WorkflowStepSelects
teachers={availableTeacherOptions} approvers={availableApproverOptions}
corporates={availableCorporateOptions}
selects={selects} selects={selects}
placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"} placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
onSelectChange={handleSelectChangeAt} onSelectChange={handleSelectChangeAt}

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

@@ -1,7 +1,7 @@
import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow"; import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
import Option from "@/interfaces/option"; import Option from "@/interfaces/option";
import { CorporateUser, TeacherUser } from "@/interfaces/user"; import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
import { AnimatePresence, Reorder, motion } from "framer-motion"; import { AnimatePresence, Reorder } from "framer-motion";
import { useState } from "react"; import { useState } from "react";
import { FaRegCheckCircle, FaSpinner } from "react-icons/fa"; import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
import { IoIosAddCircleOutline } from "react-icons/io"; import { IoIosAddCircleOutline } from "react-icons/io";
@@ -12,13 +12,12 @@ import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
interface Props { interface Props {
workflow: EditableApprovalWorkflow; workflow: EditableApprovalWorkflow;
onWorkflowChange: (workflow: EditableApprovalWorkflow) => void; onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
entityTeachers: TeacherUser[]; entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
entityCorporates: CorporateUser[];
isLoading: boolean; isLoading: boolean;
isRedirecting: boolean; isRedirecting: boolean;
} }
export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates, isLoading, isRedirecting }: Props) { export default function WorkflowForm({ workflow, onWorkflowChange, entityApprovers, isLoading, isRedirecting }: Props) {
const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
const lastStep = workflow.steps[workflow.steps.length - 1]; const lastStep = workflow.steps[workflow.steps.length - 1];
@@ -138,8 +137,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
finalStep={step.finalStep} finalStep={step.finalStep}
onDelete={() => handleDelete(step.key)} onDelete={() => handleDelete(step.key)}
onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)} onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
entityTeachers={entityTeachers} entityApprovers={entityApprovers}
entityCorporates={entityCorporates}
/> />
{step.finalStep && {step.finalStep &&

8
src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
View File

@@ -2,16 +2,14 @@ import Option from "@/interfaces/option";
import Select from "../Low/Select"; import Select from "../Low/Select";
interface Props { interface Props {
teachers: Option[]; approvers: Option[];
corporates: Option[];
selects: (Option | null | undefined)[]; selects: (Option | null | undefined)[];
placeholder: string; placeholder: string;
onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void; onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
} }
export default function WorkflowStepSelects({ export default function WorkflowStepSelects({
teachers, approvers,
corporates,
selects, selects,
placeholder, placeholder,
onSelectChange, onSelectChange,
@@ -34,7 +32,7 @@ export default function WorkflowStepSelects({
return ( return (
<div key={index} className="w-[275px]"> <div key={index} className="w-[275px]">
<Select <Select
options={[...teachers, ...corporates]} options={approvers}
value={option} value={option}
onChange={(option) => onSelectChange(selects.length, index, option)} onChange={(option) => onSelectChange(selects.length, index, option)}
placeholder={placeholder} placeholder={placeholder}

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 Select from "@/components/Low/Select";
import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow"; import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
import { Entity } from "@/interfaces/entity"; 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 { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils"; import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api"; import { requestUser } from "@/utils/api";
@@ -22,7 +22,6 @@ import { useEffect, useState } from "react";
import { BsChevronLeft } from "react-icons/bs"; import { BsChevronLeft } from "react-icons/bs";
import { GrClearOption } from "react-icons/gr"; import { GrClearOption } from "react-icons/gr";
import { toast, ToastContainer } from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
import { getApprovalWorkflow } from "@/utils/approval.workflows.be"; import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import axios from "axios"; import axios from "axios";
@@ -48,8 +47,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
user, user,
workflow, workflow,
userEntitiesWithLabel, userEntitiesWithLabel,
userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[], userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
}), }),
}; };
}, sessionOptions); }, sessionOptions);
@@ -58,15 +56,13 @@ interface Props {
user: User, user: User,
workflow: ApprovalWorkflow, workflow: ApprovalWorkflow,
userEntitiesWithLabel: Entity[], userEntitiesWithLabel: Entity[],
userEntitiesTeachers: TeacherUser[], userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
userEntitiesCorporates: CorporateUser[],
} }
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 [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId); const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]); const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false); const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -74,21 +70,15 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
useEffect(() => { useEffect(() => {
if (entityId) { if (entityId) {
setEntityTeachers( setEntityApprovers(
userEntitiesTeachers.filter(teacher => userEntitiesApprovers.filter(approver =>
teacher.entities.some(entity => entity.id === entityId) approver.entities.some(entity => entity.id === entityId)
)
);
setEntityCorporates(
userEntitiesCorporates.filter(corporate =>
corporate.entities.some(entity => entity.id === entityId)
) )
); );
} else { } else {
setEntityTeachers([]); setEntityApprovers([]);
setEntityCorporates([]);
} }
}, [entityId, userEntitiesTeachers, userEntitiesCorporates]); }, [entityId, userEntitiesApprovers]);
const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({ const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
label: entity.label, label: entity.label,
@@ -289,8 +279,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
<WorkflowForm <WorkflowForm
workflow={cloneWorkflow} workflow={cloneWorkflow}
onWorkflowChange={onWorkflowChange} onWorkflowChange={onWorkflowChange}
entityTeachers={entityTeachers} entityApprovers={entityApprovers}
entityCorporates={entityCorporates}
isLoading={isLoading} isLoading={isLoading}
isRedirecting={isRedirecting} 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 WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
import Layout from "@/components/High/Layout"; import Layout from "@/components/High/Layout";
import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow"; 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 { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils"; import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api"; import { requestUser } from "@/utils/api";
@@ -39,8 +39,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
props: serialize({ props: serialize({
user, user,
workflow, workflow,
workflowEntityTeachers: await getEntityUsers(workflow.entityId, undefined, { type: "teacher" }), workflowEntityApprovers: await getEntityUsers(workflow.entityId, undefined, { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
workflowEntityCorporates: await getEntityUsers(workflow.entityId, undefined, { type: "corporate" }),
}), }),
}; };
}, sessionOptions); }, sessionOptions);
@@ -48,11 +47,10 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
interface Props { interface Props {
user: User, user: User,
workflow: ApprovalWorkflow, workflow: ApprovalWorkflow,
workflowEntityTeachers: TeacherUser[], workflowEntityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
workflowEntityCorporates: CorporateUser[],
} }
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 [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false); const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -184,8 +182,7 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
<WorkflowForm <WorkflowForm
workflow={updatedWorkflow} workflow={updatedWorkflow}
onWorkflowChange={onWorkflowChange} onWorkflowChange={onWorkflowChange}
entityTeachers={workflowEntityTeachers} entityApprovers={workflowEntityApprovers}
entityCorporates={workflowEntityCorporates}
isLoading={isLoading} isLoading={isLoading}
isRedirecting={isRedirecting} 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 UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePic";
import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent"; import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
import Layout from "@/components/High/Layout"; import Layout from "@/components/High/Layout";
import Button from "@/components/Low/Button";
import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow"; import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
import { User } from "@/interfaces/user"; import { User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session"; import { sessionOptions } from "@/lib/session";
@@ -82,7 +83,11 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
setIsPanelOpen(true); setIsPanelOpen(true);
}; };
const saveComments = () => { const handleSaveComments = () => {
};
const handleApproveStep = () => {
}; };
@@ -99,7 +104,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
</Head> </Head>
<ToastContainer /> <ToastContainer />
{user && ( {user && (
<Layout user={user} className="gap-6"> <Layout user={user} className="gap-6 min-h-[900px]">
<section className="flex items-center gap-2"> <section className="flex items-center gap-2">
<Link <Link
@@ -224,7 +229,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
</div> </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: One assignee is required to sign off to complete this step:
<div className="flex flex-col gap-2 mt-3"> <div className="flex flex-col gap-2 mt-3">
{workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => ( {workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
@@ -241,17 +246,38 @@ 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" /> <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
<textarea <textarea
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 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 Save Comments
</button> </Button>
<hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
</div> </div>
</motion.div> </motion.div>

32
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 Select from "@/components/Low/Select";
import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approval.workflow"; import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
import { Entity } from "@/interfaces/entity"; 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 { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils"; import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api"; import { requestUser } from "@/utils/api";
@@ -38,8 +38,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
props: serialize({ props: serialize({
user, user,
userEntitiesWithLabel, userEntitiesWithLabel,
userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[], userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
}), }),
}; };
}, sessionOptions); }, sessionOptions);
@@ -47,16 +46,14 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
interface Props { interface Props {
user: User, user: User,
userEntitiesWithLabel: Entity[], userEntitiesWithLabel: Entity[],
userEntitiesTeachers: TeacherUser[], userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
userEntitiesCorporates: CorporateUser[],
} }
export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) { export default function Home({ user, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]); const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]);
const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined); const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
const [entityId, setEntityId] = useState<string | null | undefined>(null); const [entityId, setEntityId] = useState<string | null | undefined>(null);
const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]); const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
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 [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 [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false); const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -65,21 +62,15 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
useEffect(() => { useEffect(() => {
if (entityId) { if (entityId) {
setEntityTeachers( setEntityApprovers(
userEntitiesTeachers.filter(teacher => userEntitiesApprovers.filter(approver =>
teacher.entities.some(entity => entity.id === entityId) approver.entities.some(entity => entity.id === entityId)
)
);
setEntityCorporates(
userEntitiesCorporates.filter(corporate =>
corporate.entities.some(entity => entity.id === entityId)
) )
); );
} else { } else {
setEntityTeachers([]); setEntityApprovers([]);
setEntityCorporates([]);
} }
}, [entityId, userEntitiesTeachers, userEntitiesCorporates]); }, [entityId, userEntitiesApprovers]);
const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId); const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
@@ -321,8 +312,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
<WorkflowForm <WorkflowForm
workflow={currentWorkflow} workflow={currentWorkflow}
onWorkflowChange={onWorkflowChange} onWorkflowChange={onWorkflowChange}
entityTeachers={entityTeachers} entityApprovers={entityApprovers}
entityCorporates={entityCorporates}
isLoading={isLoading} isLoading={isLoading}
isRedirecting={isRedirecting} isRedirecting={isRedirecting}
/> />