Merge branch 'task-101-feature/delete_member_front' into 'development'

Task 101 feature/delete member front

See merge request !75

planner-api/src/routers/projects.ts

@@ -143,16 +143,32 @@ router.post('/add-user/', authAdminProject, async (req: Request, res: Response):
 /** Remove user from specific project by userId  */
 
 router.delete('/remove-user/:userId', authAdminProject,async (req: Request, res: Response):Promise<Response>=> {
+    console.log('req.body ', req.body)
     const {projectId} = req.body;
     const {userId }=req.params;
-    try{
-                await dataSource
-                .createQueryBuilder()
-                .delete()
-                .from(Member)
-                .where("user= :userId", { userId })
-                .andWhere("project=:projectId",{projectId})
-                .execute()
+    console.log('projectId ', projectId, 'userId ',userId )
+
+    try{        
+        const projectMember = await dataSource
+                .getRepository(Member)
+                .findOne({
+                    relations:{
+                        user:true,
+                        project:true
+                    },
+                    where:{
+                        user:{
+                            id:userId
+                        },
+                        project:{
+                            id:projectId
+                        }
+                    }
+                })
+                console.log('projectMember ', projectMember)
+                if(!projectMember) return res.status(404).send({message:"this member is not present"})
+                await Member.delete({id:projectMember.id})
+                console.log('projectMember deleted successfully')
             return res.send({message:"User removed from project successfully" })
             } catch(e){
                 return res.send({message:'Failed to remove user from project'})

planner-front/src/components/MemberForm/MemberForm.js

 import { Box, Button, Grid, Modal } from "@mui/material";
 import { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import FormElement from "../UI/Form/FormElement/FormElement";
 import { Typography } from "@mui/material";
 import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
 import Autocomplete from '@mui/material/Autocomplete';
 import { useParams } from "react-router-dom";
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
-import { fetchUsers } from "../../store/actions/usersActions";
 import { useEffect } from "react";
 import { fetchProject } from "../../store/actions/projectsActions";
 
@@ -34,16 +31,15 @@ const MemberForm = ({ onSubmit, members }) => {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const [state, setState] = useState({
-    // displayName: "",
     roleProject: "",
     user: "",
     projectId: ""
   });
 
- 
+
   const submitFormHandler = (e) => {
     e.preventDefault();
-    let members = {roleProject: state.roleProject, projectId: params.id, userId: state.user.id}
+    let members = { roleProject: state.roleProject, projectId: params.id, userId: state.user.id }
     console.log(members);
     onSubmit(members);
     setOpen(false);
@@ -52,20 +48,11 @@ const MemberForm = ({ onSubmit, members }) => {
 
   useEffect(() => {
     dispatch(fetchProject(params.id))
-}, [members, dispatch, params]);
-  // console.log(user)
-  // const onChange = (e) => {
-  //   const value = e.target.value;
-  //   const name = e.target.name;
-  // const newState= { ...state, [name]: value };
-  //   console.log("newState " + newState)
-  //   console.log("e.target " + e.target)
-  //   console.log("e " + e)
-  //   setState(newState);
-  // };
+  }, [params]);
+
 
   const memberChangeHandler = (e, value) => {
-    setState(() => { return { ...state, user: value, projectId: params.id} });
+    setState(() => { return { ...state, user: value, projectId: params.id } });
     console.log("memberChangeHandler" + value)
   }
   const roleChangeHandler = (e, value) => {
@@ -74,18 +61,18 @@ const MemberForm = ({ onSubmit, members }) => {
   }
   return (
     <div >
-      <PersonAddIcon onClick={handleOpen} style={{marginLeft: "30px", marginTop: "-3px", cursor: 'pointer'}} >Добавить участника</PersonAddIcon>
+      <PersonAddIcon onClick={handleOpen} style={{ marginLeft: "30px", marginTop: "-3px", cursor: 'pointer' }} >Добавить участника</PersonAddIcon>
       <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
-       
+
       >
         <Box sx={style}>
-          <form  onSubmit={submitFormHandler}>
+          <form onSubmit={submitFormHandler}>
             <Grid container direction="column" spacing={2}>
-              <Typography variant="h5" style={{margin: "5px", textAlign: "center"}} >Новый участник</Typography>
+              <Typography variant="h5" style={{ margin: "5px", textAlign: "center" }} >Новый участник</Typography>
               <Autocomplete
                 id="free-solo-demo"
                 freeSolo
@@ -95,7 +82,7 @@ const MemberForm = ({ onSubmit, members }) => {
                 name={"userId"}
                 value={state.user}
                 renderInput={(params) => <TextField
-                  style={{margin: "5px"}}
+                  style={{ margin: "5px" }}
                   label={"Участник"}
                   state={state}
                   {...params} />}
@@ -107,7 +94,7 @@ const MemberForm = ({ onSubmit, members }) => {
                 value={state.roleProject}
                 onChange={roleChangeHandler}
                 renderInput={(params) => <TextField
-                  style={{margin: "5px"}}
+                  style={{ margin: "5px" }}
                   name={"roleProject"}
                   label={"Роль в проекте"}
                   state={state}
@@ -118,7 +105,6 @@ const MemberForm = ({ onSubmit, members }) => {
                   type="submit"
                   color="primary"
                   variant="contained"
-
                 >
                   Create
                 </Button>

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

 import { Card, CardActions, CardContent, Grid, IconButton, Tooltip } from "@mui/material";
-import { Link } from "react-router-dom";
+import { Link, useParams } 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 { deleteMember } from "../../../store/actions/projectsActions";
 
-const ProjectMembersItem = ({ displayName, roleProject, id, roleProjectOfAuthor }) => {
+const ProjectMembersItem = ({ displayName, roleProject, id, roleProjectOfAuthor, userId }) => {
     console.log(displayName)
     const dispatch = useDispatch();
     const user = useSelector(state => state.users)
-    console.log(user)
+    let params = useParams()
+    console.log(params)
+    console.log(userId)
     const { projects, project } = useSelector(state => state.projects);
 
+    const deleteHandle = (userId, projectId) => {
+        dispatch(deleteMember(userId, params.id));
+      };
+
     return <>
         <Grid item xs={12} sm={12} md={6} lg={4}>
             <Card>
@@ -30,7 +37,7 @@ const ProjectMembersItem = ({ displayName, roleProject, id, roleProjectOfAuthor
                                 <Tooltip title="Удалить">
                                     <IconButton
                                         onClick={(id) => {
-                                            // deleteHandle(task.id);
+                                            deleteHandle(userId);
                                         }}
                                     >
                                         <DeleteIcon style={{ marginTop: "-5px" }} />

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

@@ -12,6 +12,7 @@ const ProjectMembersList = ({members, roleProjectOfAuthor}) => {
                     id={member.id}
                     key={member.id}
                     roleProjectOfAuthor={roleProjectOfAuthor}
+                    userId={member?.user?.id}
                 />
             })}
         </Grid>

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

@@ -35,13 +35,14 @@ const deleteMemberRequest = () => {
     return {type: DELETE_MEMBER_FAILURE, error}
   };
   
-  export const deleteMember = (memberId) => {
+  export const deleteMember = (memberId, projectId) => {
     return async (dispatch) => {
         dispatch(deleteMemberRequest());
         try {
-          await axios.delete(`/tasks/${memberId}`);
+          const response = await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId}});
+          console.log("deleteMember ", response.data)
           dispatch(deleteMemberSuccess())
-          dispatch(fetchProject())
+          dispatch(fetchProject(projectId))
         } catch (error) {
           dispatch(deleteMemberFailure(error.response.data));
         }