Skip to content

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

Merge branch 'task-53-fix/put_task_repair' into 'development' 

Task 53 fix/put task repair

See merge request !36
parents 87084c37 e5dc1552
Show whitespace changes
Inline Side-by-side
Showing with 563 additions and 397 deletions
planner-front/src/App.js
View file @ 6a213935
...@@ -21,7 +21,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => { ...@@ -21,7 +21,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const App = () => { const App = () => {
const user = useSelector(state => state.users?.user); const user = useSelector(state => state.users?.user);
console.log(user)
return ( return (
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
......
planner-front/src/components/Menus/AdminMenu/AdminMenu.js
View file @ 6a213935
...@@ -10,7 +10,7 @@ const AdminMenu = () => { ...@@ -10,7 +10,7 @@ const AdminMenu = () => {
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const user = useSelector(state => state.users.user) const user = useSelector(state => state.users.user)
console.log(user)
const handleClick = (event) => { const handleClick = (event) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
......
planner-front/src/components/MyTasksCompoments/CustomTableCell.js
View file @ 6a213935
...@@ -2,7 +2,13 @@ import * as React from "react"; ...@@ -2,7 +2,13 @@ import * as React from "react";
import TableCell from "@mui/material/TableCell"; import TableCell from "@mui/material/TableCell";
import Input from "@mui/material/Input"; import Input from "@mui/material/Input";
const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => { const CustomTableCell = ({task,
name,
value,
onChange,
onModalOpen,
placeholder,
}) => {
const styles = { width: "auto", height: "10px"}; const styles = { width: "auto", height: "10px"};
if (task) { if (task) {
...@@ -15,6 +21,7 @@ const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => { ...@@ -15,6 +21,7 @@ const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
> >
{task.isEditMode && onChange ? ( {task.isEditMode && onChange ? (
<Input <Input
placeholder={placeholder}
value={value} value={value}
name={name} name={name}
onChange={(e) => onChange(e, task)} onChange={(e) => onChange(e, task)}
......
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js
View file @ 6a213935
...@@ -4,6 +4,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; ...@@ -4,6 +4,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker"; import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
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 <LocalizationProvider
...@@ -11,6 +12,7 @@ export default function MaterialUIPickers(props) { ...@@ -11,6 +12,7 @@ export default function MaterialUIPickers(props) {
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }} sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
> >
<DateTimePicker <DateTimePicker
inputFormat="DD-MM-YYYY hh:mm A"
disabled={props.task.readOnly} disabled={props.task.readOnly}
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
......
planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js
View file @ 6a213935
...@@ -5,22 +5,26 @@ import Toolbar from '@mui/material/Toolbar'; ...@@ -5,22 +5,26 @@ import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect'; import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
import Add from "@mui/icons-material/Add";
import Close from "@mui/icons-material/Close";
export default function MyTaskToolBar(props) { export default function MyTaskToolBar({projects,onClose,projectName,setProjectName,formStatus,onClick}) {
let projectsFilter = let projectsFilter =
<></> <></>
if (props.projects) {
if (projects) {
projectsFilter= projectsFilter=
<MultipleSelect <MultipleSelect
projects={props.projects} projects={projects}
onClose={props.onClose} onClose={onClose}
projectName={props.projectName} projectName={projectName}
setProjectName={props.setProjectName} setProjectName={setProjectName}
/> />
} }
return ( return (
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
...@@ -28,9 +32,31 @@ export default function MyTaskToolBar(props) { ...@@ -28,9 +32,31 @@ export default function MyTaskToolBar(props) {
Мои задачи Мои задачи
</Typography> </Typography>
{projectsFilter} {projectsFilter}
<Button color="inherit" onClick={()=>(props.onClick)} >Добавить задачу</Button>
<Button
color={formStatus === true ? "info" : "inherit"}
style={{
backgroundColor: formStatus === true ? "white" : "inherit",
}}
onClick={onClick}
>
{formStatus === true ? (
<>
<Close />
<span style={{ lineHeight: "16px" }}>Скрыть задачу</span>
</>
) : (
<>
<Add />
<span style={{ lineHeight: "16px" }}>Добавить задачу</span>
</>
)}
</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Box> </Box>
); );
} }
planner-front/src/components/MyTasksCompoments/NewTaskForm.js
View file @ 6a213935
import * as React from "react"; import * as React from "react";
import { import {
Box,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableContainer, TableContainer,
TableRow, TableRow,
Paper, TableHead,
IconButton, IconButton,
Tooltip, Tooltip,
Input, Typography,
Divider,
} from "@mui/material"; } from "@mui/material";
import { useState, useEffect } from "react"; import { useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material"; import { AddBox } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import moment from "moment"; import moment from "moment";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell"; import CustomTableCell from "./CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker"; import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
import BasicSelect from "../../components/UI/Select/Select"; import BasicSelect from "../UI/Select/Select";
import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions"; import { addTask } from "../../store/actions/tasksActions";
export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
export default function NewTaskForm (props) { const dispatch = useDispatch();
const user = useSelector((state) => state.users.user);
const currentDateTime = new Date();
const dateTime = moment(currentDateTime).utc().format();
const [task, setTask] = useState({
// const onToggleEditModeDone = (id) => { id: 0,
// const newTasks = recievedTasks.map((task) => {
// if (task.id === id) {
// return {
// ...task,
// isEditMode: false,
// readOnly: true,
// };
// }
// return task;
// });
// setRecievedTasks(newTasks);
// };
const task={
id:0,
title: "", title: "",
description: "", description: "",
createdAt: "", createdAt: dateTime,
dateTimeStart: null, dateTimeStart: null,
dateTimeDue: null, dateTimeDue: null,
accomplish: "", project: projects[0],
priority: "", accomplish: "opened",
author: { priority: "B",
name: "", authorDisplayName: user.displayName,
}, executors: [],
executors: [
{ name: "" }
],
isEditMode:false,
readOnly: true
};
const onToggleEditMode = (id) => {
console.log(task)
return {
...task,
isEditMode: true, isEditMode: true,
readOnly: false, });
const onChange = (e, task) => {
const value = e.target.value;
const name = e.target.name;
const newTask = { ...task, [name]: value };
setTask(newTask);
};
const onProjectChange = (e, task) => {
const value = e.target.value;
const project = projects.find((e) => e.id === value);
const newTask = { ...task };
newTask.project = project;
setTask(newTask);
}; };
const onDateChange = (id, value, property) => {
const newTask = {
...task,
[property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
};
setTask(newTask);
};
const handleAddTask = () => {
dispatch(addTask(task));
setAddTaskForm();
}; };
console.log(task)
return ( return (
<TableRow hover key={task.id}> <>
<TableCell <Divider>
component="th" <Typography variant="overline">Добавить новую задачу</Typography>
scope="row" </Divider>
padding="none" <TableContainer
></TableCell> style={{
<CustomTableCell backgroundColor: "#E8E8E8",
{...{ display: "flex",
task, alignItems: "center",
name: "priority", marginBottom: "2em",
value: task.priority,
onChange:props.onChange,
}} }}
>
<Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
<TableHead>
<TableRow>
{header.map((headCell) => (
<TableCell
key={headCell.id}
align="center"
padding={headCell.disablePadding ? "none" : "normal"}
>
{headCell.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
<TableRow hover key={task.id}>
<TableCell component="th" scope="row" padding="none"></TableCell>
<TableCell>
<BasicSelect
items={[
{ value: "A", title: "A" },
{ value: "B", title: "B" },
{ value: "C", title: "C" },
]}
task={task}
value={task.priority}
onChange={onChange}
name="priority"
/> />
</TableCell>
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
name: "createdAt", name: "createdAt",
value: task.createdAt, value: moment(task.createdAt).format("DD-MM-YYYY hh:mm A"),
}} }}
/> />
...@@ -101,33 +128,38 @@ export default function NewTaskForm (props) { ...@@ -101,33 +128,38 @@ export default function NewTaskForm (props) {
task, task,
name: "title", name: "title",
value: task.title, value: task.title,
onChange:props.onChange, onChange: onChange,
onModalOpen:props.onModalOpen, placeholder: "Введите название задачи",
}} }}
/> />
{task.isEditMode ? (
<BasicSelect
items={["project1", "project2", "project3"]}
task={task}
onChange={props.onChange}
/>
) : (
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
name: "project", name: "description",
value: task.project?.title, value: task.description,
onChange: props.onChange, onChange: onChange,
placeholder: "Введите описание задачи",
}} }}
/> />
)}
<TableCell>
<BasicSelect
items={projects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
onChange={onProjectChange}
name="project"
value={task.project?.id}
/>
</TableCell>
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
name: "author", name: "author",
value: task.author.displayName, value: user.displayName,
onChange: props.onAuthorChange,
}} }}
/> />
...@@ -135,7 +167,7 @@ export default function NewTaskForm (props) { ...@@ -135,7 +167,7 @@ export default function NewTaskForm (props) {
<MaterialUIPickers <MaterialUIPickers
task={task} task={task}
name="dateTimeStart" name="dateTimeStart"
onChange={props.onDateChange} onChange={onDateChange}
/> />
</TableCell> </TableCell>
...@@ -143,55 +175,106 @@ export default function NewTaskForm (props) { ...@@ -143,55 +175,106 @@ export default function NewTaskForm (props) {
<MaterialUIPickers <MaterialUIPickers
task={task} task={task}
name="dateTimeDue" name="dateTimeDue"
onChange={props.onDateChange} onChange={onDateChange}
/> />
</TableCell> </TableCell>
{task.isEditMode ? ( <TableCell>
<BasicSelect <BasicSelect
items={["opened", "done", "failed"]} items={[
{ value: "opened", title: "opened" },
{ value: "done", title: "done" },
{ value: "failed", title: "failed" },
]}
task={task} task={task}
onChange={props.onChange} onChange={onChange}
name="accomplish"
value={task.accomplish}
/> />
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
}}
/>
)}
<TableCell>
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {props.onToggleEditModeDone(task.id); props.HandleEditTask(task) }}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
</TableCell> </TableCell>
<TableCell> <TableCell>
<Tooltip title="Delete"> <Tooltip title="Добавить">
<IconButton <IconButton size="large" onClick={handleAddTask}>
onClick={(id) => { <AddBox fontSize="large" />
props.deleteHandle(task.id);
}}
>
<DeleteIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody>
</Table>
</TableContainer>
<Divider />
</>
); );
} }
export const header = [
{
id: "id",
numeric: true,
disablePadding: true,
label: "",
},
{
id: "priority",
numeric: false,
disablePadding: true,
label: "Приоритет",
},
{
id: "createdAt",
numeric: true,
disablePadding: false,
label: "Дата создания",
},
{
id: "title",
numeric: false,
disablePadding: false,
label: "Заголовок",
},
{
id: "description",
numeric: false,
disablePadding: false,
label: "Описание",
},
{
id: "projectName",
numeric: true,
disablePadding: false,
label: "Проект",
},
{
id: "authorDisplayName",
numeric: false,
disablePadding: false,
label: "Автор",
},
{
id: "dateTimeStart",
numeric: true,
disablePadding: false,
label: "Дата начала",
},
{
id: "dateTimeDue",
numeric: true,
disablePadding: false,
label: "Дата завершения",
},
{
id: "accomplish",
numeric: false,
disablePadding: false,
label: "Статус",
},
{
id: "add",
numeric: false,
disablePadding: false,
label: "",
},
];
planner-front/src/components/UI/MultipleSelect/MultipleSelect.js
View file @ 6a213935
...@@ -28,16 +28,15 @@ function getStyles(name, personName, theme) { ...@@ -28,16 +28,15 @@ function getStyles(name, personName, theme) {
}; };
} }
export default function MultipleSelect(props) { export default function MultipleSelect({projects,projectName,onClose,setProjectName}) {
const theme = useTheme(); const theme = useTheme();
const handleChange = (event) => { const handleChange = (event) => {
const { const {
target: { value }, target: { value },
} = event; } = event;
props.setProjectName( setProjectName(
// On autofill we get a stringified value. // On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value, typeof value === 'string' ? value.split(',') : value,
); );
...@@ -53,18 +52,18 @@ export default function MultipleSelect(props) { ...@@ -53,18 +52,18 @@ export default function MultipleSelect(props) {
name='Choose Project' name='Choose Project'
id="demo-multiple-name" id="demo-multiple-name"
multiple multiple
value={props.projectName} value={projectName}
onChange={handleChange} onChange={handleChange}
input={<OutlinedInput label="Name" />} input={<OutlinedInput label="Name" />}
MenuProps={MenuProps} MenuProps={MenuProps}
sx={{color:'white' }} sx={{color:'white' }}
onClose={(e)=>{props.onClose(props.projectName)}} onClose={(e)=>{onClose(projectName)}}
> >
{props.projects.map((project) => ( {projects?.map((project) => (
<MenuItem <MenuItem
key={project} key={project}
value={project} value={project}
style={getStyles(project, props.projectName, theme)} style={getStyles(project, projectName, theme)}
> >
{project} {project}
</MenuItem> </MenuItem>
......
planner-front/src/components/UI/Select/Select.js
View file @ 6a213935
...@@ -5,7 +5,8 @@ import MenuItem from "@mui/material/MenuItem"; ...@@ -5,7 +5,8 @@ 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({value,label,name,onChange,task,items}) {
return ( return (
<Box sx={{ minWidth: 60 }}> <Box sx={{ minWidth: 60 }}>
<FormControl fullWidth> <FormControl fullWidth>
...@@ -13,17 +14,19 @@ export default function BasicSelect(props) { ...@@ -13,17 +14,19 @@ export default function BasicSelect(props) {
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={props.task.accomplish} value={value}
label="" label={label}
name={"accomplish"} name={name}
onChange={(e) => props.onChange(e, props.task)} onChange={(e) => onChange(e, task)}
sx={{ marginTop: 2 }}
> >
{props.items.map((item) => ( {items.map((item) => (
<MenuItem value={item}>{item}</MenuItem> <MenuItem key={item.value} value={item.value}>
{item.title}
</MenuItem>
))} ))}
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>
); );
} }
planner-front/src/containers/MyTasks/MyTasks.js
View file @ 6a213935
...@@ -10,11 +10,11 @@ import { ...@@ -10,11 +10,11 @@ import {
Paper, Paper,
IconButton, IconButton,
Tooltip, Tooltip,
Input,
} from "@mui/material"; } 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, NavigateNextOutlined } from "@mui/icons-material"; import { Done, Edit } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal"; import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader"; import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
...@@ -23,52 +23,43 @@ import MyTaskToolBar from "../../components/MyTasksCompoments/MyTaskToolBar"; ...@@ -23,52 +23,43 @@ 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 BasicSelect from "../../components/UI/Select/Select"; import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions"; import { fetchAllTasks, deleteTask,editTask} from "../../store/actions/tasksActions";
import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm"; import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm";
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() { export default function EnhancedTable() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const calendarTasks = useSelector((state) => state.tasks.tasks); const tasks = useSelector((state) => state.tasks.tasks);
const tasks = calendarTasks
console.log(tasks)
const [recievedTasks, setRecievedTasks] = useState([]); const [recievedTasks, setRecievedTasks] = useState([]);
const [addTaskForm, setAddTaskForm] = useState(false);
const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState("id");
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] =useState(5);
const [modal, setModal] = useState({
open: false,
task: null,
});
const [projects,setProjects]=useState(['1','2']) const [projects,setProjects]=useState(['1','2'])
console.log(tasks)
const [order, setOrder] = React.useState("asc"); useEffect(() => {
const [orderBy, setOrderBy] = React.useState("id"); dispatch(fetchAllTasks());
const [page, setPage] = React.useState(0); filterProjectsNamesFromTasks()
const [rowsPerPage, setRowsPerPage] = React.useState(5); if (tasks && tasks?.length > 0) {
setRecievedTasks(tasks);
}
}, [tasks===undefined,tasks?.length]);
useEffect(() => {
dispatch(fetchAllTasks());
}, [addTaskForm, setAddTaskForm]);
const handleRequestSort = (event, property) => { const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc"; const isAsc = orderBy === property && order === "asc";
...@@ -90,12 +81,12 @@ console.log(tasks) ...@@ -90,12 +81,12 @@ console.log(tasks)
const name = e.target.name; const name = e.target.name;
const { id } = task; const { id } = task;
const newTasks = recievedTasks.map((task) => { const newTasks = recievedTasks.map((task) => {
console.log(task)
if (task.id === id) { if (task.id === id) {
return { ...task, [name]: value }; return { ...task, [name]: value };
} }
return task; return task;
}); });
setRecievedTasks(newTasks); setRecievedTasks(newTasks);
}; };
...@@ -111,7 +102,6 @@ console.log(tasks) ...@@ -111,7 +102,6 @@ console.log(tasks)
} }
return task; return task;
}); });
setRecievedTasks(newTasks); setRecievedTasks(newTasks);
}; };
...@@ -128,8 +118,24 @@ console.log(tasks) ...@@ -128,8 +118,24 @@ console.log(tasks)
setRecievedTasks(newTasks); setRecievedTasks(newTasks);
}; };
const onProjectChange = (e, task) => {
const value = e.target.value;
const project = rawProjects.find((e) => e.id === value);
const { id } = task;
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
const updated = { ...task };
updated.project = project;
updated.projectName = project.title;
return updated;
}
return task;
});
setRecievedTasks(newTasks);
};
const onToggleEditMode = (id) => { const onToggleEditMode = (id) => {
console.log(id)
const newTasks = recievedTasks.map((task) => { const newTasks = recievedTasks.map((task) => {
if (task.id === id) { if (task.id === id) {
return { return {
...@@ -157,36 +163,14 @@ console.log(tasks) ...@@ -157,36 +163,14 @@ console.log(tasks)
setRecievedTasks(newTasks); setRecievedTasks(newTasks);
}; };
const HandleEditTask= (task)=>{ const handleEditTask= (task)=>{
dispatch(editTask(task)) dispatch(editTask(task))
} }
const addTask = () => {
// let newTasks=[...tasks]
tasks.unshift({
title: "",
description: "",
priority: "",
author: "",
executor: "",
dateTimeStart: "",
dateTimeDue: "",
id: 4,
createdAt: "",
accomplish: " ",
});
// tasks=newTasks;
};
const deleteHandle = (id) => { const deleteHandle = (id) => {
dispatch(deleteTask(id)); dispatch(deleteTask(id));
}; };
const [modal, setModal] = useState({
open: false,
task: null,
});
const onModalOpen = (event, task) => { const onModalOpen = (event, task) => {
event.stopPropagation(); event.stopPropagation();
...@@ -203,7 +187,6 @@ console.log(tasks) ...@@ -203,7 +187,6 @@ console.log(tasks)
const onClose=(projectName)=>{ const onClose=(projectName)=>{
console.log("projectName", projectName, 'projects',projects)
let tasksFilteredByProject = tasks let tasksFilteredByProject = tasks
if (projectName.length>0) { if (projectName.length>0) {
tasksFilteredByProject = tasks.filter(task=>projectName.includes(task.project?.title)) tasksFilteredByProject = tasks.filter(task=>projectName.includes(task.project?.title))
...@@ -211,10 +194,10 @@ console.log(tasks) ...@@ -211,10 +194,10 @@ console.log(tasks)
setRecievedTasks(tasksFilteredByProject) setRecievedTasks(tasksFilteredByProject)
setFilterProjectTumbler(true) setFilterProjectTumbler(true)
} }
const rawProjects= tasks?.map(task=>task.project)
const filterProjectsNamesFromTasks = ()=>{ const filterProjectsNamesFromTasks = ()=>{
if (tasks && tasks?.length > 0) { if (tasks && tasks?.length > 0) {
const rawProjects= tasks.map(task=>task.project)
let rawSetProjectNames = [] let rawSetProjectNames = []
for (let project of rawProjects){ for (let project of rawProjects){
if (project===null){ if (project===null){
...@@ -224,67 +207,46 @@ console.log(tasks) ...@@ -224,67 +207,46 @@ console.log(tasks)
} }
let uniqueTitlesProjects = [...new Set(rawSetProjectNames)]; let uniqueTitlesProjects = [...new Set(rawSetProjectNames)];
setProjects(uniqueTitlesProjects) setProjects(uniqueTitlesProjects)
console.log('filterProjectsNamesFromTasks uniqueTitlesProjects',uniqueTitlesProjects)
}
}
useEffect(() => {
dispatch(fetchAllTasks());
filterProjectsNamesFromTasks()
if (tasks && tasks?.length > 0) {
setRecievedTasks(tasks);
} }
}, [tasks===undefined]); }
if ( if (
tasks && tasks &&
tasks?.length > 0 && tasks?.length > 0 &&
recievedTasks && recievedTasks &&
recievedTasks?.length >= 0 recievedTasks?.length > 0
) { ) {
return ( return (
<Box sx={{ width: "fullwidth" }}> <Box sx={{ width: "fullwidth" }}>
<Paper sx={{ width: "100%", mb: 2 }}> <Paper sx={{ width: "100%", mb: 2 }}>
<MyTaskToolBar <MyTaskToolBar
onClick={() => { onClick={() => setAddTaskForm(!addTaskForm)}
addTask(); formStatus={addTaskForm}
}}
projects={projects} projects={projects}
onClose={onClose} onClose={onClose}
projectName={projectName} projectName={projectName}
setProjectName={setProjectName} setProjectName={setProjectName}
/> />
{addTaskForm ? (
<NewTaskForm
tasks={recievedTasks}
projects={rawProjects}
setAddTaskForm={()=>setAddTaskForm(false)}
/>
) : null}
<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}
onRequestSort={handleRequestSort} onRequestSort={handleRequestSort}
// rowCount={tasks.length} rowCount={tasks.length}
/> />
<TableBody> <TableBody>
{/* <TableRow sx={{height:'1px',margin:0,padding:0}}>
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" />
</TableCell>
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
</TableCell>
</TableRow> */}
{/* <NewTaskForm
onChange={onChange}
onModalOpen={onModalOpen}
onAuthorChange={onAuthorChange}
onDateChange={onDateChange}
onToggleEditMode={onToggleEditMode}
onToggleEditModeDone={onToggleEditModeDone}
HandleEditTask={HandleEditTask}
deleteHandle={deleteHandle}
/> */}
{stableSort(recievedTasks, getComparator(order, orderBy)) {stableSort(recievedTasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
...@@ -297,19 +259,38 @@ console.log(tasks) ...@@ -297,19 +259,38 @@ console.log(tasks)
scope="row" scope="row"
padding="none" padding="none"
></TableCell> ></TableCell>
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={[
{ value: "A", title: "A" },
{ value: "B", title: "B" },
{ value: "C", title: "C" },
]}
task={task}
value={task.priority}
onChange={onChange}
name="priority"
/>
</TableCell>
) : (
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
name: "priority", name: "priority",
value: task.priority, value: task.priority,
onChange,
}} }}
/> />
)}
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
name: "createdAt", name: "createdAt",
value: task.createdAt, value: moment(task.createdAt)
.utc()
.format("DD-MM-YYYY hh:mm A"),
}} }}
/> />
...@@ -324,21 +305,28 @@ console.log(tasks) ...@@ -324,21 +305,28 @@ console.log(tasks)
/> />
{task.isEditMode ? ( {task.isEditMode ? (
<TableCell>
<BasicSelect <BasicSelect
items={["project1", "project2", "project3"]} items={rawProjects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task} task={task}
onChange={onChange} onChange={onProjectChange}
name="project"
value={task.project?.id}
/> />
</TableCell>
) : ( ) : (
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
name: "project", name: "projectId",
value: task.project?.title, value: task.project?.title,
onChange: onChange,
}} }}
/> />
)} )}
<CustomTableCell <CustomTableCell
{...{ {...{
task, task,
...@@ -365,11 +353,19 @@ console.log(tasks) ...@@ -365,11 +353,19 @@ console.log(tasks)
</TableCell> </TableCell>
{task.isEditMode ? ( {task.isEditMode ? (
<TableCell>
<BasicSelect <BasicSelect
items={["opened", "done", "failed"]} items={[
{ value: "opened", title: "opened" },
{ value: "done", title: "done" },
{ value: "failed", title: "failed" },
]}
task={task} task={task}
onChange={onChange} onChange={onChange}
name="accomplish"
value={task.accomplish}
/> />
</TableCell>
) : ( ) : (
<CustomTableCell <CustomTableCell
{...{ {...{
...@@ -381,10 +377,14 @@ console.log(tasks) ...@@ -381,10 +377,14 @@ console.log(tasks)
)} )}
<TableCell> <TableCell>
<Tooltip title="Редактировать">
{task.isEditMode ? ( {task.isEditMode ? (
<IconButton <IconButton
aria-label="done" aria-label="done"
onClick={() => {onToggleEditModeDone(task.id); HandleEditTask(task) }} onClick={() => {
onToggleEditModeDone(task.id);
handleEditTask(task);
}}
> >
<Done /> <Done />
</IconButton> </IconButton>
...@@ -396,9 +396,10 @@ console.log(tasks) ...@@ -396,9 +396,10 @@ console.log(tasks)
<Edit /> <Edit />
</IconButton> </IconButton>
)} )}
</Tooltip>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Tooltip title="Delete"> <Tooltip title="Удалить">
<IconButton <IconButton
onClick={(id) => { onClick={(id) => {
deleteHandle(task.id); deleteHandle(task.id);
...@@ -414,7 +415,6 @@ console.log(tasks) ...@@ -414,7 +415,6 @@ console.log(tasks)
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<TablePagination <TablePagination
rowsPerPageOptions={[5, 10, 25]} rowsPerPageOptions={[5, 10, 25]}
component="div" component="div"
...@@ -435,3 +435,32 @@ console.log(tasks) ...@@ -435,3 +435,32 @@ console.log(tasks)
); );
} }
} }
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]);
}
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ 6a213935
import * as React from 'react'; import * as React from "react";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import TableCell from '@mui/material/TableCell'; import TableCell from "@mui/material/TableCell";
import TableHead from '@mui/material/TableHead'; import TableHead from "@mui/material/TableHead";
import TableRow from '@mui/material/TableRow'; import TableRow from "@mui/material/TableRow";
import TableSortLabel from '@mui/material/TableSortLabel'; import TableSortLabel from "@mui/material/TableSortLabel";
import { visuallyHidden } from '@mui/utils'; import { visuallyHidden } from "@mui/utils";
const headCells = [ const headCells = [
{ {
id: 'id', id: "id",
numeric: true, numeric: true,
disablePadding: true, disablePadding: true,
label: '', label: "",
}, },
{ {
id: 'priority', id: "priority",
numeric: false, numeric: false,
disablePadding: true, disablePadding: true,
label: 'Приоритет', label: "Приоритет",
}, },
{ {
id: 'createdAt', id: "createdAt",
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата создания', label: "Дата создания",
}, },
{ {
id: 'title', id: "title",
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Заголовок', label: "Заголовок",
}, },
{ {
id: 'project', id: "projectName",
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Проект', label: "Проект",
}, },
{ {
id: 'authorDisplayName', id: "authorDisplayName",
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Автор', label: "Автор",
}, },
{ {
id: 'dateTimeStart', id: "dateTimeStart",
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата начала', label: "Дата начала",
}, },
{ {
id: 'dateTimeDue', id: "dateTimeDue",
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата завершения', label: "Дата завершения",
}, },
{ {
id: 'accomplish', id: "accomplish",
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Статус', label: "Статус",
}, },
{ {
id: 'change', id: "change",
numeric: false, numeric: false,
disablePadding: false, disablePadding: false,
label: '', label: "",
}, },
{ {
id: 'delete', id: "delete",
numeric: false, numeric: false,
disablePadding: false, disablePadding: false,
label: '', label: "",
}, },
]; ];
export default function EnhancedTableHead(props) { export default function EnhancedTableHead({ order, orderBy, rowCount, onRequestSort }) {
const { order, orderBy, rowCount, onRequestSort } =
props;
const createSortHandler = (property) => (event) => { const createSortHandler = (property) => (event) => {
onRequestSort(event, property); onRequestSort(event, property);
}; };
...@@ -88,23 +86,22 @@ export default function EnhancedTableHead(props) { ...@@ -88,23 +86,22 @@ export default function EnhancedTableHead(props) {
return ( return (
<TableHead> <TableHead>
<TableRow> <TableRow>
{headCells.map((headCell) => ( {headCells.map((headCell) => (
<TableCell <TableCell
key={headCell.id} key={headCell.id}
align={'center'} align={"center"}
padding={headCell.disablePadding ? 'none' : 'normal'} padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false} sortDirection={orderBy === headCell.id ? order : false}
> >
<TableSortLabel <TableSortLabel
active={orderBy === headCell.id} active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'} direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)} onClick={createSortHandler(headCell.id)}
> >
{headCell.label} {headCell.label}
{orderBy === headCell.id ? ( {orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}> <Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'} {order === "desc" ? "sorted descending" : "sorted ascending"}
</Box> </Box>
) : null} ) : null}
</TableSortLabel> </TableSortLabel>
...@@ -117,7 +114,7 @@ export default function EnhancedTableHead(props) { ...@@ -117,7 +114,7 @@ export default function EnhancedTableHead(props) {
EnhancedTableHead.propTypes = { EnhancedTableHead.propTypes = {
onRequestSort: PropTypes.func.isRequired, onRequestSort: PropTypes.func.isRequired,
order: PropTypes.oneOf(['asc', 'desc']).isRequired, order: PropTypes.oneOf(["asc", "desc"]).isRequired,
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 @ 6a213935
...@@ -69,6 +69,25 @@ const addTaskFailure = (error) => { ...@@ -69,6 +69,25 @@ const addTaskFailure = (error) => {
return {type: ADD_NEW_TASK_FAILURE, error} return {type: ADD_NEW_TASK_FAILURE, error}
}; };
// export const addTask = (task) => {
// return async (dispatch, getState) => {
// dispatch(addTaskRequest());
// const token = getState().users?.user?.token;
// try {
// await axios.post("/tasks", task, {
// headers: {
// Authorization: token,
// },
// });
// dispatch(addTaskSuccess());
// dispatch(fetchCalendarTasks());
// } catch (error) {
// dispatch(addTaskFailure(error.response.data));
// }
// };
// };
export const addTask = (task) => { export const addTask = (task) => {
return async (dispatch, getState) => { return async (dispatch, getState) => {
dispatch(addTaskRequest()); dispatch(addTaskRequest());
...@@ -76,6 +95,7 @@ export const addTask = (task) => { ...@@ -76,6 +95,7 @@ export const addTask = (task) => {
try { try {
await axios.post("/tasks", task); await axios.post("/tasks", task);
dispatch(addTaskSuccess()) dispatch(addTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks()) dispatch(fetchCalendarTasks())
} catch (error) { } catch (error) {
dispatch(addTaskFailure(error.response.data)); dispatch(addTaskFailure(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