#141 Добавил разные валидации на удаление\добавление

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

@@ -2,10 +2,11 @@ import { Button } from "@mui/material";
 import { memo } from "react";
 import { projectRoles } from "../../../constants";
 import CustomAutocomplete from "../../UI/CustomAutocomplete/CustomAutocomplete";
+import { isValidate } from "./helpers";
 
 
 
-function NewMemberModalContent({ users, onChangeNewMemberHandler, onChangeRoleHandler, newMember, handleClose, createNewMemberHandler }) {
+function NewMemberModalContent({ members, users, onChangeNewMemberHandler, onChangeRoleHandler, newMember, handleClose, createNewMemberHandler }) {
   return (<>
     <CustomAutocomplete
       name={'newMember'}
@@ -27,7 +28,7 @@ function NewMemberModalContent({ users, onChangeNewMemberHandler, onChangeRoleHa
       style={{ marginBottom: '15px' }}
     />
     <div style={{ display: 'flex', justifyContent: 'space-between', margin: '10px 0' }}>
-      <Button onClick={() => { createNewMemberHandler() }} >Выбрать</Button>
+      <Button onClick={() => { createNewMemberHandler() }} disabled={!isValidate(members, newMember?.userId, newMember?.roleProject)}>Выбрать</Button>
       <Button onClick={() => handleClose()}>Отмена</Button>
     </div>
 

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

+export const isValidate = (members, userId, role) => {
+  if (!userId || !role) return false
+  return !members.find((member) => member?.user?.id === userId)
+}
\ No newline at end of file

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

@@ -16,7 +16,7 @@ const styleText = {
 }
 
 
-const ProjectInfo = ({ project, handleOpen }) => {
+const ProjectInfo = ({ project, handleOpen, currentRoleInProject }) => {
   return (
     <Box sx={style} justifyContent={'space-between'}>
       <Typography variant="h2">Проект - {project?.title} </Typography>
@@ -24,20 +24,24 @@ const ProjectInfo = ({ project, handleOpen }) => {
         Дата создания проекта: {moment(project?.createdAt).format('MM.DD.YYYY')}
       </Typography>
       <Typography variant="body1" sx={styleText}>
-        Цвет: {project?.color}
+        Цвет: {project?.color || 'Зеленый'}
       </Typography>
       <Typography variant="body1" sx={styleText}>
         Автор проекта: {project?.members[0]?.user.displayName}
       </Typography>
       <Typography variant="body1" sx={styleText}>
-        Роль в проекте: {project?.members[0]?.roleProject}
+        Роль в проекте: {currentRoleInProject}
       </Typography>
       <Typography variant="body1" sx={styleText}>
         Задачи:
       </Typography>
+      {currentRoleInProject === 'admin' ?
         <Typography variant="body1" sx={styleText}>
-        Добавить участника:  <PersonAddIcon style={{ cursor: 'pointer' }} onClick={()=>{handleOpen()}} />
+          Добавить участника:  <PersonAddIcon style={{ cursor: 'pointer' }} onClick={() => { handleOpen() }} />
         </Typography>
+        : null
+      }
+
     </Box>
   );
 };

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

@@ -13,7 +13,7 @@ const styleColumn = {
 }
 
 
-const ProjectUsersColumn = ({ role, members, deleteMemberHandler }) => {
+const ProjectUsersColumn = ({ role, members, deleteMemberHandler, currentRoleInProject }) => {
   return (
     <Box sx={styleColumn}>
       <ColumnTitle text={role.text} />
@@ -22,6 +22,7 @@ const ProjectUsersColumn = ({ role, members, deleteMemberHandler }) => {
         role={role}
         members={members}
         deleteMemberHandler={deleteMemberHandler}
+        currentRoleInProject={currentRoleInProject}
       >
       </UsersList>
     </Box>

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

 import { Grid } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { memo } from "react";
+import { useSelector } from "react-redux";
 
 const style = {
     width: '90%',
@@ -12,15 +13,17 @@ const style = {
     alignItems: 'center'
 }
 
-const ProjectMembersItem = ({ user, deleteMemberHandler }) => {
-
+const ProjectMembersItem = ({ user, deleteMemberHandler, currentRoleInProject }) => {
+    const userId = useSelector(state => state.users.user.id);
     return <>
         <Grid sx={style}>
             {user?.displayName}
+            {currentRoleInProject === 'admin' && user.id !== userId ?
                 <DeleteIcon
-                sx={{cursor: 'pointer'}}
+                    sx={{ cursor: 'pointer' }}
                     onClick={deleteMemberHandler}
                 />
+                : null}
         </Grid>
     </>
 };

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

@@ -9,7 +9,7 @@ const styleList = {
   alignItems: 'center',
 }
 
-const UsersList = ({ role, members, deleteMemberHandler }) => {
+const UsersList = ({ role, members, deleteMemberHandler, currentRoleInProject }) => {
   return (
     <Box sx={styleList}>
       {members.map((member) => {
@@ -19,6 +19,7 @@ const UsersList = ({ role, members, deleteMemberHandler }) => {
               key={member.id}
               user={member?.user}
               deleteMemberHandler={() => { deleteMemberHandler(member?.user?.id) }}
+              currentRoleInProject={currentRoleInProject}
             />
           )
         } else {

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

@@ -13,7 +13,7 @@ const style = {
 }
 
 
-const ProjectUsersColumnsWrapper = ({ members, deleteMemberHandler }) => {
+const ProjectUsersColumnsWrapper = ({ members, deleteMemberHandler, currentRoleInProject }) => {
   return (
     <Box sx={style} justifyContent={'space-between'}>
       {projectRoles.map((role, i) => {
@@ -23,6 +23,7 @@ const ProjectUsersColumnsWrapper = ({ members, deleteMemberHandler }) => {
             role={role}
             members={members}
             deleteMemberHandler={deleteMemberHandler}
+            currentRoleInProject={currentRoleInProject}
           />
         )
       })}

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

@@ -10,6 +10,7 @@ import DefaultModal from "../../components/UI/DefaultModal/DefaultModal"
 import NewMemberModalContent from "../../components/ProjectComponents/NewMemberModalContent/NewMemberModalContent";
 
 
+
 const FullProject = () => {
 
     const { project } = useSelector(state => state.projects);
@@ -29,6 +30,10 @@ const FullProject = () => {
         return project?.project?.members || []
     }, [project])
 
+    const currentRoleInProject = useMemo(()=>{
+        return members.find((member) => member.user.id === user.id)?.roleProject
+    }, [members, user.id])
+    
     const onChangeRoleHandler = useCallback((e, value) => {
         setNewMember((prevState) => { return { ...prevState, roleProject: value?.value } });
     }, []);
@@ -49,6 +54,7 @@ const FullProject = () => {
     const createNewMemberHandler = useCallback(()=>{
         dispatch(createMember({...newMember, projectId: project?.project?.id}))
         setModal(false)
+        setNewMember(null)
     }, [dispatch, newMember, project?.project?.id])
 
     const deleteMemberHandler = useCallback((id)=>{
@@ -61,11 +67,13 @@ const FullProject = () => {
             <ProjectInfo
                 project={project.project}
                 handleOpen={handleOpen}
+                currentRoleInProject={currentRoleInProject}
             />
 
             <ProjectUsersColumnsWrapper
                 members={members}
                 deleteMemberHandler={deleteMemberHandler}
+                currentRoleInProject={currentRoleInProject}
             />
 
             <DefaultModal
@@ -79,6 +87,7 @@ const FullProject = () => {
                     newMember={newMember}
                     handleClose={handleClose}
                     createNewMemberHandler={createNewMemberHandler}
+                    members={members}
                 >
 
                 </NewMemberModalContent>