diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx index 71f38fae..5d4f84ba 100644 --- a/frontend/frontend/src/components/CourseCard.tsx +++ b/frontend/frontend/src/components/CourseCard.tsx @@ -318,7 +318,7 @@ export function CourseCard({ Deadline @@ -341,7 +341,7 @@ export function CourseCard({ Deadline @@ -361,6 +361,20 @@ export function CourseCard({ }} > + {assignments.length === 0 && ( + + + {t('no_projects')} + + + )} {assignments .filter( (assignment) => @@ -377,9 +391,9 @@ export function CourseCard({ dueDate={ assignment.deadline ? dayjs( - assignment.deadline + assignment.deadline ).format( - 'DD/MM/YYYY HH:mm' + 'DD/MM/YYYY HH:mm' ) : undefined } @@ -418,9 +432,9 @@ export function CourseCard({ dueDate={ assignment.deadline ? dayjs( - assignment.deadline + assignment.deadline ).format( - 'DD/MM/YYYY HH:mm' + 'DD/MM/YYYY HH:mm' ) : undefined } diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx index f8a83cd3..f3f56b67 100644 --- a/frontend/frontend/src/components/Header.tsx +++ b/frontend/frontend/src/components/Header.tsx @@ -167,16 +167,18 @@ export const Header = ({ variant, title }: Props) => { {title} {variant === 'editable' && ( - - - + + + + + )} diff --git a/frontend/frontend/src/components/TabSwitcher.tsx b/frontend/frontend/src/components/TabSwitcher.tsx index a934c518..c6633380 100644 --- a/frontend/frontend/src/components/TabSwitcher.tsx +++ b/frontend/frontend/src/components/TabSwitcher.tsx @@ -38,6 +38,7 @@ export default function TabSwitcher({ <> {nodes.map((node, index) => ( - + {node} ))} @@ -131,7 +137,7 @@ const Tab = styled(BaseTab)` const TabPanel = styled(BaseTabPanel)( ({ theme }) => ` - width: "15%"; + width: "100%"; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.875rem; padding: 20px 12px; diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts index 3362c661..c817851a 100644 --- a/frontend/frontend/src/i18n/en.ts +++ b/frontend/frontend/src/i18n/en.ts @@ -135,6 +135,10 @@ const english = { openinUi: 'Open in UI', openInEditor: 'Open in editor', no_params: 'No parameters where found in the template.', + save_scores: 'Save Scores', + add_course: 'Add course', + add_project: 'Add project', + no_projects: 'No projects', } export default english diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts index ae5e1fc8..8091d071 100644 --- a/frontend/frontend/src/i18n/nl.ts +++ b/frontend/frontend/src/i18n/nl.ts @@ -135,6 +135,10 @@ const dutch = { openinUi: 'Open in UI', openInEditor: 'Open in editor', no_params: 'Geen parameters gevonden in de template.', + save_scores: 'Scores Opslaan', + add_course: 'Voeg vak toe', + add_project: 'Voeg project toe', + no_projects: 'Geen projecten', } export default dutch diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx index c4b75bfc..224f09ae 100644 --- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx +++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx @@ -1,7 +1,10 @@ import { Header } from '../../components/Header.tsx' import FileUploadButton from '../../components/FileUploadButton.tsx' import { SubmissionListItemStudentPage } from '../../components/SubmissionListItemStudentPage.tsx' -import { Score, SubmissionListItemTeacherPage } from '../../components/SubmissionListItemTeacherPage.tsx' +import { + Score, + SubmissionListItemTeacherPage, +} from '../../components/SubmissionListItemTeacherPage.tsx' import { Button, Card, @@ -17,7 +20,7 @@ import { Skeleton, Stack, Tooltip, - Typography + Typography, } from '@mui/material' import { t } from 'i18next' import instance from '../../axiosConfig.ts' @@ -214,8 +217,8 @@ export function AssignmentPage() { useEffect(() => { async function fetchScore() { - if (submissions){ - setLastSubmission(submissions[submissions.length-1]) + if (submissions) { + setLastSubmission(submissions[submissions.length - 1]) if (lastSubmission) { const scoreResponse = await instance.get( `/scores/?indiening=${lastSubmission.indiening_id}` @@ -226,7 +229,9 @@ export function AssignmentPage() { } } } - fetchScore().catch((error) => console.error('Error fetching score', error)) + fetchScore().catch((error) => + console.error('Error fetching score', error) + ) }, [submissions]) // Function to download all submissions as a zip file @@ -391,7 +396,7 @@ export function AssignmentPage() { - {assignment && assignment.deadline + {assignment && + assignment.deadline ? dayjs( - assignment.deadline - ).format( - 'DD/MM/YYYY HH:mm' - ) + assignment.deadline + ).format( + 'DD/MM/YYYY HH:mm' + ) : t('no_deadline')} )} @@ -500,7 +513,19 @@ export function AssignmentPage() { + + - {assignment && assignment.deadline + {assignment && + assignment.deadline ? dayjs( - assignment.deadline - ).format( - 'DD/MM/YYYY HH:mm' - ) + assignment.deadline + ).format( + 'DD/MM/YYYY HH:mm' + ) : t('no_deadline')} )} @@ -855,7 +888,10 @@ export function AssignmentPage() { : students } text="group_members" - noGroup={students.length == 0} + noGroup={ + students.length == + 0 + } /> )} @@ -891,7 +927,19 @@ export function AssignmentPage() { 0 ? ( {score ? `${score.score}/${assignment?.max_score} (${(100 * score.score) / Number(assignment?.max_score)}%)` @@ -994,9 +1040,7 @@ export function AssignmentPage() { ) : ( {t('no_score_yet')} @@ -1181,49 +1225,72 @@ export function AssignmentPage() { {/*Upload button, this is what the student will see. */} - {loading || !assignment?.deadline || (!dayjs().isAfter(dayjs(assignment.deadline)) && !assignment.extra_deadline) - || (assignment.extra_deadline && !dayjs().isAfter(dayjs(assignment.extra_deadline)))? ( - <> - - - - - - - + + + + + + - - {t('submit')} - - - - - - - ) : null} + + + {t('submit')} + + + + + + + ) : null} {/* Teachers get an extra button to add courses. */} - navigate('/course/new')} - > - - + + navigate('/course/new')} + > + + + )} diff --git a/frontend/frontend/src/pages/mainPage/MainPage.tsx b/frontend/frontend/src/pages/mainPage/MainPage.tsx index 4f4d5c6e..cb8ef679 100644 --- a/frontend/frontend/src/pages/mainPage/MainPage.tsx +++ b/frontend/frontend/src/pages/mainPage/MainPage.tsx @@ -138,7 +138,9 @@ export default function MainPage() { const doArchive = async () => { console.log('Archive clicked') const newCourses = courses.map((course) => - course.vak_id == archiveCourseId ? archiveSingleCourse(course) : course + course.vak_id == archiveCourseId + ? archiveSingleCourse(course) + : course ) setCourses(newCourses) try { @@ -195,139 +197,151 @@ export default function MainPage() { {/* Two tabs to select either the current or archived courses, CoursesView is a scroll-box with the current courses, ArchivedView is the same but for the archived courses. */} - - {[...Array(3)].map((_, index) => ( - - ))} - , - - {[...Array(3)].map((_, index) => ( - - ))} - , - ] - : [ - - !course.gearchiveerd && - course.jaartal === - selectedYear - ) - .sort((a: Course, b: Course) => { - if ( - courseOrder.includes( - a.vak_id - ) - ) { - if ( - courseOrder.includes( - b.vak_id - ) - ) { - return ( - courseOrder.indexOf( + + + {[...Array(3)].map((_, index) => ( + + ))} + , + + {[...Array(3)].map((_, index) => ( + + ))} + , + ] + : [ + + !course.gearchiveerd && + course.jaartal === + selectedYear + ) + .sort( + ( + a: Course, + b: Course + ) => { + if ( + courseOrder.includes( a.vak_id - ) - - courseOrder.indexOf( - b.vak_id ) - ) - } else { - return -1 + ) { + if ( + courseOrder.includes( + b.vak_id + ) + ) { + return ( + courseOrder.indexOf( + a.vak_id + ) - + courseOrder.indexOf( + b.vak_id + ) + ) + } else { + return -1 + } + } else { + if ( + courseOrder.includes( + b.vak_id + ) + ) { + return 1 + } else { + return 0 + } + } } - } else { - if ( - courseOrder.includes( - b.vak_id - ) - ) { - return 1 - } else { - return 0 - } - } - })} - pinnedCourses={pinnedCourses} - archiveCourse={archiveCourse} - pinCourse={pinCourse} - />, - - course.gearchiveerd && course.jaartal === selectedYear - ) - .sort((a: Course, b: Course) => { - if ( - courseOrder.includes( - a.vak_id - ) - ) { - if ( - courseOrder.includes( - b.vak_id - ) - ) { - return ( - courseOrder.indexOf( + )} + pinnedCourses={pinnedCourses} + archiveCourse={archiveCourse} + pinCourse={pinCourse} + />, + + course.gearchiveerd && + course.jaartal === + selectedYear + ) + .sort( + ( + a: Course, + b: Course + ) => { + if ( + courseOrder.includes( a.vak_id - ) - - courseOrder.indexOf( - b.vak_id ) - ) - } else { - return -1 - } - } else { - if ( - courseOrder.includes( - b.vak_id - ) - ) { - return 1 - } else { - return 0 + ) { + if ( + courseOrder.includes( + b.vak_id + ) + ) { + return ( + courseOrder.indexOf( + a.vak_id + ) - + courseOrder.indexOf( + b.vak_id + ) + ) + } else { + return -1 + } + } else { + if ( + courseOrder.includes( + b.vak_id + ) + ) { + return 1 + } else { + return 0 + } + } } - } - })} - pinnedCourses={pinnedCourses} - pinCourse={pinCourse} - />, - ] - } - /> + )} + pinnedCourses={pinnedCourses} + pinCourse={pinCourse} + />, + ] + } + /> + {/* Add a calendar to the right of the mainpage. */} ) : ( <> - - setOpenSaveScoresPopup( - true - ) - } - sx={{ - color: 'background.default', - '&:hover': { - color: 'text.primary', - }, - backgroundColor: - 'primary.main', - borderRadius: 2, - }} + - - + + setOpenSaveScoresPopup( + true + ) + } + sx={{ + color: 'background.default', + '&:hover': { + color: 'text.primary', + }, + backgroundColor: + 'primary.main', + borderRadius: 2, + }} + > + + + )} - - setOpenDeleteScoresPopup(true) - } - sx={{ - backgroundColor: - 'secondary.main', - borderRadius: 2, - }} - > - - + + + setOpenDeleteScoresPopup( + true + ) + } + sx={{ + backgroundColor: + 'secondary.main', + borderRadius: 2, + }} + > + + + {/* Popup for confirming saving scores */} diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx index 4c794606..6707b6c8 100644 --- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx +++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx @@ -15,6 +15,7 @@ import { Skeleton, Stack, TextField, + Tooltip, Typography, } from '@mui/material' import { Header } from '../../components/Header' @@ -311,7 +312,7 @@ export function AddChangeSubjectPage() { handleUploadStudent() if (studentRef.current) { - studentRef.current.value = ''; + studentRef.current.value = '' setEmailStudent('') } } @@ -403,7 +404,7 @@ export function AddChangeSubjectPage() { handleUploadTeacher() if (teacherRef.current) { - teacherRef.current.value = ''; + teacherRef.current.value = '' setEmailTeacher('') } } @@ -470,7 +471,7 @@ export function AddChangeSubjectPage() { let found = false const id = userData.user if (userData.is_lesgever != isLesgever) { - if (userData.is_lesgever){ + if (userData.is_lesgever) { alert(t('cant_add_teachers_to_student_list')) } else { alert(t('cant_add_students_to_teacher_list')) @@ -702,21 +703,27 @@ export function AddChangeSubjectPage() { flexDirection={'row'} gap={2} > - - setCancelConfirmation(true) - } - > - {t('cancel')} - - - + + + setCancelConfirmation( + true + ) + } + > + {t('cancel')} + + + + + + @@ -760,14 +767,14 @@ export function AddChangeSubjectPage() { setEmailStudent, handleAddStudent, t('upload_students'), - studentRef, + studentRef )} {DialogWindow( handleCloseStudent, openStudent, handleRemoveStudent, - t('delete_student'), + t('delete_student') )} @@ -811,7 +818,7 @@ export function AddChangeSubjectPage() { setEmailTeacher, handleAddTeacher, t('upload_teachers'), - teacherRef, + teacherRef )} {DialogWindow( diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx index 11fd7e66..e39e2785 100644 --- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx +++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx @@ -3,6 +3,7 @@ import { ListItem, ListItemButton, ListItemText, + Tooltip, } from '@mui/material' import { useNavigate } from 'react-router-dom' import { t } from 'i18next' @@ -198,43 +199,50 @@ function ButtonActions({ return ( - {visible ? ( - handleIconClick(e, 'visible')} - edge="end" - aria-label="visible" - > - - - ) : ( - handleIconClick(e, 'visible')} - edge="end" - aria-label="not-visible" - > - - - )} + + {visible ? ( + handleIconClick(e, 'visible')} + edge="end" + aria-label="visible" + > + + + ) : ( + handleIconClick(e, 'visible')} + edge="end" + aria-label="not-visible" + > + + + )} + + {!archived && ( + + handleIconClick(e, 'archive')} + edge="end" + aria-label="archive" + > + + + + )} + handleIconClick(e, 'archive')} + id="delete" + onClick={(e) => handleIconClick(e, 'delete')} edge="end" - aria-label="archive" + aria-label="delete" > - + - )} - handleIconClick(e, 'delete')} - edge="end" - aria-label="delete" - > - - + ) } diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx index 91a52e1d..1949639e 100644 --- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx +++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx @@ -1,5 +1,12 @@ import { Header } from '../../components/Header' -import { Box, CircularProgress, Grid, IconButton, Stack } from '@mui/material' +import { + Box, + CircularProgress, + Grid, + IconButton, + Stack, + Tooltip, +} from '@mui/material' import TabSwitcher from '../../components/TabSwitcher.tsx' import { ProjectsView } from './ProjectsView.tsx' import { useNavigate, useParams } from 'react-router-dom' @@ -327,19 +334,24 @@ export function SubjectsPage() { '/accept_invitation' } /> - - - + + + +