Merge branch 'task-142-enhance/separation_project_page' into 'development'

Task 142 enhance/separation project page

See merge request !111

planner-api/src/routers/projects.ts

@@ -51,7 +51,6 @@ router.get('/my',auth, async (req:Request, res:Response): Promise<Response>=> {
 router.post('/',auth, async (req:Request, res:Response): Promise<Response> => {
     if (!req.body) return res.status(400).send({Message:'problem in incoming req.body'})
     const {user, title,color}= req.body;
-   
     const member:Member = new Member;
     member.user= user;
     member.roleProject= MemberRole.ADMIN;

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

@@ -17,7 +17,6 @@ function NewMemberModalContent({ members, users, onChangeNewMemberHandler, onCha
       getOptionLabel={(item) => item.displayName || ""}
       style={{ marginBottom: '15px' }}
     />
-
     <CustomAutocomplete
       name={'role'}
       label={'Роль'}

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

-import {Box, Button, Grid, Modal} from "@mui/material";
-import {useState} from "react";
-import { useSelector } from "react-redux";
-import FormElement from "../../UI/Form/FormElement/FormElement";
-import {Typography} from "@mui/material";
-
-const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: 400,
-    bgcolor: 'background.paper',
-    border: '2px solid #000',
-    boxShadow: 24,
-    p: 4,
-  };
-
-const ProjectForm = ({onSubmit}) => {
-    const users = useSelector(state => state.users)
-    console.log(users)
-    const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-    const [state, setState] = useState({
-        title: ""
-    });
-
-
-    const submitFormHandler = (e) => {
-        e.preventDefault();
-        let project = {title: state.title}
-        console.log(project);
-        if (project.title === "") {
-          alert("Нельзя создать проект без названия")
-        } else {
-          onSubmit(project);
-        }        
-    };
-
-    const inputChangeHandler = (e) => {
-        const {name, value} = e.target;
-        setState(prevState => {
-            return {...prevState, [name]: value};
-        });
-    };
-
-    return (
-        <div >
-           
-          <Button onClick={handleOpen} >Добавить проект</Button>
-          <Modal
-            open={open}
-            onClose={handleClose}
-            aria-labelledby="modal-modal-title"
-            aria-describedby="modal-modal-description"
-            onSubmit={submitFormHandler}
-          >
-            <Box sx={style}>
-            <form >
-        <Grid container direction="column" spacing={2}>
-        <Typography variant="h4">Новый проект</Typography>
-            <FormElement 
-            onChange={inputChangeHandler} 
-            name={"title"} 
-            label={"Title"} 
-            state={state}  
-            />
-            <Grid item>
-                <Button
-                    type="submit"
-                    color="primary"
-                    variant="contained"
-                   
-                >
-                    Создать
-                </Button>
-            </Grid>
-        </Grid>
-    </form>
-            </Box>
-          </Modal>
-        </div>
-      );
-    
-};
-
-export default ProjectForm;
\ No newline at end of file

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

-import { Button, Card, CardActions, CardContent, Grid, IconButton } from "@mui/material";
-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";
-
-const ProjectItem = ({ title, tasks, projectId }) => {
-    const user = useSelector(state => state.users.user);
-    const dispatch = useDispatch();
-
-    console.log(user)
-
-    const deleteHandle = (projectId) => {
-        console.log("project id", projectId)
-        dispatch(deleteProject(projectId))
-    };
-
-    return <>
-        <Grid item xs={12} sm={12} md={6} lg={4}>
-            <Card>
-                <CardContent >
-                    <strong>
-                        <br></br>
-                        Название проекта: {title}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        {/* Задачи: {tasks} */}
-                    </strong>
-                </CardContent>
-                <CardActions>
-                    {(title !== "Личные дела") ? <Button onClick={() => {
-                        deleteHandle(projectId);
-                    }} variant="outlined" startIcon={<DeleteIcon />}>
-                        Delete
-                    </Button> : null}
-                    <IconButton component={Link} to={"/projects/" + projectId}>
-                        <ArrowForwardIcon />
-                    </IconButton>
-
-                </CardActions>
-            </Card>
-        </Grid>
-    </>
-};
-
-export default ProjectItem;

planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ColumnTitle/ColumnTitle.js

@@ -5,7 +5,7 @@ import { memo } from "react";
 const ColumnTitle = ({ text }) => {
 
   return <>
-    <Typography variant="h4" textAlign={'center'} sx={{ height: '10%' }}>
+    <Typography variant="h5" textAlign={'center'} sx={{ height: '10%' }}>
       {text}
     </Typography>
   </>

planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ProjectUsersColumn.js

@@ -7,7 +7,7 @@ const styleColumn = {
   border: '3px solid black',
   borderRadius: '10px',
   height: '60vh',
-  flexBasis: 60 / 3 + '%',
+  flexBasis: 70 / 3 + '%',
   overflow: 'auto',
   overflowX: 'hidden',
 }

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

@@ -6,10 +6,9 @@ import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
 
 const style = {
   display: 'flex',
-  gap: '150px',
   width: '100%',
   marginTop: '20px',
-  justifyContent: 'space-evenly'
+  justifyContent: 'space-between'
 }
 
 

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

-import {Grid} from "@mui/material";
-import ProjectItem from "../ProjectItem/ProjectItem";
-
-const ProjectsList = ({projects}) => {
-    console.log(projects)
-    return (
-        <Grid item container direction="column" spacing={1}>
-            {projects?.map(project => {
-                return <ProjectItem
-                    tasks={project.tasks}
-                    workers={project.workers}
-                    title={project.title}
-                    createdAt={project.createdAt}
-                    dateDue={project.dateDue}
-                    admin={project.admin}
-                    projectId={project.id}
-                    key={project.id}
-                />
-            })}
-        </Grid>
-    );
-};
-
-export default ProjectsList;
\ No newline at end of file

planner-front/src/components/ProjectsComponents/NewProjectModalContent/NewProjectModalContent.js

+import { Button } from "@mui/material";
+import { Box } from "@mui/system";
+import { memo } from "react";
+import FormElement from "../../UI/Form/FormElement/FormElement"
+import { isValidate } from "./helpers";
+
+
+const NewProjectModalContent = ({ inputChangeHandler, projectTitle, createNewProjectHandler, handleClose }) => {
+
+
+  return <>
+    <FormElement
+      onChange={(e)=>{inputChangeHandler(e)}}
+      name={"title"}
+      label={"Название"}
+      state={projectTitle}
+    />
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px'}}>
+      <Button
+        type="submit"
+        color="primary"
+        variant="outlined"
+        onClick={()=>{createNewProjectHandler()}}
+        disabled={!isValidate(projectTitle)}
+      >
+        Создать
+      </Button>
+      <Button
+        type="submit"
+        color="primary"
+        variant="outlined"
+        onClick={()=>{handleClose()}}
+      >
+        Отмена
+      </Button>
+    </Box>
+  </>
+};
+
+export default memo(NewProjectModalContent);
\ No newline at end of file

planner-front/src/components/ProjectsComponents/NewProjectModalContent/helpers.js

+export const isValidate = (title) => {
+  if (!title) return false
+  return true
+}
\ No newline at end of file

planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectItem/ProjectItem.js

+import {Box, Grid, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { memo, useMemo } from "react";
+import DeleteButton from "../../../../UI/DeleteButton/DeleteButton";
+import ArrowIncrementButton from "../../../../UI/ArrowIncrementButton/ArrowIncrementButton";
+
+const styleBlock = {
+    border: '2px solid black',
+    borderRadius: '5px',
+    width: '92%',
+    padding: '10px',
+    display: 'flex', 
+    justifyContent: 'space-between',
+    alignItems: 'center'
+}
+
+const styleText = {
+    fontSize: '15px',
+    fontWeight: '600',
+}
+
+const ProjectItem = ({ title, members, onClickProjectHandler, onClickGoToSpecificProjectHandler, deleteProjectHandler }) => {
+
+    const { user } = useSelector(state => state.users);
+    const currentRoleInProject = useMemo(() => {
+        return members.find((member) => member.user.id === user.id)?.roleProject
+    }, [members, user.id])
+
+    return <>
+        <Box onClick={onClickProjectHandler} sx={styleBlock}>
+            <Box>
+                <Typography sx={styleText}>
+                    Проект: {title}
+                </Typography>
+                <Typography sx={styleText}>
+                    Роль в проекте: {currentRoleInProject}
+                </Typography>
+            </Box>
+            <Box>
+                {currentRoleInProject === 'admin' ? <DeleteButton onClick={deleteProjectHandler}/> : null}
+                <ArrowIncrementButton onClick={onClickGoToSpecificProjectHandler}/>
+            </Box>
+        </Box>
+    </>
+};
+
+export default memo(ProjectItem);

planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectsList.js

+import {Box} from "@mui/material";
+import { memo } from "react";
+import ProjectItem from "./ProjectItem/ProjectItem";
+
+const style = {height: '79vh', overflow: 'auto', overflowX: 'hidden', display: 'flex', flexDirection: 'column', gap: '10px'}
+
+const ProjectsList = ({projects, onClickProjectHandler, onClickGoToSpecificProjectHandler, deleteProjectHandler}) => {
+    return (
+        <Box sx={style}>
+            {projects?.map(project => {
+                return <ProjectItem
+                    title={project.title}
+                    members={project.members}
+                    key={project.id}
+                    onClickProjectHandler={()=>{onClickProjectHandler(project)}}
+                    onClickGoToSpecificProjectHandler={(e)=>{onClickGoToSpecificProjectHandler(e, project.id)}}
+                    deleteProjectHandler={(e)=>{deleteProjectHandler(e, project.id)}}
+                />
+            })}
+        </Box>
+    );
+};
+
+export default memo(ProjectsList);
\ No newline at end of file

planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper.js

+import { Grid, Typography, Button, Card, CardContent } from "@mui/material";
+import { memo } from "react";
+import ProjectsList from "./ProjectsList/ProjectsList";
+
+
+const style = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '10px',
+}
+
+const ProjectsWrapper = ({ onClickProjectHandler, projects, onClickGoToSpecificProjectHandler, handleOpen, deleteProjectHandler }) => {
+
+
+  return <>
+
+    <Grid item xs={4}>
+      <Typography variant="h2" sx={style}>
+        Проекты
+        <Button variant="outlined" onClick={()=>{handleOpen()}}>Создать</Button>
+      </Typography>
+      <ProjectsList 
+        projects={projects} 
+        onClickProjectHandler={onClickProjectHandler} 
+        onClickGoToSpecificProjectHandler={onClickGoToSpecificProjectHandler}
+        deleteProjectHandler={deleteProjectHandler}
+      />
+    </Grid>
+
+  </>
+};
+
+export default memo(ProjectsWrapper);
\ No newline at end of file

planner-front/src/components/UI/ArrowDecrementButton/ArrowDecrementButton.js

@@ -6,7 +6,6 @@ const arrowClass = {
   transition: '0.5s',
   "&:hover": { 
   
-  background: 'rgb(48, 154, 252, 0.65)',
   transition: '0.5s',
   transform: 'scale(1.2)'
   }

planner-front/src/components/UI/ArrowIncrementButton/ArrowIncrementButton.js

@@ -6,7 +6,6 @@ const arrowClass = {
   transition: '0.5s',
   "&:hover": { 
   
-  background: 'rgb(48, 154, 252, 0.65)',
   transition: '0.5s',
   transform: 'scale(1.2)'
   }

planner-front/src/components/UI/DeleteButton/DeleteButton.js

+import DeleteIcon from "@mui/icons-material/Delete";
+import { memo } from 'react';
+const arrowClass = {
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": { 
+  
+  transition: '0.5s',
+  transform: 'scale(1.2)'
+  }
+}
+
+
+function DeleteButton({onClick}) {
+  
+  return ( 
+  <>
+    <DeleteIcon
+      sx={arrowClass}
+      onClick={onClick}
+    />  
+  </> );
+}
+
+export default memo(DeleteButton);
\ No newline at end of file

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

@@ -11,22 +11,28 @@ import NewMemberModalContent from "../../components/ProjectComponents/NewMemberM
 
 
 
-const FullProject = () => {
+const FullProject = ({ projectId }) => {
 
     const { project } = useSelector(state => state.projects);
-    const [modal, setModal] = useState(false)
-    const [newMember, setNewMember] = useState(null)
-    const [currentMember, setCurrentMember] = useState(null)
     const { user, users } = useSelector(state => state.users);
 
     const dispatch = useDispatch();
     const params = useParams()
     const navigate = useNavigate()
 
+    const [modal, setModal] = useState(false)
+    const [newMember, setNewMember] = useState(null)
+    const [currentMember, setCurrentMember] = useState(null)
+
+
     useEffect(() => {
+        if (projectId) {
+            dispatch(fetchProject(projectId))
+        } else {
             dispatch(fetchProject(params.id))
+        }
         dispatch(fetchUsers())
-    }, [params.id, dispatch]);
+    }, [params.id, dispatch, projectId]);
 
     const members = useMemo(() => {
         return project?.project?.members || []
@@ -69,13 +75,11 @@ const FullProject = () => {
         dispatch(deleteMember(id, project?.project?.id))
     }, [dispatch, project?.project?.id])
 
-    const onClickTasksHandler = useCallback((id) => {
+    const onClickTasksHandler = useCallback(() => {
         navigate('/workers-tasks')
     }, [navigate])
 
     return <>
-        <Grid>
-
         <ProjectInfo
             project={project.project}
             handleOpen={handleOpen}
@@ -107,8 +111,6 @@ const FullProject = () => {
 
             </NewMemberModalContent>
         </DefaultModal>
-
-        </Grid>
     </>
 };
 

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

-import {useNavigate} from "react-router-dom";
-import {useDispatch, useSelector} from "react-redux";
-
-import { useEffect } from "react";
-import ProjectForm from "../../components/ProjectComponents/ProjectForm/ProjectForm";
-import { createProject, fetchProjects } from "../../store/actions/projectsActions";
-
-const NewProject = () => {
-    const dispatch = useDispatch();
-    const projects = useSelector(state => state.projects.projects);
-    const navigate = useNavigate();
-
-    const onSubmit = async (projectData) => {
-        await dispatch(createProject(projectData, navigate));
-        console.log(projectData)
-    };
-
-    useEffect(()=> {
-        dispatch(fetchProjects());
-    }, [dispatch])
-
-    return (
-        <>
-            <ProjectForm projects={projects} onSubmit={onSubmit} />
-        </>
-    );
-};
-
-export default NewProject;
\ No newline at end of file

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

-import { Grid, Typography, Button } from "@mui/material";
-import { Link } from "react-router-dom";
-import { useEffect } from "react";
+import { Grid } from "@mui/material";
+import { useCallback, useEffect, useState } 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 ProjectsList from "../../components/ProjectComponents/ProjectsList/ProjectsList";
-import NewProject from "../NewProject/NewProject";
+import { createProject, deleteProject, fetchProjects } from "../../store/actions/projectsActions";
+import FullProject from "../FullProject/FullProject";
+import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper";
+import { useNavigate } from "react-router-dom";
+import DefaultModal from "../../components/UI/DefaultModal/DefaultModal";
+import NewProjectModalContent from "../../components/ProjectsComponents/NewProjectModalContent/NewProjectModalContent";
 
 const Projects = () => {
+    const { projects } = useSelector(state => state.projects.projects);
+    const { user } = useSelector(state => state.users)
+
     const dispatch = useDispatch();
-    const { projects, loading } = useSelector(state => state.projects.projects);
-    const {users} = useSelector(state => state.users);
-    const members = useSelector(state => state.projects.projects)
+    const navigate = useNavigate()
+
+    const [currentProject, setCurrentProject] = useState(null)
+    const [projectTitle, setProjectTitle] = useState('');
+    const [modal, setModal] = useState(false)
 
-    console.log(projects)
-    console.log(users)
     useEffect(() => {
         dispatch(fetchProjects())
     }, [dispatch]);
 
+    const inputChangeHandler = (e) => {
+        setProjectTitle(e.target.value)
+    };
+
+    const onClickProjectHandler = useCallback((project) => {
+        setCurrentProject(project)
+    }, [])
+
+    const onClickGoToSpecificProjectHandler = useCallback((e, projectId) => {
+        e.stopPropagation();
+        navigate(`/projects/${projectId}`)
+    }, [navigate])
+
+    const createNewProjectHandler = useCallback(() => {
+        dispatch(createProject({ title: projectTitle, user: user.id }, navigate))
+    }, [dispatch, projectTitle, user.id, navigate])
+
+    const deleteProjectHandler = useCallback((e, projectId) => {
+        e.stopPropagation();
+        dispatch(deleteProject(projectId))
+    }, [dispatch])
+
+    const handleOpen = useCallback(async () => {
+        setModal(true)
+    }, [])
+
+    const handleClose = useCallback(() => {
+        setModal(false)
+    }, [])
+
+
+
 
     return <>
-        {projects?.length > 0 ? (<>
-            <Grid container direction="column" spacing={2}>
-                <Grid
-                    container
-                    item
-                    direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                >
-                    <Grid item>
-                        <Typography variant="h4">
-                            Проекты
-                        </Typography>
-                    </Grid>
-                    <HasAccess roles={["superuser", "admin", "user"]} >
-                        <Grid item>
-                              <NewProject/>
-                        </Grid>
-                    </HasAccess>
+        <Grid container justifyContent='space-between'>
+
+            <ProjectsWrapper
+                projects={projects}
+                onClickProjectHandler={onClickProjectHandler}
+                onClickGoToSpecificProjectHandler={onClickGoToSpecificProjectHandler}
+                handleOpen={handleOpen}
+                deleteProjectHandler={deleteProjectHandler}
+            />
+
+            <Grid item xs={7}  >
+                {currentProject ? <FullProject projectId={currentProject?.id} /> : null}
             </Grid>
-                <Loader loading={loading} />
-                <ProjectsList projects={projects} members={members} />
+
         </Grid>
-        </>) :
-            <h1>Созданных проектов нет</h1>
-        }
+
+        <DefaultModal
+            modal={modal}
+            handleClose={() => { handleClose() }}
+        >
+            <NewProjectModalContent
+                handleClose={handleClose}
+                projectTitle={projectTitle}
+                inputChangeHandler={inputChangeHandler}
+                createNewProjectHandler={createNewProjectHandler}
+            />
+        </DefaultModal>
     </>
 };
 

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

@@ -264,7 +264,6 @@ function WeekCalendar() {
   }, [currentTask, dispatch, hoursInDay, userId])
 
   const deleteTaskHandler = useCallback(async (e, taskId) => {
-    console.log(e)
     e.stopPropagation();
     await dispatch(deleteCalendarTask(taskId, userId))
   }, [dispatch, userId])

planner-front/src/store/actions/projectsActions.js

@@ -60,14 +60,13 @@ export const deleteMember = (memberId, projectId) => {
     }
 }
 
-export const deleteProject = (projectId, projects) => {
+export const deleteProject = (projectId) => {
     return async (dispatch) => {
         dispatch(deleteProjectRequest());
         try {
             const response = await axios.delete('/projects', { data: { projectId: projectId } });
-            console.log("deleteMember ", response.data)
             dispatch(deleteProjectSuccess())
-            dispatch(fetchProjects(projects))
+            dispatch(fetchProjects())
         } catch (error) {
             dispatch(deleteProjectFailure(error.response.data));
         }
@@ -102,7 +101,6 @@ export const createProject = (projectData, navigate) => {
         try {
             const response = await axios.post("/projects", projectData);
             dispatch(createProjectSuccess());
-            console.log(response.data)
             navigate("/projects/" + response.data.project.id)
             dispatch(showNotification("Проект успешно создан"))
         } catch (e) {
@@ -157,8 +155,7 @@ export const changeMemberRole = (userId, data) => {
     return async (dispatch) => {
         dispatch(changeMemberRoleSuccess());
         try {
-            const response = await axios.put(`/projects/change-project-role/${userId}`, data);
-            console.log(response.data)
+            await axios.put(`/projects/change-project-role/${userId}`, data);
             dispatch(changeMemberRoleRequest());
             await dispatch(fetchProject(data?.projectId))
         } catch (e) {