From 269a415938140f05fd5e2a5769d64cbbc54776e2 Mon Sep 17 00:00:00 2001
From: Rukundo Kevin <kevinrukundo1@gmail.com>
Date: Wed, 27 Sep 2023 15:38:02 +0200
Subject: [PATCH] Change attendance table

---
 src/Mutations/Attendance.tsx                |  12 +-
 src/components/TraineeAttendance.tsx        |  28 ++-
 src/components/TraineeAttendanceDetails.tsx | 223 ++++++++++----------
 3 files changed, 153 insertions(+), 110 deletions(-)

diff --git a/src/Mutations/Attendance.tsx b/src/Mutations/Attendance.tsx
index 6c76848ac..1f4806d98 100644
--- a/src/Mutations/Attendance.tsx
+++ b/src/Mutations/Attendance.tsx
@@ -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
@@ -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!
diff --git a/src/components/TraineeAttendance.tsx b/src/components/TraineeAttendance.tsx
index 81e5ecc23..e39ceec4a 100644
--- a/src/components/TraineeAttendance.tsx
+++ b/src/components/TraineeAttendance.tsx
@@ -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,
@@ -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">
diff --git a/src/components/TraineeAttendanceDetails.tsx b/src/components/TraineeAttendanceDetails.tsx
index 0f24046ea..c99712fa1 100644
--- a/src/components/TraineeAttendanceDetails.tsx
+++ b/src/components/TraineeAttendanceDetails.tsx
@@ -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>
+    </>
   );
 };