Skip to content

Commit

Permalink
Merge pull request #178 from SELab-2/improve_required_files
Browse files Browse the repository at this point in the history 
Several fixes
  • Loading branch information
@gilles-arnout
gilles-arnout committed May 20, 2024
2 parents 579cadd + cec10e5 commit bd0811a
Show file tree
Hide file tree
Showing 12 changed files with 182 additions and 65 deletions.
2 changes: 1 addition & 1 deletion frontend/__test__/project/edit/Requiredfiles.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('Requiredfiles', () => {
files={["First", "Second"]}
setFiles={jest.fn()}
translations={translations.en}
/>
file_status={["+", "-"]} setFileStatus={jest.fn()}/>
);

// check that the required files were rendered properly
Expand Down
13 changes: 8 additions & 5 deletions frontend/app/[locale]/components/CourseControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,14 @@ const CourseControls = ({selectedYear, onYearChange}) => {
{t("view_archive")}
</Button>
</Link>
<Link href="/admin/users" passHref>
<Button variant="contained" color="secondary" startIcon={<SupervisorAccountIcon/>}>
{t("site users")}
</Button>
</Link>
{user?.role === 1 ? (
<Link href="/admin/users" passHref>
<Button variant="contained" color="secondary" startIcon={<SupervisorAccountIcon/>}>
{t("site users")}
</Button>
</Link>
) : null
}
<Select
value={selectedYear}
onChange={onYearChange}
Expand Down
82 changes: 47 additions & 35 deletions frontend/app/[locale]/components/ProjectDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'
import React, { useEffect, useState } from "react";
import { getProject, getUserData, Project, UserData } from "@lib/api";
import {checkGroup, getGroup, getProject, getUserData, Project, UserData} from "@lib/api";
import { useTranslation } from "react-i18next";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
Expand Down Expand Up @@ -36,6 +36,7 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({
const [loadingProject, setLoadingProject] = useState<boolean>(true);
const [user, setUser] = useState<UserData | null>(null);
const [isExpanded, setIsExpanded] = useState(false);
const [isInGroup, setIsInGroup] = useState(false);
const previewLength = 300;
const deadlineColorType = project?.deadline
? checkDeadline(project.deadline)
Expand Down Expand Up @@ -66,6 +67,7 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({
};

fetchProject().then(() => setLoadingProject(false));
checkGroup(project_id).then((response) => setIsInGroup(response));
}, [project_id]);

if (loadingProject) {
Expand Down Expand Up @@ -98,7 +100,7 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({
return (
<ThemeProvider theme={baseTheme}>
<Box style={{ padding: "16px", maxWidth: "100%" }}>
<Grid container spacing={2} alignItems="center">
<Grid container spacing={2} alignItems="flex-end">
<Grid item xs={12}>
<Button
variant="outlined"
Expand All @@ -108,33 +110,37 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({
>
{t("return_course")}
</Button>
<Grid container alignItems="center" spacing={2} sx={{ my: 1 }}>
<Grid container spacing={2} sx={{ my: 1 }}>
<Grid item xs={12} sm={6}>
<Typography variant="h4">{project?.name}</Typography>
</Grid>
{user?.role !== 3 && (
<Grid item xs={6} sm={3}>
<Button
variant="contained"
color="secondary"
startIcon={<EditIcon />}
href={`/${locale}/project/${project_id}/edit`}
sx={{ fontSize: "0.75rem", py: 1 }}
>
{t("edit_project")}
</Button>
</Grid>
)}
<Grid item xs={6} sm={3}>
<Button
variant="contained"
color="secondary"
startIcon={<GroupIcon />}
href={`/${locale}/project/${project_id}/groups`}
sx={{ fontSize: "0.75rem", py: 1 }}
>
{t("groups")}
</Button>
<Grid item xs={12} sm={6} justifyContent="flex-end">
<Box sx={{ float: 'right', display: 'flex' }}>
{user?.role !== 3 && (
<Grid item xs={6} sm={6}>
<Button
variant="contained"
color="secondary"
startIcon={<EditIcon />}
href={`/${locale}/project/${project_id}/edit`}
sx={{ fontSize: '0.75rem', py: 1, marginRight: '2rem' }}
>
{t('edit_project')}
</Button>
</Grid>
)}
<Grid item xs={6} sm={6}>
<Button
variant="contained"
color="secondary"
startIcon={<GroupIcon />}
href={`/${locale}/project/${project_id}/groups`}
sx={{ fontSize: '0.75rem', py: 1 }}
>
{t('groups')}
</Button>
</Grid>
</Box>
</Grid>
</Grid>
<Divider style={{ marginBottom: "1rem" }} />
Expand Down Expand Up @@ -197,15 +203,21 @@ const ProjectDetailsPage: React.FC<ProjectDetailsPageProps> = ({
</Typography>
</div>
{user?.role === 3 ? (
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
href={`/${locale}/project/${project_id}/submit`}
sx={{ my: 1 }}
>
{t("add_submission")}
</Button>
isInGroup ? (
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
href={`/${locale}/project/${project_id}/submit`}
sx={{ my: 1 }}
>
{t("add_submission")}
</Button>
) : (
<Typography variant="body1" style={{ color: "red", marginTop: "5px" }}>
{t("not_in_group")}
</Typography>
)
) : null}
</Grid>
<Grid item xs={12}>
Expand Down
57 changes: 57 additions & 0 deletions frontend/app/[locale]/components/StatusButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 9 additions & 1 deletion frontend/app/[locale]/components/SubmitDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const SubmitDetailsPage: React.FC<SubmitDetailsPageProps> = ({
const [submitted, setSubmitted] = useState<string>('no');
const [loadingProject, setLoadingProject] = useState<boolean>(true);
const [isExpanded, setIsExpanded] = useState(false);
const [disabled, setDisabled] = useState<boolean>(true);
const previewLength = 300;

const toggleDescription = () => {
Expand Down Expand Up @@ -89,6 +90,7 @@ const SubmitDetailsPage: React.FC<SubmitDetailsPageProps> = ({
result = [...filepaths, ...newpaths];
}
setPaths(result);
setDisabled(newpaths.length === 0)
}

if (loadingProject) {
Expand Down Expand Up @@ -187,7 +189,13 @@ const SubmitDetailsPage: React.FC<SubmitDetailsPageProps> = ({
</Box>
)}
{submitted !== 'ok' && (
<Button variant="contained" color="primary" startIcon={<PublishIcon />} type="submit">
<Button
variant="contained"
color="primary"
startIcon={<PublishIcon />}
type="submit"
disabled={disabled}
>
{t('submit')}
</Button>
)}
Expand Down
40 changes: 27 additions & 13 deletions frontend/app/[locale]/components/general/RequiredFilesList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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)

Expand All @@ -30,7 +41,6 @@ const ItemsList = ({items, setItems, input_placeholder, empty_list_placeholder,
setItems(newItems);
setNewItem('');
setNoInput(false);
console.log(items);
} else {
setNoInput(true);
}
Expand All @@ -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={{
Expand All @@ -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
Expand Down
10 changes: 7 additions & 3 deletions frontend/app/[locale]/components/project_components/requiredFiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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>;
Expand Down
Loading

0 comments on commit bd0811a

Please sign in to comment.