Skip to content

Commit c35765c

Browse files
bygu4bygu4
committed
add stats menu
1 parent aea3d25 commit c35765c

2 files changed

Lines changed: 102 additions & 32 deletions

File tree

‎hwproj.front/src/components/Courses/Course.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ const Course: React.FC = () => {
170170
// и не блокируем остальную функциональность системы
171171
let courseFilesInfo = [] as FileInfoDTO[]
172172
try {
173-
courseFilesInfo = await ApiSingleton.filesApi.filesGetFilesInfo(+courseId!)
173+
courseFilesInfo = await ApiSingleton.filesApi.filesGetFilesInfo(+validatedCourseId!)
174174
} catch (e) {
175175
const responseErrors = await ErrorsHandler.getErrorMessages(e as Response)
176176
enqueueSnackbar(responseErrors[0], {variant: "warning", autoHideDuration: 4000});
@@ -183,22 +183,22 @@ const Course: React.FC = () => {
183183
}, [])
184184

185185
useEffect(() => {
186-
ApiSingleton.statisticsApi.statisticsGetCourseStatistics(+courseId!)
186+
ApiSingleton.statisticsApi.statisticsGetCourseStatistics(+validatedCourseId!)
187187
.then(res => setStudentSolutions(res))
188-
}, [courseId])
188+
}, [validatedCourseId])
189189

190190
useEffect(() => {
191191
getCourseFilesInfo()
192-
}, [courseId])
192+
}, [validatedCourseId])
193193

194194
useEffect(() => {
195-
ApiSingleton.statisticsApi.statisticsGetCourseStatistics(+courseId!)
195+
ApiSingleton.statisticsApi.statisticsGetCourseStatistics(+validatedCourseId!)
196196
.then(res => setStudentSolutions(res))
197-
}, [courseId])
197+
}, [validatedCourseId])
198198

199199
useEffect(() => {
200200
getCourseFilesInfo()
201-
}, [courseId])
201+
}, [validatedCourseId])
202202

203203
useEffect(() => changeTab(tab || "homeworks"), [tab, validatedCourseId, isFound])
204204

@@ -250,7 +250,7 @@ const Course: React.FC = () => {
250250
onClose={handleClose}
251251
>
252252
{isCourseMentor && isLecturer &&
253-
<MenuItem onClick={() => navigate(`/courses/${courseId}/editInfo`)}>
253+
<MenuItem onClick={() => navigate(`/courses/${validatedCourseId}/editInfo`)}>
254254
<ListItemIcon>
255255
<EditIcon fontSize="small"/>
256256
</ListItemIcon>
@@ -323,7 +323,7 @@ const Course: React.FC = () => {
323323
</Grid>
324324
{lecturerStatsState &&
325325
<LecturerStatistics
326-
courseId={+courseId!}
326+
courseId={+validatedCourseId!}
327327
onClose={() => setLecturerStatsState(false)}
328328
/>
329329
}
@@ -377,7 +377,7 @@ const Course: React.FC = () => {
377377
</Stack>}/>}
378378
</Tabs>
379379
{tabValue === "homeworks" && <CourseExperimental
380-
courseId={+courseId!}
380+
courseId={+validatedCourseId!}
381381
homeworks={courseHomeworks}
382382
courseFilesInfo={courseFilesInfo}
383383
isMentor={isCourseMentor}

‎hwproj.front/src/components/Courses/StudentStats.tsx‎

Lines changed: 92 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, {useEffect, useState} from "react";
1+
import React, {FC, useEffect, useState} from "react";
22
import {CourseViewModel, HomeworkViewModel, StatisticsCourseMatesModel} from "../../api/";
33
import {useNavigate, useParams} from 'react-router-dom';
44
import {Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@material-ui/core";
55
import StudentStatsCell from "../Tasks/StudentStatsCell";
6-
import {Alert, Button, Chip, Typography} from "@mui/material";
6+
import {Alert, Button, Chip, Typography, Menu, MenuItem, ListItemIcon, ListItemText, Popover} from "@mui/material";
77
import {grey} from "@material-ui/core/colors";
88
import StudentStatsUtils from "../../services/StudentStatsUtils";
9-
import ShowChartIcon from "@mui/icons-material/ShowChart";
9+
import {MoreVert, Download, ShowChart} from "@mui/icons-material";
1010
import {BonusTag, DefaultTags, TestTag} from "../Common/HomeworkTags";
1111
import Lodash from "lodash"
1212
import SaveStats from "components/Solutions/SaveStats";
@@ -34,7 +34,7 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
3434
});
3535
const {courseId} = useParams();
3636
const navigate = useNavigate();
37-
const handleClick = () => {
37+
const goToCharts = () => {
3838
navigate(`/statistics/${courseId}/charts`)
3939
}
4040

@@ -103,6 +103,92 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
103103
const hasHomeworks = homeworksMaxSum > 0
104104
const hasTests = testsMaxSum > 0
105105

106+
const StatsMenu: FC = () => {
107+
const [menuState, setMenuState] = useState<{
108+
anchorEl: null | HTMLElement;
109+
popoverAnchorEl: null | HTMLElement;
110+
}>({anchorEl: null, popoverAnchorEl: null})
111+
112+
const {anchorEl, popoverAnchorEl} = menuState
113+
const openMenu = Boolean(anchorEl)
114+
const openPopover = Boolean(popoverAnchorEl)
115+
116+
const handleOpenMenu = (event: React.MouseEvent<HTMLElement>) => {
117+
setMenuState ({
118+
anchorEl: event.currentTarget,
119+
popoverAnchorEl: null,
120+
})
121+
}
122+
123+
const handleClose = () => {
124+
setMenuState ({
125+
anchorEl: null,
126+
popoverAnchorEl: null,
127+
})
128+
}
129+
130+
const handleOpenPopover = (event: React.MouseEvent<HTMLElement>) => {
131+
setMenuState (prevState => ({
132+
...prevState,
133+
popoverAnchorEl: event.currentTarget,
134+
}))
135+
}
136+
137+
return (
138+
<div style={{paddingTop: 4}}>
139+
<Button size="medium"
140+
color="primary"
141+
onClick={handleOpenMenu}
142+
>
143+
Меню
144+
<MoreVert fontSize="small"/>
145+
</Button>
146+
<Menu
147+
id="long-menu"
148+
MenuListProps={{
149+
'aria-labelledby': 'long-button',
150+
}}
151+
anchorEl={anchorEl}
152+
open={openMenu}
153+
onClose={handleClose}
154+
>
155+
<MenuItem onClick={goToCharts}>
156+
<ListItemIcon>
157+
<ShowChart fontSize="small"/>
158+
</ListItemIcon>
159+
<ListItemText>
160+
Графики успеваемости
161+
</ListItemText>
162+
</MenuItem>
163+
<MenuItem onClick={handleOpenPopover}>
164+
<ListItemIcon>
165+
<Download fontSize="small"/>
166+
</ListItemIcon>
167+
<ListItemText>
168+
Выгрузить таблицу
169+
</ListItemText>
170+
<Popover open={openPopover}
171+
onClose={handleClose}
172+
anchorEl={popoverAnchorEl}
173+
anchorOrigin={{
174+
vertical: 'bottom',
175+
horizontal: 'left',
176+
}}
177+
>
178+
<SaveStats
179+
courseId={props.course.id}
180+
userId={props.userId}
181+
yandexCode={props.yandexCode}
182+
onActionOpening={() => setSearched({searched, isSaveStatsActionOpened: true})}
183+
onActionClosing={() => setSearched({searched, isSaveStatsActionOpened: false})}
184+
/>
185+
</Popover>
186+
</MenuItem>
187+
</Menu>
188+
</div>
189+
)
190+
}
191+
106192
return (
107193
<div>
108194
{searched &&
@@ -146,15 +232,8 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
146232
</TableCell>)}
147233
</TableRow>
148234
<TableRow>
149-
<TableCell style={{zIndex: 10}}
150-
component="td">
151-
{solutions.length > 0 &&
152-
<Button startIcon={<ShowChartIcon/>} color="primary"
153-
style={{backgroundColor: 'transparent'}} size='medium'
154-
onClick={handleClick}>
155-
Графики
156-
</Button>
157-
}
235+
<TableCell style={{zIndex: 10}} component="td">
236+
{solutions.length > 0 && <StatsMenu/>}
158237
</TableCell>
159238
{hasHomeworks && <TableCell padding="checkbox" component="td" align="center"
160239
style={{
@@ -300,15 +379,6 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
300379
</TableBody>
301380
</Table>
302381
</TableContainer>
303-
<div style={{marginTop: 15}}>
304-
<SaveStats
305-
courseId={props.course.id}
306-
userId={props.userId}
307-
yandexCode={props.yandexCode}
308-
onActionOpening={() => setSearched({searched, isSaveStatsActionOpened: true})}
309-
onActionClosing={() => setSearched({searched, isSaveStatsActionOpened: false})}
310-
/>
311-
</div>
312382
</div>
313383
);
314384
}

0 commit comments

Comments
 (0)