добавила колонку для вывода проектов задач, добавила селект, позволяющий выбрать несколько проектов

parent 36e04fb1
......@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
export default function MyTaskToolBar(props) {
......@@ -15,6 +15,9 @@ export default function MyTaskToolBar(props) {
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Мои задачи
</Typography>
<MultipleSelect
projects={props.projects}
/>
<Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
</Toolbar>
</AppBar>
......
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 200,
color:'#1976d2',
borderColor:'white'
},
},
};
function getStyles(name, personName, theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
export default function MultipleSelect(props) {
const theme = useTheme();
const [projectName, setProjectName] = React.useState([]);
const handleChange = (event) => {
const {
target: { value },
} = event;
setProjectName(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
console.log(projectName)
return (
<div>
<FormControl sx={{ m: 1, width: 250,borderColor:'white' }}>
<InputLabel id="demo-multiple-name-label" sx={{color:'white' }}>Project</InputLabel>
<Select
labelId="demo-multiple-name-label"
id="demo-multiple-name"
multiple
value={projectName}
onChange={handleChange}
input={<OutlinedInput label="Name" />}
MenuProps={MenuProps}
sx={{color:'white' }}
>
{props.projects.map((project) => (
<MenuItem
key={project}
value={project}
style={getStyles(project, projectName, theme)}
>
{project}
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
\ No newline at end of file
import { FormControl, InputLabel, MenuItem, Select} from '@mui/material';
import { memo } from 'react';
function СustomSelect({value, onChange, label, variant='standard', items, id}) {
return (
......
......@@ -25,6 +25,7 @@ import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker
import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
......@@ -63,6 +64,11 @@ export default function EnhancedTable() {
const tasks = useSelector((state) => state.tasks.tasks);
console.log(tasks)
const [recievedTasks, setRecievedTasks] = useState([]);
const projects=[
"project1",
"project2",
"project3"
]
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("id");
......@@ -209,6 +215,7 @@ console.log(tasks)
onClick={() => {
addTask();
}}
projects={projects}
/>
<TableContainer>
......@@ -220,7 +227,7 @@ console.log(tasks)
rowCount={tasks.length}
/>
<TableBody>
<TableRow sx={{height:'1px',margin:0,padding:0}}>
{/* <TableRow sx={{height:'1px',margin:0,padding:0}}>
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" />
</TableCell>
......@@ -228,7 +235,7 @@ console.log(tasks)
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
</TableCell>
</TableRow>
</TableRow> */}
{stableSort(recievedTasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
......@@ -265,6 +272,23 @@ console.log(tasks)
onModalOpen,
}}
/>
{task.isEditMode ? (
<BasicSelect
items={["project1", "project2", "project3"]}
task={task}
onChange={onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "project",
value: task.project,
onChange: onChange,
}}
/>
)}
<CustomTableCell
{...{
task,
......
......@@ -33,6 +33,12 @@ const headCells = [
disablePadding: false,
label: 'Заголовок',
},
{
id: 'project',
numeric: true,
disablePadding: false,
label: 'Проект',
},
{
id: 'authorDisplayName',
numeric: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment