changes bekijken

frontend/public/locales/en/translation.json

@@ -52,7 +52,7 @@
     "cancel": "Cancel",
     "create": "Create",
     "activeCourses": "Active Courses",
-    "archivedCourses":"Archived Courses"    
+    "archivedCourses": "Archived Courses"
   },
   "courseForm": {
     "courseName": "Course Name",
@@ -72,7 +72,8 @@
       "running": "Running",
       "submitTime": "Time submitted",
       "status": "Status"
-    }
+    },
+    "projectOverview": "Overview"
   },
   "time": {
     "yearsAgo": "years ago",
@@ -127,19 +128,19 @@
     "unauthorized": "You are unauthorized to upload a project for this course",
     "submissionError": "Submission failed, please try again"
   },
-  "student" : {
+  "student": {
     "myProjects": "My Projects",
     "myCourses": "My Courses",
     "deadlines": "Past deadlines",
-    "last_submission" : "Last submission",
+    "last_submission": "Last submission",
     "course": "Course",
     "SUCCESS": "Success",
     "FAIL": "Fail",
     "RUNNING": "Is running",
     "LATE": "Late",
     "deadlinesOnDay": "Deadlines on: ",
     "noDeadline": "No deadlines on this day",
-    "no_submission_yet" : "No submission yet",
+    "no_submission_yet": "No submission yet",
     "loading": "Loading...",
     "no_projects": "There are no projects here, sign up for a course to see projects"
   },

frontend/public/locales/nl/translation.json

@@ -109,7 +109,8 @@
       "running": "Aan het uitvoeren",
       "submitTime": "Indientijd",
       "status": "Status"
-    }
+    },
+    "projectOverview": "Overzicht"
   },
   "time": {
     "yearsAgo": "jaren geleden",

frontend/src/App.tsx

@@ -23,6 +23,7 @@ import { synchronizeJoinCode } from "./loaders/join-code.ts";
 import { fetchMe } from "./utils/fetches/FetchMe.ts";
 import {fetchProjectForm} from "./components/ProjectForm/project-form.ts";
 import loadSubmissionOverview from "./loaders/submission-overview-loader.ts";
+import ProjectAdminView from "./pages/project/projectAdminView/projectAdminView.tsx";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -51,6 +52,7 @@ const router = createBrowserRouter(
             path=":projectId/overview"
             element={<SubmissionsOverview />}
           />
+          <Route element={<ProjectAdminView />} path=":projectId/admin"></Route>
           <Route path=":projectId" element={<ProjectView />}></Route>
           <Route path="create" element={<ProjectCreateHome />} loader={fetchProjectForm}/>
         </Route>

frontend/src/pages/project/projectAdminView/projectAdminView.tsx

@@ -0,0 +1,89 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Container,
+  Grid,
+  Link,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import Markdown from "react-markdown";
+import { useParams } from "react-router-dom";
+import SubmissionCard from "./SubmissionCard";
+import { Course } from "../../../types/course";
+import { Title } from "../../../components/Header/Title";
+import { authenticatedFetch } from "../../../utils/authenticated-fetch";
+import i18next from "i18next";
+import {useTranslation} from "react-i18next";
+import {Deadline} from "../../../types/deadline.ts";
+import ProjectAdminViewDeadlineDatagrid from "./projectAdminViewDeadlineDatagrid.tsx";
+
+const API_URL = import.meta.env.VITE_APP_API_HOST;
+
+interface Project {
+  title: string;
+  description: string;
+  regex_expressions: string[];
+}
+
+/**
+ *
+ * @returns - ProjectAdminView component which displays the project details
+ * and submissions of the current admin for that project
+ */
+export default function ProjectAdminView() {
+
+  const { t } = useTranslation('projectAdminView', { keyPrefix: 'projectsAdminView' });
+
+  const { projectId } = useParams<{ projectId: string }>();
+  const [projectData, setProjectData] = useState<Project | null>(null);
+  const [deadlines, setDeadlines] = useState<Deadline[]>([])
+
+  useEffect(() => {
+    authenticatedFetch(`${API_URL}/projects/${projectId}`).then((response) => {
+      if (response.ok) {
+        response.json().then((data) => {
+          const project = data["data"]
+          setProjectData(project);
+          setDeadlines(project.deadlines)
+        })
+      }
+    })
+  }, []);
+
+  return (
+    <Grid
+      width="100%"
+      container
+      direction="column"
+      rowGap="2rem"
+      margin="2rem 0"
+    >
+      <Grid item>
+        {
+          projectData && (
+            <Card>
+              <Title title={projectData.title} />
+              <CardHeader
+                color="secondary"
+                title={t("projectInfo")}
+              ></CardHeader>
+              <CardContent>
+                <Typography variant="h6">{projectData.title}</Typography>
+                <Typography>{projectData.description}</Typography>
+              </CardContent>
+              <CardContent>
+                <Typography></Typography>
+              </CardContent>
+              <CardContent>
+                <ProjectAdminViewDeadlineDatagrid deadlines={deadlines}></ProjectAdminViewDeadlineDatagrid>
+              </CardContent>
+            </Card>
+          )
+        }
+      </Grid>
+    </Grid>
+  );
+}

frontend/src/pages/project/projectAdminView/projectAdminViewDeadlineDatagrid.tsx

@@ -0,0 +1,14 @@
+import {Deadline} from "../../../types/deadline.ts";
+
+/**
+ *
+ */
+export default function ProjectAdminViewDeadlineDatagrid({ deadlines }) {
+  return (
+    <div>
+      {deadlines.map((deadline: Deadline, index) => (
+        <p key={index}>{deadline}</p>
+      ))}
+    </div>
+  );
+}

frontend/src/pages/project/projectView/ProjectView.tsx

@@ -1,21 +1,23 @@
 import {
+  Box,
+  Button,
   Card,
   CardContent,
   CardHeader,
   Container,
   Grid,
-  Link,
   Stack,
   Typography,
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
-import { useParams } from "react-router-dom";
+import {useLocation, useParams} from "react-router-dom";
 import SubmissionCard from "./SubmissionCard";
 import { Course } from "../../../types/course";
 import { Title } from "../../../components/Header/Title";
 import { authenticatedFetch } from "../../../utils/authenticated-fetch";
 import i18next from "i18next";
+import {useTranslation} from "react-i18next";
 
 const API_URL = import.meta.env.VITE_APP_API_HOST;
 
@@ -31,6 +33,11 @@ interface Project {
  * and submissions of the current user for that project
  */
 export default function ProjectView() {
+
+  const location = useLocation();
+
+  const { t } = useTranslation('translation', { keyPrefix: 'projectView' });
+
   const { projectId } = useParams<{ projectId: string }>();
   const [projectData, setProjectData] = useState<Project | null>(null);
   const [courseData, setCourseData] = useState<Course | null>(null);
@@ -88,9 +95,9 @@ export default function ProjectView() {
                       <Typography>{projectData.description}</Typography>
                       <Typography flex="1" />
                       {courseData && (
-                        <Link href={`/${i18next.resolvedLanguage}/courses/${courseData.course_id}`}>
-                          <Typography>{courseData.name}</Typography>
-                        </Link>
+                        <Button variant="contained" href={`/${i18next.resolvedLanguage}/courses/${courseData.course_id}`}>
+                          {courseData.name}
+                        </Button>
                       )}
                     </Stack>
                   </>
@@ -112,6 +119,19 @@ export default function ProjectView() {
           />
         </Container>
       </Grid>
+      <Grid item sm={12}>
+        <Container>
+          <Box sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            p: 1,
+            m: 1,
+            width: '100%'
+          }}>
+            <Button sx={{marginRight: "30px"}} variant="contained" href={location.pathname+"/overview"}>{t("projectOverview")}</Button>
+          </Box>
+        </Container>
+      </Grid>
     </Grid>
   );
 }