Skip to content

P
planner-team-one
Commit 354ab632 authored by Евгений Положенцев's avatar Евгений Положенцев
Browse files
Options

Merge branch 'task-27-fixing_bags_page_my_tasks' into 'development' 

Task 27 fixing bags page my tasks

See merge request !23
parents fa05180f e2fdc5e2
Hide whitespace changes
Inline Side-by-side
Showing with 440 additions and 450 deletions
planner-front/src/components/MyTasksCompoments/CustomTableCell.js
View file @ 354ab632
import * as React from 'react'; import * as React from "react";
import TableCell from '@mui/material/TableCell'; import TableCell from "@mui/material/TableCell";
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 MaterialUIPickers from '../UI/DateTimePicker/DateTimePicker';
const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
const styles = { width: "auto", height: "10px"};
const CustomTableCell = ({ task, name, onChange, onModalOpen }) => { if (task) {
return (
const styles = { width: "auto", height: "40px" }; <>
<TableCell
return ( onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
<> align="left"
{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} style={styles}
/> >
</TableCell> {task.isEditMode && onChange ? (
) : task.isEditMode && name !== "title"? ( <Input
<TableCell align="left" style={styles}> value={value}
<Input name={name}
value={task[name]} onChange={(e) => onChange(e, task)}
name={name} style={styles}
onChange={(e) => onChange(e, task)} />
style={styles} ) : (
/> <span>{value}</span>
</TableCell> )}
) : onModalOpen ? (
<TableCell align="left" style={styles} onClick={(e) => onModalOpen(e, task)}>
<span style={{ width: "100%" }} >
{task[name]}
</span>
</TableCell> </TableCell>
) : ( </>
<TableCell align="left" style={styles}> );
{task[name]} }
</TableCell>
)}
</>
);
}; };
export default CustomTableCell;
export default CustomTableCell;
\ No newline at end of file
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js 0 → 100644
View file @ 354ab632
import * as React from "react";
import TextField from "@mui/material/TextField";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
export default function MaterialUIPickers(props) {
return (
<LocalizationProvider
dateAdapter={AdapterMoment}
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker
disabled={props.task.readOnly}
renderInput={(params) => (
<TextField
{...params}
sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
name={props.name}
/>
)}
value={props.task[props.name]}
onChange={(newValue) => {
props.onChange(props.task.id, newValue, props.name);
}}
/>
</LocalizationProvider>
);
}
planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js
View file @ 354ab632
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) => {
return (
const [taskContent, setTaskContent] = useState(); <Modal
aria-labelledby="transition-modal-title"
useEffect(() => { aria-describedby="transition-modal-description"
if (props.task !== null) { className={"modal"}
setTaskContent({ closeAfterTransition
title: props.task.title, onClose={props.handleClose}
description: props.task.description, open={props.open}
}); >
} {props?.task?.isEditMode ? (
}, [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 (
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={"modal"}
closeAfterTransition
onClose={props.handleClose}
open={props.open}
>
{ props?.task?.isEditMode ?
<div className="modalBox"> <div className="modalBox">
<Input
value={taskContent?.title}
name={"title"}
onChange={inputChangeHandler}
style={{ width: "auto", fontSize:"12px",color: "white",fontWeight: "600" }}
/>
<Input <Input
value={taskContent?.description} value={props.task.title}
name={"description"} name="title"
onChange={inputChangeHandler} onChange={(e) => props.onChange(e, props.task)}
style={{ width: "auto", fontSize:"12px",color: "white" }} style={{
/> width: "auto",
<IconButton fontSize: "12px",
aria-label="done" color: "white",
onClick={saveModalData} fontWeight: "600",
> }}
<Done/> />
</IconButton> <Input
</div>: value={props.task.description}
name="description"
onChange={(e) => props.onChange(e, props.task)}
style={{ width: "auto", fontSize: "12px", color: "white" }}
/>
<IconButton aria-label="done" onClick={props.handleClose}>
<Done />
</IconButton>
</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;
\ No newline at end of file
planner-front/src/components/UI/DateTimePicker/DateTimePicker.js deleted 100644 → 0
View file @ fa05180f
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 MaterialUIPickers(props) {
console.log(props)
if (props.task.dateTimeStart!==undefined)
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
renderInput={(params) => (
<TextField {...params} name="dateCreated" />
)}
value={
props.newStartedDate && props.newStartedDate.id === props.task.id? props.newStartedDate.date
: props.task.dateTimeStart
}
onChange={(newValue) => {
props.setNewStartedDate({
id: props.task.id,
date: newValue,
});
}}
/>
</LocalizationProvider>
);
else if(props.task.dateTimeDue!==undefined) {
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
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/UI/Select/Select.js 0 → 100644
View file @ 354ab632
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) {
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={props.task.accomplish}
label=""
name={"accomplish"}
onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2 }}
>
{props.items.map((item) => (
<MenuItem value={item}>{item}</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
planner-front/src/containers/MyTasks/MyTasks.js
View file @ 354ab632
...@@ -3,29 +3,27 @@ import { ...@@ -3,29 +3,27 @@ import {
Box, Box,
Table, Table,
TableBody, TableBody,
TextField,
TableCell, TableCell,
TableContainer, TableContainer,
TablePagination, TablePagination,
TableRow, TableRow,
Typography,
Paper, Paper,
IconButton, IconButton,
Tooltip, Tooltip,
Input, 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 { useDispatch, useSelector } from "react-redux";
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 { 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 BasicSelect from "../../components/UI/Select/Select";
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]) {
...@@ -38,14 +36,13 @@ function descendingComparator(a, b, orderBy) { ...@@ -38,14 +36,13 @@ function descendingComparator(a, b, orderBy) {
} }
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) {
...@@ -56,297 +53,310 @@ function stableSort(array, comparator) { ...@@ -56,297 +53,310 @@ 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 dispatch = useDispatch();
const [order, setOrder] = React.useState('asc'); useEffect(() => {
const [orderBy, setOrderBy] = React.useState('id'); dispatch(fetchAllTasks());
const [page, setPage] = React.useState(0); }, []);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const [newStartedDate, setNewStartedDate] = React.useState();
const [newDueDate, setNewDueDate] = React.useState();
const handleChange = (id, newDate) => { const tasks = useSelector((state) => state.tasks.tasks);
setNewStartedDate({ id: id, date: newDate }); 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 [tasks,setTasks]=useState([ const handleChangePage = (event, newPage) => {
{ setPage(newPage);
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,
dateCreated:"26.10.2022"
},
{
user:"second",
title:"задача2",
description:"описание задачи222222",
author:"Ivan",
executor:"Elena",
priority:"B",
dateTimeStart: "2022-10-26T13:30:00",
dateTimeDue: "2022-10-27T12:30:00",
id:2,
dateCreated:"26.10.2022"
},
{
user:"theird",
title:"задача3",
description:"описание задачи333333bjh,khkuhlhvilv hmgjtycikg mkgyxxkjfkkmgyhkfrdtseygdtjtuliuo8plfyvguh,bb",
author:"Artem",
executor:"Bota",
priority:"B",
dateTimeStart: "2022-10-30T09:30:00",
dateTimeDue: "2022-11-02T09:30:00",
id:3,
dateCreated:"27.10.2022",
} const handleChangeRowsPerPage = (event) => {
]) setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
useEffect(() => { useEffect(() => {
if (newStartedDate) { if (tasks && tasks?.length > 0) {
let currentTasks = [];
let updatedTasks = [...tasks].filter((t) => t.id !== newStartedDate.id); currentTasks = tasks?.map((task) => {
const currentTask = tasks.find((t) => t.id === newStartedDate.id); return {
delete currentTask.dateTimeStart; ...task,
console.log(newStartedDate.date) isEditMode: false,
const updatedTask = { readOnly: true,
...currentTask, authorDisplayName: task.author.displayName,
dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format() };
};
updatedTasks.push(updatedTask);
setTasks(updatedTasks);
}
else if (newDueDate){
let updatedTasks = [...tasks].filter((t) => t.id !== newDueDate.id);
const currentTask = tasks.find((t) => t.id === newDueDate.id);
delete currentTask.dateTimeDue;
console.log(newDueDate.date)
const updatedTask = {
...currentTask,
dateTimeDue: moment.parseZone(newDueDate.date, 'DD/MM/YYYY', true).format()
};
updatedTasks.push(updatedTask);
setTasks(updatedTasks);
}
}, [newStartedDate || newDueDate]);
const onToggleEditMode = id => {
setTasks(state => {
return tasks.map(task => {
if (task.id === id) {
return { ...task, isEditMode: !task.isEditMode };
}
return task;
}); });
}); setRecievedTasks(currentTasks);
}; }
}, [tasks]);
const onChange = (e, task) => { const onChange = (e, task) => {
const value = e.target.value; const value = e.target.value;
const name = e.target.name; const name = e.target.name;
const { id } = task; const { id } = task;
const newTasks = tasks.map(task => { const newTasks = recievedTasks.map((task) => {
if (task.id === id) { if (task.id === id) {
return { ...task, [name]: value }; return { ...task, [name]: value };
} }
return task; return task;
}); });
setTasks(newTasks);
setRecievedTasks(newTasks);
}; };
const handleRequestSort = (event, property) => { const onAuthorChange = (e, task) => {
const isAsc = orderBy === property && order === 'asc'; const value = e.target.value;
setOrder(isAsc ? 'desc' : 'asc'); const { id } = task;
setOrderBy(property); 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 deleteTask=(id)=>{ const newTasks = recievedTasks.map((task) => {
console.log(id) if (task.id === id) {
let newTasks=[...tasks] return {
newTasks.splice(tasks[id],1) ...task,
setTasks(newTasks) [property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
};
}
return task;
});
setRecievedTasks(newTasks);
}; };
const handleChangePage = (event, newPage) => { const onToggleEditMode = (id) => {
setPage(newPage); const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return {
...task,
isEditMode: true,
readOnly: false,
};
}
return task;
});
setRecievedTasks(newTasks);
}; };
const handleChangeRowsPerPage = (event) => { const HandleEditTask=(task)=>{
setRowsPerPage(parseInt(event.target.value, 10)); dispatch(editTask(task))
setPage(0); }
const addTask = () => {
// let newTasks=[...tasks]
tasks.unshift({
title: "",
description: "",
priority: "",
author: "",
executor: "",
dateTimeStart: "",
dateTimeDue: "",
id: 4,
createdAt: "",
accomplish: " ",
});
// tasks=newTasks;
}; };
const [modal, setModal] =useState({ const deleteHandle = (id) => {
dispatch(deleteTask(id));
};
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 = () => { const handleClose = () => {
setModal({ ...modal, open: false, task: null }); setModal({ ...modal, open: false, id: null });
};
const addTask=()=>{
let newTasks=[...tasks]
newTasks.unshift(
{
user:"",
title:"",
description:"",
priority:"",
author:"",
executor:"",
dateTimeStart:"",
dateTimeDue:"",
id:4,
dateCreated:""
}
)
setTasks(newTasks)
}; };
if (
return ( tasks &&
<Box sx={{ width: 'fullwidth' }}> tasks?.length > 0 &&
<Paper sx={{ width: '100%', mb: 2 }}> recievedTasks &&
recievedTasks?.length > 0
<MyTaskToolBar ) {
onClick={()=>{addTask()}} return (
/> <Box sx={{ width: "fullwidth" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<TableContainer> <MyTaskToolBar
onClick={() => {
<Table addTask();
sx={{ minWidth: 600 }} }}
aria-labelledby="tableTitle" />
>
<EnhancedTableHead <TableContainer>
order={order} <Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
orderBy={orderBy} <EnhancedTableHead
onRequestSort={handleRequestSort} order={order}
rowCount={tasks.length} orderBy={orderBy}
/> onRequestSort={handleRequestSort}
<TableBody> rowCount={tasks.length}
/>
{stableSort(tasks, getComparator(order, orderBy)) <TableBody>
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) <TableRow sx={{height:'1px',margin:0,padding:0}}>
.map((task, index) => { <TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" />
return ( </TableCell>
<TableRow <TableCell align="left">
hover <Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
key={task.id} </TableCell>
> </TableRow>
<TableCell {stableSort(recievedTasks, getComparator(order, orderBy))
component="th" .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
scope="row" .map((task, index) => {
padding="none" return (
></TableCell> <TableRow hover key={task.id}>
<CustomTableCell {...{ task, name: "priority", onChange }} /> <TableCell
<CustomTableCell {...{ task, name: "dateCreated", onChange }} /> component="th"
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} /> scope="row"
<CustomTableCell {...{ task, name: "author", onChange }} /> padding="none"
></TableCell>
{task.isEditMode ? ( <CustomTableCell
<TableCell key={task.id}> {...{
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 <MaterialUIPickers
newStartedDate={newStartedDate} task={task}
task={task} name="dateTimeStart"
setNewStartedDate={setNewStartedDate} onChange={onDateChange}
/> />
</TableCell>) </TableCell>
: <CustomTableCell {...{ task, name: "dateTimeStart", onChange}} />
} <TableCell>
<MaterialUIPickers
{task.isEditMode ? (
<TableCell key={task.id}>
<MaterialUIPickers
newDueDate={newDueDate}
task={task} task={task}
setNewDueDate={setNewDueDate} name="dateTimeDue"
/> onChange={onDateChange}
</TableCell>) />
: <CustomTableCell {...{ task, name: "dateTimeDue", onChange}} /> </TableCell>
}
{task.isEditMode ? (
<CustomTableCell {...{ task, name: "done", onChange }} /> <BasicSelect
items={["opened", "done", "failed"]}
<TableCell > task={task}
onChange={onChange}
{task.isEditMode ? ( />
) : (
<IconButton <CustomTableCell
aria-label="done" {...{
onClick={() => onToggleEditMode(task.id)} task,
> name: "accomplish",
<Done/> value: task.accomplish,
</IconButton> }}
/>
) : ( )}
<IconButton
aria-label="delete" <TableCell>
onClick={() => onToggleEditMode(task.id)} {task.isEditMode ? (
> <IconButton
<Edit/> aria-label="done"
</IconButton> onClick={() => {onToggleEditMode(task.id); HandleEditTask(task) }}
)} >
</TableCell> <Done />
<TableCell> </IconButton>
<Tooltip title="Delete"> ) : (
<IconButton onClick={(id)=>{deleteTask(id)}}> <IconButton
<DeleteIcon /> aria-label="edit"
</IconButton> onClick={() => onToggleEditMode(task.id)}
</Tooltip> >
</TableCell> <Edit />
</TableRow> </IconButton>
)}
</TableCell>
); <TableCell>
})} <Tooltip title="Delete">
<IconButton
</TableBody> onClick={(id) => {
</Table> deleteHandle(task.id);
</TableContainer> }}
<TablePagination >
rowsPerPageOptions={[5,10, 25]} <DeleteIcon />
component="div" </IconButton>
count={tasks.length} </Tooltip>
rowsPerPage={rowsPerPage} </TableCell>
page={page} </TableRow>
onPageChange={handleChangePage} );
onRowsPerPageChange={handleChangeRowsPerPage} })}
/> </TableBody>
</Paper> </Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={tasks.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</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} </Box>
setTasks={setTasks} );
/> }
</Box>
);
} }
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ 354ab632
...@@ -22,41 +22,41 @@ const headCells = [ ...@@ -22,41 +22,41 @@ 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: 'Статус',
}, },
{ {
id: 'change', id: 'change',
...@@ -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/actionTypes/tasksTypes.js
View file @ 354ab632
...@@ -2,6 +2,8 @@ export const FETCH_CALENDAR_TASKS_REQUEST = "FETCH_CALENDAR_TASKS_REQUEST"; ...@@ -2,6 +2,8 @@ export const FETCH_CALENDAR_TASKS_REQUEST = "FETCH_CALENDAR_TASKS_REQUEST";
export const FETCH_CALENDAR_TASKS_SUCCESS = "FETCH_CALENDAR_TASKS_SUCCESS"; export const FETCH_CALENDAR_TASKS_SUCCESS = "FETCH_CALENDAR_TASKS_SUCCESS";
export const FETCH_CALENDAR_TASKS_FAILURE = "FETCH_CALENDAR_TASKS_FAILURE"; export const FETCH_CALENDAR_TASKS_FAILURE = "FETCH_CALENDAR_TASKS_FAILURE";
export const FETCH_ALL_TASKS_SUCCESS = "FETCH_ALL_TASKS_SUCCESS";
export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST"; export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS"; export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE"; export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
......
planner-front/src/store/actions/tasksActions.js
View file @ 354ab632
...@@ -10,7 +10,8 @@ import { ...@@ -10,7 +10,8 @@ import {
EDIT_TASK_SUCCESS, EDIT_TASK_SUCCESS,
FETCH_CALENDAR_TASKS_FAILURE, FETCH_CALENDAR_TASKS_FAILURE,
FETCH_CALENDAR_TASKS_REQUEST, FETCH_CALENDAR_TASKS_REQUEST,
FETCH_CALENDAR_TASKS_SUCCESS} from "../actionTypes/tasksTypes"; FETCH_CALENDAR_TASKS_SUCCESS,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner' import axios from '../../axiosPlanner'
const fetchCalendarTasksRequest = () => { const fetchCalendarTasksRequest = () => {
...@@ -21,6 +22,11 @@ const fetchCalendarTasksSuccess = (tasks) => { ...@@ -21,6 +22,11 @@ const fetchCalendarTasksSuccess = (tasks) => {
return {type: FETCH_CALENDAR_TASKS_SUCCESS, tasks} return {type: FETCH_CALENDAR_TASKS_SUCCESS, tasks}
}; };
const fetchAllTasksSuccess = (tasks) => {
return {type: FETCH_ALL_TASKS_SUCCESS, tasks}
};
const fetchCalendarTasksFailure = (error) => { const fetchCalendarTasksFailure = (error) => {
return {type: FETCH_CALENDAR_TASKS_FAILURE, error} return {type: FETCH_CALENDAR_TASKS_FAILURE, error}
}; };
...@@ -35,8 +41,18 @@ export const fetchCalendarTasks = () => { ...@@ -35,8 +41,18 @@ export const fetchCalendarTasks = () => {
dispatch(fetchCalendarTasksFailure(error.response.data)); dispatch(fetchCalendarTasksFailure(error.response.data));
} }
} }
} };
export const fetchAllTasks = () => {
return async (dispatch) => {
dispatch(fetchCalendarTasksRequest());
try {
const response = await axios.get("/tasks");
dispatch(fetchAllTasksSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchCalendarTasksFailure(error.response.data));
}
}
};
const addTaskRequest = () => { const addTaskRequest = () => {
return {type: ADD_NEW_TASK_REQUEST} return {type: ADD_NEW_TASK_REQUEST}
}; };
...@@ -84,12 +100,15 @@ export const editTask = (task) => { ...@@ -84,12 +100,15 @@ export const editTask = (task) => {
dispatch(editTaskRequest()); dispatch(editTaskRequest());
const token = getState().users?.user?.token; const token = getState().users?.user?.token;
try { try {
await axios.put("/tasks", task, { console.log(task)
const r=await axios.put("/tasks", task, {
headers: { headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ' 'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
} }
}); });
console.log(r)
dispatch(editTaskSuccess()) dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks()) dispatch(fetchCalendarTasks())
} catch (error) { } catch (error) {
dispatch(editTaskFailure(error.response.data)); dispatch(editTaskFailure(error.response.data));
...@@ -100,7 +119,7 @@ export const editTask = (task) => { ...@@ -100,7 +119,7 @@ export const editTask = (task) => {
const deleteTaskRequest = () => { const deleteTaskRequest = () => {
return {type: DELETE_TASK_REQUEST} return {type: DELETE_TASK_REQUEST}
}; };
const deleteTaskSuccess = () => { const deleteTaskSuccess = () => {
return {type: DELETE_TASK_SUCCESS} return {type: DELETE_TASK_SUCCESS}
}; };
...@@ -121,6 +140,7 @@ export const deleteTask = (taskId) => { ...@@ -121,6 +140,7 @@ export const deleteTask = (taskId) => {
}); });
dispatch(deleteTaskSuccess()) dispatch(deleteTaskSuccess())
dispatch(fetchCalendarTasks()) dispatch(fetchCalendarTasks())
dispatch(fetchAllTasks())
} catch (error) { } catch (error) {
dispatch(deleteTaskFailure(error.response.data)); dispatch(deleteTaskFailure(error.response.data));
} }
......
planner-front/src/store/reducers/tasksReducer.js
View file @ 354ab632
...@@ -10,7 +10,8 @@ import { ...@@ -10,7 +10,8 @@ import {
FETCH_CALENDAR_TASKS_SUCCESS, FETCH_CALENDAR_TASKS_SUCCESS,
DELETE_TASK_SUCCESS, DELETE_TASK_SUCCESS,
DELETE_TASK_REQUEST, DELETE_TASK_REQUEST,
DELETE_TASK_FAILURE} from "../actionTypes/tasksTypes"; DELETE_TASK_FAILURE,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
const initialState = { const initialState = {
calendarTasks: [], calendarTasks: [],
...@@ -24,7 +25,7 @@ const tasksReduсer = (state = initialState, action) => { ...@@ -24,7 +25,7 @@ const tasksReduсer = (state = initialState, action) => {
return {...state, loading: true}; return {...state, loading: true};
case FETCH_CALENDAR_TASKS_SUCCESS: case FETCH_CALENDAR_TASKS_SUCCESS:
const newArr = [] const newArr = []
action.tasks.forEach((task)=>{ action.tasks.forEach((task)=>{
if (task.dateTimeStart && task.dateTimeDue) { if (task.dateTimeStart && task.dateTimeDue) {
if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) { if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) {
const dateStart = task.dateTimeStart.split('T')[0] const dateStart = task.dateTimeStart.split('T')[0]
...@@ -51,6 +52,8 @@ const tasksReduсer = (state = initialState, action) => { ...@@ -51,6 +52,8 @@ const tasksReduсer = (state = initialState, action) => {
} }
}) })
return {...state, loading: false, calendarTasks: newArr}; return {...state, loading: false, calendarTasks: newArr};
case FETCH_ALL_TASKS_SUCCESS:
return {...state, loading: false, tasks: action.tasks};
case FETCH_CALENDAR_TASKS_FAILURE: case FETCH_CALENDAR_TASKS_FAILURE:
return {...state, loading: false, error: action.error}; return {...state, loading: false, error: action.error};
case ADD_NEW_TASK_SUCCESS: case ADD_NEW_TASK_SUCCESS:
......
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