Skip to content

Commit

Permalink
Change attendance table
Browse files Browse the repository at this point in the history
  • Loading branch information
@rukundo-kevin
rukundo-kevin committed Oct 11, 2023
1 parent b462c72 commit 269a415
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 110 deletions.
12 changes: 10 additions & 2 deletions src/Mutations/Attendance.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { gql } from '@apollo/client';

export const GET_ATTENDANCE = gql`
query ExampleQuery {
getTraineeAttendance {
query ExampleQuery($orgToken: String!) {
getTraineeAttendance(orgToken: $orgToken) {
id
trainees {
traineeId
Expand All @@ -17,6 +17,14 @@ export const GET_ATTENDANCE = gql`
}
`;

export const GET_TRAINEE_ATTENDANCE = gql`
query getTraineeAttendance($orgToken: String!) {
getAllTeams(orgToken: $orgToken) {
id
}
}
`;

export const UPDATE_ATTENDANCE = gql`
mutation RecordAttendance(
$week: String!
Expand Down
28 changes: 27 additions & 1 deletion src/components/TraineeAttendance.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,29 @@
/* eslint-disable */
import React from 'react';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import Pagination from '../components/Pagination';
import AttendanceData from '../dummyData/attendance.json';
import useDocumentTitle from '../hook/useDocumentTitle';
import Button from './Buttons';
import { useLazyQuery, useQuery } from '@apollo/client';
import { GET_ATTENDANCE, GET_TRAINEE_ATTENDANCE } from '../Mutations/Attendance';
import { toast } from 'react-toastify';

const TraineeAttendance = () => {
useDocumentTitle('Attendance');
const { t } = useTranslation();
const { loading, data } = useQuery(GET_ATTENDANCE, {
variables: {
orgToken: localStorage.getItem('orgToken'),
},
});

const [getAttend] = useLazyQuery(GET_ATTENDANCE, {
variables: {
orgToken: localStorage.getItem('orgToken'),
},
});

const {
firstContentIndex,
Expand All @@ -25,6 +39,18 @@ const TraineeAttendance = () => {
count: AttendanceData.length,
});

useEffect(() => {
getAttend({
fetchPolicy: 'network-only',
onCompleted: (data) => {
console.log(data)
},
onError: (error) => {
toast.error(error.message);
},
});
}, [ loading]);

return (
<>
<div className="bg-light-bg dark:bg-dark-frame-bg">
Expand Down
223 changes: 116 additions & 107 deletions src/components/TraineeAttendanceDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,128 +4,137 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import Button from './Buttons';

interface Details {
session: string;
record: string;
comment: string;
id: number;
}

const attendanceDetailsData = [
{
id: 1,
session: 'Demo',
record: '1',
comment:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam ',
},
{
id: 1,
session: 'Stand Up',
record: '1',
comment:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam ',
},
];

const TraineeAttendanceDetails = () => {
const { t } = useTranslation();
return (
<div>
<div className="bg-neutral-100 dark:bg-dark-frame-bg md:flex sm:hidden flex-col justify-start items-center">
<table className="dark:bg-dark-bg shadow-lg py-8 rounded-md">
<thead>
<tr className="text-gray-300 bg-gray-100 dark:bg-dark-tertiary">
<th className="lg:py-3 md:py-2 lg:px-3 md:px-2 text-left text-[#6B7280] dark:text-dark-text-fill ">
{t('Session')}
</th>
<th className="lg:py-3 md:py-2 lg:px-10 md:px-7 text-center text-[#6B7280] dark:text-dark-text-fill">
{t('Record')}
</th>
<th className="lg:py-3 md:py-2 text-left text-[#6B7280] dark:text-dark-text-fill">
{t('Comment')}
</th>
<th className="lg:py-3 md:py-2"></th>
</tr>
</thead>
<tbody className=" text-center ">
<tr className="text-light-text dark:text-dark-text-fill bg-light-bg dark:bg-dark-bg ">
<td className="lg:py-10 md:py-0 px-10 text-left ">
{t('Demo')}
</td>
<td className="py-3 ">1</td>
<td className="lg:py-6 md:py-3 text-start lg:text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam
</td>
const [replyModal, setReplyModal] = React.useState(false);
const handleReplyModal = () => setReplyModal(!replyModal);

<td className="py-3 px-8">
<Button variant="primary" size="sm" style="px-4 py-0 text-sm">
{t('Reply')}
</Button>
</td>
</tr>
<tr className="text-black dark:text-dark-text-fill bg-gray-100 dark:bg-dark-tertiary ">
<td className="py-10 px-10 text-left">{t('Standup')}</td>
<td className="py-3 ">1</td>
<td className="py-3 text-start text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam
</td>
<td className="py-3 ">
<Button variant="primary" size="sm" style="px-4 py-0 text-sm">
{t('Reply')}
</Button>
</td>
</tr>
</tbody>
</table>
</div>
<div className="sm:flex sm:flex-col md:hidden justify-center items-center bg-light-bg dark:bg-dark-frame-bg dark:text-white text-black">
<div className="flex flex-col justify-center items-start w-full py-4 px-4 ml-4 mt-4">
<h2 className="font-semibold mt-12 "> {t('Sprint 1')}</h2>
<h3 className="font-medium text-left text-[#6B7280] dark:text-white ">
June 20, 2022 - June 24, 2022
</h3>
return (
<>
{/* ATTENDANCE REPLY MODAL START */}
<div
className={`h-screen w-screen bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 z-20 flex items-center justify-center px-4 ${
replyModal === true ? 'block' : 'hidden'
}`}
>
<div className="bg-indigo-100 dark:bg-dark-bg w-full sm:w-3/4 md:w-1/2 xl:w-4/12 rounded-lg p-4 pb-8">
<div className="card-title w-full flex flex-wrap justify-center items-center ">
<h3 className="font-bold text-sm dark:text-white text-center w-11/12">
{t('Reply to attendance')}
</h3>
<hr className=" bg-primary border-gray-300 my-3 w-full" />
</div>
<div className="card-body">
{/* istanbul ignore next */}
<form data-testid="handleAddEvent" className=" py-3 px-8">
<div className="py-4">
<label
htmlFor="reply"
className="block text-sm font-semibold text-gray-700"
>
{
t('Reply')
}
</label>
<textarea
id="reply"
name="reply"
rows={3}
className="w-full border border-gray-300 rounded-md px-3 py-2 outline-none focus:ring-1 focus:ring-blue-500"
placeholder= {
`${t('Reply')}...`
}
/>
</div>
<div className="w-full flex justify-between">
<button
data-testid="removeModel"
className="py-2 w-[40%] md:w-1/3 bg-violet-400 rounded font-sans text-sm text-white"
onClick={handleReplyModal}
>
{t('cancel')}
</button>
<button className="text-white py-2 w-[40%] md:w-1/3 bg-primary rounded">
{t('save')}
</button>
</div>
</form>
</div>
</div>
<div className="flex flex-col justify-center items-center w-11/12 border shadow rounded-lg dark:border-dark-frame-bg bg-white dark:bg-dark-bg pb-4 mt-4 pt-16">
<table className=" rounded-lg w-7/12 h-[70%] overflow-hidden md:shadow mt-[-40px]">
</div>

{/* ATTENDANCE REPLY MODAL END */}
<div>
<div className="bg-neutral-100 dark:bg-dark-frame-bg md:flex sm:hidden flex-col justify-start items-center">
<table className="dark:bg-dark-bg shadow-lg py-8 rounded-md">
<thead>
<tr className="text-gray-300 dark:text-white bg-gray-100 dark:bg-dark-tertiary ">
<th className="py-2 px-3 text-center text-[#6B7280] dark:text-dark-text-fill ">
<tr className="text-gray-300 bg-gray-100 dark:bg-dark-tertiary">
<th className="lg:py-3 md:py-2 lg:px-3 md:px-2 text-left text-[#6B7280] dark:text-dark-text-fill ">
{t('Session')}
</th>
<th className="py-2 px-10 text-center text-[#6B7280] dark:text-dark-text-fill">
{t('Demo')}
</th>
</tr>
</thead>
<tbody className=" text-center">
<tr className="text-light-text bg-light-bg dark:bg-dark-bg dark:text-dark-text-fill ">
<td className="py-3 px-10">{t('Record')}</td>
<td className=" ">1</td>
</tr>
<tr className="text-black bg-gray-100 dark:bg-dark-tertiary dark:text-dark-text-fill ">
<td className="py-10 px-10 text-left">{t('Comments')}</td>
<td className="py-3 text-start text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</td>
</tr>
</tbody>
</table>
<button className="px-4 py-1 ml-40 mt-4 rounded-md dark:text-dark-text-fill text-center bg-primary text-white text-sm">
{t('Reply')}
</button>
</div>
<div className="flex flex-col justify-center items-center w-11/12 border shadow rounded-lg dark:border-dark-frame-bg bg-white dark:bg-dark-bg pb-4 mt-4 pt-16">
<table className=" rounded-lg w-7/12 h-[70%] overflow-hidden md:shadow mt-[-40px]">
<thead>
<tr className="text-gray-300 dark:text-dark-text-fill bg-gray-100 dark:bg-dark-tertiary">
<th className="py-2 px-3 text-center text-[#6B7280] dark:text-dark-text-fill ">
{t('Session')}
<th className="lg:py-3 md:py-2 lg:px-10 md:px-7 text-center text-[#6B7280] dark:text-dark-text-fill">
{t('Record')}
</th>
<th className="py-2 px-10 text-center text-[#6B7280] dark:text-dark-text-fill">
{t('Standup')}
<th className="lg:py-3 md:py-2 text-left text-[#6B7280] dark:text-dark-text-fill">
{t('Comment')}
</th>
<th className="lg:py-3 md:py-2"></th>
</tr>
</thead>
<tbody className=" text-center">
<tr className="text-light-text bg-light-bg dark:bg-dark-bg dark:text-dark-text-fill ">
<td className="py-3 px-10">{t('Record')}</td>
<td className=" ">1</td>
</tr>
<tr className="text-black bg-gray-100 dark:bg-dark-tertiary dark:text-dark-text-fill ">
<td className="py-10 px-10 text-left">{t('Comments')}</td>
<td className="py-3 text-start text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</td>
</tr>
<tbody className=" text-center ">
{attendanceDetailsData.map(
({ session, record, comment }: Details) => (
<tr className="text-light-text dark:text-dark-text-fill bg-light-bg dark:bg-dark-bg ">
<td className="lg:py-10 md:py-0 px-10 text-left ">
{t(session)}
</td>
<td className="py-3 ">{record}</td>
<td className="lg:py-6 md:py-3 text-start lg:text-sm">
{t(comment)}
</td>

<td className="py-3 px-8">
<Button
variant="primary"
size="sm"
style="px-4 py-0 text-sm"
onClick={handleReplyModal}
>
{t('Reply')}
</Button>
</td>
</tr>
),
)}
</tbody>
</table>
<button className="px-4 py-1 ml-40 mt-4 rounded-md dark:text-dark-text-fill text-center bg-primary text-white text-sm">
{t('Reply')}
</button>
</div>
</div>
</div>
</>
);
};

Expand Down

0 comments on commit 269a415

Please sign in to comment.