icleafreportui 0.1.9 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/App.js +1 -1
- package/dist/Reports/ReportContent.js +275 -0
- package/dist/api/client.js +2 -6
- package/dist/package.js +3 -0
- package/package.json +25 -18
package/dist/App.js
CHANGED
|
@@ -13,7 +13,7 @@ const App = () => {
|
|
|
13
13
|
// Configuration for API calls
|
|
14
14
|
const config = {
|
|
15
15
|
baseURL: process.env.REACT_APP_BASE_URL || 'http://192.168.2.203:8080/icleafreport',
|
|
16
|
-
tenantToken: '
|
|
16
|
+
tenantToken: 'tn_96ef3426276611f19d84005056575b50'
|
|
17
17
|
};
|
|
18
18
|
return /*#__PURE__*/_jsx(TenantProvider, {
|
|
19
19
|
config: config,
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { Autocomplete, FormControl, Button, Grid, Box, Typography, Paper, Snackbar, Alert, CircularProgress, TextField, Checkbox, FormControlLabel } from '@mui/material';
|
|
3
|
+
import { useTenant } from '../context/TenantProvider';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
function ReportContent() {
|
|
6
|
+
const {
|
|
7
|
+
apiClient
|
|
8
|
+
} = useTenant();
|
|
9
|
+
const [subjects, setSubjects] = useState([]);
|
|
10
|
+
const [examPacks, setExamPacks] = useState([]);
|
|
11
|
+
const [exams, setExams] = useState([]);
|
|
12
|
+
const [users, setUsers] = useState([]);
|
|
13
|
+
const [selectedSubject, setSelectedSubject] = useState(null);
|
|
14
|
+
const [selectedExamPack, setSelectedExamPack] = useState(null);
|
|
15
|
+
const [selectedExam, setSelectedExam] = useState(null);
|
|
16
|
+
const [selectedUser, setSelectedUser] = useState(null);
|
|
17
|
+
const [alertMessage, setAlertMessage] = useState('');
|
|
18
|
+
const [openAlert, setOpenAlert] = useState(false);
|
|
19
|
+
const [loading, setLoading] = useState(false);
|
|
20
|
+
const [onlyWrongAnswers, setOnlyWrongAnswers] = useState(false);
|
|
21
|
+
const baseURL = process.env.REACT_APP_BASE_URL;
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
fetchAllSubjects();
|
|
24
|
+
}, []);
|
|
25
|
+
const fetchAllSubjects = async () => {
|
|
26
|
+
try {
|
|
27
|
+
const data = await apiClient.get('/api/showAllSubjects');
|
|
28
|
+
setSubjects(data);
|
|
29
|
+
} catch (error) {
|
|
30
|
+
console.error('Error fetching subjects:', error);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const fetchExamPacks = async subjectId => {
|
|
34
|
+
try {
|
|
35
|
+
const data = await apiClient.get(`/api/getAllExamPacks?subjectId=${subjectId}`);
|
|
36
|
+
setExamPacks(data);
|
|
37
|
+
} catch (error) {
|
|
38
|
+
console.error('Error fetching exam packs:', error);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const fetchExams = async examPackId => {
|
|
42
|
+
try {
|
|
43
|
+
const data = await apiClient.get(`/api/getAllExams?examPackId=${examPackId}`);
|
|
44
|
+
setExams(data);
|
|
45
|
+
} catch (error) {
|
|
46
|
+
console.error('Error fetching exams:', error);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
const fetchUsers = async examId => {
|
|
50
|
+
try {
|
|
51
|
+
const data = await apiClient.get(`/api/getAllUsers?examId=${examId}`);
|
|
52
|
+
setUsers(data);
|
|
53
|
+
} catch (error) {
|
|
54
|
+
console.error('Error fetching users:', error);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const handleSubjectChange = (event, newValue) => {
|
|
58
|
+
setSelectedSubject(newValue);
|
|
59
|
+
setSelectedExamPack(null);
|
|
60
|
+
setSelectedExam(null);
|
|
61
|
+
setSelectedUser(null);
|
|
62
|
+
setExamPacks([]);
|
|
63
|
+
setExams([]);
|
|
64
|
+
setUsers([]);
|
|
65
|
+
if (newValue) {
|
|
66
|
+
fetchExamPacks(newValue.subjectId);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
const handleExamPackChange = (event, newValue) => {
|
|
70
|
+
setSelectedExamPack(newValue);
|
|
71
|
+
setSelectedExam(null);
|
|
72
|
+
setSelectedUser(null);
|
|
73
|
+
setExams([]);
|
|
74
|
+
setUsers([]);
|
|
75
|
+
if (newValue) {
|
|
76
|
+
fetchExams(newValue.id);
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const handleExamChange = (event, newValue) => {
|
|
80
|
+
setSelectedExam(newValue);
|
|
81
|
+
setSelectedUser(null);
|
|
82
|
+
setUsers([]);
|
|
83
|
+
if (newValue) {
|
|
84
|
+
fetchUsers(newValue.id);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
const handleUserChange = (event, newValue) => {
|
|
88
|
+
setSelectedUser(newValue);
|
|
89
|
+
};
|
|
90
|
+
const handleDownload = async () => {
|
|
91
|
+
setLoading(true);
|
|
92
|
+
try {
|
|
93
|
+
const response = await fetch(`${baseURL}api/generateReportForSingleUser?subjectId=${selectedSubject.subjectId}&examPackId=${selectedExamPack.id}&examId=${selectedExam.id}&userId=${selectedUser.id}&wrongAnswerFlag=${onlyWrongAnswers}`, {
|
|
94
|
+
headers: {
|
|
95
|
+
'X-Tenant-Token': apiClient.tenantToken
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
const blob = await response.blob();
|
|
99
|
+
const blobUrl = URL.createObjectURL(blob);
|
|
100
|
+
const link = document.createElement('a');
|
|
101
|
+
link.href = blobUrl;
|
|
102
|
+
link.setAttribute('download', 'Report.xlsx');
|
|
103
|
+
document.body.appendChild(link);
|
|
104
|
+
link.click();
|
|
105
|
+
link.parentNode.removeChild(link);
|
|
106
|
+
URL.revokeObjectURL(blobUrl);
|
|
107
|
+
} catch (error) {
|
|
108
|
+
console.error('Error downloading report:', error);
|
|
109
|
+
} finally {
|
|
110
|
+
setLoading(false);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
114
|
+
sx: {
|
|
115
|
+
maxWidth: 800,
|
|
116
|
+
mx: 'auto',
|
|
117
|
+
my: 4,
|
|
118
|
+
p: 3,
|
|
119
|
+
backgroundColor: '#f5f5f5',
|
|
120
|
+
borderRadius: 2
|
|
121
|
+
},
|
|
122
|
+
children: [/*#__PURE__*/_jsxs(Paper, {
|
|
123
|
+
elevation: 6,
|
|
124
|
+
sx: {
|
|
125
|
+
p: 5,
|
|
126
|
+
textAlign: 'center',
|
|
127
|
+
backgroundColor: '#fff'
|
|
128
|
+
},
|
|
129
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
|
130
|
+
variant: "h4",
|
|
131
|
+
component: "h1",
|
|
132
|
+
gutterBottom: true,
|
|
133
|
+
sx: {
|
|
134
|
+
color: '#3f51b5',
|
|
135
|
+
marginBottom: "20px"
|
|
136
|
+
},
|
|
137
|
+
children: "Exam Report"
|
|
138
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
|
139
|
+
container: true,
|
|
140
|
+
spacing: 2,
|
|
141
|
+
justifyContent: "center",
|
|
142
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
|
143
|
+
item: true,
|
|
144
|
+
xs: 12,
|
|
145
|
+
sm: 6,
|
|
146
|
+
children: /*#__PURE__*/_jsx(FormControl, {
|
|
147
|
+
fullWidth: true,
|
|
148
|
+
children: /*#__PURE__*/_jsx(Autocomplete, {
|
|
149
|
+
id: "ddlSubject",
|
|
150
|
+
options: subjects,
|
|
151
|
+
getOptionLabel: option => option.subjectName,
|
|
152
|
+
value: selectedSubject,
|
|
153
|
+
onChange: handleSubjectChange,
|
|
154
|
+
renderInput: params => /*#__PURE__*/_jsx(TextField, {
|
|
155
|
+
...params,
|
|
156
|
+
label: "Subject"
|
|
157
|
+
})
|
|
158
|
+
})
|
|
159
|
+
})
|
|
160
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
|
161
|
+
item: true,
|
|
162
|
+
xs: 12,
|
|
163
|
+
sm: 6,
|
|
164
|
+
children: /*#__PURE__*/_jsx(FormControl, {
|
|
165
|
+
fullWidth: true,
|
|
166
|
+
children: /*#__PURE__*/_jsx(Autocomplete, {
|
|
167
|
+
id: "ddlExamPack",
|
|
168
|
+
options: examPacks,
|
|
169
|
+
getOptionLabel: option => option.name,
|
|
170
|
+
value: selectedExamPack,
|
|
171
|
+
onChange: handleExamPackChange,
|
|
172
|
+
renderInput: params => /*#__PURE__*/_jsx(TextField, {
|
|
173
|
+
...params,
|
|
174
|
+
label: "Exam Pack"
|
|
175
|
+
})
|
|
176
|
+
})
|
|
177
|
+
})
|
|
178
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
|
179
|
+
item: true,
|
|
180
|
+
xs: 12,
|
|
181
|
+
sm: 6,
|
|
182
|
+
children: /*#__PURE__*/_jsx(FormControl, {
|
|
183
|
+
fullWidth: true,
|
|
184
|
+
children: /*#__PURE__*/_jsx(Autocomplete, {
|
|
185
|
+
id: "ddlExam",
|
|
186
|
+
options: exams,
|
|
187
|
+
getOptionLabel: option => option.examName,
|
|
188
|
+
value: selectedExam,
|
|
189
|
+
onChange: handleExamChange,
|
|
190
|
+
renderInput: params => /*#__PURE__*/_jsx(TextField, {
|
|
191
|
+
...params,
|
|
192
|
+
label: "Exam"
|
|
193
|
+
})
|
|
194
|
+
})
|
|
195
|
+
})
|
|
196
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
|
197
|
+
item: true,
|
|
198
|
+
xs: 12,
|
|
199
|
+
sm: 6,
|
|
200
|
+
children: /*#__PURE__*/_jsx(FormControl, {
|
|
201
|
+
fullWidth: true,
|
|
202
|
+
children: /*#__PURE__*/_jsx(Autocomplete, {
|
|
203
|
+
id: "ddlUser",
|
|
204
|
+
options: users,
|
|
205
|
+
getOptionLabel: option => option.userName,
|
|
206
|
+
value: selectedUser,
|
|
207
|
+
onChange: handleUserChange,
|
|
208
|
+
renderInput: params => /*#__PURE__*/_jsx(TextField, {
|
|
209
|
+
...params,
|
|
210
|
+
label: "User"
|
|
211
|
+
})
|
|
212
|
+
})
|
|
213
|
+
})
|
|
214
|
+
})]
|
|
215
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
|
216
|
+
sx: {
|
|
217
|
+
mt: 3,
|
|
218
|
+
position: 'relative'
|
|
219
|
+
},
|
|
220
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
|
221
|
+
control: /*#__PURE__*/_jsx(Checkbox, {
|
|
222
|
+
checked: onlyWrongAnswers,
|
|
223
|
+
onChange: e => setOnlyWrongAnswers(e.target.checked)
|
|
224
|
+
}),
|
|
225
|
+
label: "Only Wrong Answers"
|
|
226
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
|
227
|
+
sx: {
|
|
228
|
+
mt: 2,
|
|
229
|
+
position: 'relative'
|
|
230
|
+
},
|
|
231
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
|
232
|
+
variant: "contained",
|
|
233
|
+
color: "primary",
|
|
234
|
+
onClick: handleDownload,
|
|
235
|
+
disabled: !selectedSubject || !selectedExamPack || !selectedExam || !selectedUser || loading,
|
|
236
|
+
sx: {
|
|
237
|
+
width: 'auto',
|
|
238
|
+
backgroundColor: '#3f51b5',
|
|
239
|
+
'&:hover': {
|
|
240
|
+
backgroundColor: '#303f9f'
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
children: loading ? 'Downloading...' : 'Download Report'
|
|
244
|
+
}), loading && /*#__PURE__*/_jsx(CircularProgress, {
|
|
245
|
+
size: 24,
|
|
246
|
+
sx: {
|
|
247
|
+
position: 'absolute',
|
|
248
|
+
top: '50%',
|
|
249
|
+
left: '50%',
|
|
250
|
+
marginTop: '-12px',
|
|
251
|
+
marginLeft: '-12px'
|
|
252
|
+
}
|
|
253
|
+
})]
|
|
254
|
+
})]
|
|
255
|
+
})]
|
|
256
|
+
}), /*#__PURE__*/_jsx(Snackbar, {
|
|
257
|
+
open: openAlert,
|
|
258
|
+
autoHideDuration: 6000,
|
|
259
|
+
onClose: () => setOpenAlert(false),
|
|
260
|
+
anchorOrigin: {
|
|
261
|
+
vertical: 'top',
|
|
262
|
+
horizontal: 'center'
|
|
263
|
+
},
|
|
264
|
+
children: /*#__PURE__*/_jsx(Alert, {
|
|
265
|
+
onClose: () => setOpenAlert(false),
|
|
266
|
+
severity: "info",
|
|
267
|
+
sx: {
|
|
268
|
+
width: '100%'
|
|
269
|
+
},
|
|
270
|
+
children: alertMessage
|
|
271
|
+
})
|
|
272
|
+
})]
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
export default ReportContent;
|
package/dist/api/client.js
CHANGED
|
@@ -5,11 +5,9 @@ class TenantApiClient {
|
|
|
5
5
|
}
|
|
6
6
|
async request(endpoint) {
|
|
7
7
|
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
8
|
-
//
|
|
9
|
-
const cleanEndpoint = endpoint.startsWith('/') ? endpoint.slice(1) : endpoint;
|
|
8
|
+
const cleanEndpoint = endpoint.startsWith('/') ? endpoint.slice(1) : endpoint; //slash at the beginning of endpoint if exists
|
|
10
9
|
const url = `${this.baseURL}/${cleanEndpoint}`;
|
|
11
|
-
console.log('FULL URL BEING SENT:', url);
|
|
12
|
-
|
|
10
|
+
console.log('FULL URL BEING SENT:', url);
|
|
13
11
|
const response = await fetch(url, {
|
|
14
12
|
...options,
|
|
15
13
|
headers: {
|
|
@@ -23,8 +21,6 @@ class TenantApiClient {
|
|
|
23
21
|
}
|
|
24
22
|
return response.json();
|
|
25
23
|
}
|
|
26
|
-
|
|
27
|
-
// Add your API methods
|
|
28
24
|
async get(endpoint) {
|
|
29
25
|
return this.request(endpoint);
|
|
30
26
|
}
|
package/dist/package.js
CHANGED
|
@@ -12,6 +12,9 @@ export { default as CourseReport } from './Reports/CourseReport';
|
|
|
12
12
|
export { default as ExamReport } from './Reports/ExamReport';
|
|
13
13
|
export { default as ExamPackReport } from './Reports/ExamPackReport';
|
|
14
14
|
|
|
15
|
+
//no header and sidebar
|
|
16
|
+
export { default as ReportContent } from './Reports/ReportContent';
|
|
17
|
+
|
|
15
18
|
// Context
|
|
16
19
|
export { TenantProvider, useTenant } from './context/TenantProvider';
|
|
17
20
|
|
package/package.json
CHANGED
|
@@ -1,41 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "icleafreportui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/package.js",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
8
8
|
],
|
|
9
9
|
"homepage": "/reports",
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"@emotion/styled": "^11.11.5",
|
|
14
|
-
"@mui/icons-material": "^6.4.5",
|
|
10
|
+
"peerDependencies": {
|
|
11
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
12
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
15
13
|
"@mui/material": "^5.15.20",
|
|
14
|
+
"@mui/icons-material": "^5.15.20",
|
|
16
15
|
"@mui/x-data-grid": "^7.27.1",
|
|
17
|
-
"@testing-library/jest-dom": "^5.17.0",
|
|
18
|
-
"@testing-library/react": "^13.4.0",
|
|
19
|
-
"@testing-library/user-event": "^13.5.0",
|
|
20
16
|
"antd": "^5.18.3",
|
|
17
|
+
"react-router-dom": "^6.24.0",
|
|
18
|
+
"react-bootstrap": "^2.10.3",
|
|
19
|
+
"@emotion/react": "^11.11.4",
|
|
20
|
+
"@emotion/styled": "^11.11.5"
|
|
21
|
+
},
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"@csstools/normalize.css": "^12.1.1",
|
|
21
24
|
"axios": "^1.7.2",
|
|
22
|
-
"bootstrap": "^5.3.3",
|
|
23
25
|
"file-saver": "^2.0.5",
|
|
24
|
-
"react": "^18.3.1",
|
|
25
|
-
"react-bootstrap": "^2.10.3",
|
|
26
26
|
"react-custom-scrollbars": "^4.2.1",
|
|
27
|
-
"react-dom": "^18.3.1",
|
|
28
27
|
"react-icons": "^5.2.1",
|
|
29
28
|
"react-loader-spinner": "^6.1.6",
|
|
30
|
-
"react-router-dom": "^6.24.0",
|
|
31
|
-
"react-scripts": "5.0.1",
|
|
32
29
|
"sanitize.css": "^13.0.0",
|
|
33
|
-
"web-vitals": "^2.1.4",
|
|
34
30
|
"xlsx": "^0.18.5"
|
|
35
31
|
},
|
|
36
32
|
"scripts": {
|
|
37
33
|
"start": "react-scripts start",
|
|
38
|
-
"build": "babel src -d dist --copy-files",
|
|
34
|
+
"build": "babel src -d dist --copy-files --ignore 'src/**/*.test.js','src/**/*.stories.js'",
|
|
39
35
|
"test": "react-scripts test",
|
|
40
36
|
"eject": "react-scripts eject"
|
|
41
37
|
},
|
|
@@ -59,7 +55,18 @@
|
|
|
59
55
|
},
|
|
60
56
|
"devDependencies": {
|
|
61
57
|
"@babel/cli": "^7.28.6",
|
|
58
|
+
"@babel/core": "^7.28.6",
|
|
62
59
|
"@babel/preset-env": "^7.29.2",
|
|
63
|
-
"@babel/preset-react": "^7.28.5"
|
|
60
|
+
"@babel/preset-react": "^7.28.5",
|
|
61
|
+
"react": "^18.3.1",
|
|
62
|
+
"react-dom": "^18.3.1",
|
|
63
|
+
"@mui/material": "^5.15.20",
|
|
64
|
+
"@mui/icons-material": "^5.15.20",
|
|
65
|
+
"@mui/x-data-grid": "^7.27.1",
|
|
66
|
+
"antd": "^5.18.3",
|
|
67
|
+
"react-router-dom": "^6.24.0",
|
|
68
|
+
"react-bootstrap": "^2.10.3",
|
|
69
|
+
"@emotion/react": "^11.11.4",
|
|
70
|
+
"@emotion/styled": "^11.11.5"
|
|
64
71
|
}
|
|
65
72
|
}
|