Merge branch 'task-73-feature/create_project_by_modal_front' into 'development'

Task 73 feature/create project by modal front

See merge request !50

planner-front/src/App.js

@@ -51,14 +51,6 @@ const App = () => {
                   <FullProject/>
               </ProtectedRoute>
             }/>
-            <Route path={"/projects/add"} element={
-              <ProtectedRoute
-                  isAllowed={user}
-                  redirectUrl={"/sign-in"}
-              >
-                  <NewProject/>
-              </ProtectedRoute>
-            }/>
             <Route path={"/"} element={
               <ProtectedRoute
                   isAllowed={user}

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

-import {Button, Grid} from "@mui/material";
+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: "",
-        color: ""
+        title: ""
     });
 
 
     const submitFormHandler = (e) => {
         e.preventDefault();
-        let project = {title: state.title, color: state.color}
+        let project = {title: state.title}
         console.log(project);
         onSubmit(project);
+        
     };
 
     const inputChangeHandler = (e) => {
@@ -26,31 +42,44 @@ const ProjectForm = ({onSubmit}) => {
         });
     };
 
-    return <form onSubmit={submitFormHandler}>
+    return (
+        <div >
+           
+          <Button onClick={handleOpen} >Add project</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">New project</Typography>
             <FormElement 
             onChange={inputChangeHandler} 
             name={"title"} 
             label={"Title"} 
             state={state}  
-            />
-              <FormElement 
-            onChange={inputChangeHandler} 
-            name={"color"} 
-            label={"Color"} 
-            state={state}  
             />
             <Grid item>
                 <Button
                     type="submit"
                     color="primary"
                     variant="contained"
+                   
                 >
                     Create
                 </Button>
             </Grid>
         </Grid>
     </form>
+            </Box>
+          </Modal>
+        </div>
+      );
+    
 };
 
 export default ProjectForm;
\ No newline at end of file

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

@@ -34,7 +34,7 @@ const FullProject = () => {
                     </strong>
                     <strong>
                         <br></br>
-                        Админ проекта: {project?.project?.members}
+                        {/* Админ проекта: {project?.project?.members} */}
                     </strong>
                     <strong>
                         <br></br>

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

 import {useNavigate} from "react-router-dom";
 import {useDispatch, useSelector} from "react-redux";
-import {Typography} from "@mui/material";
+
 import { useEffect } from "react";
 import ProjectForm from "../../components/ProjectForm/ProjectForm";
 import { createProject, fetchProjects } from "../../store/actions/projectsActions";
@@ -9,8 +9,12 @@ const NewProject = () => {
     const dispatch = useDispatch();
     const projects = useSelector(state => state.projects.projects);
     const navigate = useNavigate();
+    let lastProject = projects.projects[projects.projects.length - 1];
+
     const onSubmit = async (projectData) => {
         await dispatch(createProject(projectData, navigate));
+        console.log(projectData)
+        console.log(lastProject)
     };
 
     useEffect(()=> {
@@ -19,7 +23,6 @@ const NewProject = () => {
 
     return (
         <>
-            <Typography variant="h2">New project</Typography>
             <ProjectForm projects={projects} onSubmit={onSubmit} />
         </>
     );

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

@@ -6,6 +6,7 @@ import Loader from "../../components/UI/Loader/Loader";
 import HasAccess from "../../components/UI/HasAccess/HasAccess";
 import { fetchProjects } from "../../store/actions/projectsActions";
 import ProjectsList from "../../components/ProjectsList/ProjectsList";
+import NewProject from "../NewProject/NewProject";
 
 const Projects = () => {
     const dispatch = useDispatch();
@@ -34,9 +35,7 @@ const Projects = () => {
                     </Grid>
                     <HasAccess roles={["superuser", "admin", "user"]} >
                         <Grid item>
-                            <Button component={Link} to="/projects/add">
-                                Add project
-                            </Button>
+                              <NewProject/>
                         </Grid>
                     </HasAccess>
                 </Grid>

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

@@ -46,9 +46,10 @@ export const fetchProject = (id) => {
 export const createProject = (projectData, navigate) => {
     return async (dispatch) => {
         try {
-            await axios.post("/projects", projectData);
+           const response = await axios.post("/projects", projectData);
             dispatch(createProjectSuccess());
-            navigate("/");
+            console.log(response.data)
+           navigate("/projects/" + response.data.project.id)
             dispatch(showNotification("Проект успешно создан"))
         } catch (e) {
             console.log(e);