Skip to content

P
planner-team-one
Commit 3e820415 authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

#142 Вывел конкретный проект справа, начал менять список проектов слева

parent 1319e6d5
Show whitespace changes
Inline Side-by-side
Showing with 140 additions and 204 deletions
planner-front/src/components/ProjectComponents/ProjectForm/ProjectForm.js deleted 100644 → 0
View file @ 1319e6d5
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";
import AddCircleIcon from '@mui/icons-material/AddCircle';
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: ""
});
const submitFormHandler = (e) => {
e.preventDefault();
let project = {title: state.title}
console.log(project);
if (project.title === "") {
alert("Нельзя создать проект без названия")
} else {
onSubmit(project);
}
};
const inputChangeHandler = (e) => {
const {name, value} = e.target;
setState(prevState => {
return {...prevState, [name]: value};
});
};
return (
<div >
<AddCircleIcon onClick={handleOpen} />
<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">Новый проект</Typography>
<FormElement
onChange={inputChangeHandler}
name={"title"}
label={"Title"}
state={state}
/>
<Grid item>
<Button
type="submit"
color="primary"
variant="contained"
>
Создать
</Button>
</Grid>
</Grid>
</form>
</Box>
</Modal>
</div>
);
};
export default ProjectForm;
\ No newline at end of file
planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ColumnTitle/ColumnTitle.js
View file @ 3e820415
......@@ -5,7 +5,7 @@ import { memo } from "react";
const ColumnTitle = ({ text }) => {
return <>
<Typography variant="h4" textAlign={'center'} sx={{ height: '10%' }}>
<Typography variant="h5" textAlign={'center'} sx={{ height: '10%' }}>
{text}
</Typography>
</>
......
planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ProjectUsersColumn.js
View file @ 3e820415
......@@ -7,7 +7,7 @@ const styleColumn = {
border: '3px solid black',
borderRadius: '10px',
height: '60vh',
flexBasis: 60 / 3 + '%',
flexBasis: 70 / 3 + '%',
overflow: 'auto',
overflowX: 'hidden',
}
......
planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper.js
View file @ 3e820415
......@@ -6,10 +6,9 @@ import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
const style = {
display: 'flex',
gap: '150px',
width: '100%',
marginTop: '20px',
justifyContent: 'space-evenly'
justifyContent: 'space-between'
}
......
planner-front/src/components/ProjectsComponents/ProjectForm/ProjectForm.js 0 → 100644
View file @ 3e820415
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";
import AddCircleIcon from '@mui/icons-material/AddCircle';
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: ""
});
const submitFormHandler = (e) => {
e.preventDefault();
let project = { title: state.title }
console.log(project);
if (project.title === "") {
alert("Нельзя создать проект без названия")
} else {
onSubmit(project);
}
};
const inputChangeHandler = (e) => {
const { name, value } = e.target;
setState(prevState => {
return { ...prevState, [name]: value };
});
};
return (
<div >
<AddCircleIcon onClick={handleOpen} />
<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">Новый проект</Typography>
<FormElement
onChange={inputChangeHandler}
name={"title"}
label={"Title"}
state={state}
/>
<Grid item>
<Button
type="submit"
color="primary"
variant="contained"
>
Создать
</Button>
</Grid>
</Grid>
</form>
</Box>
</Modal>
</div>
);
};
export default ProjectForm;
\ No newline at end of file
planner-front/src/components/ProjectComponents/ProjectItem/ProjectItem.js → planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectItem/ProjectItem.js
View file @ 3e820415
......@@ -3,10 +3,10 @@ import { Link } 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 { deleteProject, fetchProject } from "../../../store/actions/projectsActions";
import { deleteProject, fetchProject } from "../../../../../store/actions/projectsActions";
import { useEffect } from "react";
const ProjectItem = ({ title, tasks, projectId }) => {
const ProjectItem = ({ title, tasks, projectId, onClickProjectHandler }) => {
const user = useSelector(state => state.users.user);
const dispatch = useDispatch();
......@@ -24,7 +24,7 @@ const ProjectItem = ({ title, tasks, projectId }) => {
return <>
<Grid item xs={12} sm={12} md={6} lg={4}>
<Grid item xs={12} sm={12} md={6} lg={4} onClick={onClickProjectHandler}>
<Card>
<CardContent onClick={() => {fullInfo(projectId)}} >
<strong>
......
planner-front/src/components/ProjectComponents/ProjectsList/ProjectsList.js → planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectsList.js
View file @ 3e820415
import {Grid} from "@mui/material";
import ProjectItem from "../ProjectItem/ProjectItem";
import ProjectItem from "./ProjectItem/ProjectItem";
const ProjectsList = ({projects}) => {
console.log(projects)
const ProjectsList = ({projects, onClickProjectHandler}) => {
return (
<Grid item container direction="column" spacing={1}>
{projects?.map(project => {
return <ProjectItem
tasks={project.tasks}
workers={project.workers}
title={project.title}
createdAt={project.createdAt}
dateDue={project.dateDue}
admin={project.admin}
projectId={project.id}
key={project.id}
onClickProjectHandler={()=>{onClickProjectHandler(project)}}
/>
})}
</Grid>
......
planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper.js 0 → 100644
View file @ 3e820415
import { Grid, Typography, Button, Card, CardContent } from "@mui/material";
import ProjectsList from "./ProjectsList/ProjectsList";
const ProjectsWrapper = ({onClickProjectHandler, projects}) => {
return <>
<Grid item xs={4}>
<Typography variant="h4">
Проекты
</Typography>
<Typography>
<ProjectsList projects={projects} onClickProjectHandler={onClickProjectHandler} />
</Typography>
</Grid>
</>
};
export default ProjectsWrapper;
\ No newline at end of file
planner-front/src/containers/FullProject/FullProject.js
View file @ 3e820415
......@@ -11,7 +11,7 @@ import NewMemberModalContent from "../../components/ProjectComponents/NewMemberM
const FullProject = () => {
const FullProject = ({projectId}) => {
const { project } = useSelector(state => state.projects);
const [modal, setModal] = useState(false)
......@@ -24,7 +24,11 @@ const FullProject = () => {
const navigate = useNavigate()
useEffect(() => {
if (projectId) {
dispatch(fetchProject(projectId))
} else {
dispatch(fetchProject(params.id))
}
dispatch(fetchUsers())
}, [params.id, dispatch]);
......
planner-front/src/containers/NewProject/NewProject.js deleted 100644 → 0
View file @ 1319e6d5
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import { useEffect } from "react";
import ProjectForm from "../../components/ProjectComponents/ProjectForm/ProjectForm";
import { createProject, fetchProjects } from "../../store/actions/projectsActions";
const NewProject = () => {
const dispatch = useDispatch();
const projects = useSelector(state => state.projects.projects);
const navigate = useNavigate();
const onSubmit = async (projectData) => {
await dispatch(createProject(projectData, navigate));
console.log(projectData)
};
useEffect(()=> {
dispatch(fetchProjects());
}, [dispatch])
return (
<>
<ProjectForm projects={projects} onSubmit={onSubmit} />
</>
);
};
export default NewProject;
\ No newline at end of file
planner-front/src/containers/Projects/Projects.js
View file @ 3e820415
import { Grid, Typography, Button, Card, CardContent } from "@mui/material";
import { Link } from "react-router-dom";
import { useEffect } from "react";
import { Grid, Typography } from "@mui/material";
import { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Loader from "../../components/UI/Loader/Loader";
import HasAccess from "../../components/UI/HasAccess/HasAccess";
import { fetchProject, fetchProjects } from "../../store/actions/projectsActions";
import ProjectsList from "../../components/ProjectComponents/ProjectsList/ProjectsList";
import NewProject from "../NewProject/NewProject";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { fetchProjects } from "../../store/actions/projectsActions";
import ProjectsList from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectsList";
import FullProject from "../FullProject/FullProject";
import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper";
const Projects = () => {
const dispatch = useDispatch();
const { projects, project, loading } = useSelector(state => state.projects.projects);
const { users, user} = useSelector(state => state.users);
const members = useSelector(state => state.projects.projects)
const [currentProject, setCurrentProject] = useState(null)
console.log(projects)
console.log(project)
console.log(users)
useEffect(() => {
dispatch(fetchProjects())
}, [dispatch]);
// useEffect(() => {
// dispatch(fetchProject())
// }, [dispatch]);
// console.log("project ", project);
const onClickProjectHandler = useCallback((project)=>{
setCurrentProject(project)
}, [])
return <>
{projects?.length > 0 || project?.length > 0 ? (<>
<Grid container columns={16} spacing={2}>
<Grid container spacing={1}>
<Grid
container
item
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item xs={4}>
<Typography variant="h4">
Проекты
</Typography>
<HasAccess roles={["superuser", "admin", "user"]} >
<NewProject />
</HasAccess>
<Typography>
<Loader loading={loading} />
<ProjectsList projects={projects} members={members} />
</Typography>
<ProjectsWrapper projects={projects} onClickProjectHandler={onClickProjectHandler}/>
</Grid>
<Grid item xs={7} >
<Card>
<h2>Проект - {project?.project?.title} </h2>
<CardContent>
<strong>
<br></br>
Дата создания проекта: {project?.project?.createdAt}
</strong>
<strong>
<br></br>
Цвет: {project?.project?.color}
</strong>
<strong>
<br></br>
Автор проекта: {project?.project?.members[0]?.user.displayName}
</strong>
<strong>
<br></br>
Роль в проекте: {project?.project?.members[0]?.roleProject}
</strong>
<strong>
<br></br>
{/* <div style={{ display: 'flex', direction: 'column' }}>
Участники проекта: {(project?.project?.members[0]?.user.displayName === user.displayName) ? <NewMember members={project?.project?.members} /> : null}
</div>
<ProjectMembersList users={users} project={project} members={project?.project?.members} roleProjectOfAuthor={project?.project?.members[0]?.roleProject} authorOfProject={project?.project?.members[0]?.user.displayName} /> */}
</strong>
<strong>
<br></br>
Задачи:
<br></br>
</strong>
{/* <strong>
<br></br>
<ProjectTasksBody
tasks={tasks}
/>
</strong> */}
</CardContent>
</Card>
{currentProject ? <FullProject projectId={currentProject?.id}/> : null}
</Grid>
</Grid>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment