Skip to content

#575 Move client-side attendance logic to server #596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 5, 2024
Merged

#575 Move client-side attendance logic to server #596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 82 additions & 26 deletions src/components/ModalAttendance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,18 @@ import { useMutation } from '@apollo/client';
import { format } from 'date-fns';
import { RECORD_ATTENDANCE } from '../Mutations/Attendance';
import AttendanceSymbols from './AttendanceSymbols';
import { AttendanceDataInterface } from '../pages/TraineeAttendanceTracker';
import {
AttendanceDataInterface,
UserInterface,
} from '../pages/TraineeAttendanceTracker';

interface ModalProps {
isVisible: boolean;
onClose: () => void;
setAttendanceData: React.Dispatch<
React.SetStateAction<AttendanceDataInterface | undefined>
>;
trainees: any;
trainees: UserInterface[];
week: number;
date: string;
dayType: 'today' | 'yesterday' | 'others';
Expand Down Expand Up @@ -41,7 +44,7 @@ function ModalAttendance({
team,
teamName,
}: ModalProps) {
const [allTrainees, setAllTrainees] = useState<any[]>([]);
const [allTrainees, setAllTrainees] = useState<(UserInterface & {recorded: boolean})[]>([]);
const [filteredTrainees, setFilteredTrainees] = useState<any[]>([]);
const [searchName, setSearchName] = useState('');
const [inputFocus, setInputFocus] = useState(false);
Expand Down Expand Up @@ -88,20 +91,29 @@ function ModalAttendance({

useEffect(() => {
if (trainees) {
const sanitizedTrainees = trainees.filter(
(trainee: any) => trainee.status.status !== 'drop',
);
const sanitizedTrainees = trainees
.map((trainee: UserInterface) => ({ ...trainee, recorded: false }))
.filter((trainee: any) => trainee.status.status !== 'drop');
setAllTrainees(sanitizedTrainees);
}
}, [trainees]);
useEffect(() => {
setFilteredTrainees(
allTrainees.filter((trainee) =>
trainee.profile.name.toLowerCase().includes(searchName.toLowerCase()),
trainee.profile.name
.toLowerCase()
.includes(searchName.trim().toLowerCase()),
),
);
}, [allTrainees, searchName]);

useEffect(() => {
traineesAttendance.length &&
setFilteredTrainees(
allTrainees.sort((a, b) => Number(a.recorded) - Number(b.recorded)),
);
}, [traineesAttendance]);

if (!isVisible) return null;

const handleGiveAttendance = (name: string, score: number, id: string) => {
Expand All @@ -117,6 +129,15 @@ function ModalAttendance({
return attendance;
});
} else {
setFilteredTrainees(
allTrainees.map((trainee, index) => {
if (trainee.id === id) {
allTrainees[index].recorded = true;
return { ...trainee, recorded: true };
}
return trainee;
}),
);
updatedAttendance = [...traineesAttendance, { name, score, id }];
}

Expand All @@ -137,27 +158,52 @@ function ModalAttendance({
}));

setRecordTrainees(updatedRecords);
setFilteredTrainees(
allTrainees.map((trainee, index) => {
allTrainees[index].recorded = false;
return { ...trainee, recorded: false };
}),
);
};

return (
<div className="fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50 p-4">
<div className="bg-[#FFFFFF] dark:bg-[#020917] md:w-[500px] rounded-lg w-96 px-5 py-4 xmd:p-6 shadow-lg flex flex-col gap-3 text-[#111827] dark:text-white">
<div className="w-full">
<div className="w-full flex flex-col gap-3">
<div className="w-full flex flex-col gap-4">
<h2 className="text-[1.1rem] xmd:text-xl font-bold text-center text-purple-400 mb-2">
Take Attendance
</h2>
<div className="flex justify-between">
<h3 className="font-semibold text-[.85rem] xmd:text-[.95rem] ">
Week {week}
</h3>
<p className="text-sm">
{format(new Date(date), 'EE, do MMMM yyyy')}
<div className="flex flex-col justify-between text-[.85rem] xmd:text-[.9rem] md:text-[.95rem]">
<p className="">
<span className="font-semibold">Week&nbsp;:&nbsp;</span>
<span className="text-[.82rem] xmd:text-[.86rem] md:text-[.9rem] font-light">
{week}
</span>
</p>
<p className="">
<span className="font-semibold">Team&nbsp;:&nbsp;</span>
<span className="text-[.82rem] xmd:text-[.86rem] md:text-[.9rem] font-light capitalize">
{teamName}
</span>
</p>
<p>
<span className="font-semibold">Date&nbsp;:&nbsp;</span>
<span
className="text-[.82rem] xmd:text-[.86rem] md:text-[.9rem] font-light"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: format(new Date(date), 'EEEE, do MMM yyyy').replace(
/(st|nd|rd|th)\b/,
(match) => `<sup>${match}</sup>`,
),
}}
/>
</p>
</div>

<div className="flex flex-col gap-2">
<p className="font-semibold text-[..84rem] xmd:text-[.95rem]">
<p className="font-semibold text-[..84rem] xmd:text-[.9rem] md:text-[.95rem]">
Trainees:
</p>
<div className="w-full min-h-[40px] max-h-[110px] overflow-auto custom-scrollbar">
Expand Down Expand Up @@ -195,15 +241,15 @@ function ModalAttendance({
))}
</div>
) : (
<p className="text-center text-[.83rem] xmd:text-[.9rem] font-medium">
<p className="pl-5 text-[.83rem] xmd:text-[.88rem] font-light">
No trainee given attendance.
</p>
)}
</div>
</div>

<div className="mt-4">
<label className="block text-[.86rem] xmd:text-[.95rem] font-medium">
<label className="block text-[.86rem] xmd:text-[.9rem] md:text-[.95rem] font-medium">
Trainee Name
</label>
<div className="flex">
Expand All @@ -216,21 +262,25 @@ function ModalAttendance({
onChange={(e) => {
setSearchName(e.target.value);
}}
className="placeholder:text-neutral-600 dark:placeholder:text-neutral-400 text-[.82rem] xmd:text-sm bg-gray-200 dark:bg-gray-700 w-full py-[5px] px-3 rounded-[2px] focus:outline-none focus:ring-1 focus:ring-purple-500"
className="placeholder:text-neutral-600 dark:placeholder:text-neutral-400 text-[.82rem] xmd:text-[.85rem] bg-gray-300 dark:bg-gray-700 w-full py-[6px] px-3 rounded-[2px] focus:outline-none focus:ring-1 focus:ring-purple-500"
placeholder="Find trainee by name"
/>

<div className="min-h-[100px]">
{inputFocus && (
<div className="bg-[#EDF2EE] dark:bg-[#202B3E] z-20 left-0 right-0 w-full max-h-[100px] overflow-y-auto p-2 flex flex-col gap-1 custom-scrollbar">
{filteredTrainees.length === 0 ? (
<p className="text-[.78rem] xmd:text-sm">{`No trainee found in team ${teamName}.`}</p>
<div className="bg-[#c4c4c4] dark:bg-[#202B3E] z-20 left-0 right-0 w-full max-h-[100px] overflow-y-auto py-1 px-2 flex flex-col gap-1 custom-scrollbar">
{!filteredTrainees.length ? (
<p className="text-[.78rem] xmd:text-[.83rem] py-2 px-1">{`No trainee found in team ${teamName}.`}</p>
) : (
filteredTrainees.map((trainee) => (
<div
key={trainee.email}
onMouseDown={(e) => e.preventDefault()}
className="flex items-center border-[#858585] border-b-[1px] py-[2px] xmd:py-1"
className={`${
trainee.recorded
? 'brightness-[.6] text-neutral-500 dark:text-white'
: ''
} flex items-center border-[#858585] border-b-[1px] py-[2px] xmd:py-1 px-2`}
>
<p className="flex-1 text-[.83rem] xmd:text-sm">
{trainee.profile.name}
Expand Down Expand Up @@ -291,24 +341,30 @@ function ModalAttendance({
</div>
</div>

<div className="mt-3 flex justify-between text-[.9rem] xmd:text-[.95rem]">
<div className="mt-3 flex justify-between text-[.92rem] xmd:text-[.95rem] leading-6 font-medium">
<button
type="button"
onClick={() => {
setFilteredTrainees(
allTrainees.map((trainee, index) => {
allTrainees[index].recorded = false;
return { ...trainee, recorded: false };
}),
);
setTraineesAttendance([]);
onClose();
}}
className="bg-gray-500 text-white py-[4px] xmd:py-[6px] px-4 rounded-[4px] hover:bg-gray-600"
className="bg-gray-500 text-white py-[4px] xmd:py-[5px] px-4 rounded-[4px] hover:bg-gray-600"
>
Cancel
</button>
<button
type="submit"
disabled={traineesAttendance.length === 0}
className={`py-[4px] xmd:py-[6px] px-4 rounded-[4px] ${
className={`py-[4px] xmd:py-[5px] px-4 rounded-[4px] ${
traineesAttendance.length === 0 || loadingRecordAttendance
? 'bg-gray-300 text-gray-800 cursor-not-allowed'
: 'bg-purple-500 text-white hover:bg-purple-600'
: 'bg-primary text-white hover:bg-primary/90'
}`}
onClick={() => {
handleSubmitAttendance();
Expand Down
1 change: 0 additions & 1 deletion src/containers/admin-dashBoard/Sessions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,6 @@ function AdminSission() {
getSessionRefetch();
})
.catch((error) => {});
// console.log("------",id)
}
};

Expand Down
1 change: 0 additions & 1 deletion src/pages/Organization/Orglogin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ function Orglogin() {
}
};
const names = name.replace(/ /gi, '').toLowerCase();
// console.log(names)
const completeOrgUrl = `${names}`;

return (
Expand Down
Loading
Loading