Course views for teacher

backend/project/endpoints/courses/join_codes/course_join_codes.py

@@ -34,7 +34,7 @@ def get(self, course_id):
         return query_selected_from_model(
             CourseShareCode,
             urljoin(f"{RESPONSE_URL}/", f"{str(course_id)}/", "join_codes"),
-            select_values=["join_code", "expiry_time"],
+            select_values=["join_code", "expiry_time", "for_admins"],
             filters={"course_id": course_id}
         )
 

frontend/.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

frontend/package.json

@@ -12,15 +12,16 @@
     "test": "npm run cypress:test"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.10",
-    "@mui/material": "^5.15.10",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
     "@mui/x-data-grid": "^7.1.1",
-    "axios": "^1.6.8",
     "@mui/x-date-pickers": "^7.1.1",
+    "axios": "^1.6.8",
     "dayjs": "^1.11.10",
+    "debounce": "^2.0.0",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.5.0",
     "jszip": "^3.10.1",

frontend/public/locales/en/translation.json

@@ -10,6 +10,38 @@
     "tag": "en",
     "homepage": "Homepage"
   },
+  "courseDetailTeacher": {
+    "title": "Course Details",
+    "joinCodes": "Join Codes",
+    "forAdmins": "For Admins",
+    "forStudents": "For Students",
+    "noExpiryDate": "No expiry date",
+    "expiryDate": "Expiry Date",
+    "newJoinCode": "New Join Code",
+    "deleteSelected": "Delete Selected Students",
+    "projects": "Projects",
+    "newProject": "New Project",
+    "assistantList": "List of co-teachers/assistants",
+    "newTeacher": "New teacher",
+    "studentList": "List of students",
+    "newStudent": "New student(s)",
+    "deadline": "Deadline",
+    "teacher": "Teacher",
+    "view": "View",
+    "admins": "Admins",
+    "students": "Students"
+  },
+  "allCoursesTeacher": {
+    "title": "All Courses",
+    "courseForm": "Course Form",
+    "courseName": "Course Name",
+    "submit": "Submit",
+    "emptyCourseNameError": "Course name should not be empty",
+    "cancel": "Cancel",
+    "create": "Create",
+    "activeCourses": "Active Courses",
+    "archivedCourses":"Archived Courses"    
+  },
   "courseForm": {
     "courseName": "Course Name",
     "submit": "Submit",
@@ -36,6 +68,11 @@
     "daysAgo": "days ago",
     "hoursAgo": "hours ago",
     "minutesAgo": "minutes ago",
-    "justNow": "just now"
+    "justNow": "just now",
+    "yearsLater": "years later",
+    "monthsLater": "months later",
+    "daysLater": "days later",
+    "hoursLater": "hours later",
+    "minutesLater": "minutes later"
   }
 }

frontend/public/locales/nl/translation.json

@@ -10,6 +10,38 @@
     "tag": "nl",
     "homepage": "Homepage"
   },
+  "courseDetailTeacher": {
+    "title": "Vak Details",
+    "joinCodes": "Join Codes",
+    "forAdmins": "Voor Admins",
+    "forStudents": "Voor Studenten",
+    "noExpiryDate": "Geen vervaldatum",
+    "expiryDate": "Vervaldatum",
+    "newJoinCode": "Nieuwe Join Code",
+    "deleteSelected": "Verwijder geselecteerde studenten",
+    "projects": "Projecten",
+    "newProject": "Nieuw Project",
+    "assistantList": "Lijst co-leerkrachten/assistenten",
+    "newTeacher": "Nieuwe leerkracht",
+    "studentList": "Lijst studenten",
+    "newStudent": "Nieuwe student(en)",
+    "deadline": "Deadline",
+    "teacher": "Leerkracht",
+    "view": "Bekijk",
+    "admins": "Admins",
+    "students": "Studenten"
+  },
+  "allCoursesTeacher": {
+    "title": "Alle Vakken",
+    "courseForm": "Vak Form",
+    "courseName": "Vak Naam",
+    "submit": "Opslaan",
+    "emptyCourseNameError": "Vak name mag niet leeg zijn",
+    "cancel": "Annuleer",
+    "create": "Nieuw Vak",
+    "activeCourses": "Actieve Vakken",
+    "archivedCourses":"Gearchiveerde Vakken"
+  },
   "courseForm": {
     "courseName": "Vak Naam",
     "submit": "Opslaan",
@@ -36,6 +68,11 @@
     "daysAgo": "dagen geleden",
     "hoursAgo": "uur geleden",
     "minutesAgo": "minuten geleden",
-    "justNow": "Zonet"
+    "justNow": "Zonet",
+    "yearsLater": "jaren later",
+    "monthsLater": "maanden later",
+    "daysLater": "dagen later",
+    "hoursLater": "uur later",
+    "minutesLater": "minuten later"
   }
 }

frontend/src/App.tsx

@@ -1,5 +1,8 @@
 import { Route,RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
 import Layout from "./components/Header/Layout";
+import { AllCoursesTeacher } from "./components/Courses/AllCoursesTeacher";
+import { CourseDetailTeacher } from "./components/Courses/CourseDetailTeacher";
+import { dataLoaderCourseDetail, dataLoaderCourses } from "./components/Courses/CourseUtils";
 import Home from "./pages/home/Home";
 import LanguagePath from "./components/LanguagePath";
 import ProjectView from "./pages/project/projectView/ProjectView";
@@ -13,6 +16,10 @@ const router = createBrowserRouter(
         <Route path="project" >
           <Route path=":projectId" element={<ProjectView />}/>
         </Route>
+        <Route path="courses">
+          <Route index element={<AllCoursesTeacher />} loader={dataLoaderCourses}/>
+          <Route path=":courseId" element={<CourseDetailTeacher />} loader={dataLoaderCourseDetail} />
+        </Route>
       </Route>
     </Route>
   )

frontend/src/components/Courses/AllCoursesTeacher.tsx

@@ -0,0 +1,79 @@
+import { Button, Dialog, DialogActions, DialogTitle, FormControl, FormHelperText, Grid, Input, InputLabel } from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { SideScrollableCourses } from "./CourseUtilComponents";
+import { Course, apiHost, callToApi } from "./CourseUtils";
+import { Title } from "../Header/Title";
+import { useLoaderData } from "react-router-dom";
+
+/**
+ * @returns A jsx component representing all courses for a teacher
+ */
+export function AllCoursesTeacher(): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const courses = (useLoaderData() as Course[]);
+
+  const [courseName, setCourseName] = useState('');
+  const [error, setError] = useState('');
+
+  const navigate = useNavigate();
+
+  const { t } = useTranslation('translation', { keyPrefix: 'allCoursesTeacher' });
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCourseName(event.target.value);
+    setError(''); // Clearing error message when user starts typing
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault(); // Prevents the default form submission behaviour
+
+    if (!courseName.trim()) {
+      setError(t('emptyCourseNameError'));
+      return;
+    }
+
+    const data = { name: courseName };
+    callToApi(`${apiHost}/courses`, JSON.stringify(data), 'POST', navigate);
+  };
+  return (
+    <>
+      <Title title={t('title')}></Title>
+      <Grid container direction={'column'} style={{marginTop: '1rem', width:'100vw', height: '80vh'}}>
+        <SideScrollableCourses courses={courses}></SideScrollableCourses>
+        <Dialog open={open} onClose={handleClose}>
+          <DialogTitle>{t('courseForm')}</DialogTitle>
+          <form style={{ margin: "2rem" }} onSubmit={handleSubmit}>
+            <FormControl>
+              <InputLabel htmlFor="course-name">{t('courseName')}</InputLabel>
+              <Input
+                id="course-name"
+                value={courseName}
+                onChange={handleInputChange}
+                error={!!error}
+                aria-describedby="my-helper-text"
+              />
+              {error && <FormHelperText id="my-helper-text">{error}</FormHelperText>}
+            </FormControl>
+            <DialogActions>
+              <Button onClick={handleClose}>{t('cancel')}</Button>
+              <Button type="submit">{t('submit')}</Button>
+            </DialogActions>
+          </form>
+        </Dialog>
+        <Grid item style={{position: "absolute", left: "2rem", bottom: "5rem"}}>
+          <Button onClick={handleClickOpen} >{t('create')}</Button>
+        </Grid>
+      </Grid>
+    </>
+  );
+}