Skip to content

Commit 4198256

Browse files
NTElissaNTElissa
committed
feat Create session functionality & design
1 parent 626dc20 commit 4198256

File tree

3 files changed

+231
-46
lines changed

3 files changed

+231
-46
lines changed

‎src/Mutations/session.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { gql } from '@apollo/client';
2+
3+
// Query to get a single session by ID
4+
export const GET_SESSION = gql`
5+
query GetSession($ID: ID!) {
6+
getSession(id: $ID) {
7+
id
8+
Sessionname
9+
description
10+
platform
11+
duration
12+
organizer
13+
}
14+
}
15+
`;
16+
17+
// Query to get a list of all sessions
18+
export const GET_SESSIONS = gql`
19+
query GetSessions {
20+
getAllSessions {
21+
id
22+
Sessionname
23+
description
24+
platform
25+
duration
26+
organizer
27+
}
28+
}
29+
`;
30+
31+
// Mutation to create a new session
32+
export const CREATE_SESSION = gql`
33+
mutation CreateSession($sessionInput: SessionInput) {
34+
createSession(sessionInput: $sessionInput) {
35+
id
36+
Sessionname
37+
description
38+
platform
39+
duration
40+
organizer
41+
}
42+
}
43+
`;
44+
45+
// Mutation to delete a session by ID
46+
export const DELETE_SESSION = gql`
47+
mutation DeleteSession($ID: ID!) {
48+
deleteSession(id: $ID)
49+
}
50+
`;
51+
52+
// Mutation to edit/update a session by ID
53+
export const EDIT_SESSION = gql`
54+
mutation EditSession($ID: ID!, $editSessionInput: EditSessionInput) {
55+
editSession(id: $ID, editSessionInput: $editSessionInput)
56+
}
57+
`;

‎src/containers/DashRoutes.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ const ManagersCards = React.lazy(() => import('../components/ManagerCard'));
7676
const CoordinatorCards = React.lazy(
7777
() => import('../components/CoordinatorCard'),
7878
);
79+
const AdminSission = React.lazy(() => import('./admin-dashBoard/Sessions'));
80+
7981

8082

8183
function DashRoutes() {
@@ -122,7 +124,7 @@ function DashRoutes() {
122124
<Route path="/cohorts" element={<AdminCohorts />} />
123125
<Route path="/phases" element={<AdminPhases />} />
124126
<Route path="/programs" element={<AdminPrograms />} />
125-
<Route path="/sessions" element={<AdminSession />} />
127+
<Route path="/sessions" element={<AdminSission />} />
126128
<Route path="/manage" element={<AdminManageRoles />} />
127129
<Route path="/grading" element={<GradingSystem />} />
128130
<Route

‎src/containers/admin-dashBoard/Sessions.tsx

+171-45
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,160 @@
1-
/* eslint-disable */
21
import { Icon } from '@iconify/react';
3-
import React, { useState } from 'react';
2+
import React, { useState, useEffect } from 'react';
43
import { useTranslation } from 'react-i18next';
54
import DataTable from '../../components/DataTable';
6-
import Sidebar from '../../components/Sidebar';
7-
import SessionData from '../../dummyData/session.json';
85
import useDocumentTitle from '../../hook/useDocumentTitle';
96
import Button from './../../components/Buttons';
7+
import { gql, useQuery, useMutation } from '@apollo/client';
8+
9+
// Define your GraphQL queries and mutations
10+
import {
11+
GET_SESSIONS,
12+
CREATE_SESSION,
13+
DELETE_SESSION,
14+
EDIT_SESSION,
15+
} from '../../Mutations/session';
16+
17+
interface Session {
18+
id: string;
19+
Sessionname: string;
20+
description: string;
21+
platform: string;
22+
duration: string;
23+
organizer: string;
24+
}
1025

1126
const AdminSission = () => {
1227
useDocumentTitle('Sessions');
1328
const { t } = useTranslation();
14-
29+
const [getSessionModel, setSessionModel] = useState<Session[]>([]);
30+
const [addSessionModel, setAddSessionModel] = useState(false);
1531
const [deleteSessionModel, setDeleteSessionModel] = useState(false);
1632
const [updateTraineeModel, setUpdateTraineeModel] = useState(false);
17-
const [addSessionModel, setAddSessionModel] = useState(false);
33+
const [sessionToDelete, setSessionToDelete] = useState('');
1834

19-
const removeModel = () => {
20-
let newState = !addSessionModel;
21-
setAddSessionModel(newState);
35+
const { loading, error, data } = useQuery(GET_SESSIONS);
36+
useEffect(() => {
37+
if (data) {
38+
const allSessions = data.getAllSessions.map((session: any) => ({
39+
id: session.id,
40+
Sessionname: session.Sessionname,
41+
description: session.description,
42+
platform: session.platform,
43+
duration: session.duration,
44+
organizer: session.organizer,
45+
}));
46+
47+
setSessionModel(allSessions);
48+
}
49+
}, [data]);
50+
51+
52+
const [sessionInput, setSessionInput] = useState({
53+
Sessionname: '',
54+
description: '',
55+
platform: '',
56+
duration: '',
57+
organizer: '',
58+
});
59+
60+
const [createSession] = useMutation(CREATE_SESSION, {
61+
onCompleted: (data) => {
62+
setAddSessionModel(false);
63+
setSessionInput({
64+
Sessionname: '',
65+
description: '',
66+
platform: '',
67+
duration: '',
68+
organizer: '',
69+
});
70+
},
71+
onError: (error) => {
72+
console.error('Error add session:', error);
73+
}, });
74+
75+
76+
const toggleAddSessionModel = () => {
77+
setAddSessionModel(!addSessionModel);
2278
};
23-
const removeDeleteModel = () => {
24-
let newState = !deleteSessionModel;
25-
setDeleteSessionModel(newState);
79+
80+
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
81+
const { name, value } = e.target;
82+
setSessionInput({ ...sessionInput, [name]: value });
2683
};
2784

85+
const handleSaveSession = () => {
86+
// console.log('sessionInput:', sessionInput);
87+
createSession({
88+
variables: {
89+
sessionInput: sessionInput,
90+
},
91+
});
92+
};
93+
94+
95+
const [deleteSession] = useMutation(DELETE_SESSION);
96+
const handleDeleteSession = (sessionId: string) => {
97+
setSessionToDelete(sessionId);
98+
setDeleteSessionModel(true);
99+
};
100+
const handleConfirmDelete = () => {
101+
deleteSession({
102+
variables: {
103+
ID: sessionToDelete,
104+
},
105+
})
106+
.then(() => {
107+
setDeleteSessionModel(false);
108+
setSessionToDelete('');
109+
})
110+
.catch((error) => {
111+
console.error('Error deleting session:', error);
112+
});
113+
};
28114

29-
const data = SessionData;
30115
const columns = [
31-
{ Header: 'Session', accessor: 'session' },
32-
{ Header: 'Description', accessor: 'desc' },
33-
{ Header: 'Platform', accessor: 'place' },
34-
{ Header: 'Duration', accessor: 'duration' },
35-
{ Header: 'Organizer', accessor: 'organizer' },
116+
{ Header: t('Sessionname'), accessor: 'Sessionname' },
117+
{ Header: t('description'), accessor: 'description' },
118+
{ Header: t('platform'), accessor: 'platform' },
119+
{ Header: t('duration'), accessor: 'duration' },
120+
{ Header: t('organizer'), accessor: 'organizer' },
121+
36122
{
37123
Header: 'Action',
38124
accessor: '',
39-
Cell: () => <Icon icon="entypo:dots-three-vertical" color="#9e85f5" />,
125+
Cell: ({ row }: any) => (
126+
<div className={`items-center${row.length > 0 ? ' flex' : ' flex'}`}>
127+
<Icon
128+
icon="el:file-edit-alt"
129+
className="mr-2"
130+
width="25"
131+
height="25"
132+
cursor="pointer"
133+
color="#9e85f5"
134+
/>
135+
<Icon
136+
icon="mdi:trash-can"
137+
width="30"
138+
height="30"
139+
cursor="pointer"
140+
color="#9e85f5"
141+
onClick={() => handleDeleteSession(row.original.id)}
142+
/>
143+
</div>
144+
),
40145
},
41146
];
42147

148+
const removeModel = () => {
149+
let newState = !addSessionModel;
150+
setAddSessionModel(newState);
151+
};
152+
153+
const removeDeleteModel = () => {
154+
let newState = !deleteSessionModel;
155+
setDeleteSessionModel(newState);
156+
};
157+
43158
return (
44159
<>
45160
{/* =========================== Start:: add Session Model =============================== */}
@@ -61,29 +176,35 @@ const AdminSission = () => {
61176
<div className="grouped-input flex items-center h-full w-full rounded-md">
62177
<input
63178
type="text"
64-
name="name"
179+
name="Sessionname"
65180
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"
66181
placeholder={t('SessionName')}
182+
onChange={handleInputChange}
183+
value={sessionInput.Sessionname}
67184
/>
68185
</div>
69186
</div>
70187
<div className="input my-3 h-9 ">
71188
<div className="grouped-input flex items-center h-full w-full rounded-md">
72189
<input
73190
type="text"
74-
name="name"
191+
name="description"
75192
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"
76-
placeholder={t('Description')}
193+
placeholder={t('description')}
194+
onChange={handleInputChange}
195+
value={sessionInput.description}
77196
/>
78197
</div>
79198
</div>
80199
<div className="input my-3 h-9 ">
81200
<div className="grouped-input flex items-center h-full w-full rounded-md">
82201
<input
83202
type="text"
84-
name="name"
203+
name="platform"
85204
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"
86-
placeholder={t('Platform')}
205+
placeholder={t('platform')}
206+
onChange={handleInputChange}
207+
value={sessionInput.platform}
87208
/>
88209
</div>
89210
</div>
@@ -92,9 +213,11 @@ const AdminSission = () => {
92213
<div className="grouped-input flex items-center h-full w-full rounded-md">
93214
<input
94215
type="time"
95-
name="name"
216+
name="duration"
96217
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"
97-
placeholder={t('Duration')}
218+
placeholder={t('duration')}
219+
onChange={handleInputChange}
220+
value={sessionInput.duration}
98221
/>
99222
</div>
100223
</div>
@@ -103,9 +226,11 @@ const AdminSission = () => {
103226
<div className="grouped-input flex items-center h-full w-full rounded-md">
104227
<input
105228
type="text"
106-
name="name"
229+
name="organizer"
107230
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"
108-
placeholder={t('Organizer')}
231+
placeholder={t('organizer')}
232+
onChange={handleInputChange}
233+
value={sessionInput.organizer}
109234
/>
110235
</div>
111236
</div>
@@ -114,19 +239,17 @@ const AdminSission = () => {
114239
variant="info"
115240
size="sm"
116241
style="w-[30%] md:w-1/4 text-sm font-sans"
117-
data-testid="remove"
118-
onClick={() => removeModel()}
242+
onClick={toggleAddSessionModel}
119243
>
120-
{' '}
121-
{t('Cancel')}{' '}
244+
{t('Cancel')}
122245
</Button>
123246
<Button
124247
variant="primary"
125248
size="sm"
126249
style="w-[30%] md:w-1/4 text-sm font-sans"
250+
onClick={handleSaveSession}
127251
>
128-
{' '}
129-
{t('Save')}{' '}
252+
{t('Save')}
130253
</Button>
131254
</div>
132255
</form>
@@ -160,16 +283,15 @@ const AdminSission = () => {
160283
variant="info"
161284
size="sm"
162285
style="w-[30%] md:w-1/4 text-sm font-sans"
163-
data-testid="delete"
164-
onClick={() => removeDeleteModel()}
286+
onClick={removeDeleteModel}
165287
>
166-
{' '}
167-
{t('Cancel')}{' '}
288+
{t('Cancel')}
168289
</Button>
169290
<Button
170-
variant="danger"
291+
variant="primary"
171292
size="sm"
172293
style="w-[30%] md:w-1/4 text-sm font-sans"
294+
onClick={handleConfirmDelete}
173295
>
174296
{' '}
175297
{t('Delete')}{' '}
@@ -291,12 +413,16 @@ const AdminSission = () => {
291413
</Button>
292414
</div>
293415
</div>
294-
<div className="">
295-
<DataTable
296-
data={data}
297-
columns={columns}
298-
title="Developers list"
299-
/>
416+
<div>
417+
{loading ? (
418+
<div>Loading...</div>
419+
) : (
420+
<DataTable
421+
data={getSessionModel}
422+
columns={columns}
423+
title={t('Sessions List')}
424+
/>
425+
)}
300426
</div>
301427
</div>
302428
</div>

0 commit comments

Comments
 (0)