Skip to content

Commit

Permalink
fixing update team info
Browse files Browse the repository at this point in the history
  • Loading branch information
@janet-barbie @Tuyisenge2
janet-barbie authored and Tuyisenge2 committed Sep 26, 2024
1 parent 9d93b8f commit 2ee5ca1
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 60 deletions.
42 changes: 31 additions & 11 deletions src/containers/admin-dashBoard/Teams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ export interface Team {
name: string;
cohort: Cohort;
ttl: any;
manager: any;
phase: any;
program: any;
}

export const getAllTeam = gql`
Expand Down Expand Up @@ -72,6 +75,15 @@ export const getAllTeam = gql`
quality
professional_Skills
}
phase {
name
}
program {
name
}
manager {
email
}
}
getAllCohorts(orgToken: $orgToken) {
Expand All @@ -96,6 +108,15 @@ export const getAllTeam = gql`
role
organizations
}
getAllPrograms(orgToken: $orgToken) {
id
name
}
getAllPhases(orgToken: $orgToken) {
id
name
description
}
}
`;

Expand Down Expand Up @@ -224,17 +245,16 @@ function AdminTeams() {
}),
},
];

const teamData = getData?.getAllTeams.map(({ name, cohort, ttl }) => ({
name,
cohortName: cohort?.name,
coordinator: cohort?.coordinator?.email
? cohort?.coordinator?.email
: 'Not Assigned',
phase: cohort?.phase.name,
programName: cohort?.program?.name,
ttlEmail: ttl?.profile && ttl.profile.name ? ttl?.email : 'Not Assigned',
}));
const teamData = getData?.getAllTeams.map(
({ name, cohort, ttl, phase, program, manager }) => ({
name,
cohortName: cohort?.name,
coordinator: manager?.email ? manager?.email : cohort?.coordinator?.email,
phase: phase?.name ? phase?.name : cohort?.phase?.name,
programName: program?.name ? program?.name : cohort?.program?.name,
ttlEmail: ttl?.profile && ttl.profile.name ? ttl?.email : 'Not Assigned',
}),
);

return (
<>
Expand Down
179 changes: 130 additions & 49 deletions src/containers/admin-dashBoard/UpdateTeamModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,24 @@ export const UpdateTeam = gql`
$cohort: String
$TTL: String
$orgToken: String
$manager: String
$phase: String
$program: String
) {
updateTeam(
id: $updateTeamId
orgToken: $orgToken
name: $name
cohort: $cohort
TTL: $TTL
manager: $manager
phase: $phase
program: $program
) {
name
}
}
`;

export default function UpdateTeamModal({
data,
updateTeamModal,
Expand All @@ -37,6 +42,8 @@ export default function UpdateTeamModal({
data?: {
getAllTeams: Team[];
getAllCohorts: Cohort[];
getAllPrograms?: any[];
getAllPhases?: any[];
getAllUsers: any;
};
updateTeamModal: boolean;
Expand All @@ -47,7 +54,6 @@ export default function UpdateTeamModal({
const { t } = useTranslation();
const {
handleSubmit,
watch,
formState: { errors },
reset,
register,
Expand All @@ -65,29 +71,29 @@ export default function UpdateTeamModal({
},
});
const orgToken = localStorage.getItem('orgToken');

async function updateTeam(data: any) {
const newData: any = { ...data };

// Process the select fields
newData.manager && (newData.manager = newData.manager.value);
newData.program && (newData.program = newData.program.value);
newData.phase && (newData.phase = newData.phase.value);
newData.coordinatorEmail &&
(newData.coordinatorEmail = newData.coordinatorEmail.value);
newData.programName && (newData.programName = newData.programName.value);

// Clean up empty fields
Object.keys(newData).forEach((field) => {
if (!newData[field] || newData[field] === '') {
delete newData[field];
}
});

newData.cohort && (newData.cohort = newData.cohort.value);
newData.TTL && (newData.TTL = newData.TTL.value);
newData.updateTeamId = currentTeam?.id;
orgToken && (newData.orgToken = orgToken);

await updateTeamMutation({ variables: newData });
}

useEffect(() => {
// Set form values when the modal opens
setValue('name', currentTeam?.name);
setValue('TTL', {
value: currentTeam?.ttl?.email,
Expand All @@ -97,8 +103,29 @@ export default function UpdateTeamModal({
value: currentTeam?.cohort?.name,
label: currentTeam?.cohort?.name || 'no cohort assigned',
});
setValue('manager', {
value: currentTeam?.manager?.email,
label:
currentTeam?.manager?.email || currentTeam?.cohort?.coordinator?.email,
});
setValue('phase', {
value: currentTeam?.phase?.name
? currentTeam?.phase?.name
: currentTeam?.cohort?.phase?.name,
label: currentTeam?.phase?.name
? currentTeam?.phase?.name
: currentTeam?.cohort?.phase?.name || 'no phase assigned',
});
// setValue('phase', currentTeam?.phase);
setValue('program', {
value: currentTeam?.program?.name
? currentTeam?.program?.name
: currentTeam?.cohort?.program?.name,
label: currentTeam?.program?.name
? currentTeam?.program?.name
: currentTeam?.cohort?.program?.name || 'no program assigned',
});
}, [currentTeam, updateTeamModal]);

return (
<div
className={`h-screen w-screen bg-black fixed top-0 left-0 bg-opacity-30 backdrop-blur-sm flex items-center justify-center z-20 overflow-auto p-4 ${
Expand All @@ -111,54 +138,50 @@ export default function UpdateTeamModal({
<h3 className="w-11/12 text-sm font-bold text-center uppercase dark:text-white">
{t('Update Team')}
</h3>
<hr className="w-full my-3 border-b bg-primary" />
<hr className="w-full my-3 border-b bg-primary" />
</div>
<div className="card-body">
<form className="px-8 py-3 ">
<div className="my-5 input h-9 ">
<div className="flex items-center w-full h-full rounded-md grouped-input">
<input
type="text"
className="w-full px-5 py-2 font-sans text-xs border rounded outline-none border-primary dark:bg-dark-frame-bg dark:text-white"
placeholder={t('name')}
{...register('name')}
/>
</div>
{/* Team Name */}
<div className="my-5 input h-9">
<input
type="text"
className="w-full px-5 py-2 font-sans text-xs border rounded outline-none border-primary dark:bg-dark-frame-bg dark:text-white"
placeholder={t('name')}
{...register('name')}
/>
{errors?.name && (
<p className="font-thin text-[12px] text-red-300">
{errors?.name?.message?.toString()}
</p>
)}
</div>
{/* TTL Email */}
<div className="my-5 input h-9">
<div className="flex items-center w-full h-full rounded-md grouped-input">
<ControlledSelect
placeholder={t('email')}
register={{
control,
name: 'TTL',
rules: {
required: `${t('The ttl email is required')}`,
},
}}
options={
data?.getAllUsers
?.filter((user: any) => user.role === 'ttl')
?.map((user: any) => ({
value: user.email,
label: user.email,
})) ?? []
}
/>
</div>
{errors?.ttlEmail && (
<ControlledSelect
placeholder={t('email')}
register={{
control,
name: 'TTL',
rules: { required: `${t('The ttl email is required')}` },
}}
options={
data?.getAllUsers
?.filter((user: any) => user.role === 'ttl')
?.map((user: any) => ({
value: user.email,
label: user.email,
})) ?? []
}
/>
{errors?.TTL && (
<p className="font-thin text-[12px] text-red-300">
{errors?.ttlEmail?.message?.toString()}
{errors?.TTL?.message?.toString()}
</p>
)}
</div>

<div className="my-5 input h-9 ">
{/* Cohort */}
<div className="my-5 input h-9">
<ControlledSelect
placeholder={t('Choose a Cohort')}
register={{
Expand All @@ -171,13 +194,72 @@ export default function UpdateTeamModal({
label: name,
}))}
/>
{errors?.programName && (
{errors?.cohort && (
<p className="font-thin text-[12px] text-red-300">
{errors?.cohort?.message?.toString()}
</p>
)}
</div>
{/* Manager */}
<div className="my-5 input h-9">
<ControlledSelect
placeholder={t('Manager')}
register={{
control,
name: 'manager',
rules: { required: `${t('Manager is required')}` },
}}
options={
data?.getAllUsers
?.filter((user: any) => user.role === 'coordinator')
?.map((user: any) => ({
value: user.email,
label: user.email,
})) ?? []
}
/>
{errors?.manager && (
<p className="font-thin text-[12px] text-red-300">
{errors?.programName?.message?.toString()}
{errors?.manager?.message?.toString()}
</p>
)}
</div>
{/* Phase */}

<div className="my-5 input h-9">
<ControlledSelect
placeholder={t('Phases')}
register={{
control,
name: 'phase', // Ensure this matches your backend mutation variable
rules: { required: `${t('Phase is required')}` },
}}
options={data?.getAllPhases?.map(({ id, name }) => ({
value: id,
label: name,
}))}
/>
</div>
{/* Program */}
<div className="my-5 input h-9">
<ControlledSelect
placeholder={t('Program')}
register={{
control,
name: 'program',
rules: { required: `${t('Program is required')}` },
}}
options={data?.getAllPrograms?.map(({ name }) => ({
value: name,
label: name,
}))}
/>
{errors?.program && (
<p className="font-thin text-[12px] text-red-300">
{errors?.program?.message?.toString()}
</p>
)}
</div>
<div className="flex justify-between w-full">
<Button
variant="info"
Expand All @@ -190,18 +272,17 @@ export default function UpdateTeamModal({
}}
disabled={loading}
>
{' '}
{t('Cancel')}
</Button>
<Button
variant="primary"
size="sm"
style="w-[30%] md:w-1/4 text-sm font-sans p-0"
style="w-[30%] md:w-1/4 text-sm font-sans"
data-testid="updateTeam"
onClick={handleSubmit(updateTeam)}
loading={loading}
data-testid="confirmUpdateBtn"
disabled={loading}
>
{' '}
{t('Save')}
</Button>
</div>
Expand Down

0 comments on commit 2ee5ca1

Please sign in to comment.