#141 переделал модалку для добавление нового участника

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

+import { Button } from "@mui/material";
+import { memo } from "react";
+import { projectRoles } from "../../../constants";
+import CustomAutocomplete from "../../UI/CustomAutocomplete/CustomAutocomplete";
+
+
+
+function NewMemberModalContent({ users, onChangeNewMemberHandler, onChangeRoleHandler, newMember, handleClose, createNewUser }) {
+  return (<>
+    <CustomAutocomplete
+      name={'newMember'}
+      label={'Новый участник'}
+      options={users}
+      onChange={onChangeNewMemberHandler}
+      value={newMember?.userId}
+      getOptionLabel={(item) => item.displayName || ""}
+      style={{ marginBottom: '15px' }}
+    />
+
+    <CustomAutocomplete
+      name={'role'}
+      label={'Роль'}
+      options={projectRoles}
+      onChange={onChangeRoleHandler}
+      value={newMember?.roleProject}
+      getOptionLabel={(item) => item.text || ""}
+      style={{ marginBottom: '15px' }}
+    />
+    <div style={{ display: 'flex', justifyContent: 'space-between', margin: '10px 0' }}>
+      <Button onClick={() => { createNewUser() }} >Выбрать</Button>
+      <Button onClick={() => handleClose()}>Отмена</Button>
+    </div>
+
+  </>);
+}
+
+export default memo(NewMemberModalContent);
\ No newline at end of file

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

@@ -16,7 +16,7 @@ const styleText = {
 }
 
 
-const ProjectInfo = ({ project }) => {
+const ProjectInfo = ({ project, handleOpen }) => {
   return (
     <Box sx={style} justifyContent={'space-between'}>
       <Typography variant="h2">Проект - {project?.title} </Typography>
@@ -36,7 +36,7 @@ const ProjectInfo = ({ project }) => {
         Задачи:
       </Typography>
       <Typography variant="body1" sx={styleText}>
-        Добавить участника:  <PersonAddIcon style={{ cursor: 'pointer' }} />
+        Добавить участника:  <PersonAddIcon style={{ cursor: 'pointer' }} onClick={()=>{handleOpen()}} />
       </Typography>
     </Box>
   );

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

-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { memo } from "react";
 import ColumnTitle from "./ColumnTitle/ColumnTitle";
 import UsersList from "./UsersList/UserList";

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

 import { Box } from "@mui/material";
 import { memo } from "react";
+import { projectRoles } from "../../../constants";
 import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
 
 
-const projectRoles = [{ value: 'admin', text: 'Админы' }, { value: 'user', text: 'Юзеры' }, { value: 'watcher', text: 'Наблюдатели' }]
 const style = {
   display: 'flex',
   gap: '150px',

planner-front/src/constants.js

@@ -24,3 +24,5 @@ export const priorities = [
 export const AllHoursOneHourFormat =  ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
 
 export const AllHoursTwoHourFormat =  ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
+
+export const projectRoles = [{ value: 'admin', text: 'Админ' }, { value: 'user', text: 'Юзер' }, { value: 'watcher', text: 'Наблюдатель' }]
\ No newline at end of file

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

-import { Box, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useParams } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import { useEffect, useMemo, useState } from "react";
-import { fetchProject } from "../../store/actions/projectsActions";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createMember, fetchProject } from "../../store/actions/projectsActions";
 import { fetchUsers, fetchUsersAllFields } from "../../store/actions/usersActions";
-import NewMember from "../NewMember/NewMember";
 import ProjectUsersColumnsWrapper from "../../components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper";
 import ProjectInfo from "../../components/ProjectComponents/ProjectInfo/ProjectInfo";
+import DefaultModal from "../../components/UI/DefaultModal/DefaultModal"
+import NewMemberModalContent from "../../components/ProjectComponents/NewMemberModalContent/NewMemberModalContent";
 
 
 const FullProject = () => {
 
     const { project } = useSelector(state => state.projects);
-
-
-    const user = useSelector(state => state.users.user);
+    const [modal, setModal] = useState(false)
+    const [newMember, setNewMember] = useState(null)
+    const { user, users } = useSelector(state => state.users);
 
     const dispatch = useDispatch();
     const params = useParams()
 
     useEffect(() => {
         dispatch(fetchProject(params.id))
+        dispatch(fetchUsers())
     }, [params.id, dispatch]);
 
     const members = useMemo(() => {
         return project?.project?.members || []
     }, [project])
 
+    const handleOpen = useCallback(async () => {
+        setModal(true)
+    }, [])
+
+    const handleClose = useCallback(() => {
+        setModal(false)
+        setNewMember(null)
+    }, [])
+
+    const createNewUser = useCallback( async ()=>{
+        await dispatch(createMember({...newMember, projectId: project?.project?.id}))
+        setModal(false)
+        await dispatch(fetchProject(params.id))
+    }, [dispatch, newMember, project?.project?.id, params.id])
+
+    const onChangeRoleHandler = useCallback((e, value) => {
+        setNewMember((prevState) => { return { ...prevState, roleProject: value?.value } });
+    }, []);
+
+    const onChangeNewMemberHandler = useCallback((e, value) => {
+        setNewMember((prevState) => { return { ...prevState, userId: value?.id } });
+    }, []);
+
     return <>
         <Grid>
+
             <ProjectInfo
                 project={project.project}
+                handleOpen={handleOpen}
             />
+
             <ProjectUsersColumnsWrapper
                 members={members}
             />
-        </Grid>
 
+            <DefaultModal
+                modal={modal}
+                handleClose={() => { handleClose() }}
+            >
+                <NewMemberModalContent
+                    users={users}
+                    onChangeNewMemberHandler={onChangeNewMemberHandler}
+                    onChangeRoleHandler={onChangeRoleHandler}
+                    newMember={newMember}
+                    handleClose={handleClose}
+                    createNewUser={createNewUser}
+                >
+
+                </NewMemberModalContent>
+            </DefaultModal>
+
+        </Grid>
     </>
 };
 

planner-front/src/containers/NewMember/NewMember.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 { createMember, createProject, fetchMembers, fetchProjects } from "../../store/actions/projectsActions";
-import MemberForm from "../../components/MemberForm/MemberForm";
-
-const NewMember = ({members}) => {
-    const dispatch = useDispatch();
-    const projects = useSelector(state => state.projects.projects);
-    const navigate = useNavigate();
-
-    const onSubmit = async (memberData) => {
-        await dispatch(createMember(memberData, navigate));
-        navigate("/projects/" + memberData.projectId)
-
-    };
-
-    // useEffect(()=> {
-    //     dispatch(fetchMembers());
-    // }, [dispatch])
-
-    return (
-        <>
-            <MemberForm members={members} onSubmit={onSubmit} />
-        </>
-    );
-};
-
-export default NewMember;
\ No newline at end of file

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

@@ -112,18 +112,14 @@ export const createProject = (projectData, navigate) => {
     };
 }
 
-export const createMember = (memberData, navigate) => {
+export const createMember = (memberData) => {
     return async (dispatch) => {
+        dispatch(fetchProjectsRequest());
         try {
-            console.log(memberData)
             await axios.post("/projects/add-user", memberData);
             dispatch(createMemberSuccess());
-            console.log(memberData)
-            navigate("/projects/")
-            dispatch(showNotification("Участник успешно добавлен"))
         } catch (e) {
-            console.log(e);
-            dispatch(showNotification("Не удалось добавить участника", "error"))
+            dispatch(fetchProjectsError(e));
         }
     };
 }