Improved status on required files

SELab-2 · May 19, 2024 · 0dae859 · 0dae859
1 parent d028afe
commit 0dae859
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 20 deletions.
diff --git a/frontend/app/[locale]/components/StatusButton.tsx b/frontend/app/[locale]/components/StatusButton.tsx
@@ -0,0 +1,57 @@
+import {ClearIcon } from '@mui/x-date-pickers/icons';
+import React, { useState } from 'react';
+import CheckIcon from "@mui/icons-material/Check";
+import {Button, Typography} from "@mui/material";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+
+interface StatusButtonProps {
+    files: any[],
+    setFiles: (value: (((prevState: any[]) => any[]) | any[])) => void,
+    fileIndex: number,
+}
+
+function StatusButton(
+    {files, setFiles, fileIndex}: StatusButtonProps,
+) {
+  const [statusIndex, setStatusIndex] = useState(getStart(files[fileIndex]));
+  const statuses = [
+    { icon: <CheckIcon style={{ color: '#66bb6a' }} /> },
+    { icon: <HelpOutlineIcon style={{ color: '#000000' }} />},
+    { icon: <ClearIcon style={{ color: '#ef5350' }} /> },
+  ];
+  const status_valeus = ['+', '~', '-'];
+
+  const handleClick = () => {
+      const newStatusIndex = (statusIndex + 1) % statuses.length;
+      setStatusIndex(newStatusIndex);
+      const newFiles = [...files];
+      newFiles[fileIndex] = status_valeus[newStatusIndex];
+      setFiles(newFiles);
+  };
+
+  return (
+    <Button
+      variant="contained"
+      onClick={handleClick}
+      style={{
+          border: 'none',
+          backgroundColor: 'transparent',
+          margin: 10,
+      }}
+    >
+      {statuses[statusIndex].icon}
+    </Button>
+  );
+}
+
+function getStart(file: string) {
+  if (file[0] === '+') {
+    return 0;
+  } else if (file[0] === '~') {
+    return 1;
+  } else {
+    return 2;
+  }
+}
+
+export default StatusButton;
diff --git a/frontend/app/[locale]/components/general/RequiredFilesList.tsx b/frontend/app/[locale]/components/general/RequiredFilesList.tsx
@@ -1,19 +1,30 @@
 "use client"
 
-import {IconButton, List, ListItem, ListItemText, TextField, Typography, Button} from "@mui/material";
+import {Button, IconButton, List, ListItem, ListItemText, TextField, Typography} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import React, {useState} from "react";
 import Box from "@mui/material/Box";
+import StatusButton from "@app/[locale]/components/StatusButton";
 
 interface ItemsListProps {
     items: string[],
     setItems: (value: (((prevState: any[]) => any[]) | any[])) => void,
     input_placeholder: string,
-    empty_list_placeholder:string,
-    button_text: string
+    empty_list_placeholder: string,
+    button_text: string,
+    items_status: string[],
+    setItemsStatus: (value: (((prevState: any[]) => any[]) | any[])) => void,
 }
 
-const ItemsList = ({items, setItems, input_placeholder, empty_list_placeholder, button_text}: ItemsListProps) => {
+const ItemsList = ({
+                       items,
+                       setItems,
+                       input_placeholder,
+                       empty_list_placeholder,
+                       button_text,
+                       items_status,
+                       setItemsStatus
+                   }: ItemsListProps) => {
     const [newItem, setNewItem] = useState('')
     const [noInput, setNoInput] = useState(false)
 
@@ -30,7 +41,6 @@ const ItemsList = ({items, setItems, input_placeholder, empty_list_placeholder,
             setItems(newItems);
             setNewItem('');
             setNoInput(false);
-            console.log(items);
         } else {
             setNoInput(true);
         }
@@ -39,7 +49,8 @@ const ItemsList = ({items, setItems, input_placeholder, empty_list_placeholder,
     return (
         <Box>
             {items.length === 0 ? (
-                <Typography variant={"body1"} color={"text.disabled"} sx={{padding: 1}}>{empty_list_placeholder}</Typography>
+                <Typography variant={"body1"} color={"text.disabled"}
+                            sx={{padding: 1}}>{empty_list_placeholder}</Typography>
             ) : (
                 <List
                     sx={{
@@ -54,13 +65,16 @@ const ItemsList = ({items, setItems, input_placeholder, empty_list_placeholder,
                         <ListItem
                             key={index}
                             secondaryAction={
-                                <IconButton
-                                    edge="end"
-                                    aria-label="delete"
-                                    onClick={() => handleDelete(index)}
-                                >
-                                    <DeleteIcon />
-                                </IconButton>
+                                <div>
+                                    <StatusButton files={items_status} setFiles={setItemsStatus} fileIndex={index}/>
+                                    <IconButton
+                                        edge="end"
+                                        aria-label="delete"
+                                        onClick={() => handleDelete(index)}
+                                    >
+                                        <DeleteIcon/>
+                                    </IconButton>
+                                </div>
                             }
                         >
                             <ListItemText

diff --git a/frontend/app/[locale]/components/project_components/requiredFiles.tsx b/frontend/app/[locale]/components/project_components/requiredFiles.tsx
@@ -5,16 +5,18 @@ import Tooltip from "@mui/material/Tooltip";
 import React, {useState} from "react";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import Box from "@mui/material/Box";
-import ItemsList from "@app/[locale]/components/general/ItemsList";
 import {useTranslation} from "react-i18next";
+import RequiredFilesList from "@app/[locale]/components/general/RequiredFilesList";
 
 interface RequiredFilesProps {
     files: any[],
     setFiles: (value: (((prevState: any[]) => any[]) | any[])) => void,
+    file_status: any[],
+    setFileStatus: (value: (((prevState: any[]) => any[]) | any[])) => void,
 }
 
 function RequiredFiles(
-    {files, setFiles}: RequiredFilesProps
+    {files, setFiles, file_status, setFileStatus}: RequiredFilesProps
 ) {
     const {t} = useTranslation();
 
@@ -35,12 +37,14 @@ function RequiredFiles(
             </Tooltip>
         </Typography>
         <Box className={"conditionsBox"}>
-            <ItemsList
+            <RequiredFilesList
                 items={files}
                 setItems={setFiles}
                 input_placeholder={t("new_file_example")}
                 empty_list_placeholder={t("no_required_files")}
                 button_text={t("add")}
+                items_status={file_status}
+                setItemsStatus={setFileStatus}
             />
         </Box>
     </div>;

diff --git a/frontend/app/[locale]/project/[project_id]/edit/projectEditForm.tsx b/frontend/app/[locale]/project/[project_id]/edit/projectEditForm.tsx
@@ -33,6 +33,7 @@ interface ProjectEditFormProps {
 
 function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) {
     const [files, setFiles] = useState<string[]>([]);
+    const [status_files, setStatusFiles] = useState<string[]>([]);
     const [title, setTitle] = useState('');
     const [description, setDescription] = useState('');
     const [groupAmount, setGroupAmount] = useState(1);
@@ -70,8 +71,10 @@ function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) {
                     setDescription(project.description)
                     if (project.file_structure !== null) {
                         const file_structure = project.file_structure.split(",").map((item: string) => item.trim().replace(/"/g, ''));
-                        setFiles(file_structure);
-                        console.log(files);
+                        const file_structure_status = file_structure.map((item: string) => item[0]);
+                        const file_structure_name = file_structure.map((item: string) => item.substring(1));
+                        setFiles(file_structure_name);
+                        setStatusFiles(file_structure_status);
                     }
                     setGroupSize(project["group_size"])
                     setTitle(project["name"])
@@ -152,13 +155,15 @@ function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) {
             const zipFileBlob = await zip.generateAsync({type: "blob"});
             const formData = new FormData();
             const zipFile = new File([zipFileBlob], "test_files.zip");
+
+            const required_files = files.map((item, index) => status_files[index] + item);
             formData.append("test_files", zipFile);
             formData.append("name", title);
             formData.append("description", description);
             formData.append("max_score", score.toString());
             formData.append("number_of_groups", groupAmount.toString());
             formData.append("group_size", groupSize.toString());
-            formData.append("file_structure", files.join(","));
+            formData.append("file_structure", required_files.join(","));
             formData.append("conditions", conditions.join(","));
             formData.append("visible", visible.toString());
             if (add_course_id < 0) {
@@ -233,7 +238,10 @@ function ProjectEditForm({project_id, add_course_id}: ProjectEditFormProps) {
                             description={description}/>
                         <RequiredFiles
                             files={files}
-                            setFiles={setFiles}/>
+                            setFiles={setFiles}
+                            file_status={status_files}
+                            setFileStatus={setStatusFiles}
+                        />
                         <Conditions
                             conditions={conditions}
                             setConditions={setConditions}/>