Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | import React, { useEffect, useState } from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Description from "@mui/icons-material/Description";
import BreadcrumbsComponent from "@/utils/components/breadcrumbs/dynamic-breadcrumbs/Breadcrumbs";
import FileUpload from "@/utils/components/dialogs/FileUpload";
import { Alert, AlertTitle, Icon, ListItem, ListItemButton, ListItemText } from "@mui/material";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import { useDispatch, useSelector } from "react-redux";
import { _fetchAllClasses } from "../../../../store/slices/teacher/TeacherClasses";
import SimpleLoading from "@/utils/components/SimpleLoading";
import { useTheme } from "@mui/material/styles";
const Resources = () => {
const theme = useTheme();
const dispatch = useDispatch();
const { classData, hasErrors, isLoading } = useSelector((state) => state.TeacherClasses);
const [selectedClass, setSelectedClass] = useState("");
const [uploadedFiles, setUploadedFiles] = useState([]);
useEffect(() => {
dispatch(_fetchAllClasses());
}, []);
return (
<React.Fragment>
<SimpleLoading showLoading={isLoading} />
<AppBar position="relative" color="primary">
<Toolbar>
<Typography variant="h6">Resources</Typography>
</Toolbar>
</AppBar>
<BreadcrumbsComponent />
{hasErrors && (
<Alert sx={{ borderRadius: 0 }} severity="error">
<AlertTitle>Error</AlertTitle>
{hasErrors}
</Alert>
)}
<Box sx={{ padding: 4 }}>
<Box sx={{ mb: 5, display: "flex", alignItems: "center", gap: 2, justifyContent: "space-between" }}>
<Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: 2 }}>
<Box>
<FileUpload uploadedFiles={uploadedFiles} setUploadedFiles={setUploadedFiles} />
</Box>
<FormControl size="small" sx={{ width: "20%" }}>
<InputLabel>Class</InputLabel>
<Select
id="teacher-resources-select-class"
value={selectedClass}
onChange={(e) => {
setSelectedClass(e.target.value);
}}
size="small"
fullWidth
label="Class"
>
{classData?.map((entry, index) => (
<MenuItem
key={index}
value={entry.title}
id={`teacher-resources-select-item-${entry.title}`}
>
{entry.title}
</MenuItem>
))}
</Select>
{/* <FormHelperText>{touched.role && errors.role}</FormHelperText> */}
</FormControl>
</Box>
<Box>
<Box sx={{ width: "100%", bgcolor: "action.hover", borderRadius: "10px" }}>
<Box
sx={{
width: `${50}%`,
height: "8px",
backgroundColor: theme.palette.primary.main,
borderRadius: "10px",
}}
></Box>
</Box>
<Typography variant="body1" sx={{ whiteSpace: "nowrap" }}>
9.67 GB of 15 GB used
</Typography>
</Box>
</Box>
<Box sx={{ width: "35%" }}>
{uploadedFiles.length !== 0 ? (
uploadedFiles.map((entry, index) => (
<ListItem dense key={index} disablePadding>
<ListItemButton
id={`teacher-resources-list-item-${entry.name}`}
sx={{ display: "flex", gap: "1rem" }}
component="a"
// href={""}
target="_blank"
rel="noopener noreferrer"
>
<Icon>
<Description color="primary" />
</Icon>
<ListItemText primary={entry.name} secondary={""} />
</ListItemButton>
</ListItem>
))
) : (
<Typography variant="body1" sx={{ opacity: 0.75 }}>
No files to display
</Typography>
)}
</Box>
</Box>
</React.Fragment>
);
};
export default Resources;
|