Skip to content

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

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

переделала дейтпикер, исправила функцию изменения задачи, оптимизировала CustomTableSell, сорректировала селект для статуса
parent e07268be
Hide 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";
import {Container} from "@mui/material";
import {useSelector} from "react-redux";
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 Register from './containers/Register/Register';
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 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 * 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
readOnly={props.readOnly}
renderInput={(params) => (
<TextField {...params}
sx={{ width: "auto",fontWeight: "200",fontSize: 5 }}
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>
<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>
);
}
\ No newline at end of file
}
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 './TaskModal.css';
import { Done } from '@mui/icons-material';
import Input from '@mui/material/Input';
import { useState, useEffect } from "react";
import { Modal, IconButton } from "@mui/material";
import "./TaskModal.css";
import { Done } from "@mui/icons-material";
import Input from "@mui/material/Input";
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 (
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={"modal"}
closeAfterTransition
onClose={props.handleClose}
open={props.open}
>
{ props?.task?.isEditMode ?
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">
<Input
value={taskContent?.title}
name={"title"}
onChange={inputChangeHandler}
style={{ width: "auto", fontSize:"12px",color: "white",fontWeight: "600" }}
/>
<Input
value={taskContent?.description}
name={"description"}
onChange={inputChangeHandler}
style={{ width: "auto", fontSize:"12px",color: "white" }}
/>
<IconButton
aria-label="done"
onClick={saveModalData}
>
<Done/>
</IconButton>
</div>:
value={props.task.title}
name="title"
onChange={(e) => props.onChange(e, props.task)}
style={{
width: "auto",
fontSize: "12px",
color: "white",
fontWeight: "600",
}}
/>
<Input
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">
{ props.task && props.task.title && (
{props.task && props.task.title && (
<div
style={{
width: "200px",
height: "200px",
color: "white",
fontWeight: "600"
fontWeight: "600",
}}
>
{props.task.title}
......@@ -88,9 +63,9 @@ const TaskModal = (props) => {
X
</IconButton>
</div>
}
</Modal>
);
};
export default TaskModal;
\ No newline at end of file
)}
</Modal>
);
};
export default TaskModal;
planner-front/src/components/UI/Select/Select.js
View file @ 9a852f06
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';
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}}>
<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}
value={props.task.accomplish}
label=""
name={"accomplish"}
onChange={inputChangeHandler}
sx={{ marginTop: 2}}
// className={'disabled'}
onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2 }}
>
<MenuItem value={props.itemOne}>{props.itemOne}</MenuItem>
<MenuItem value={props.itemTwo}>{props.itemTwo}</MenuItem>
<MenuItem value={props.itemThree}>{props.itemThree}</MenuItem>
{props.items.map((item) => (
<MenuItem value={item}>{item}</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
\ No newline at end of file
}
planner-front/src/containers/MyTasks/MyTasks.js
View file @ 9a852f06
......@@ -10,40 +10,39 @@ import {
Paper,
IconButton,
Tooltip,
} from "@mui/material";
Input,
} from "@mui/material";
import { useState, useEffect } from "react";
import {useDispatch, useSelector} from "react-redux";
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 TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
import moment from "moment";
import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar';
import MyTaskToolBar from "../../components/MyTasksCompoments/MyTaskToolBar";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import MaterialUIPickersDue from "../../components/MyTasksCompoments/DateTimePicker/DateTimePickerDue";
import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks} from "../../store/actions/tasksActions";
import { deleteTask } from "../../store/actions/tasksActions";
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'
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]);
const stabilizedThis = array?.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
......@@ -54,316 +53,314 @@ function stableSort(array, comparator) {
return stabilizedThis.map((el) => el[0]);
}
export default function EnhancedTable() {
const dispatch = useDispatch();
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);
useEffect(() => {
dispatch(fetchAllTasks());
}, []);
const handleChange = (id, newDate) => {
setNewStartedDate({ id: id, date: newDate });
const tasks = useSelector((state) => state.tasks.tasks);
};
const [recievedTasks, setRecievedTasks] = useState([]);
const dispatch = useDispatch();
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("id");
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
useEffect(() => {
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",
// }
// ])
useEffect(() => {
if (newStartedDate) {
let updatedTasks = [...tasks].filter((t) => t.id !== newStartedDate.id);
const currentTask = tasks.find((t) => t.id === newStartedDate.id);
delete currentTask.dateTimeStart;
const updatedTask = {
...currentTask,
dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format(),
};
updatedTasks.push(updatedTask);
tasks=updatedTasks;
}
}, [newStartedDate]);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
useEffect(() => {
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);
tasks=updatedTasks;
}
}, [newDueDate]);
const onToggleEditMode = id => {
if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)}
return tasks.map(task => {
if (task.id === id) {
return { ...task, isEditMode: !task.isEditMode };
}
return task;
});
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const onToggleEditModeDone = id => {
if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)}
return tasks.map(task => {
if (task.id === id) {
return { ...task, isEditMode: !task.isEditMode };
}
return task;
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 = tasks.map(task => {
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return { ...task, [name]: value };
}
return task;
});
tasks=newTasks;
setRecievedTasks(newTasks);
};
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
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 deleteHandle=(id)=>{
dispatch(deleteTask(id))
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 handleChangePage = (event, newPage) => {
setPage(newPage);
const onToggleEditMode = (id) => {
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return {
...task,
isEditMode: true,
readOnly: false,
};
}
return task;
});
setRecievedTasks(newTasks);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
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,
task: null
task: null,
});
const onModalOpen = (event, task) => {
event.stopPropagation();
setModal({ ...modal, open: true, task});
setModal({ ...modal, open: true, id: task.id });
};
const handleClose = () => {
setModal({ ...modal, open: false, task: null });
};
const addTask=()=>{
let newTasks=[...tasks]
newTasks.unshift(
{
title:"",
description:"",
priority:"",
author:"",
executor:"",
dateTimeStart:"",
dateTimeDue:"",
id:4,
createdAt:"",
accomplish:" "
}
)
tasks=newTasks;
setModal({ ...modal, open: false, id: null });
};
if (tasks)
{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>
{stableSort(tasks, 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", onChange }} />
<CustomTableCell {...{ task, name: "createdAt", onChange }} />
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} />
<CustomTableCell {...{ task, name: "author.displayName", onChange }} />
<TableCell key={task.id} >
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,
}}
/>
{/* <TableCell>
<MaterialUIPickers
newStartedDate={newStartedDate}
task={task}
setNewStartedDate={setNewStartedDate}
readOnly={readOnly}
task={task}
name="createdAt"
onChange={onDateChange}
/>
</TableCell>
<TableCell key={task.id}>
<MaterialUIPickersDue
newDueDate={newDueDate}
</TableCell> */}
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange,
onModalOpen,
}}
/>
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
onChange: onAuthorChange,
}}
/>
<TableCell>
<MaterialUIPickers
task={task}
setNewDueDate={setNewDueDate}
readOnly={readOnly}
/>
name="dateTimeStart"
onChange={onDateChange}
/>
</TableCell>
<CustomTableCell {...{ task, name: "accomplish", onChange }} />
{/* <BasicSelect
itemOne={"open"}
itemTwo={"done"}
itemThree={"failed"}
task={task}
/> */}
<TableCell >
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => onToggleEditModeDone(task.id)}
>
<Done/>
</IconButton>
) : (
<IconButton
aria-label="delete"
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>
<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={modal.task}
task={recievedTasks.find((task) => task.id === modal.id)}
open={modal.open}
handleClose={handleClose}
onChange={(e) => {onChange(e,modal.task)}}
onToggleEditMode={onToggleEditMode}
tasks={tasks}
// setTasks={setTasks}
/>
</Box>
)};
onChange={onChange}
/>
</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 = [
label: 'Приоритет',
},
{
id: 'date',
id: 'createdAt',
numeric: true,
disablePadding: false,
label: 'Дата создания',
},
{
id: 'task',
id: 'title',
numeric: true,
disablePadding: false,
label: 'Задача',
label: 'Заголовок',
},
{
id: 'author',
id: 'authorDisplayName',
numeric: true,
disablePadding: false,
label: 'Автор',
},
{
id: 'startDate',
id: 'dateTimeStart',
numeric: true,
disablePadding: false,
label: 'Дата начала',
},
{
id: 'endDate',
id: 'dateTimeDue',
numeric: true,
disablePadding: false,
label: 'Дата завершения',
},
{
id: 'done',
id: 'accomplish',
numeric: true,
disablePadding: false,
label: 'Статус',
......@@ -115,4 +115,3 @@ EnhancedTableHead.propTypes = {
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired,
};
planner-front/src/store/actions/tasksActions.js
View file @ 9a852f06
......@@ -47,8 +47,7 @@ export const fetchAllTasks = () => {
dispatch(fetchCalendarTasksRequest());
try {
const response = await axios.get("/tasks");
console.log(response)
dispatch(fetchAllTasksSuccess(response.data.tasks))
dispatch(fetchAllTasksSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchCalendarTasksFailure(error.response.data));
}
......@@ -101,12 +100,14 @@ export const editTask = (task) => {
dispatch(editTaskRequest());
const token = getState().users?.user?.token;
try {
console.log(task)
await axios.put("/tasks", task, {
headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
}
});
dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(editTaskFailure(error.response.data));
......@@ -117,7 +118,7 @@ export const editTask = (task) => {
const deleteTaskRequest = () => {
return {type: DELETE_TASK_REQUEST}
};
const deleteTaskSuccess = () => {
return {type: DELETE_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