Skip to content

P
planner-team-one
Commit 7c007486 authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

#141 Удалил лишнее, добавил 3 колонки для участников проекта

parent ba6c7af0
Show whitespace changes
Inline Side-by-side
Showing with 65 additions and 385 deletions
planner-front/src/components/ProjectComponents/ProjectTasks/ProjectTasksBody.js deleted 100644 → 0
View file @ ba6c7af0
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/ProjectComponents/ProjectTasks/ProjectTasksHeader.js deleted 100644 → 0
View file @ ba6c7af0
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/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ProjectUsersColumn.js 0 → 100644
View file @ 7c007486
import { Box, Typography } from "@mui/material";
const style = {
border: '3px solid black',
borderRadius: '10px',
height: '60vh',
flexBasis: 60 / 3 + '%',
overflow: 'scroll',
overflowX: 'hidden',
}
const ProjectUsersColumn = ({ role }) => {
return (
<Box sx={style}>
<Typography variant="h4" textAlign={'center'}>
{role.text}
</Typography>
</Box>
);
};
export default ProjectUsersColumn;
\ No newline at end of file
planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper.js 0 → 100644
View file @ 7c007486
import {Box} from "@mui/material";
import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
const projectRoles = [{value: 'admin', text: 'Админы'}, {value: 'user', text: 'Юзеры'}, {value: 'watcher', text: 'Наблюдатели'}]
const style = {
display: 'flex',
gap: '150px',
width: '100%',
marginTop: '20px',
justifyContent: 'space-evenly'
}
const ProjectUsersColumnsWrapper = ({}) => {
return (
<Box sx={style} justifyContent={'space-between'}>
{projectRoles.map((role, i)=>{
return(
<ProjectUsersColumn
key={i}
role={role}
/>
)
})}
</Box>
);
};
export default ProjectUsersColumnsWrapper;
\ No newline at end of file
planner-front/src/containers/FullProject/FullProject.js
View file @ 7c007486
import { Card, CardActions, CardContent, Grid } from "@mui/material";
import { Box, Grid } from "@mui/material";
import { useParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
import { fetchProject } from "../../store/actions/projectsActions";
import ProjectTasksBody from "../../components/ProjectComponents/ProjectTasks/ProjectTasksBody";
import { fetchUsers } from "../../store/actions/usersActions";
import ProjectMembersList from "../../components/ProjectComponents/ProjectMembersList/ProjectMembersList";
import NewMember from "../NewMember/NewMember";
import ProjectUsersColumnsWrapper from "../../components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper";
const FullProject = () => {
......@@ -17,26 +17,19 @@ const FullProject = () => {
const dispatch = useDispatch();
const params = useParams()
const tasks = project.tasks;
console.log(projects);
console.log(tasks);
useEffect(() => {
dispatch(fetchUsers())
}, [dispatch]);
console.log(user)
useEffect(() => {
dispatch(fetchProject(params.id))
}, [params.id, dispatch]);
console.log("project ", project);
return <>
<Grid item xs={12} sm={12} md={6} lg={4}>
<Card>
<Box>
<h2>Проект - {project?.project?.title} </h2>
<CardContent>
<strong>
<br></br>
Дата создания проекта: {project?.project?.createdAt}
......@@ -53,14 +46,6 @@ const FullProject = () => {
<br></br>
Роль в проекте: {project?.project?.members[0]?.roleProject}
</strong>
<strong>
<br></br>
<div style={{ display: 'flex', direction: 'column' }}>
Участники проекта: {(project?.project?.members[0]?.user.displayName === user.displayName) ? <NewMember members={project?.project?.members} /> : null}
</div>
<ProjectMembersList users={users} project={project} members={project?.project?.members} roleProjectOfAuthor={project?.project?.members[0]?.roleProject} authorOfProject={project?.project?.members[0]?.user.displayName} />
</strong>
<strong>
<br></br>
Задачи:
......@@ -68,14 +53,16 @@ const FullProject = () => {
</strong>
<strong>
<br></br>
<ProjectTasksBody
tasks={tasks}
/>
<div style={{ display: 'flex', direction: 'column' }}>
Участники проекта: <NewMember members={project?.project?.members} />
</div>
{/* <ProjectMembersList users={users} project={project} members={project?.project?.members} roleProjectOfAuthor={project?.project?.members[0]?.roleProject} authorOfProject={project?.project?.members[0]?.user.displayName} /> */}
<ProjectUsersColumnsWrapper/>
</strong>
</CardContent>
<CardActions>
</CardActions>
</Card>
</Box>
</Grid>
</>
......
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