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

parent 36e04fb1
...@@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; ...@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
export default function MyTaskToolBar(props) { export default function MyTaskToolBar(props) {
...@@ -15,6 +15,9 @@ export default function MyTaskToolBar(props) { ...@@ -15,6 +15,9 @@ export default function MyTaskToolBar(props) {
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Мои задачи Мои задачи
</Typography> </Typography>
<MultipleSelect
projects={props.projects}
/>
<Button color="inherit" onClick={props.onClick} >Добавить задачу</Button> <Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
</Toolbar> </Toolbar>
</AppBar> </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 { FormControl, InputLabel, MenuItem, Select} from '@mui/material';
import { memo } from 'react'; import { memo } from 'react';
function СustomSelect({value, onChange, label, variant='standard', items, id}) { function СustomSelect({value, onChange, label, variant='standard', items, id}) {
return ( return (
......
...@@ -25,6 +25,7 @@ import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker ...@@ -25,6 +25,7 @@ import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker
import BasicSelect from "../../components/UI/Select/Select"; import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions"; import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
function descendingComparator(a, b, orderBy) { function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) { if (b[orderBy] < a[orderBy]) {
return -1; return -1;
...@@ -63,6 +64,11 @@ export default function EnhancedTable() { ...@@ -63,6 +64,11 @@ export default function EnhancedTable() {
const tasks = useSelector((state) => state.tasks.tasks); const tasks = useSelector((state) => state.tasks.tasks);
console.log(tasks) console.log(tasks)
const [recievedTasks, setRecievedTasks] = useState([]); const [recievedTasks, setRecievedTasks] = useState([]);
const projects=[
"project1",
"project2",
"project3"
]
const [order, setOrder] = React.useState("asc"); const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("id"); const [orderBy, setOrderBy] = React.useState("id");
...@@ -209,6 +215,7 @@ console.log(tasks) ...@@ -209,6 +215,7 @@ console.log(tasks)
onClick={() => { onClick={() => {
addTask(); addTask();
}} }}
projects={projects}
/> />
<TableContainer> <TableContainer>
...@@ -220,7 +227,7 @@ console.log(tasks) ...@@ -220,7 +227,7 @@ console.log(tasks)
rowCount={tasks.length} rowCount={tasks.length}
/> />
<TableBody> <TableBody>
<TableRow sx={{height:'1px',margin:0,padding:0}}> {/* <TableRow sx={{height:'1px',margin:0,padding:0}}>
<TableCell align="left"> <TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" /> <Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" />
</TableCell> </TableCell>
...@@ -228,7 +235,7 @@ console.log(tasks) ...@@ -228,7 +235,7 @@ console.log(tasks)
<TableCell align="left"> <TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" /> <Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
</TableCell> </TableCell>
</TableRow> </TableRow> */}
{stableSort(recievedTasks, getComparator(order, orderBy)) {stableSort(recievedTasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
...@@ -265,6 +272,23 @@ console.log(tasks) ...@@ -265,6 +272,23 @@ console.log(tasks)
onModalOpen, onModalOpen,
}} }}
/> />
{task.isEditMode ? (
<BasicSelect
items={["project1", "project2", "project3"]}
task={task}
onChange={onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "project",
value: task.project,
onChange: onChange,
}}
/>
)}
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
......
...@@ -33,6 +33,12 @@ const headCells = [ ...@@ -33,6 +33,12 @@ const headCells = [
disablePadding: false, disablePadding: false,
label: 'Заголовок', label: 'Заголовок',
}, },
{
id: 'project',
numeric: true,
disablePadding: false,
label: 'Проект',
},
{ {
id: 'authorDisplayName', id: 'authorDisplayName',
numeric: true, 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