icleafreportui 0.2.1 → 0.2.3

package/dist/Reports/ReportContent.js

@@ -0,0 +1,275 @@
+import React, { useState, useEffect } from 'react';
+import { Autocomplete, FormControl, Button, Grid, Box, Typography, Paper, Snackbar, Alert, CircularProgress, TextField, Checkbox, FormControlLabel } from '@mui/material';
+import { useTenant } from '../context/TenantProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ReportContent() {
+  const {
+    apiClient
+  } = useTenant();
+  const [subjects, setSubjects] = useState([]);
+  const [examPacks, setExamPacks] = useState([]);
+  const [exams, setExams] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [selectedSubject, setSelectedSubject] = useState(null);
+  const [selectedExamPack, setSelectedExamPack] = useState(null);
+  const [selectedExam, setSelectedExam] = useState(null);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [alertMessage, setAlertMessage] = useState('');
+  const [openAlert, setOpenAlert] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [onlyWrongAnswers, setOnlyWrongAnswers] = useState(false);
+  const baseURL = process.env.REACT_APP_BASE_URL;
+  useEffect(() => {
+    fetchAllSubjects();
+  }, []);
+  const fetchAllSubjects = async () => {
+    try {
+      const data = await apiClient.get('/api/showAllSubjects');
+      setSubjects(data);
+    } catch (error) {
+      console.error('Error fetching subjects:', error);
+    }
+  };
+  const fetchExamPacks = async subjectId => {
+    try {
+      const data = await apiClient.get(`/api/getAllExamPacks?subjectId=${subjectId}`);
+      setExamPacks(data);
+    } catch (error) {
+      console.error('Error fetching exam packs:', error);
+    }
+  };
+  const fetchExams = async examPackId => {
+    try {
+      const data = await apiClient.get(`/api/getAllExams?examPackId=${examPackId}`);
+      setExams(data);
+    } catch (error) {
+      console.error('Error fetching exams:', error);
+    }
+  };
+  const fetchUsers = async examId => {
+    try {
+      const data = await apiClient.get(`/api/getAllUsers?examId=${examId}`);
+      setUsers(data);
+    } catch (error) {
+      console.error('Error fetching users:', error);
+    }
+  };
+  const handleSubjectChange = (event, newValue) => {
+    setSelectedSubject(newValue);
+    setSelectedExamPack(null);
+    setSelectedExam(null);
+    setSelectedUser(null);
+    setExamPacks([]);
+    setExams([]);
+    setUsers([]);
+    if (newValue) {
+      fetchExamPacks(newValue.subjectId);
+    }
+  };
+  const handleExamPackChange = (event, newValue) => {
+    setSelectedExamPack(newValue);
+    setSelectedExam(null);
+    setSelectedUser(null);
+    setExams([]);
+    setUsers([]);
+    if (newValue) {
+      fetchExams(newValue.id);
+    }
+  };
+  const handleExamChange = (event, newValue) => {
+    setSelectedExam(newValue);
+    setSelectedUser(null);
+    setUsers([]);
+    if (newValue) {
+      fetchUsers(newValue.id);
+    }
+  };
+  const handleUserChange = (event, newValue) => {
+    setSelectedUser(newValue);
+  };
+  const handleDownload = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(`${baseURL}api/generateReportForSingleUser?subjectId=${selectedSubject.subjectId}&examPackId=${selectedExamPack.id}&examId=${selectedExam.id}&userId=${selectedUser.id}&wrongAnswerFlag=${onlyWrongAnswers}`, {
+        headers: {
+          'X-Tenant-Token': apiClient.tenantToken
+        }
+      });
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.setAttribute('download', 'Report.xlsx');
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error('Error downloading report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      maxWidth: 800,
+      mx: 'auto',
+      my: 4,
+      p: 3,
+      backgroundColor: '#f5f5f5',
+      borderRadius: 2
+    },
+    children: [/*#__PURE__*/_jsxs(Paper, {
+      elevation: 6,
+      sx: {
+        p: 5,
+        textAlign: 'center',
+        backgroundColor: '#fff'
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h4",
+        component: "h1",
+        gutterBottom: true,
+        sx: {
+          color: '#3f51b5',
+          marginBottom: "20px"
+        },
+        children: "Exam Report"
+      }), /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        justifyContent: "center",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sm: 6,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(Autocomplete, {
+              id: "ddlSubject",
+              options: subjects,
+              getOptionLabel: option => option.subjectName,
+              value: selectedSubject,
+              onChange: handleSubjectChange,
+              renderInput: params => /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                label: "Subject"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sm: 6,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(Autocomplete, {
+              id: "ddlExamPack",
+              options: examPacks,
+              getOptionLabel: option => option.name,
+              value: selectedExamPack,
+              onChange: handleExamPackChange,
+              renderInput: params => /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                label: "Exam Pack"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sm: 6,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(Autocomplete, {
+              id: "ddlExam",
+              options: exams,
+              getOptionLabel: option => option.examName,
+              value: selectedExam,
+              onChange: handleExamChange,
+              renderInput: params => /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                label: "Exam"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          sm: 6,
+          children: /*#__PURE__*/_jsx(FormControl, {
+            fullWidth: true,
+            children: /*#__PURE__*/_jsx(Autocomplete, {
+              id: "ddlUser",
+              options: users,
+              getOptionLabel: option => option.userName,
+              value: selectedUser,
+              onChange: handleUserChange,
+              renderInput: params => /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                label: "User"
+              })
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          mt: 3,
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx(FormControlLabel, {
+          control: /*#__PURE__*/_jsx(Checkbox, {
+            checked: onlyWrongAnswers,
+            onChange: e => setOnlyWrongAnswers(e.target.checked)
+          }),
+          label: "Only Wrong Answers"
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            mt: 2,
+            position: 'relative'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "primary",
+            onClick: handleDownload,
+            disabled: !selectedSubject || !selectedExamPack || !selectedExam || !selectedUser || loading,
+            sx: {
+              width: 'auto',
+              backgroundColor: '#3f51b5',
+              '&:hover': {
+                backgroundColor: '#303f9f'
+              }
+            },
+            children: loading ? 'Downloading...' : 'Download Report'
+          }), loading && /*#__PURE__*/_jsx(CircularProgress, {
+            size: 24,
+            sx: {
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              marginTop: '-12px',
+              marginLeft: '-12px'
+            }
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Snackbar, {
+      open: openAlert,
+      autoHideDuration: 6000,
+      onClose: () => setOpenAlert(false),
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Alert, {
+        onClose: () => setOpenAlert(false),
+        severity: "info",
+        sx: {
+          width: '100%'
+        },
+        children: alertMessage
+      })
+    })]
+  });
+}
+export default ReportContent;

package/dist/package.js

@@ -12,6 +12,9 @@ export { default as CourseReport } from './Reports/CourseReport';
 export { default as ExamReport } from './Reports/ExamReport';
 export { default as ExamPackReport } from './Reports/ExamPackReport';
 
+//no header and sidebar
+export { default as ReportContent } from './Reports/ReportContent';
+
 // Context
 export { TenantProvider, useTenant } from './context/TenantProvider';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "icleafreportui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "main": "dist/package.js",
   "files": [