feat Create session functionality & design

src/Mutations/session.tsx

@@ -0,0 +1,57 @@
+import { gql } from '@apollo/client';
+
+// Query to get a single session by ID
+export const GET_SESSION = gql`
+  query GetSession($ID: ID!) {
+    getSession(id: $ID) {
+      id
+      Sessionname
+      description
+      platform
+      duration
+      organizer
+    }
+  }
+`;
+
+// Query to get a list of all sessions
+export const GET_SESSIONS = gql`
+  query GetSessions {
+    getAllSessions {
+      id
+      Sessionname
+      description
+      platform
+      duration
+      organizer
+    }
+  }
+`;
+
+// Mutation to create a new session
+export const CREATE_SESSION = gql`
+  mutation CreateSession($sessionInput: SessionInput) {
+    createSession(sessionInput: $sessionInput) {
+      id
+      Sessionname
+      description
+      platform
+      duration
+      organizer
+    }
+  }
+`;
+
+// Mutation to delete a session by ID
+export const DELETE_SESSION = gql`
+  mutation DeleteSession($ID: ID!) {
+    deleteSession(ID: $ID)
+  }
+`;
+
+// Mutation to edit/update a session by ID
+export const EDIT_SESSION = gql`
+  mutation EditSession($ID: ID!, $editSessionInput: EditSessionInput) {
+    editSession(id: $ID, editSessionInput: $editSessionInput)
+  }
+`;

src/containers/DashRoutes.tsx

@@ -76,6 +76,8 @@ const ManagersCards = React.lazy(() => import('../components/ManagerCard'));
 const CoordinatorCards = React.lazy(
   () => import('../components/CoordinatorCard'),
 );
+const AdminSission = React.lazy(() => import('./admin-dashBoard/Sessions'));
+
 
 
 function DashRoutes() {
@@ -122,7 +124,7 @@ function DashRoutes() {
             <Route path="/cohorts" element={<AdminCohorts />} />
             <Route path="/phases" element={<AdminPhases />} />
             <Route path="/programs" element={<AdminPrograms />} />
-            <Route path="/sessions" element={<AdminSession />} />
+            <Route path="/sessions" element={<AdminSission />} />
             <Route path="/manage" element={<AdminManageRoles />} />
             <Route path="/grading" element={<GradingSystem />} />
             <Route

src/containers/admin-dashBoard/Sessions.tsx

@@ -1,45 +1,162 @@
-/* eslint-disable */
 import { Icon } from '@iconify/react';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import DataTable from '../../components/DataTable';
-import Sidebar from '../../components/Sidebar';
-import SessionData from '../../dummyData/session.json';
 import useDocumentTitle from '../../hook/useDocumentTitle';
 import Button from './../../components/Buttons';
+import { gql, useQuery, useMutation } from '@apollo/client';
+
+// Define your GraphQL queries and mutations
+import {
+  GET_SESSIONS,
+  CREATE_SESSION,
+  DELETE_SESSION,
+  EDIT_SESSION,
+} from '../../Mutations/session';
+
+interface Session {
+  id: string;
+  Sessionname: string;
+  description: string;
+  platform: string;
+  duration: string;
+  organizer: string;
+}
 
 const AdminSission = () => {
   useDocumentTitle('Sessions');
   const { t } = useTranslation();
-
+  const [getSessionModel, setSessionModel] = useState<Session[]>([]);
+  const [addSessionModel, setAddSessionModel] = useState(false);
   const [deleteSessionModel, setDeleteSessionModel] = useState(false);
   const [updateTraineeModel, setUpdateTraineeModel] = useState(false);
-  const [addSessionModel, setAddSessionModel] = useState(false);
+  const [sessionToDelete, setSessionToDelete] = useState('');
 
-  const removeModel = () => {
-    let newState = !addSessionModel;
-    setAddSessionModel(newState);
+  const { loading, error, data } = useQuery(GET_SESSIONS);
+  useEffect(() => {
+    if (data) {
+      const allSessions = data.getAllSessions.map((session: any) => ({
+        id: session.id,
+        Sessionname: session.Sessionname,
+        description: session.description,
+        platform: session.platform,
+        duration: session.duration,
+        organizer: session.organizer,
+      }));
+
+      setSessionModel(allSessions);
+    }
+  }, [data]);
+
+
+  const [sessionInput, setSessionInput] = useState({
+    Sessionname: '',
+    description: '',
+    platform: '',
+    duration: '',
+    organizer: '',
+  });
+
+  const [createSession] = useMutation(CREATE_SESSION, {
+    onCompleted: (data) => {
+      setAddSessionModel(false);
+      setSessionInput({
+        Sessionname: '',
+        description: '',
+        platform: '',
+        duration: '',
+        organizer: '',
+      });
+    },
+    onError: (error) => { 
+      console.error('Error add session:', error);
+    }, });
+
+
+  const toggleAddSessionModel = () => {
+    setAddSessionModel(!addSessionModel);
   };
-  const removeDeleteModel = () => {
-    let newState = !deleteSessionModel;
-    setDeleteSessionModel(newState);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setSessionInput({ ...sessionInput, [name]: value });
   };
 
+  const handleSaveSession = () => {
+    // console.log('sessionInput:', sessionInput);
+    createSession({
+      variables: {
+        sessionInput: sessionInput,
+      },
+    });
+  };
+
+
+  const [deleteSession] = useMutation(DELETE_SESSION);
+  const handleDeleteSession = (sessionId: string) => {
+    setSessionToDelete(sessionId);
+    setDeleteSessionModel(true);
+  };
+
+  const handleConfirmDelete = () => {
+    deleteSession({
+      variables: {
+        ID: sessionToDelete,  // Use "ID" here instead of "id"
+      },
+    })
+      .then(() => {
+        setDeleteSessionModel(false);
+        setSessionToDelete('');
+      })
+      .catch((error) => {
+        console.error('Error deleting session:', error);
+      });
+  };
+
 
-  const data = SessionData;
   const columns = [
-    { Header: 'Session', accessor: 'session' },
-    { Header: 'Description', accessor: 'desc' },
-    { Header: 'Platform', accessor: 'place' },
-    { Header: 'Duration', accessor: 'duration' },
-    { Header: 'Organizer', accessor: 'organizer' },
+    { Header: t('Sessionname'), accessor: 'Sessionname' },
+    { Header: t('description'), accessor: 'description' },
+    { Header: t('platform'), accessor: 'platform' },
+    { Header: t('duration'), accessor: 'duration' },
+    { Header: t('organizer'), accessor: 'organizer' },
+
     {
       Header: 'Action',
       accessor: '',
-      Cell: () => <Icon icon="entypo:dots-three-vertical" color="#9e85f5" />,
+      Cell: ({ row }: any) => (
+        <div className={`items-center${row.length > 0 ? ' flex' : ' flex'}`}>
+          <Icon
+            icon="el:file-edit-alt"
+            className="mr-2"
+            width="25"
+            height="25"
+            cursor="pointer"
+            color="#9e85f5"
+          />
+          <Icon
+            icon="mdi:trash-can"
+            width="30"
+            height="30"
+            cursor="pointer"
+            color="#9e85f5"
+            onClick={() => handleDeleteSession(row.original.id)}
+          />
+        </div>
+      ),
     },
   ];
 
+  const removeModel = () => {
+    let newState = !addSessionModel;
+    setAddSessionModel(newState);
+  };
+
+  const removeDeleteModel = () => {
+    let newState = !deleteSessionModel;
+    setDeleteSessionModel(newState);
+  };
+
   return (
     <>
       {/* =========================== Start:: add Session Model =============================== */}
@@ -61,29 +178,35 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="Sessionname"
                     className="border border-primary rounded outline-none px-5 font-sans dark:bg-dark-frame-bg dark:text-white text-xs py-2 w-full"
                     placeholder={t('SessionName')}
+                    onChange={handleInputChange}
+                    value={sessionInput.Sessionname}
                   />
                 </div>
               </div>
               <div className="input my-3 h-9 ">
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="description"
                     className=" border border-primary py-2 rounded outline-none px-5 dark:bg-dark-frame-bg dark:text-white font-sans text-xs w-full"
-                    placeholder={t('Description')}
+                    placeholder={t('description')}
+                    onChange={handleInputChange}
+                    value={sessionInput.description}
                   />
                 </div>
               </div>
               <div className="input my-3 h-9 ">
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="platform"
                     className="border border-primary py-2 rounded dark:bg-dark-frame-bg dark:text-white outline-none px-5 font-sans text-xs w-full"
-                    placeholder={t('Platform')}
+                    placeholder={t('platform')}
+                    onChange={handleInputChange}
+                    value={sessionInput.platform}
                   />
                 </div>
               </div>
@@ -92,9 +215,11 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="time"
-                    name="name"
+                    name="duration"
                     className="border border-primary py-2 dark:bg-dark-frame-bg dark:text-white rounded outline-none px-5 font-sans text-xs w-full"
-                    placeholder={t('Duration')}
+                    placeholder={t('duration')}
+                    onChange={handleInputChange}
+                    value={sessionInput.duration}
                   />
                 </div>
               </div>
@@ -103,9 +228,11 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="organizer"
                     className=" border border-primary py-2 dark:bg-dark-frame-bg dark:text-white rounded outline-none px-5 font-sans text-xs w-full"
-                    placeholder={t('Organizer')}
+                    placeholder={t('organizer')}
+                    onChange={handleInputChange}
+                    value={sessionInput.organizer}
                   />
                 </div>
               </div>
@@ -114,19 +241,17 @@ const AdminSission = () => {
                   variant="info"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
-                  data-testid="remove"
-                  onClick={() => removeModel()}
+                  onClick={toggleAddSessionModel}
                 >
-                  {' '}
-                  {t('Cancel')}{' '}
+                  {t('Cancel')}
                 </Button>
                 <Button
                   variant="primary"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
+                  onClick={handleSaveSession}
                 >
-                  {' '}
-                  {t('Save')}{' '}
+                  {t('Save')}
                 </Button>
               </div>
             </form>
@@ -160,16 +285,15 @@ const AdminSission = () => {
                   variant="info"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
-                  data-testid="delete"
-                  onClick={() => removeDeleteModel()}
+                  onClick={removeDeleteModel}
                 >
-                  {' '}
-                  {t('Cancel')}{' '}
+                  {t('Cancel')}
                 </Button>
                 <Button
-                  variant="danger"
+                  variant="primary"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
+                  onClick={handleConfirmDelete}
                 >
                   {' '}
                   {t('Delete')}{' '}
@@ -291,12 +415,16 @@ const AdminSission = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="">
-                  <DataTable
-                    data={data}
-                    columns={columns}
-                    title="Developers list"
-                  />
+                <div>
+                  {loading ? (
+                    <div>Loading...</div>
+                  ) : (
+                    <DataTable
+                      data={getSessionModel}
+                      columns={columns}
+                      title={t('Sessions List')}
+                    />
+                  )}
                 </div>
               </div>
             </div>