Skip to content

P
planner-team-one
Commit 9a852f06 authored by Нелли Ибрагимова's avatar Нелли Ибрагимова
Browse files
Options

переделала дейтпикер, исправила функцию изменения задачи, оптимизировала… 

переделала дейтпикер, исправила функцию изменения задачи, оптимизировала CustomTableSell, сорректировала селект для статуса
parent e07268be
Show whitespace changes
Inline Side-by-side
Showing with 759 additions and 519 deletions
planner-front/src/App.js
View file @ 9a852f06
...@@ -2,7 +2,7 @@ import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom"; ...@@ -2,7 +2,7 @@ import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom";
import {Container} from "@mui/material"; import {Container} from "@mui/material";
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import AppToolbar from "./components/UI/AppToolBar/AppToolBar"; import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
import MyTasks from './containers/MyTasks/MyTasks'; import MyTasks from './containers/MyTasks/MyTasks1';
import Login from './containers/Login/Login'; import Login from './containers/Login/Login';
import Register from './containers/Register/Register'; import Register from './containers/Register/Register';
import MonthCalendar from './containers/MonthCalendar/MonthCalendar'; import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
......
planner-front/src/components/MyTasksCompoments/CustomTableCell.js deleted 100644 → 0
View file @ e07268be
import * as React from 'react';
import TableCell from '@mui/material/TableCell';
import IconButton from '@mui/material/IconButton';
import Input from '@mui/material/Input';
import { Done, CalendarToday } from '@mui/icons-material';
import MaterialUIPickers from './DateTimePicker/DateTimePicker';
const CustomTableCell = ({ task, name, onChange, onModalOpen }) => {
const styles = { width: "auto", height: "40px" };
return (
<>
{task.isEditMode && name === "title" ? (
<TableCell
onClick={(e) => onModalOpen(e, task)} align="left" style={styles}>
<Input
value={task[name]}
name={name}
onChange={(e) => onChange(e, task)}
style={styles}
/>
</TableCell>
) : task.isEditMode && name !== "title"? (
<TableCell align="left" style={styles}>
<Input
value={task[name]}
name={name}
onChange={(e) => onChange(e, task)}
style={styles}
/>
</TableCell>
) : onModalOpen ? (
<TableCell align="left" style={styles} onClick={(e) => onModalOpen(e, task)}>
<span style={{ width: "100%" }} >
{task[name]}
</span>
</TableCell>
) : (
<TableCell align="left" style={styles}>
{task[name]}
</TableCell>
)}
</>
);
};
export default CustomTableCell;
\ No newline at end of file
planner-front/src/components/MyTasksCompoments/CustomTableCell1.js 0 → 100644
View file @ 9a852f06
import * as React from "react";
import TableCell from "@mui/material/TableCell";
import Input from "@mui/material/Input";
const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
const styles = { width: "auto", height: "40px" };
if (task) {
return (
<>
<TableCell
onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
align="left"
style={styles}
>
{task.isEditMode && onChange ? (
<Input
value={value}
name={name}
onChange={(e) => onChange(e, task)}
style={styles}
/>
) : (
<span>{value}</span>
)}
</TableCell>
</>
);
}
};
export default CustomTableCell;
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js
View file @ 9a852f06
import * as React from 'react'; import * as React from "react";
import TextField from '@mui/material/TextField'; import TextField from "@mui/material/TextField";
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { useState, useEffect } from "react";
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) {
return ( return (
<LocalizationProvider dateAdapter={AdapterMoment} sx={{ width: "auto", fontSize:5,fontWeight: "200" }}> <LocalizationProvider
dateAdapter={AdapterMoment}
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker <DateTimePicker
readOnly={props.readOnly} disabled={props.task.readOnly}
renderInput={(params) => ( renderInput={(params) => (
<TextField {...params} <TextField
sx={{ width: "auto",fontWeight: "200",fontSize: 5 }} {...params}
name="dateCreated" /> sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
name={props.name}
/>
)} )}
value={ value={props.task[props.name]}
props.newStartedDate && props.newStartedDate.id === props.task.id? props.newStartedDate.date
: props.task.dateTimeStart
}
onChange={(newValue) => { onChange={(newValue) => {
props.setNewStartedDate({ props.onChange(props.task.id, newValue, props.name);
id: props.task.id,
date: newValue,
});
}} }}
/> />
</LocalizationProvider> </LocalizationProvider>
); );
} }
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePickerDue.js deleted 100644 → 0
View file @ e07268be
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { useState, useEffect } from "react";
import dayjs from 'dayjs';
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
export default function MaterialUIPickersDue(props) {
console.log(props)
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
readOnly={props.readOnly}
renderInput={(params) => (
<TextField {...params} name="dateCreated" />
)}
value={
props.newDueDate && props.newDueDate.id === props.task.id? props.newDueDate.date
: props.task.dateTimeDue
}
onChange={(newValue) => {
props.setNewDueDate({
id: props.task.id,
date: newValue,
});
}}
/>
</LocalizationProvider>
);
}
\ No newline at end of file
planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js
View file @ 9a852f06
import { Modal, IconButton } from '@mui/material'; import { Modal, IconButton } from "@mui/material";
import './TaskModal.css'; import "./TaskModal.css";
import { Done } from '@mui/icons-material'; import { Done } from "@mui/icons-material";
import Input from '@mui/material/Input'; import Input from "@mui/material/Input";
import { useState, useEffect } from "react";
const TaskModal = (props) => { const TaskModal = (props) => {
const [taskContent, setTaskContent] = useState();
useEffect(() => {
if (props.task !== null) {
setTaskContent({
title: props.task.title,
description: props.task.description,
});
}
}, [props.task]);
const inputChangeHandler = (e) => {
const { name, value } = e.target;
setTaskContent((prevState) => {
return { ...prevState, [name]: value };
});
props.onChange(e, props.task);
};
const saveModalData=()=>{
props.handleClose()
};
return ( return (
<Modal <Modal
aria-labelledby="transition-modal-title" aria-labelledby="transition-modal-title"
...@@ -39,37 +13,38 @@ const TaskModal = (props) => { ...@@ -39,37 +13,38 @@ const TaskModal = (props) => {
onClose={props.handleClose} onClose={props.handleClose}
open={props.open} open={props.open}
> >
{ props?.task?.isEditMode ? {props?.task?.isEditMode ? (
<div className="modalBox"> <div className="modalBox">
<Input <Input
value={taskContent?.title} value={props.task.title}
name={"title"} name="title"
onChange={inputChangeHandler} onChange={(e) => props.onChange(e, props.task)}
style={{ width: "auto", fontSize:"12px",color: "white",fontWeight: "600" }} style={{
width: "auto",
fontSize: "12px",
color: "white",
fontWeight: "600",
}}
/> />
<Input <Input
value={taskContent?.description} value={props.task.description}
name={"description"} name="description"
onChange={inputChangeHandler} onChange={(e) => props.onChange(e, props.task)}
style={{ width: "auto", fontSize:"12px",color: "white" }} style={{ width: "auto", fontSize: "12px", color: "white" }}
/> />
<IconButton <IconButton aria-label="done" onClick={props.handleClose}>
aria-label="done" <Done />
onClick={saveModalData}
>
<Done/>
</IconButton> </IconButton>
</div>: </div>
) : (
<div className="modalBox"> <div className="modalBox">
{ props.task && props.task.title && ( {props.task && props.task.title && (
<div <div
style={{ style={{
width: "200px", width: "200px",
height: "200px", height: "200px",
color: "white", color: "white",
fontWeight: "600" fontWeight: "600",
}} }}
> >
{props.task.title} {props.task.title}
...@@ -88,9 +63,9 @@ const TaskModal = (props) => { ...@@ -88,9 +63,9 @@ const TaskModal = (props) => {
X X
</IconButton> </IconButton>
</div> </div>
} )}
</Modal> </Modal>
); );
}; };
export default TaskModal; export default TaskModal;
planner-front/src/components/UI/Select/Select.js
View file @ 9a852f06
import * as React from 'react'; import * as React from "react";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import InputLabel from '@mui/material/InputLabel'; import InputLabel from "@mui/material/InputLabel";
import MenuItem from '@mui/material/MenuItem'; import MenuItem from "@mui/material/MenuItem";
import FormControl from '@mui/material/FormControl'; import FormControl from "@mui/material/FormControl";
import Select from '@mui/material/Select'; import Select from "@mui/material/Select";
export default function BasicSelect(props) { 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 ( return (
<Box sx={{ minWidth: 60}}> <Box sx={{ minWidth: 60 }}>
<FormControl fullWidth> <FormControl fullWidth>
<InputLabel id="demo-simple-select-label"></InputLabel> <InputLabel id="demo-simple-select-label"></InputLabel>
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={taskContent?.accomplish} value={props.task.accomplish}
label="" label=""
name={"accomplish"} name={"accomplish"}
onChange={inputChangeHandler} onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2}} sx={{ marginTop: 2 }}
// className={'disabled'}
> >
<MenuItem value={props.itemOne}>{props.itemOne}</MenuItem> {props.items.map((item) => (
<MenuItem value={props.itemTwo}>{props.itemTwo}</MenuItem> <MenuItem value={item}>{item}</MenuItem>
<MenuItem value={props.itemThree}>{props.itemThree}</MenuItem> ))}
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>
......
planner-front/src/containers/MyTasks/MyTasks.js
View file @ 9a852f06
...@@ -10,40 +10,39 @@ import { ...@@ -10,40 +10,39 @@ import {
Paper, Paper,
IconButton, IconButton,
Tooltip, Tooltip,
} from "@mui/material"; Input,
} from "@mui/material";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import {useDispatch, useSelector} from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Done, Edit } from "@mui/icons-material"; import { Done, Edit, NavigateNextOutlined } 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 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/MyTasksCompoments/DateTimePicker/DateTimePicker"; import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import MaterialUIPickersDue from "../../components/MyTasksCompoments/DateTimePicker/DateTimePickerDue";
import BasicSelect from "../../components/UI/Select/Select"; import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks} from "../../store/actions/tasksActions"; import { fetchAllTasks, deleteTask } from "../../store/actions/tasksActions";
import { deleteTask } 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;
} }
if (b[orderBy] > a[orderBy]) { if (b[orderBy] > a[orderBy]) {
return 1;
} }
return 0; return 0;
} }
function getComparator(order, orderBy) { function getComparator(order, orderBy) {
return order === 'desc' return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy) ? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy); : (a, b) => -descendingComparator(a, b, orderBy);
} }
function stableSort(array, comparator) { function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]); const stabilizedThis = array?.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => { stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]); const order = comparator(a[0], b[0]);
if (order !== 0) { if (order !== 0) {
...@@ -54,208 +53,162 @@ function stableSort(array, comparator) { ...@@ -54,208 +53,162 @@ function stableSort(array, comparator) {
return stabilizedThis.map((el) => el[0]); return stabilizedThis.map((el) => el[0]);
} }
export default function EnhancedTable() { export default function EnhancedTable() {
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('id');
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const [newStartedDate, setNewStartedDate] = React.useState();
const [newDueDate, setNewDueDate] = React.useState();
const [readOnly, setReadOnly]=React.useState(true);
const handleChange = (id, newDate) => {
setNewStartedDate({ id: id, date: newDate });
};
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(fetchAllTasks ()); dispatch(fetchAllTasks());
}, []); }, []);
const tasks = useSelector(state => state.tasks.tasks);
console.log(tasks)
// const [tasks,setTasks]=useState([
// {
// user:"first",
// title:"задача1",
// description:"описание задачи11111",
// priority:"A",
// author:"Ivan",
// executor:"Arman",
// dateTimeStart: "2022-10-26T11:00:00",
// dateTimeDue: "2022-10-27T10:30:00",
// id:1,
// createdAt:"26.10.2022",
// accomplish:" "
// },
// {
// title:"задача2",
// description:"описание задачи222222",
// author:"Ivan",
// executor:"Elena",
// priority:"B",
// dateTimeStart: "2022-10-26T13:30:00",
// dateTimeDue: "2022-10-27T12:30:00",
// id:2,
// createdAt:"26.10.2022",
// accomplish:" "
// },
// {
// id:3,
// title:"задача3",
// 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",
// project:"Project1",
// executor:"Bota",
// priority:"B",
// }
// ])
const tasks = useSelector((state) => state.tasks.tasks);
useEffect(() => { const [recievedTasks, setRecievedTasks] = useState([]);
if (newStartedDate) {
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("id");
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
let updatedTasks = [...tasks].filter((t) => t.id !== newStartedDate.id); const handleRequestSort = (event, property) => {
const currentTask = tasks.find((t) => t.id === newStartedDate.id); const isAsc = orderBy === property && order === "asc";
delete currentTask.dateTimeStart; setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const updatedTask = { const handleChangePage = (event, newPage) => {
...currentTask, setPage(newPage);
dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format(), };
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
}; };
updatedTasks.push(updatedTask);
tasks=updatedTasks;
}
}, [newStartedDate]);
useEffect(() => { useEffect(() => {
if (newDueDate) { if (tasks && tasks?.length > 0) {
let updatedTasks = [...tasks].filter((t) => t.id !== newDueDate.id); let currentTasks = [];
const currentTask = tasks.find((t) => t.id === newDueDate.id); currentTasks = tasks?.map((task) => {
delete currentTask.dateTimeDue; return {
console.log(newDueDate.date) ...task,
const updatedTask = { isEditMode: false,
...currentTask, readOnly: true,
dateTimeDue: moment.parseZone(newDueDate.date, 'DD/MM/YYYY', true).format() authorDisplayName: task.author.displayName,
}; };
updatedTasks.push(updatedTask); });
tasks=updatedTasks; setRecievedTasks(currentTasks);
} }
}, [newDueDate]); }, [tasks]);
const onToggleEditMode = id => {
if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)}
return tasks.map(task => { const onChange = (e, task) => {
const value = e.target.value;
const name = e.target.name;
const { id } = task;
const newTasks = recievedTasks.map((task) => {
if (task.id === id) { if (task.id === id) {
return { ...task, isEditMode: !task.isEditMode }; return { ...task, [name]: value };
} }
return task; return task;
}); });
setRecievedTasks(newTasks);
}; };
const onAuthorChange = (e, task) => {
const onToggleEditModeDone = id => { const value = e.target.value;
if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)} const { id } = task;
const newTasks = recievedTasks.map((task) => {
return tasks.map(task => {
if (task.id === id) { if (task.id === id) {
return { ...task, isEditMode: !task.isEditMode }; const updated = { ...task };
updated.author.displayName = value;
updated.authorDisplayName = value;
return updated;
} }
return task; return task;
}); });
setRecievedTasks(newTasks);
}; };
const onChange = (e, task) => { const onDateChange = (id, value, property) => {
const value = e.target.value; const newTasks = recievedTasks.map((task) => {
const name = e.target.name;
const { id } = task;
const newTasks = tasks.map(task => {
if (task.id === id) { if (task.id === id) {
return { ...task, [name]: value }; return {
...task,
[property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
};
} }
return task; return task;
}); });
tasks=newTasks; setRecievedTasks(newTasks);
}; };
const handleRequestSort = (event, property) => { const onToggleEditMode = (id) => {
const isAsc = orderBy === property && order === 'asc'; const newTasks = recievedTasks.map((task) => {
setOrder(isAsc ? 'desc' : 'asc'); if (task.id === id) {
setOrderBy(property); return {
...task,
isEditMode: true,
readOnly: false,
}; };
}
const deleteHandle=(id)=>{ return task;
dispatch(deleteTask(id)) });
setRecievedTasks(newTasks);
}; };
const handleChangePage = (event, newPage) => { const addTask = () => {
setPage(newPage); // let newTasks=[...tasks]
tasks.unshift({
title: "",
description: "",
priority: "",
author: "",
executor: "",
dateTimeStart: "",
dateTimeDue: "",
id: 4,
createdAt: "",
accomplish: " ",
});
// tasks=newTasks;
}; };
const handleChangeRowsPerPage = (event) => { const deleteHandle = (id) => {
setRowsPerPage(parseInt(event.target.value, 10)); dispatch(deleteTask(id));
setPage(0);
}; };
const [modal, setModal] =useState({ const [modal, setModal] = useState({
open: false, open: false,
task: null task: null,
}); });
const onModalOpen = (event, task) => { const onModalOpen = (event, task) => {
event.stopPropagation(); event.stopPropagation();
setModal({ ...modal, open: true, task}); setModal({ ...modal, open: true, id: task.id });
};
const handleClose = () => {
setModal({ ...modal, open: false, task: null });
}; };
const addTask=()=>{ const handleClose = () => {
let newTasks=[...tasks] setModal({ ...modal, open: false, id: null });
newTasks.unshift(
{
title:"",
description:"",
priority:"",
author:"",
executor:"",
dateTimeStart:"",
dateTimeDue:"",
id:4,
createdAt:"",
accomplish:" "
}
)
tasks=newTasks;
}; };
if (tasks) if (
{return ( tasks &&
<Box sx={{ width: 'fullwidth' }}> tasks?.length > 0 &&
<Paper sx={{ width: '100%', mb: 2 }}> recievedTasks &&
recievedTasks?.length > 0
) {
return (
<Box sx={{ width: "fullwidth" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<MyTaskToolBar <MyTaskToolBar
onClick={()=>{addTask()}} onClick={() => {
addTask();
}}
/> />
<TableContainer> <TableContainer>
<Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
<Table
sx={{ minWidth: 600 }}
aria-labelledby="tableTitle"
>
<EnhancedTableHead <EnhancedTableHead
order={order} order={order}
orderBy={orderBy} orderBy={orderBy}
...@@ -263,90 +216,136 @@ console.log(tasks) ...@@ -263,90 +216,136 @@ console.log(tasks)
rowCount={tasks.length} rowCount={tasks.length}
/> />
<TableBody> <TableBody>
<TableRow>
<TableCell align="left">
<Input value={order} name="order" />
</TableCell>
<TableCell align="left">
<Input value={orderBy} name="orderBy" />
</TableCell>
</TableRow>
{stableSort(tasks, getComparator(order, orderBy)) {stableSort(recievedTasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((task, index) => { .map((task, index) => {
return ( return (
<TableRow hover key={task.id}>
<TableRow
hover
key={task.id}
>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
padding="none" padding="none"
></TableCell> ></TableCell>
<CustomTableCell {...{ task, name: "priority", onChange }} /> <CustomTableCell
<CustomTableCell {...{ task, name: "createdAt", onChange }} /> {...{
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} /> task,
<CustomTableCell {...{ task, name: "author.displayName", onChange }} /> name: "priority",
value: task.priority,
onChange,
}}
/>
<CustomTableCell
{...{
task,
name: "createdAt",
value: task.createdAt,
}}
/>
<TableCell key={task.id} > {/* <TableCell>
<MaterialUIPickers <MaterialUIPickers
newStartedDate={newStartedDate}
task={task} task={task}
setNewStartedDate={setNewStartedDate} name="createdAt"
readOnly={readOnly} onChange={onDateChange}
/> />
</TableCell> </TableCell> */}
<TableCell key={task.id}>
<MaterialUIPickersDue <CustomTableCell
newDueDate={newDueDate} {...{
task,
name: "title",
value: task.title,
onChange,
onModalOpen,
}}
/>
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
onChange: onAuthorChange,
}}
/>
<TableCell>
<MaterialUIPickers
task={task} task={task}
setNewDueDate={setNewDueDate} name="dateTimeStart"
readOnly={readOnly} onChange={onDateChange}
/> />
</TableCell> </TableCell>
<CustomTableCell {...{ task, name: "accomplish", onChange }} />
{/* <BasicSelect <TableCell>
itemOne={"open"} <MaterialUIPickers
itemTwo={"done"}
itemThree={"failed"}
task={task} task={task}
/> */} name="dateTimeDue"
onChange={onDateChange}
<TableCell > />
</TableCell>
{task.isEditMode ? ( {task.isEditMode ? (
<BasicSelect
items={["opened", "done", "failed"]}
task={task}
onChange={onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
}}
/>
)}
<TableCell>
{task.isEditMode ? (
<IconButton <IconButton
aria-label="done" aria-label="done"
onClick={() => onToggleEditModeDone(task.id)} // onClick={() => {onToggleEditMode(task.id, false, true); editTask(task) }}
> >
<Done/> <Done />
</IconButton> </IconButton>
) : ( ) : (
<IconButton <IconButton
aria-label="delete" aria-label="edit"
onClick={() => onToggleEditMode(task.id)} onClick={() => onToggleEditMode(task.id)}
> >
<Edit/> <Edit />
</IconButton> </IconButton>
)} )}
</TableCell> </TableCell>
<TableCell> <TableCell>
<Tooltip title="Delete"> <Tooltip title="Delete">
<IconButton onClick={(id)=>{deleteHandle(task.id)}}> <IconButton
onClick={(id) => {
deleteHandle(task.id);
}}
>
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
})} })}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<TablePagination <TablePagination
rowsPerPageOptions={[5,10, 25]} rowsPerPageOptions={[5, 10, 25]}
component="div" component="div"
count={tasks.length} count={tasks.length}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
...@@ -356,14 +355,12 @@ console.log(tasks) ...@@ -356,14 +355,12 @@ console.log(tasks)
/> />
</Paper> </Paper>
<TaskModal <TaskModal
task={modal.task} task={recievedTasks.find((task) => task.id === modal.id)}
open={modal.open} open={modal.open}
handleClose={handleClose} handleClose={handleClose}
onChange={(e) => {onChange(e,modal.task)}} onChange={onChange}
onToggleEditMode={onToggleEditMode}
tasks={tasks}
// setTasks={setTasks}
/> />
</Box> </Box>
)}; );
}
} }
planner-front/src/containers/MyTasks/MyTasks1.js 0 → 100644
View file @ 9a852f06
import * as React from "react";
import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TablePagination,
TableRow,
Paper,
IconButton,
Tooltip,
Input,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
import moment from "moment";
import MyTaskToolBar from "../../components/MyTasksCompoments/MyTaskToolBar";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell1";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks, deleteTask } from "../../store/actions/tasksActions";
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array?.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
export default function EnhancedTable() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchAllTasks());
}, []);
const tasks = useSelector((state) => state.tasks.tasks);
console.log(tasks)
const [recievedTasks, setRecievedTasks] = useState([]);
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("id");
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
useEffect(() => {
if (tasks && tasks?.length > 0) {
let currentTasks = [];
currentTasks = tasks?.map((task) => {
return {
...task,
isEditMode: false,
readOnly: true,
authorDisplayName: task.author.displayName,
};
});
setRecievedTasks(currentTasks);
}
}, [tasks]);
const onChange = (e, task) => {
const value = e.target.value;
const name = e.target.name;
const { id } = task;
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return { ...task, [name]: value };
}
return task;
});
setRecievedTasks(newTasks);
};
const onAuthorChange = (e, task) => {
const value = e.target.value;
const { id } = task;
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
const updated = { ...task };
updated.author.displayName = value;
updated.authorDisplayName = value;
return updated;
}
return task;
});
setRecievedTasks(newTasks);
};
const onDateChange = (id, value, property) => {
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return {
...task,
[property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
};
}
return task;
});
setRecievedTasks(newTasks);
};
const onToggleEditMode = (id) => {
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return {
...task,
isEditMode: true,
readOnly: false,
};
}
return task;
});
setRecievedTasks(newTasks);
};
const addTask = () => {
// let newTasks=[...tasks]
tasks.unshift({
title: "",
description: "",
priority: "",
author: "",
executor: "",
dateTimeStart: "",
dateTimeDue: "",
id: 4,
createdAt: "",
accomplish: " ",
});
// tasks=newTasks;
};
const deleteHandle = (id) => {
dispatch(deleteTask(id));
};
const [modal, setModal] = useState({
open: false,
task: null,
});
const onModalOpen = (event, task) => {
event.stopPropagation();
setModal({ ...modal, open: true, id: task.id });
};
const handleClose = () => {
setModal({ ...modal, open: false, id: null });
};
if (
tasks &&
tasks?.length > 0 &&
recievedTasks &&
recievedTasks?.length > 0
) {
return (
<Box sx={{ width: "fullwidth" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<MyTaskToolBar
onClick={() => {
addTask();
}}
/>
<TableContainer>
<Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={tasks.length}
/>
<TableBody>
<TableRow>
<TableCell align="left">
<Input value={order} name="order" />
</TableCell>
<TableCell align="left">
<Input value={orderBy} name="orderBy" />
</TableCell>
</TableRow>
{stableSort(recievedTasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((task, index) => {
return (
<TableRow hover key={task.id}>
<TableCell
component="th"
scope="row"
padding="none"
></TableCell>
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
onChange,
}}
/>
<CustomTableCell
{...{
task,
name: "createdAt",
value: task.createdAt,
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange,
onModalOpen,
}}
/>
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
onChange: onAuthorChange,
}}
/>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
/>
</TableCell>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
onChange={onDateChange}
/>
</TableCell>
{task.isEditMode ? (
<BasicSelect
items={["opened", "done", "failed"]}
task={task}
onChange={onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
}}
/>
)}
<TableCell>
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {onToggleEditMode(task.id, false, true); editTask(task) }}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
</TableCell>
<TableCell>
<Tooltip title="Delete">
<IconButton
onClick={(id) => {
deleteHandle(task.id);
}}
>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={tasks.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
<TaskModal
task={recievedTasks.find((task) => task.id === modal.id)}
open={modal.open}
handleClose={handleClose}
onChange={onChange}
/>
</Box>
);
}
}
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ 9a852f06
...@@ -22,38 +22,38 @@ const headCells = [ ...@@ -22,38 +22,38 @@ const headCells = [
label: 'Приоритет', label: 'Приоритет',
}, },
{ {
id: 'date', id: 'createdAt',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата создания', label: 'Дата создания',
}, },
{ {
id: 'task', id: 'title',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Задача', label: 'Заголовок',
}, },
{ {
id: 'author', id: 'authorDisplayName',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Автор', label: 'Автор',
}, },
{ {
id: 'startDate', id: 'dateTimeStart',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата начала', label: 'Дата начала',
}, },
{ {
id: 'endDate', id: 'dateTimeDue',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата завершения', label: 'Дата завершения',
}, },
{ {
id: 'done', id: 'accomplish',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Статус', label: 'Статус',
...@@ -115,4 +115,3 @@ EnhancedTableHead.propTypes = { ...@@ -115,4 +115,3 @@ EnhancedTableHead.propTypes = {
orderBy: PropTypes.string.isRequired, orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired, rowCount: PropTypes.number.isRequired,
}; };
planner-front/src/store/actions/tasksActions.js
View file @ 9a852f06
...@@ -47,7 +47,6 @@ export const fetchAllTasks = () => { ...@@ -47,7 +47,6 @@ export const fetchAllTasks = () => {
dispatch(fetchCalendarTasksRequest()); dispatch(fetchCalendarTasksRequest());
try { try {
const response = await axios.get("/tasks"); const response = await axios.get("/tasks");
console.log(response)
dispatch(fetchAllTasksSuccess(response.data.tasks)) dispatch(fetchAllTasksSuccess(response.data.tasks))
} catch (error) { } catch (error) {
dispatch(fetchCalendarTasksFailure(error.response.data)); dispatch(fetchCalendarTasksFailure(error.response.data));
...@@ -101,12 +100,14 @@ export const editTask = (task) => { ...@@ -101,12 +100,14 @@ export const editTask = (task) => {
dispatch(editTaskRequest()); dispatch(editTaskRequest());
const token = getState().users?.user?.token; const token = getState().users?.user?.token;
try { try {
console.log(task)
await axios.put("/tasks", task, { await axios.put("/tasks", task, {
headers: { headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ' 'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
} }
}); });
dispatch(editTaskSuccess()) dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks()) dispatch(fetchCalendarTasks())
} catch (error) { } catch (error) {
dispatch(editTaskFailure(error.response.data)); dispatch(editTaskFailure(error.response.data));
......
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