Skip to content

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

Merge branch 'development' of… 

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-63-enhance/routers_tasks_projects
parents 3c477cbb d19dd8ff
Hide whitespace changes
Inline Side-by-side
Showing with 428 additions and 40 deletions
planner-front/src/components/MyTasksCompoments/CustomTableCell.js
View file @ a7fd397b
...@@ -8,10 +8,12 @@ const CustomTableCell = ({task, ...@@ -8,10 +8,12 @@ const CustomTableCell = ({task,
onChange, onChange,
onModalOpen, onModalOpen,
placeholder, placeholder,
user
}) => { }) => {
const styles = { width: "auto", height: "10px"}; const styles = { width: "auto", height: "10px"};
if (task) {
if (task) {
return ( return (
<> <>
<TableCell <TableCell
...@@ -19,7 +21,7 @@ const CustomTableCell = ({task, ...@@ -19,7 +21,7 @@ const CustomTableCell = ({task,
align="left" align="left"
style={styles} style={styles}
> >
{task.isEditMode && onChange ? ( {task.isEditMode && onChange && name==!"author" && task.author.id==user.id ? (
<Input <Input
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
......
planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js
View file @ a7fd397b
...@@ -3,22 +3,23 @@ import "./TaskModal.css"; ...@@ -3,22 +3,23 @@ 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";
const TaskModal = (props) => { const TaskModal = ({handleClose,open,task,onChange,user }) => {
return ( return (
<Modal <Modal
aria-labelledby="transition-modal-title" aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description" aria-describedby="transition-modal-description"
className={"modal"} className={"modal"}
closeAfterTransition closeAfterTransition
onClose={props.handleClose} onClose={handleClose}
open={props.open} open={open}
> >
{props?.task?.isEditMode ? ( {task?.isEditMode && task.author.id===user.id ? (
<div className="modalBox"> <div className="modalBox">
<Input <Input
value={props.task.title} value={task.title}
name="title" name="title"
onChange={(e) => props.onChange(e, props.task)} onChange={(e) => onChange(e, task)}
style={{ style={{
width: "auto", width: "auto",
fontSize: "12px", fontSize: "12px",
...@@ -27,18 +28,18 @@ const TaskModal = (props) => { ...@@ -27,18 +28,18 @@ const TaskModal = (props) => {
}} }}
/> />
<Input <Input
value={props.task.description} value={task.description}
name="description" name="description"
onChange={(e) => props.onChange(e, props.task)} onChange={(e) => onChange(e, task)}
style={{ width: "auto", fontSize: "12px", color: "white" }} style={{ width: "auto", fontSize: "12px", color: "white" }}
/> />
<IconButton aria-label="done" onClick={props.handleClose}> <IconButton aria-label="done" onClick={handleClose}>
<Done /> <Done />
</IconButton> </IconButton>
</div> </div>
) : ( ) : (
<div className="modalBox"> <div className="modalBox">
{props.task && props.task.title && ( {task && task.title && (
<div <div
style={{ style={{
width: "200px", width: "200px",
...@@ -47,18 +48,18 @@ const TaskModal = (props) => { ...@@ -47,18 +48,18 @@ const TaskModal = (props) => {
fontWeight: "600", fontWeight: "600",
}} }}
> >
{props.task.title} {task.title}
</div> </div>
)} )}
{props.task && props.task.description && ( {task && task.description && (
<div style={{ width: "200px", height: "200px", color: "white" }}> <div style={{ width: "200px", height: "200px", color: "white" }}>
{props.task.description} {task.description}
</div> </div>
)} )}
<IconButton <IconButton
sx={{ marginLeft: 0, color: "white" }} sx={{ marginLeft: 0, color: "white" }}
aria-label="close" aria-label="close"
onClick={props.handleClose} onClick={handleClose}
> >
X X
</IconButton> </IconButton>
......
planner-front/src/components/ProjectTasks/ProjectTasksBody.js 0 → 100644
View file @ a7fd397b
import * as React from "react";
import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TablePagination,
TableRow,
Paper
} from "@mui/material";
import { useState } from "react";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import moment from "moment";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import BasicSelect from "../../components/UI/Select/Select";
import ProjectTasksHeader from "./ProjectTasksHeader";
export default function ProjectTasksBody({ tasks }) {
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,
});
console.log(tasks)
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);
};
const onModalOpen = (event, task) => {
event.stopPropagation();
setModal({ ...modal, open: true, id: task.id });
};
const handleClose = () => {
setModal({ ...modal, open: false, id: null });
};
const rawProjects = tasks?.map(task => task.project)
if (
tasks &&
tasks?.length > 0
) {
return (
<Box sx={{ width: "fullwidth" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<TableContainer>
<Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
<ProjectTasksHeader
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>
{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
{...{
task,
name: "priority",
value: task.priority,
}}
/>
)}
<CustomTableCell
{...{
task,
name: "createdAt",
value: moment(task.createdAt)
.utc()
.format("DD-MM-YYYY hh:mm A"),
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onModalOpen,
}}
/>
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={rawProjects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
name="project"
value={task.project?.id}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "projectId",
value: task.project?.title,
}}
/>
)}
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
}}
/>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
/>
</TableCell>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
/>
</TableCell>
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={[
{ value: "opened", title: "opened" },
{ value: "done", title: "done" },
{ value: "failed", title: "failed" },
]}
task={task}
name="accomplish"
value={task.accomplish}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
}}
/>
)}
</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={tasks.find((task) => task.id === modal.id)}
open={modal.open}
handleClose={handleClose}
/>
</Box>
);
}
}
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/components/ProjectTasks/ProjectTasksHeader.js 0 → 100644
View file @ a7fd397b
import * as React from "react";
import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import { visuallyHidden } from "@mui/utils";
const headCells = [
{
id: "id",
numeric: true,
disablePadding: true,
label: "",
},
{
id: "priority",
numeric: false,
disablePadding: true,
label: "Приоритет",
},
{
id: "createdAt",
numeric: true,
disablePadding: false,
label: "Дата создания",
},
{
id: "title",
numeric: true,
disablePadding: false,
label: "Заголовок",
},
{
id: "projectName",
numeric: true,
disablePadding: false,
label: "Проект",
},
{
id: "authorDisplayName",
numeric: true,
disablePadding: false,
label: "Автор",
},
{
id: "dateTimeStart",
numeric: true,
disablePadding: false,
label: "Дата начала",
},
{
id: "dateTimeDue",
numeric: true,
disablePadding: false,
label: "Дата завершения",
},
{
id: "accomplish",
numeric: true,
disablePadding: false,
label: "Статус",
}
];
export default function EnhancedTableHead({ order, orderBy, rowCount, onRequestSort }) {
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={"center"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === "desc" ? "sorted descending" : "sorted ascending"}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
EnhancedTableHead.propTypes = {
onRequestSort: PropTypes.func.isRequired,
order: PropTypes.oneOf(["asc", "desc"]).isRequired,
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired,
};
planner-front/src/containers/FullProject/FullProject.js
View file @ a7fd397b
import { Card, CardActions, CardContent, Grid } from "@mui/material"; import { Card, CardActions, CardContent, Grid } from "@mui/material";
import { useLocation, useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react"; import { useEffect } from "react";
import { fetchProject } from "../../store/actions/projectsActions"; import { fetchProject } from "../../store/actions/projectsActions";
import ProjectTasksBody from "../../components/ProjectTasks/ProjectTasksBody";
const FullProject = () => { const FullProject = () => {
const { projects, project } = useSelector(state => state.projects);
const { projects, project } = useSelector(state => state.projects);
const dispatch = useDispatch(); const dispatch = useDispatch();
console.log(projects);
let location = useLocation();
let point = location.pathname
console.log(point.includes("admin"))
const params = useParams() const params = useParams()
const tasks = project.tasks;
console.log(projects);
console.log(tasks);
useEffect(() => { useEffect(() => {
dispatch(fetchProject(params.id)) dispatch(fetchProject(params.id))
}, [params.id, dispatch]); }, [params.id, dispatch]);
console.log(project) console.log(project);
return <> return <>
<Grid item xs={12} sm={12} md={6} lg={4}> <Grid item xs={12} sm={12} md={6} lg={4}>
...@@ -34,19 +34,21 @@ const FullProject = () => { ...@@ -34,19 +34,21 @@ const FullProject = () => {
</strong> </strong>
<strong> <strong>
<br></br> <br></br>
Админ проекта: {project?.project?.admin.name} Админ проекта: {project?.project?.members}
</strong> </strong>
<strong> <strong>
<br></br> <br></br>
Задачи: {projects?.projects?.tasks?.map(task => { Задачи:
return <> <br></br>
<strong><br></br>Задача проекта: {task.title} </strong> </strong>
</> <strong>
})} <br></br>
<ProjectTasksBody
tasks={tasks}
/>
</strong> </strong>
</CardContent> </CardContent>
<CardActions> <CardActions>
</CardActions> </CardActions>
</Card> </Card>
</Grid> </Grid>
......
planner-front/src/containers/MyTasks/MyTasks.js
View file @ a7fd397b
...@@ -33,7 +33,7 @@ export default function EnhancedTable() { ...@@ -33,7 +33,7 @@ export default function EnhancedTable() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const tasks = useSelector((state) => state.tasks.tasks); const tasks = useSelector((state) => state.tasks.tasks);
const user = useSelector((state) => state.users.user);
const [recievedTasks, setRecievedTasks] = useState([]); const [recievedTasks, setRecievedTasks] = useState([]);
const [addTaskForm, setAddTaskForm] = useState(false); const [addTaskForm, setAddTaskForm] = useState(false);
const [order, setOrder] = useState("asc"); const [order, setOrder] = useState("asc");
...@@ -45,9 +45,7 @@ export default function EnhancedTable() { ...@@ -45,9 +45,7 @@ export default function EnhancedTable() {
task: null, task: null,
}); });
const [projects,setProjects]=useState(['1','2']) const [projects,setProjects]=useState(['1','2'])
console.log(tasks)
useEffect(() => { useEffect(() => {
dispatch(fetchAllTasks()); dispatch(fetchAllTasks());
filterProjectsNamesFromTasks() filterProjectsNamesFromTasks()
...@@ -120,7 +118,7 @@ useEffect(() => { ...@@ -120,7 +118,7 @@ useEffect(() => {
const onProjectChange = (e, task) => { const onProjectChange = (e, task) => {
const value = e.target.value; const value = e.target.value;
const project = rawProjects.find((e) => e.id === value); const project = uniqueProjects.find((e) => e.id === value);
const { id } = task; const { id } = task;
const newTasks = recievedTasks.map((task) => { const newTasks = recievedTasks.map((task) => {
if (task.id === id) { if (task.id === id) {
...@@ -129,7 +127,7 @@ useEffect(() => { ...@@ -129,7 +127,7 @@ useEffect(() => {
updated.projectName = project.title; updated.projectName = project.title;
return updated; return updated;
} }
return task; return task;
}); });
setRecievedTasks(newTasks); setRecievedTasks(newTasks);
}; };
...@@ -195,6 +193,8 @@ useEffect(() => { ...@@ -195,6 +193,8 @@ useEffect(() => {
setFilterProjectTumbler(true) setFilterProjectTumbler(true)
} }
const rawProjects= tasks?.map(task=>task.project) const rawProjects= tasks?.map(task=>task.project)
const filterProjectsNamesFromTasks = ()=>{ const filterProjectsNamesFromTasks = ()=>{
if (tasks && tasks?.length > 0) { if (tasks && tasks?.length > 0) {
...@@ -211,6 +211,17 @@ useEffect(() => { ...@@ -211,6 +211,17 @@ useEffect(() => {
} }
} }
const uniqueProjects = rawProjects?.reduce((results, value, index) => {
const exist = results.find((v) => {
return v !== null && v.id === value?.id
});
if (!exist && value !== null) {
results.push(value);
}
return results;
}, []);
if ( if (
tasks && tasks &&
tasks?.length > 0 && tasks?.length > 0 &&
...@@ -259,7 +270,7 @@ useEffect(() => { ...@@ -259,7 +270,7 @@ useEffect(() => {
scope="row" scope="row"
padding="none" padding="none"
></TableCell> ></TableCell>
{task.isEditMode ? ( {task.isEditMode && task.author.id===user.id ? (
<TableCell> <TableCell>
<BasicSelect <BasicSelect
items={[ items={[
...@@ -271,7 +282,9 @@ useEffect(() => { ...@@ -271,7 +282,9 @@ useEffect(() => {
value={task.priority} value={task.priority}
onChange={onChange} onChange={onChange}
name="priority" name="priority"
user={user}
/> />
</TableCell> </TableCell>
) : ( ) : (
<CustomTableCell <CustomTableCell
...@@ -279,6 +292,7 @@ useEffect(() => { ...@@ -279,6 +292,7 @@ useEffect(() => {
task, task,
name: "priority", name: "priority",
value: task.priority, value: task.priority,
user:user
}} }}
/> />
)} )}
...@@ -290,7 +304,7 @@ useEffect(() => { ...@@ -290,7 +304,7 @@ useEffect(() => {
value: moment(task.createdAt) value: moment(task.createdAt)
.utc() .utc()
.format("DD-MM-YYYY hh:mm A"), .format("DD-MM-YYYY hh:mm A"),
user:user
}} }}
/> />
...@@ -301,13 +315,14 @@ useEffect(() => { ...@@ -301,13 +315,14 @@ useEffect(() => {
value: task.title, value: task.title,
onChange, onChange,
onModalOpen, onModalOpen,
user:user
}} }}
/> />
{task.isEditMode ? ( {task.isEditMode && task.author.id===user.id ? (
<TableCell> <TableCell>
<BasicSelect <BasicSelect
items={rawProjects.map((e) => ({ items={uniqueProjects.map((e) => ({
value: e?.id, value: e?.id,
title: e?.title, title: e?.title,
}))} }))}
...@@ -315,6 +330,7 @@ useEffect(() => { ...@@ -315,6 +330,7 @@ useEffect(() => {
onChange={onProjectChange} onChange={onProjectChange}
name="project" name="project"
value={task.project?.id} value={task.project?.id}
user={user}
/> />
</TableCell> </TableCell>
) : ( ) : (
...@@ -323,6 +339,7 @@ useEffect(() => { ...@@ -323,6 +339,7 @@ useEffect(() => {
task, task,
name: "projectId", name: "projectId",
value: task.project?.title, value: task.project?.title,
user:user
}} }}
/> />
)} )}
...@@ -333,6 +350,7 @@ useEffect(() => { ...@@ -333,6 +350,7 @@ useEffect(() => {
name: "author", name: "author",
value: task.author.displayName, value: task.author.displayName,
onChange: onAuthorChange, onChange: onAuthorChange,
user:user
}} }}
/> />
...@@ -341,7 +359,9 @@ useEffect(() => { ...@@ -341,7 +359,9 @@ useEffect(() => {
task={task} task={task}
name="dateTimeStart" name="dateTimeStart"
onChange={onDateChange} onChange={onDateChange}
user={user}
/> />
</TableCell> </TableCell>
<TableCell> <TableCell>
...@@ -349,6 +369,7 @@ useEffect(() => { ...@@ -349,6 +369,7 @@ useEffect(() => {
task={task} task={task}
name="dateTimeDue" name="dateTimeDue"
onChange={onDateChange} onChange={onDateChange}
user={user}
/> />
</TableCell> </TableCell>
...@@ -364,6 +385,7 @@ useEffect(() => { ...@@ -364,6 +385,7 @@ useEffect(() => {
onChange={onChange} onChange={onChange}
name="accomplish" name="accomplish"
value={task.accomplish} value={task.accomplish}
user={user}
/> />
</TableCell> </TableCell>
) : ( ) : (
...@@ -372,6 +394,7 @@ useEffect(() => { ...@@ -372,6 +394,7 @@ useEffect(() => {
task, task,
name: "accomplish", name: "accomplish",
value: task.accomplish, value: task.accomplish,
user:user
}} }}
/> />
)} )}
...@@ -430,6 +453,7 @@ useEffect(() => { ...@@ -430,6 +453,7 @@ useEffect(() => {
open={modal.open} open={modal.open}
handleClose={handleClose} handleClose={handleClose}
onChange={onChange} onChange={onChange}
user={user}
/> />
</Box> </Box>
); );
......
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