Merge pull request #174 from SELab-2/listview_icons

listview icons
SELab-2 · May 18, 2024 · d515b2d · d515b2d
2 parents 3897bbd + 38ddd70
commit d515b2d
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 12 deletions.
diff --git a/frontend/app/[locale]/admin/users/page.tsx b/frontend/app/[locale]/admin/users/page.tsx
@@ -5,13 +5,19 @@ import NavBar from "@app/[locale]/components/NavBar";
 import Footer from "@app/[locale]/components/Footer";
 import ListView from '@app/[locale]/components/ListView';
 import BackButton from '@app/[locale]/components/BackButton';
+import EmailIcon from '@mui/icons-material/Email';
+import WorkIcon from '@mui/icons-material/Work';
 
 const i18nNamespaces = ['common'];
 
 export default async function Users({ params: { locale } }: { params: { locale: any } }) {
     const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
-    const headers = [t('email'), t('role'), ''];
+    const headers = [
+        <React.Fragment key="email"><EmailIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('email')}</React.Fragment>,
+        , 
+        <React.Fragment key="role"><WorkIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('role')}</React.Fragment>
+        , ''];
     const headers_backend = ['email', 'role', ''];
 
     return (

diff --git a/frontend/app/[locale]/components/CourseCard.tsx b/frontend/app/[locale]/components/CourseCard.tsx
@@ -4,6 +4,8 @@ import {Card, CardContent, CardMedia, Typography, Box} from '@mui/material';
 import {Course, getLastSubmissionFromProject, getProjectsFromCourse, Project, Submission,} from "@lib/api";
 import {useTranslation} from "react-i18next";
 import ListView from '@app/[locale]/components/ListView';
+import AccesAlarm from '@mui/icons-material/AccessAlarm';
+import Person from '@mui/icons-material/Person';
 
 const CourseCard = ({params: {course}}: { params: { course: Course } }) => {
     const [projects, setProjects] = useState<Project[]>([]);
@@ -41,7 +43,11 @@ const CourseCard = ({params: {course}}: { params: { course: Course } }) => {
         fetchProjects();
     }, [course.course_id]);
 
-    const headers = [t('name'), t('deadline'), '']
+    const headers = [
+    <React.Fragment key="name"><Person style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('name')}</React.Fragment>, 
+    <React.Fragment key="deadline"><AccesAlarm style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " +t('deadline')}</React.Fragment>, 
+    ''
+];
     const headers_backend = ['name', 'deadline', '']
 
 

diff --git a/frontend/app/[locale]/components/GroupSubmissionList.tsx b/frontend/app/[locale]/components/GroupSubmissionList.tsx
@@ -3,14 +3,22 @@
 import ListView from "@app/[locale]/components/ListView";
 import React from "react";
 import {useTranslation} from "react-i18next";
+import GroupsIcon from '@mui/icons-material/Groups';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
 const GroupSubmissionList = ({project_id, page_size = 5, search}: {
     project_id: number,
     page_size: number,
     search: string
 }) => {
     const {t} = useTranslation()
-    const headers = [t("group_number"), t("submission_date"), t("Status"), ""]
+    const headers = [
+        <React.Fragment key="group_nr"><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_number')}</React.Fragment>,
+        <React.Fragment key="submission_date"><CalendarMonthIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('submission_date')}</React.Fragment>,
+        <React.Fragment key="status"><CheckCircleOutlineIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('Status')}</React.Fragment>,
+        ""
+    ];
     const headers_backend = ["group_nr", "submission_date", "status", ""]
     const sortable = [true, true, false]
 

diff --git a/frontend/app/[locale]/components/ListView.tsx b/frontend/app/[locale]/components/ListView.tsx
@@ -438,7 +438,7 @@ const ListView: NextPage<ListViewProps> = ({
                         <TableHead>
                             <TableRow>
                                 {(get !== 'groups' && get !== 'projects'  && get !== 'courses' && !(get === 'submissions' && !action_name)) && 
-                                get !== 'course_teachers' && get !== 'users' && !(action_name && user?.role === 3) &&
+                                get !== 'course_teachers' && get !== 'users' && !(action_name && user?.role === 3) && get !== 'archived_courses' &&
                                     <StyledTableCell>
                                         <Typography
                                             variant={"body1"}
@@ -506,7 +506,7 @@ const ListView: NextPage<ListViewProps> = ({
                         {rows.map((row, index) => (
                             <StyledTableRow key={index}>
                                 {((get !== 'groups' && get !== 'projects' && get !== 'courses' && !(get === 'submissions' && !action_name) && get != 'users') &&
-                                  get !== 'course_teachers' && !(action_name && user?.role === 3) &&
+                                  get !== 'course_teachers' && !(action_name && user?.role === 3 && get !== 'archived_courses') &&
                                     <StyledTableCell>
                                         {<CheckBoxWithCustomCheck checked={false}/>}
                                     </StyledTableCell>)}

diff --git a/frontend/app/[locale]/components/ProjectSubmissionsList.tsx b/frontend/app/[locale]/components/ProjectSubmissionsList.tsx
@@ -3,6 +3,9 @@
 import ListView from "@app/[locale]/components/ListView";
 import React from "react";
 import {useTranslation} from "react-i18next";
+import GroupsIcon from '@mui/icons-material/Groups';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
 
 const ProjectSubmissionsList = ({project_id, page_size = 5, search}: {
@@ -11,7 +14,13 @@ const ProjectSubmissionsList = ({project_id, page_size = 5, search}: {
     search: string
 }) => {
     const {t} = useTranslation()
-    const headers = [t("group_number"), t("submission_date"), t("Status"), ""]
+    const headers = [
+        <React.Fragment key="group_nr"><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_number')}</React.Fragment>
+        ,
+        <React.Fragment key="submission_date"><CalendarMonthIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('submission_date')}</React.Fragment> 
+        ,
+        <React.Fragment key="status"><CheckCircleOutlineIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('Status')}</React.Fragment> 
+        , ""]
     const headers_backend = ["group_nr", "submission_date", "status", ""]
     const sortable = [true, true, false]
 

diff --git a/frontend/app/[locale]/course/[course_id]/page.tsx b/frontend/app/[locale]/course/[course_id]/page.tsx
@@ -9,13 +9,19 @@ import JoinCourseWithToken from "@app/[locale]/components/JoinCourseWithToken";
 import ListView from '@app/[locale]/components/ListView';
 import AddProjectButton from "@app/[locale]/components/AddProjectButton";
 import React from "react";
+import AccesAlarm from '@mui/icons-material/AccessAlarm';
+import Person from '@mui/icons-material/Person';
 
 const i18nNamespaces = ['common']
 
 export default async function Course({params: {locale, course_id}, searchParams: {token}}:
                                          { params: { locale: any, course_id: number }, searchParams: { token: string } }) {
     const {t, resources} = await initTranslations(locale, i18nNamespaces)
-    const headers = [t('name'), t('deadline'), '']
+
+    const headers = [
+        <React.Fragment key="name"><Person style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('name')}</React.Fragment>, 
+       <React.Fragment key="deadline"><AccesAlarm style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " +t('deadline')}</React.Fragment>, 
+       '']
     const headers_backend = ['name', 'deadline', '']
 
     return (

diff --git a/frontend/app/[locale]/course/[course_id]/students/page.tsx b/frontend/app/[locale]/course/[course_id]/students/page.tsx
@@ -5,14 +5,16 @@ import ListView from '@app/[locale]/components/ListView';
 import {Box, Button} from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import React from "react";
+import EmailIcon from '@mui/icons-material/Email';
 
 const i18nNamespaces = ['common']
 
 export default async function StudentsPage({ params }: { params: { locale: any, course_id: number } }) {
     const { locale, course_id } = params;
     const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
-    const headers = [t('email')];
+    const headers = [
+        <React.Fragment key="email"><EmailIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('email')}</React.Fragment>];
     const headers_backend = ['email'];
 
     return (

diff --git a/frontend/app/[locale]/course/[course_id]/teachers/page.tsx b/frontend/app/[locale]/course/[course_id]/teachers/page.tsx
@@ -5,14 +5,15 @@ import ListView from '@app/[locale]/components/ListView';
 import {Box, Button} from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import React from "react";
+import EmailIcon from '@mui/icons-material/Email';
 
 const i18nNamespaces = ['common']
 
 export default async function TeachersPage({params}: { params: { locale: any, course_id: number } }) {
     const {locale, course_id} = params;
     const {t, resources} = await initTranslations(locale, i18nNamespaces);
 
-    const headers = [t('email')];
+    const headers = [<React.Fragment key="email"><EmailIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('email')}</React.Fragment>];
     const headers_backend = ['email'];
 
     return (

diff --git a/frontend/app/[locale]/course/all/page.tsx b/frontend/app/[locale]/course/all/page.tsx
@@ -5,14 +5,19 @@ import NavBar from "@app/[locale]/components/NavBar";
 import ListView from '@app/[locale]/components/ListView';
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import {Box, Button} from "@mui/material";
+import NotesIcon from '@mui/icons-material/Notes';
+import MeetingRoomIcon from '@mui/icons-material/MeetingRoom';
 
 
 const i18nNamespaces = ['common']
 
 export default async function AllCoursesPage({params: {locale}}: { params: { locale: any } }) {
     const {t, resources} = await initTranslations(locale, i18nNamespaces)
 
-    const headers = [t('name'), t('description'), t('open'), t('join/leave')]
+    const headers = [t('name'), 
+    <React.Fragment key="description"><NotesIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('description')}</React.Fragment>,
+    , t('open'), 
+    <React.Fragment key="joinleave"><MeetingRoomIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('join_leave')}</React.Fragment>];
     const headers_backend = ['name', 'description', 'open', 'join/leave']
 
     return (

diff --git a/frontend/app/[locale]/course/archived/page.tsx b/frontend/app/[locale]/course/archived/page.tsx
@@ -4,12 +4,15 @@ import ListView from '@app/[locale]/components/ListView';
 import initTranslations from "@app/i18n";
 import TranslationsProvider from "@app/[locale]/components/TranslationsProvider";
 import BackButton from "@app/[locale]/components/BackButton";
+import NotesIcon from '@mui/icons-material/Notes';
 
 const i18nNamespaces = ['common'];
 
 const ArchivePage = async ({params: {locale}}) => {
     const {t, resources} = await initTranslations(locale, i18nNamespaces);
-    const headers = [t('name'), t('description'), t('open')];
+    const headers = [t('name'), 
+    <React.Fragment key="description"><NotesIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('description')}</React.Fragment>,
+    , t('open')];
     const headers_backend = ['name', 'description', 'open'];
 
     return (

diff --git a/frontend/app/[locale]/project/[project_id]/groups/page.tsx b/frontend/app/[locale]/project/[project_id]/groups/page.tsx
@@ -5,14 +5,19 @@ import ListView from '@app/[locale]/components/ListView';
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { Button, Box } from "@mui/material";
 import React from "react";
+import GroupsIcon from '@mui/icons-material/Groups';
+import MeetingRoomIcon from '@mui/icons-material/MeetingRoom';
 
 const i18nNamespaces = ['common']
 
 export default async function GroupPage({ params }: { params: { locale: any, project_id: number } }) {
     const { locale, project_id: projectId } = params; 
     const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
-    const headers = [t('group_nr'), t('members'), t('join/leave')];
+    const headers = [
+        <React.Fragment key="group_nr"><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_nr')}</React.Fragment>
+        , t('members'), 
+        <React.Fragment key="joinleave"><MeetingRoomIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('join_leave')}</React.Fragment>];
     const headers_backend = ['group_nr', 'members', 'join/leave'];
 
     return (