#94 added modal window swithcuser with options to choose user

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

@@ -10,7 +10,7 @@ import { useParams } from "react-router-dom";
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
 
 const style = {
-  position: 'absolute',
+  position: 'relative',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',

planner-front/src/components/Menus/ProfileBlock/ProfileBlock.js

 import {Button, Menu, MenuItem} from "@mui/material";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {NavLink, useNavigate} from "react-router-dom";
-import { fetchUsersAllFields, logoutUser } from "../../../store/actions/usersActions";
+import { fetchUsersAllFields, fetchUsers, logoutUser } from "../../../store/actions/usersActions";
 import SwitchUserModal from "../../SwitchUserModal/SwitchUserModal";
 
 const ProfileBlock = () => {
@@ -15,7 +15,6 @@ const ProfileBlock = () => {
     const [openSwitchUser, setOpenSwitchUser] = useState(false);
     const handleCloseSwitchUser = () => setOpenSwitchUser(false);
  
- 
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
@@ -31,10 +30,12 @@ const ProfileBlock = () => {
     }
     const switchUser=()=>{
         dispatch(fetchUsersAllFields());
+        // dispatch(fetchUsers())
         handleClose()
         handleOpenSwitchUser()
     }
 
+
   return <>
       <Button
             color="inherit"

planner-front/src/components/SwitchUserModal/SwitchUserForm/SwitchUserForm.js

+import React,{useEffect, useState} from 'react';
+import {  Button, Grid ,Typography,Autocomplete, TextField} from "@mui/material";
+import SwitchUserTable from '../SwitchUserTable/SwitchUserTable';
+
+
+
+
+const SwitchUserForm=({submitFormHandler, users})=> {
+   const [currentUser, setCurrentUser] = useState(null);
+   const [projectsRoles, setProjectsRole] = useState([])
+
+  const onChangeHandle =(user)=>{
+    setCurrentUser(user)
+    setProjectsRole([])
+  }
+
+      
+      useEffect(()=>{
+        if(currentUser?.members.length>0) {
+          for (let member of currentUser.members ) {
+            const newProjectRole = {
+                "projectName":member.project.title,
+                "roleName":member.roleProject
+            }
+            setProjectsRole([...projectsRoles, newProjectRole ])
+          }
+        }
+      },[ currentUser])
+
+   return (
+    <>
+        {/* <Box sx={style}> */}
+          {users?
+              <form  onSubmit={submitFormHandler}>
+              <Grid container direction="column" spacing={2}>
+                  <Typography variant="h5" style={{margin: "5px", textAlign: "center"}} >Выберите юзера</Typography>
+              
+              
+              <Autocomplete
+                 options={users}
+                 onChange={(event,user)=>onChangeHandle(user) }
+                 getOptionLabel={(option) => option.displayName}
+                 renderInput={(params) => <TextField
+                   style={{margin: "5px"}}
+                   label={"Юзер"}
+                   {...params} />}
+               />
+          
+ 
+                        {projectsRoles.length>0?
+                       <Grid item>
+             <SwitchUserTable projectsRoles={projectsRoles}/>
+               </Grid>
+                        :<></>}
+ 
+            <Grid container direction="row" spacing={2}>
+               <Grid item>
+                 <Button
+                   type="submit"
+                   color="primary"
+                   variant="contained"
+                   sx={{margin:1}}
+ 
+                 >
+                   ОК
+                 </Button>
+ 
+               </Grid>
+              {/* <Grid item>
+                <Button
+                 onClick={()=>console.log('cancel form')}
+                   color="primary"
+                   variant="contained"
+                 >
+                   Отмена
+                 </Button>
+                </Grid> */}
+              </Grid>
+
+              </Grid>
+           </form>
+             
+             : <></>}
+         
+            {/* </Box> */}
+            </>
+    )
+}
+
+export default SwitchUserForm;

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

-import * as React from 'react';
+import React, {useEffect, useState} from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
+import { useDispatch, useSelector } from "react-redux";
+import { fetchUsersAllFields } from '../../store/actions/usersActions';
+import SwitchUserTable from './SwitchUserTable/SwitchUserTable';
+import SwitchUserForm from './SwitchUserForm/SwitchUserForm';
+
+
 
 const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  width: 400,
+  width: 'fit-content',
   bgcolor: 'background.paper',
   border: '2px solid #000',
   boxShadow: 24,
@@ -17,6 +23,14 @@ const style = {
 };
 
 const SwitchUserModal= ({open, handleClose})=> {
+    const usersAllFields = useSelector(state => state.users.usersAllFields)
+    
+    const submitFormHandler=(e)=>{
+        e.preventDefault();
+        console.log('submitFormHandler', 
+        'e.target.name ',  e.target.name,
+         'e.target.value ', e.target.value)
+    }
 
   return (
     <div>
@@ -27,14 +41,16 @@ const SwitchUserModal= ({open, handleClose})=> {
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            Text in a modal
-          </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </Typography>
+    
+        <SwitchUserForm
+        
+        submitFormHandler = {submitFormHandler}
+        users = {usersAllFields}
+        />
           </Box>
       </Modal>
+
+     
     </div>
   );
 }

planner-front/src/components/SwitchUserModal/SwitchUserTable/SwitchUserTable.js

+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+const SwitchUserTable=({projectsRoles})=>{
+
+
+    return (
+
+        <TableContainer component={Paper}>
+        <Table sx={{ minWidth: 450 }} aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Проекты</TableCell>
+              <TableCell align="right">Роли</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {projectsRoles.map((projectRole,index) => (
+              <TableRow
+                key={index}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell component="th" scope="row">
+                  {projectRole.projectName}
+                </TableCell>
+                <TableCell align="right">{projectRole.roleName}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+)
+
+}
+export default SwitchUserTable ;