Начала реализацию разделения страницы проекта

planner-front/src/components/ProjectComponents/ProjectForm/ProjectForm.js

@@ -3,6 +3,7 @@ import {useState} from "react";
 import { useSelector } from "react-redux";
 import FormElement from "../../UI/Form/FormElement/FormElement";
 import {Typography} from "@mui/material";
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 
 const style = {
     position: 'absolute',
@@ -47,8 +48,7 @@ const ProjectForm = ({onSubmit}) => {
 
     return (
         <div >
-           
-          <Button onClick={handleOpen} >Добавить проект</Button>
+            <AddCircleIcon onClick={handleOpen} />
           <Modal
             open={open}
             onClose={handleClose}

planner-front/src/components/ProjectComponents/ProjectItem/ProjectItem.js

@@ -3,7 +3,8 @@ import { Link } from "react-router-dom";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { useDispatch, useSelector } from "react-redux";
 import DeleteIcon from "@mui/icons-material/Delete";
-import { deleteProject } from "../../../store/actions/projectsActions";
+import { deleteProject, fetchProject } from "../../../store/actions/projectsActions";
+import { useEffect } from "react";
 
 const ProjectItem = ({ title, tasks, projectId }) => {
     const user = useSelector(state => state.users.user);
@@ -15,11 +16,17 @@ const ProjectItem = ({ title, tasks, projectId }) => {
         console.log("project id", projectId)
         dispatch(deleteProject(projectId))
     };
+    const fullInfo = (projectId) => {
+        console.log("full project info", projectId)
+        dispatch(fetchProject(projectId))
+    };
+
+    
     
     return <>
         <Grid item xs={12} sm={12} md={6} lg={4}>
             <Card>
-                <CardContent >
+                <CardContent onClick={() => {fullInfo(projectId)}} >
                     <strong>
                         <br></br>
                         Название проекта: {title}
@@ -35,9 +42,6 @@ const ProjectItem = ({ title, tasks, projectId }) => {
                     }} variant="outlined" startIcon={<DeleteIcon />}>
                         Delete
                     </Button> : null}
-                    <IconButton component={Link} to={"/projects/" + projectId}>
-                        <ArrowForwardIcon />
-                    </IconButton>
 
                 </CardActions>
             </Card>

planner-front/src/containers/Projects/Projects.js

-import { Grid, Typography, Button } from "@mui/material";
+import { Grid, Typography, Button, Card, CardContent } from "@mui/material";
 import { Link } from "react-router-dom";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Loader from "../../components/UI/Loader/Loader";
 import HasAccess from "../../components/UI/HasAccess/HasAccess";
-import { fetchProjects } from "../../store/actions/projectsActions";
+import { fetchProject, fetchProjects } from "../../store/actions/projectsActions";
 import ProjectsList from "../../components/ProjectComponents/ProjectsList/ProjectsList";
 import NewProject from "../NewProject/NewProject";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 const Projects = () => {
     const dispatch = useDispatch();
-    const { projects, loading } = useSelector(state => state.projects.projects);
-    const {users} = useSelector(state => state.users);
+    const { projects, project, loading } = useSelector(state => state.projects.projects);
+    const { users, user} = useSelector(state => state.users);
     const members = useSelector(state => state.projects.projects)
 
     console.log(projects)
+    console.log(project)
     console.log(users)
+
     useEffect(() => {
         dispatch(fetchProjects())
     }, [dispatch]);
 
+    // useEffect(() => {
+    //     dispatch(fetchProject())
+    // }, [dispatch]);
+    // console.log("project ", project);
     
     return <>
-        {projects?.length > 0 ? (<>
-            <Grid container direction="column" spacing={2}>
+        {projects?.length > 0 || project?.length > 0 ?  (<>
+            <Grid container columns={16} spacing={2}>
                 <Grid
                     container
                     item
@@ -31,19 +38,62 @@ const Projects = () => {
                     justifyContent="space-between"
                     alignItems="center"
                 >
-                    <Grid item>
+                    <Grid item xs={4}>
                         <Typography variant="h4">
                             Проекты
                         </Typography>
-                    </Grid>
                             <HasAccess roles={["superuser", "admin", "user"]} >
-                        <Grid item>
-                              <NewProject/>
-                        </Grid>
+                                <NewProject />
                             </HasAccess>
-                </Grid>
+                        <Typography>
                             <Loader loading={loading} />
                             <ProjectsList projects={projects} members={members} />
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={7}  >
+                    <Card>
+                <h2>Проект - {project?.project?.title} </h2>
+                <CardContent>
+                    <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>
+                        {/* <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>
+                        Задачи:
+                        <br></br>
+                    </strong>
+                    {/* <strong>
+                        <br></br>
+                        <ProjectTasksBody
+                            tasks={tasks}
+                        />
+                    </strong> */}
+                </CardContent>
+            </Card>
+                    </Grid>
+                </Grid>
+
             </Grid>
         </>) :
             <h1>Созданных проектов нет</h1>