Merge pull request #37 from DevOps-Cloud-Team5/SCRUM-90-course-page

lecture series + clean up

.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 package-lock.json
 
 .env
+package-lock.json

package.json

@@ -25,6 +25,8 @@
         "jwt-decode": "^4.0.0",
         "moment": "^2.30.1",
         "momentjs": "^2.0.0",
+        "mui-file-input": "^4.0.4",
+        "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.0",
@@ -41,6 +43,7 @@
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/js-cookie": "^3.0.6",
+        "@types/papaparse": "^5.3.14",
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
         "@types/react-router-dom": "^5.3.3",

src/pages/create_lecture/index.tsx

@@ -4,7 +4,7 @@ import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import Avatar from "@mui/material/Avatar";
 import Typography from "@mui/material/Typography";
-import { Box, MenuItem, Select } from "@mui/material";
+import { Box, Checkbox, FormControlLabel, MenuItem, Select } from "@mui/material";
 import AppRegistrationIcon from "@mui/icons-material/AppRegistration";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -39,12 +39,13 @@ const CreateLecture = () => {
             JSON.stringify({
                 start_time: start_date.toISOString(),
                 end_time: end_date.toISOString(),
-                lecture_type: data.get("lecture_type")
+                lecture_type: data.get("lecture_type"),
+                lecture_series: data.get("lecture_series") == "on"
             })
         )
-            .then((resp) => resp.json())
-            .then((data) => {
-                if (data.ok) {
+
+            .then((resp) => {
+                if (resp.ok) {
                     setRegStatus("success");
                 } else {
                     setRegStatus("failed");
@@ -97,14 +98,14 @@ const CreateLecture = () => {
                             name="lecture_type"
                             autoComplete="lecture_type"
                             autoFocus
-                            // label="Lecture Type"
                             defaultValue="lecture"
                         >
                             <MenuItem value="lecture">Lecture</MenuItem>
                             <MenuItem value="practical">Practical</MenuItem>
                             <MenuItem value="workshop">Workshop</MenuItem>
                             <MenuItem value="exam">Exam</MenuItem>
                         </Select>
+                        <FormControlLabel control={<Checkbox id="lecture_series" name="lecture_series" />} label="Create Lecture Series" />
 
                         {regStatus === "success" && (
                             <Typography variant="body1" color="success">

src/pages/create_user/index.tsx

@@ -5,16 +5,74 @@ import TextField from "@mui/material/TextField";
 import Container from "@mui/material/Container";
 import Avatar from "@mui/material/Avatar";
 import Typography from "@mui/material/Typography";
-import { Box, MenuItem, Select } from "@mui/material";
+import {
+    Box,
+    List,
+    ListItemText,
+    MenuItem,
+    Select,
+    capitalize
+} from "@mui/material";
 import HowToRegOutlinedIcon from "@mui/icons-material/HowToRegOutlined";
 
 import RootPage from "../root";
 import "./create.css"; // Import CSS file for additional styling
 import { backend_post } from "../../utils";
+import { MuiFileInput } from "mui-file-input";
+import * as Papa from "papaparse";
+import { ConfirmUserCSV, User, UserCSV } from "../../types/common";
 
 const CreateUser = () => {
     // const navigate = useNavigate();
     const [regStatus, setRegStatus] = useState("");
+    const [file, setFile] = useState<File | null>();
+
+    const addUsersCSV = (parsed_users: any) => {
+        const users: UserCSV[] = parsed_users.data;
+        for (const user of users) {
+            const first_name = capitalize(user.first_name);
+            const last_name = capitalize(user.last_name);
+
+            let password = user.password;
+            let username = user.username;
+            let email = user.email;
+            let role = user.role;
+
+            if (username == "" || username == null)
+                username = first_name + "." + last_name;
+            if (email == "" || email == null)
+                email = first_name + "." + last_name + "@uni.org";
+
+            if (username !== null) username = username.toString().toLowerCase();
+            if (email !== null) email = email.toString().toLowerCase();
+            if (role !== null) role = role.toString().toLowerCase();
+
+            if (password == "" || password == null)
+                password = "defaultpassword";
+            if (role == "" || role == null) role = "student";
+
+            backend_post(
+                "user/register/",
+                JSON.stringify({
+                    username: username,
+                    password: password,
+                    first_name: first_name,
+                    last_name: last_name,
+                    email: email,
+                    role: role
+                })
+            );
+        }
+    };
+
+    const handleFileUpload = (newFile: File | null) => {
+        if (newFile == null) return;
+        setFile(newFile);
+        Papa.parse(newFile, {
+            complete: addUsersCSV,
+            header: true
+        });
+    };
 
     // TODO: Add first and last name validation
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -170,6 +228,13 @@ const CreateUser = () => {
                         >
                             Create
                         </Button>
+                        <MuiFileInput
+                            label="Import Users CSV"
+                            value={file}
+                            onChange={handleFileUpload}
+                            style={{ textDecorationColor: "white" }}
+                            inputProps={{ accept: ".csv" }}
+                        />
                     </Box>
                 </Box>
             </Container>

src/types/common.ts

@@ -59,8 +59,22 @@ export interface User {
     role: string;
 }
 
+export interface UserCSV {
+    first_name: string;
+    last_name: string;
+    password: string | null;
+    username: string | null;
+    email: string | null;
+    role: string | null;
+}
+
 export interface CookieJWT {
     username: string;
     email: string;
     role: string;
 }
+
+export interface ConfirmUserCSV {
+    name: string;
+    success: boolean;
+}