Skip to content

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

#141 Добавил отображение юзеров в колонках ролей

parent 7c007486
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 103 deletions
planner-front/src/App.js
View file @ 196709fe
......@@ -9,7 +9,6 @@ import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
import ForgottenPassword from "./containers/ForgottenPassword/ForgottenPassword";
import Projects from "./containers/Projects/Projects";
import FullProject from "./containers/FullProject/FullProject";
import NewProject from "./containers/NewProject/NewProject";
import WeekCalendar from "./containers/WeekCalendar/WeekCalendar";
import UsersTasks from "./containers/UsersTasks/UsersTasks";
......
planner-front/src/components/MemberForm/MemberForm.js
View file @ 196709fe
......@@ -44,7 +44,6 @@ const MemberForm = ({ onSubmit, members }) => {
onSubmit(members);
setOpen(false);
};
console.log(state);
useEffect(() => {
dispatch(fetchProject(params.id))
......
planner-front/src/components/ProjectComponents/ProjectMembersItem/ProjectMembersItem.js deleted 100644 → 0
View file @ 7c007486
import { Card, CardContent, Grid, IconButton, Tooltip } from "@mui/material";
import { useParams } from "react-router-dom";
import { useDispatch } from "react-redux";
import DeleteIcon from "@mui/icons-material/Delete";
import { deleteMember } from "../../../store/actions/projectsActions";
const ProjectMembersItem = ({ displayName, roleProject, id, roleProjectOfAuthor, userId, members, authorOfProject }) => {
console.log(displayName)
const dispatch = useDispatch();
let params = useParams()
console.log(members)
console.log(userId)
const deleteHandle = (userId, projectId) => {
dispatch(deleteMember(userId, params.id))
};
return <>
<Grid item xs={12} sm={12} md={6} lg={4}>
<Card>
<CardContent>
<strong>
<br></br>
{displayName}
</strong>
<strong>
<br></br>
роль: {roleProject}
</strong>
<strong>
{(members.filter(e => e.user.displayName === authorOfProject).length > 0) ?
(<strong>
<Tooltip title="Удалить">
<IconButton
onClick={(id) => {
deleteHandle(userId);
}}
> {(displayName !== authorOfProject) ? <DeleteIcon style={{ marginTop: "-5px" }} /> : null}
</IconButton>
</Tooltip>
</strong>) : null}
</strong>
</CardContent>
</Card>
</Grid>
</>
};
export default ProjectMembersItem;
planner-front/src/components/ProjectComponents/ProjectMembersList/ProjectMembersList.js
View file @ 196709fe
import {Grid} from "@mui/material";
import ProjectMembersItem from "../ProjectMembersItem/ProjectMembersItem";
import ProjectMembersItem from "../ProjectUserItem/ProjectUserItem";
const ProjectMembersList = ({members, roleProjectOfAuthor, authorOfProject}) => {
console.log("members ", members)
......
planner-front/src/components/ProjectComponents/ProjectUserItem/ProjectUserItem.js 0 → 100644
View file @ 196709fe
import { Grid } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import { deleteMember } from "../../../store/actions/projectsActions";
import { memo } from "react";
const ProjectMembersItem = ({ user }) => {
const style = {
width: '90%',
border: '1px solid black',
borderRadius: '5px',
padding: '15px 15px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}
return <>
<Grid sx={style}>
{user?.displayName}
<DeleteIcon
/>
</Grid>
</>
};
export default memo(ProjectMembersItem);
planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ProjectUsersColumn.js
View file @ 196709fe
import { Box, Typography } from "@mui/material";
import { memo } from "react";
import ProjectUserItem from "../../ProjectUserItem/ProjectUserItem";
const style = {
const styleColumn = {
border: '3px solid black',
borderRadius: '10px',
height: '60vh',
flexBasis: 60 / 3 + '%',
overflow: 'scroll',
overflow: 'auto',
overflowX: 'hidden',
}
const ProjectUsersColumn = ({ role }) => {
const styleList = {
display: 'flex',
gap: '10px',
flexDirection: 'column',
alignItems: 'center',
}
const ProjectUsersColumn = ({ role, members }) => {
return (
<Box sx={style}>
<Typography variant="h4" textAlign={'center'}>
<Box sx={styleColumn}>
<Typography variant="h4" textAlign={'center'} sx={{marginBottom: '20px'}}>
{role.text}
</Typography>
<Box sx={styleList}>
{members.map((member) => {
if (member.roleProject === role.value) {
return (
<ProjectUserItem
key={member.id}
user={member?.user}
/>
)
} else {
return null
}
})}
</Box>
</Box>
);
};
export default ProjectUsersColumn;
\ No newline at end of file
export default memo(ProjectUsersColumn);
\ No newline at end of file
planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper.js
View file @ 196709fe
import {Box} from "@mui/material";
import { memo } from "react";
import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
......@@ -12,7 +13,7 @@ const style = {
}
const ProjectUsersColumnsWrapper = ({}) => {
const ProjectUsersColumnsWrapper = ({members}) => {
return (
<Box sx={style} justifyContent={'space-between'}>
{projectRoles.map((role, i)=>{
......@@ -20,6 +21,7 @@ const ProjectUsersColumnsWrapper = ({}) => {
<ProjectUsersColumn
key={i}
role={role}
members={members}
/>
)
})}
......@@ -27,4 +29,4 @@ const ProjectUsersColumnsWrapper = ({}) => {
);
};
export default ProjectUsersColumnsWrapper;
\ No newline at end of file
export default memo(ProjectUsersColumnsWrapper);
\ No newline at end of file
planner-front/src/containers/FullProject/FullProject.js
View file @ 196709fe
import { Box, Grid } from "@mui/material";
import { useParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
import { useEffect, useMemo, useState } from "react";
import { fetchProject } from "../../store/actions/projectsActions";
import { fetchUsers } from "../../store/actions/usersActions";
import { fetchUsers, fetchUsersAllFields } from "../../store/actions/usersActions";
import ProjectMembersList from "../../components/ProjectComponents/ProjectMembersList/ProjectMembersList";
import NewMember from "../NewMember/NewMember";
import ProjectUsersColumnsWrapper from "../../components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper";
......@@ -11,56 +11,60 @@ import ProjectUsersColumnsWrapper from "../../components/ProjectComponents/Proje
const FullProject = () => {
const { projects, project } = useSelector(state => state.projects);
const users = useSelector(state => state.users.users);
const { project } = useSelector(state => state.projects);
const user = useSelector(state => state.users.user);
const dispatch = useDispatch();
const params = useParams()
useEffect(() => {
dispatch(fetchUsers())
}, [dispatch]);
useEffect(() => {
dispatch(fetchProject(params.id))
}, [params.id, dispatch]);
const members = useMemo(()=>{
return project?.project?.members || []
},[project])
console.log(members)
return <>
<Grid item xs={12} sm={12} md={6} lg={4}>
<Box>
<h2>Проект - {project?.project?.title} </h2>
<strong>
<br></br>
Дата создания проекта: {project?.project?.createdAt}
</strong>
<strong>
<br></br>
Цвет: {project?.project?.color}
</strong>
<strong>
<br></br>
Автор проекта: {project?.project?.members[0]?.user.displayName}
</strong>
<strong>
<br></br>
Роль в проекте: {project?.project?.members[0]?.roleProject}
</strong>
<strong>
<br></br>
Задачи:
<br></br>
</strong>
<strong>
<br></br>
<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} /> */}
<strong>
<br></br>
Дата создания проекта: {project?.project?.createdAt}
</strong>
<strong>
<br></br>
Цвет: {project?.project?.color}
</strong>
<strong>
<br></br>
Автор проекта: {project?.project?.members[0]?.user.displayName}
</strong>
<strong>
<br></br>
Роль в проекте: {project?.project?.members[0]?.roleProject}
</strong>
<strong>
<br></br>
Задачи:
<br></br>
</strong>
<strong>
<br></br>
<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>
<ProjectUsersColumnsWrapper
members={members}
/>
</strong>
</Box>
</Grid>
......
planner-front/src/containers/NewMember/NewMember.js
View file @ 196709fe
......@@ -14,7 +14,6 @@ const NewMember = ({members}) => {
const onSubmit = async (memberData) => {
await dispatch(createMember(memberData, navigate));
navigate("/projects/" + memberData.projectId)
console.log("memberData ", memberData)
};
......
planner-front/src/store/actions/projectsActions.js
View file @ 196709fe
......@@ -51,8 +51,7 @@ export const deleteMember = (memberId, projectId) => {
return async (dispatch) => {
dispatch(deleteMemberRequest());
try {
const response = await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId } });
console.log("deleteMember ", response.data)
await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId } });
dispatch(deleteMemberSuccess())
dispatch(fetchProject(projectId))
} catch (error) {
......@@ -92,7 +91,6 @@ export const fetchProject = (id) => {
try {
const response = await axios.get("/projects/" + id);
dispatch(fetchProjectSuccess(response.data));
console.log("fetch project ", response.data)
} catch (e) {
dispatch(fetchProjectsError(e));
}
......
planner-front/src/store/actions/usersActions.js
View file @ 196709fe
......@@ -118,7 +118,6 @@ export const fetchUsers = () => {
try {
const response = await axios.get("/users");
dispatch(fetchUsersSuccess(response.data.users));
console.log(response.data.users)
} catch (e) {
dispatch(fetchUsersFailure(e));
}
......
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