From edb1a0f3f6e651aeae088e63d1ba95ff16a59107 Mon Sep 17 00:00:00 2001
From: RWEMAREMY <rwemaremy21@gmail.com>
Date: Wed, 11 Sep 2024 15:51:48 +0200
Subject: [PATCH] advancing calender functionality

---
 src/components/Calendar.tsx | 234 +++++++++++++++++++++++++-----------
 1 file changed, 164 insertions(+), 70 deletions(-)

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index da7d6707..f0fea7b0 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -13,6 +13,12 @@ import { ADD_EVENT, GET_EVENTS } from '../Mutations/event';
 import moment from 'moment';
 /* istanbul ignore next */
 
+type Trainee = {
+  id: number;
+  name: string;
+  role: 'admin' | 'manager' | 'trainee';
+};
+
 const Calendar = () => {
   useDocumentTitle('Calendar');
   const [addEventModel, setAddEventModel] = useState(false);
@@ -27,6 +33,21 @@ const Calendar = () => {
   const [data, setData] = useState<EventInput[]>([]);
   const [getEvents] = useLazyQuery(GET_EVENTS);
   const [createEvent] = useMutation(ADD_EVENT);
+  const [showTraineeDropdown, setShowTraineeDropdown] = useState(false);
+  const [trainees, setTrainees] = useState<Trainee[]>([
+    { id: 1, name: 'John Doe', role: 'admin' },
+    { id: 2, name: 'Jane Smith', role: 'manager' },
+    { id: 3, name: 'Bob Johnson', role: 'trainee' },
+    { id: 4, name: 'Alice Brown', role: 'trainee' },
+    { id: 5, name: 'Charlie Green', role: 'manager' },
+    { id: 6, name: 'Diana White', role: 'trainee' },
+    { id: 7, name: 'Ethan Black', role: 'admin' },
+    { id: 8, name: 'Fiona Blue', role: 'manager' },
+    { id: 9, name: 'George Gray', role: 'trainee' },
+    { id: 10, name: 'Hannah Purple', role: 'trainee' },
+  ]);
+  const [selectedTrainees, setSelectedTrainees] = useState<number[]>([]);
+
   useEffect(() => {
     const fetchData = async () => {
       /* istanbul ignore next */
@@ -52,26 +73,24 @@ const Calendar = () => {
     };
     fetchData();
   }, []);
+
   const { t } = useTranslation();
-  const renderEvent =
-    /* istanbul ignore next */
 
-    (e: EventContentArg) => (
-      /* istanbul ignore next */
-      <div
-        data-html={true}
-        data-tip={`<div>${e.event.title}<br> ${e.event.extendedProps.hostName}  <br> ${e.event.extendedProps.timeToStart} - ${e.event.extendedProps.timeToFinish}</div> `}
-        className="bg-primary text-white max-w-full min-w-full overflow-auto text-xs md:text-sm"
-      >
-        <p className="px-3 py-1 ">{e.event.title}</p>
-        <p className="px-3 py-1 ">{e.event.extendedProps.hostName}</p>
-        <p className="px-3 py-1 ">
-          {e.event.extendedProps.timeToStart} -{' '}
-          {e.event.extendedProps.timeToFinish}
-        </p>
-        <ReactTooltip data-html={true} />
-      </div>
-    );
+  const renderEvent = (e: EventContentArg) => (
+    <div
+      data-html={true}
+      data-tip={`<div>${e.event.title}<br> ${e.event.extendedProps.hostName}  <br> ${e.event.extendedProps.timeToStart} - ${e.event.extendedProps.timeToFinish}</div> `}
+      className="bg-primary text-white max-w-full min-w-full overflow-auto text-xs md:text-sm"
+    >
+      <p className="px-3 py-1 ">{e.event.title}</p>
+      <p className="px-3 py-1 ">{e.event.extendedProps.hostName}</p>
+      <p className="px-3 py-1 ">
+        {e.event.extendedProps.timeToStart} -{' '}
+        {e.event.extendedProps.timeToFinish}
+      </p>
+      <ReactTooltip data-html={true} />
+    </div>
+  );
 
   const removeModel = (e: any) => {
     e.preventDefault();
@@ -83,7 +102,6 @@ const Calendar = () => {
     const newState = !addEventModel;
     setAddEventModel(newState);
   };
-  /* istanbul ignore next */
 
   const handleAddEvent = (e: any) => {
     e.preventDefault();
@@ -104,12 +122,33 @@ const Calendar = () => {
     }, 1000);
   };
 
+  const handleAddGuest = (traineeId: number) => {
+    setSelectedTrainees((prev) =>
+      prev.includes(traineeId)
+        ? prev.filter((id) => id !== traineeId)
+        : [...prev, traineeId],
+    );
+  };
+
+  const getRoleClass = (role: Trainee['role']) => {
+    switch (role) {
+      case 'admin':
+        return 'bg-red-500';
+      case 'manager':
+        return 'bg-yellow-500';
+      case 'trainee':
+        return 'bg-green-500';
+      default:
+        return 'bg-gray-500';
+    }
+  };
+
   return (
     <>
-      {/* =========================== Start::  RegisterTraineeModel =========================== */}
       <div
-        className={`font-serif 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 ${addEventModel === true ? 'block' : 'hidden'
-          }`}
+        className={`font-serif 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 ${
+          addEventModel === 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  ">
@@ -119,14 +158,10 @@ const Calendar = () => {
             <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"
-              onSubmit /* istanbul ignore next */={(e) =>
-                /* istanbul ignore next */
-                handleAddEvent(e)
-              }
+              className=" py-3 px-8 overflow-y-auto h-full "
+              onSubmit={(e) => handleAddEvent(e)}
             >
               <div className="input my-3 h-9 ">
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
@@ -137,7 +172,6 @@ const Calendar = () => {
                     className=" dark:bg-dark-tertiary border dark:text-white border-primary rounded outline-none px-5 font-sans text-xs py-2 w-full"
                     placeholder={t('Event title')}
                     value={newEvent.title}
-                    // eslint-disable-next-line prettier/prettier
                     onChange={(e) =>
                       setNewEvent({ ...newEvent, title: e.target.value })
                     }
@@ -153,11 +187,11 @@ const Calendar = () => {
                     className=" dark:bg-dark-tertiary dark:text-white border border-primary rounded outline-none px-5 font-sans text-xs py-2 w-full"
                     placeholder={t('Host name')}
                     value={newEvent.hostName}
-                    onChange /* istanbul ignore next */={(e) =>
-                      /* istanbul ignore next */ setNewEvent({
-                      ...newEvent,
-                      hostName: e.target.value,
-                    })
+                    onChange={(e) =>
+                      setNewEvent({
+                        ...newEvent,
+                        hostName: e.target.value,
+                      })
                     }
                   />
                 </div>
@@ -170,11 +204,11 @@ const Calendar = () => {
                     placeholderText={t('Start Date')}
                     style={{ marginRight: '10px' }}
                     selected={newEvent.start}
-                    onChange /* istanbul ignore next */={(start: any) =>
-                      /* istanbul ignore next */ setNewEvent({
-                      ...newEvent,
-                      start,
-                    })
+                    onChange={(start: any) =>
+                      setNewEvent({
+                        ...newEvent,
+                        start,
+                      })
                     }
                   />
                 </div>
@@ -187,43 +221,104 @@ const Calendar = () => {
                     placeholderText={t('End Date')}
                     style={{ marginRight: '10px' }}
                     selected={newEvent.end}
-                    onChange=/* istanbul ignore next */ {(end: any) =>
-                      /* istanbul ignore next */
-                      setNewEvent({ ...newEvent, end })
-                    }
+                    onChange={(end: any) => setNewEvent({ ...newEvent, end })}
                   />
                 </div>
               </div>
 
-              <div className="input my-3 h-9 ">
-                <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <input
-                    type="time"
-                    name="hostName"
-                    className="dark:bg-dark-tertiary dark:text-white border border-primary rounded outline-none px-5 font-sans text-xs py-2 w-full"
-                    placeholder={t('Start time')}
-                    value={newEvent.timeToStart}
-                    onChange /* istanbul ignore next */={(e) =>
-                      /* istanbul ignore next */
-                      setNewEvent({ ...newEvent, timeToStart: e.target.value })
-                    }
-                  />
+              <div className="input my-3">
+                <div className="flex space-x-2">
+                  <div className="w-1/2">
+                    <input
+                      type="time"
+                      name="startTime"
+                      className="dark:bg-dark-tertiary dark:text-white border border-primary rounded outline-none px-3 font-sans text-xs py-2 w-full"
+                      placeholder={t('Start time')}
+                      value={newEvent.timeToStart}
+                      onChange={(e) =>
+                        setNewEvent({
+                          ...newEvent,
+                          timeToStart: e.target.value,
+                        })
+                      }
+                    />
+                  </div>
+                  <div className="w-1/2">
+                    <input
+                      type="time"
+                      name="endTime"
+                      className="dark:bg-dark-tertiary dark:text-white border border-primary rounded outline-none px-3 font-sans text-xs py-2 w-full"
+                      placeholder={t('End time')}
+                      value={newEvent.timeToFinish}
+                      onChange={(e) =>
+                        setNewEvent({
+                          ...newEvent,
+                          timeToFinish: e.target.value,
+                        })
+                      }
+                    />
+                  </div>
                 </div>
               </div>
 
-              <div className="input my-3 h-9 ">
-                <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <input
-                    type="time"
-                    name="hostName"
-                    className="dark:bg-dark-tertiary dark:text-white border border-primary rounded outline-none px-5 font-sans text-xs py-2 w-full"
-                    placeholder={t('End time')}
-                    value={newEvent.timeToFinish}
-                    onChange=/* istanbul ignore next */ {(e) =>
-                      /* istanbul ignore next */
-                      setNewEvent({ ...newEvent, timeToFinish: e.target.value })
-                    }
-                  />
+              <div className="input my-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm mb-2">{t('Add guests')}</span>
+                  <button
+                    type="button"
+                    className="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mb-2"
+                    onClick={() => setShowTraineeDropdown(!showTraineeDropdown)}
+                  >
+                    {showTraineeDropdown ? '-' : '+'}
+                  </button>
+                </div>
+                {showTraineeDropdown && (
+                  <div className="dark:bg-dark-tertiary dark:text-white mt-2 p-2 border border-primary rounded-md h-40 overflow-y-auto">
+                    {trainees.map((trainee) => (
+                      <div key={trainee.id} className="flex items-center mb-2">
+                        <input
+                          type="checkbox"
+                          id={`trainee-${trainee.id}`}
+                          checked={selectedTrainees.includes(trainee.id)}
+                          onChange={() => handleAddGuest(trainee.id)}
+                          className="mr-2"
+                        />
+                        <label
+                          htmlFor={`trainee-${trainee.id}`}
+                          className="flex items-center"
+                        >
+                          <span
+                            className={`w-2 h-2 rounded-full  ${getRoleClass(
+                              trainee.role,
+                            )} mr-2`}
+                          ></span>
+                          {trainee.name} ({trainee.role})
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                <div className="dark:bg-dark-tertiary dark:text-white mt-2 p-2 border border-primary rounded-md min-h-[40px] ">
+                  {selectedTrainees.map((id) => {
+                    const trainee = trainees.find((t) => t.id === id);
+                    if (!trainee) return null;
+                    return (
+                      <span
+                        key={id}
+                        className={`inline-block ${getRoleClass(
+                          trainee.role,
+                        )} text-white rounded-full px-2 py-1 text-xs mr-2 mb-2 relative`}
+                      >
+                        {trainee.name} ({trainee.role})
+                        <button
+                          onClick={() => handleAddGuest(id)}
+                          className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-xs hover:bg-red-600 text-center font-extrabold"
+                        >
+                          ×
+                        </button>
+                      </span>
+                    );
+                  })}
                 </div>
               </div>
 
@@ -243,7 +338,6 @@ const Calendar = () => {
           </div>
         </div>
       </div>
-      {/* =========================== End::  RegisterTraineeModel =============================== */}
 
       <div className="px-4 pb-20  w-full dark:bg-dark-frame-bg dark:text-white h-full overflow-y-scroll font-serif">
         <div className="w-full flex justify-center text-xl md:text-4xl dark:text-primary mb-10">