добавила селект на выбор статуса задачи

parent 143897d6
...@@ -3,7 +3,7 @@ import TableCell from '@mui/material/TableCell'; ...@@ -3,7 +3,7 @@ import TableCell from '@mui/material/TableCell';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Input from '@mui/material/Input'; import Input from '@mui/material/Input';
import { Done, CalendarToday } from '@mui/icons-material'; import { Done, CalendarToday } from '@mui/icons-material';
import MaterialUIPickers from '../UI/DateTimePicker/DateTimePicker'; import MaterialUIPickers from './DateTimePicker/DateTimePicker';
const CustomTableCell = ({ task, name, onChange, onModalOpen }) => { const CustomTableCell = ({ task, name, onChange, onModalOpen }) => {
......
...@@ -8,16 +8,14 @@ import dayjs from 'dayjs'; ...@@ -8,16 +8,14 @@ import dayjs from 'dayjs';
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
export default function MaterialUIPickers(props) { export default function MaterialUIPickers(props) {
console.log(props)
return ( return (
<LocalizationProvider dateAdapter={AdapterMoment} sx={{ width: "auto", fontSize:"9px",fontWeight: "200" }}> <LocalizationProvider dateAdapter={AdapterMoment} sx={{ width: "auto", fontSize:5,fontWeight: "200" }}>
<DateTimePicker <DateTimePicker
readOnly={props.readOnly} readOnly={props.readOnly}
renderInput={(params) => ( renderInput={(params) => (
<TextField {...params} <TextField {...params}
sx={{ width: "auto",fontWeight: "200",fontSize: '9 px' }} sx={{ width: "auto",fontWeight: "200",fontSize: 5 }}
name="dateCreated" /> name="dateCreated" />
)} )}
value={ value={
......
import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
export default function BasicSelect(props) {
const [taskContent, setTaskContent] = React.useState(props.task.accomplish);
const handleChange = (event) => {
setTaskContent(event.target.value);
};
React.useEffect(() => {
if (props.task !== null) {
setTaskContent({
accomplish: props.task.accomplish,
});
}
}, [props.task]);
const inputChangeHandler = (e) => {
const { name, value } = e.target;
console.log(e.target)
setTaskContent((prevState) => {
return { ...prevState, [name]: value };
});
props.onChange(e, props.task);
};
console.log(props)
return (
<Box sx={{ minWidth: 60}}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label"></InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={taskContent?.accomplish}
label=""
name={"accomplish"}
onChange={inputChangeHandler}
sx={{ marginTop: 2}}
// className={'disabled'}
>
<MenuItem value={props.itemOne}>{props.itemOne}</MenuItem>
<MenuItem value={props.itemTwo}>{props.itemTwo}</MenuItem>
<MenuItem value={props.itemThree}>{props.itemThree}</MenuItem>
</Select>
</FormControl>
</Box>
);
}
\ No newline at end of file
...@@ -3,30 +3,26 @@ import { ...@@ -3,30 +3,26 @@ import {
Box, Box,
Table, Table,
TableBody, TableBody,
TextField,
TableCell, TableCell,
TableContainer, TableContainer,
TablePagination, TablePagination,
TableRow, TableRow,
Typography,
Paper, Paper,
IconButton, IconButton,
Tooltip, Tooltip,
Input,
} from "@mui/material"; } from "@mui/material";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Done, Edit } from "@mui/icons-material"; import { Done, Edit } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal"; import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader"; import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
import { Container } from "@mui/system";
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import moment from "moment"; import moment from "moment";
import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar'; import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar';
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell"; import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/UI/DateTimePicker/DateTimePicker"; import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import MaterialUIPickersDue from "../../components/UI/DateTimePicker/DateTimePickerDue"; import MaterialUIPickersDue from "../../components/MyTasksCompoments/DateTimePicker/DateTimePickerDue";
import BasicSelect from "../../components/UI/Select/Select"
function descendingComparator(a, b, orderBy) { function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) { if (b[orderBy] < a[orderBy]) {
...@@ -83,10 +79,10 @@ export default function EnhancedTable() { ...@@ -83,10 +79,10 @@ export default function EnhancedTable() {
dateTimeStart: "2022-10-26T11:00:00", dateTimeStart: "2022-10-26T11:00:00",
dateTimeDue: "2022-10-27T10:30:00", dateTimeDue: "2022-10-27T10:30:00",
id:1, id:1,
dateCreated:"26.10.2022" createdAt:"26.10.2022",
accomplish:" "
}, },
{ {
user:"second",
title:"задача2", title:"задача2",
description:"описание задачи222222", description:"описание задачи222222",
author:"Ivan", author:"Ivan",
...@@ -95,22 +91,24 @@ export default function EnhancedTable() { ...@@ -95,22 +91,24 @@ export default function EnhancedTable() {
dateTimeStart: "2022-10-26T13:30:00", dateTimeStart: "2022-10-26T13:30:00",
dateTimeDue: "2022-10-27T12:30:00", dateTimeDue: "2022-10-27T12:30:00",
id:2, id:2,
dateCreated:"26.10.2022" createdAt:"26.10.2022",
accomplish:" "
}, },
{ {
user:"theird", id:3,
title:"задача3", title:"задача3",
description:"описание задачи333333bjh,khkuhlhvilv hmgjtycikg mkgyxxkjfkkmgyhkfrdtseygdtjtuliuo8plfyvguh,bb", description:"описание задачи333333bjh,khkuhlhvilv hmgjtycikg mkgyxxkjfkkmgyhkfrdtseygdtjtuliuo8plfyvguh,bb",
createdAt:"27.10.2022",
dateTimeStart: "2022-10-30T09:30:00",
dateTimeDue: "2022-11-02T09:30:00",
accomplish:" ",
author:"Artem", author:"Artem",
project:"Project1",
executor:"Bota", executor:"Bota",
priority:"B", priority:"B",
dateTimeStart: "2022-10-30T09:30:00",
dateTimeDue: "2022-11-02T09:30:00",
id:3,
dateCreated:"27.10.2022",
} }
]) ])
useEffect(() => { useEffect(() => {
if (newStartedDate) { if (newStartedDate) {
...@@ -173,7 +171,6 @@ export default function EnhancedTable() { ...@@ -173,7 +171,6 @@ export default function EnhancedTable() {
setOrder(isAsc ? 'desc' : 'asc'); setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property); setOrderBy(property);
}; };
const deleteTask=(id)=>{ const deleteTask=(id)=>{
console.log(id) console.log(id)
...@@ -207,7 +204,6 @@ export default function EnhancedTable() { ...@@ -207,7 +204,6 @@ export default function EnhancedTable() {
let newTasks=[...tasks] let newTasks=[...tasks]
newTasks.unshift( newTasks.unshift(
{ {
user:"",
title:"", title:"",
description:"", description:"",
priority:"", priority:"",
...@@ -216,12 +212,12 @@ export default function EnhancedTable() { ...@@ -216,12 +212,12 @@ export default function EnhancedTable() {
dateTimeStart:"", dateTimeStart:"",
dateTimeDue:"", dateTimeDue:"",
id:4, id:4,
dateCreated:"" createdAt:"",
accomplish:" "
} }
) )
setTasks(newTasks) setTasks(newTasks)
}; };
return ( return (
<Box sx={{ width: 'fullwidth' }}> <Box sx={{ width: 'fullwidth' }}>
...@@ -262,10 +258,9 @@ export default function EnhancedTable() { ...@@ -262,10 +258,9 @@ export default function EnhancedTable() {
padding="none" padding="none"
></TableCell> ></TableCell>
<CustomTableCell {...{ task, name: "priority", onChange }} /> <CustomTableCell {...{ task, name: "priority", onChange }} />
<CustomTableCell {...{ task, name: "dateCreated", onChange }} /> <CustomTableCell {...{ task, name: "createdAt", onChange }} />
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} /> <CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} />
<CustomTableCell {...{ task, name: "author", onChange }} /> <CustomTableCell {...{ task, name: "author", onChange }} />
<TableCell key={task.id} > <TableCell key={task.id} >
<MaterialUIPickers <MaterialUIPickers
...@@ -275,8 +270,7 @@ export default function EnhancedTable() { ...@@ -275,8 +270,7 @@ export default function EnhancedTable() {
readOnly={readOnly} readOnly={readOnly}
/> />
</TableCell> </TableCell>
<TableCell key={task.id}>
<TableCell key={task.id}>
<MaterialUIPickersDue <MaterialUIPickersDue
newDueDate={newDueDate} newDueDate={newDueDate}
task={task} task={task}
...@@ -284,9 +278,13 @@ export default function EnhancedTable() { ...@@ -284,9 +278,13 @@ export default function EnhancedTable() {
readOnly={readOnly} readOnly={readOnly}
/> />
</TableCell> </TableCell>
<BasicSelect
<CustomTableCell {...{ task, name: "done", onChange }} /> itemOne={"open"}
itemTwo={"done"}
itemThree={"failed"}
task={task}
/>
<TableCell > <TableCell >
...@@ -317,7 +315,6 @@ export default function EnhancedTable() { ...@@ -317,7 +315,6 @@ export default function EnhancedTable() {
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
})} })}
......
...@@ -56,7 +56,7 @@ const headCells = [ ...@@ -56,7 +56,7 @@ const headCells = [
id: 'done', id: 'done',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Выполнено', label: 'Статус',
}, },
{ {
id: 'change', id: 'change',
......
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