#141 Изменил вывод информации о проекте

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

+import { Box, Typography } from "@mui/material";
+import moment from "moment";
+import { memo } from "react";
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+
+const style = {
+  display: 'flex',
+  flexDirection: 'column',
+}
+const styleText = {
+  fontSize: '20px',
+  fontWeight: '600',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px'
+}
+
+
+const ProjectInfo = ({ project }) => {
+  return (
+    <Box sx={style} justifyContent={'space-between'}>
+      <Typography variant="h2">Проект - {project?.title} </Typography>
+      <Typography variant="body1" sx={styleText}>
+        Дата создания проекта: {moment(project?.createdAt).format('MM.DD.YYYY')}
+      </Typography>
+      <Typography variant="body1" sx={styleText}>
+        Цвет: {project?.color}
+      </Typography>
+      <Typography variant="body1" sx={styleText}>
+        Автор проекта: {project?.members[0]?.user.displayName}
+      </Typography>
+      <Typography variant="body1" sx={styleText}>
+        Роль в проекте: {project?.members[0]?.roleProject}
+      </Typography>
+      <Typography variant="body1" sx={styleText}>
+        Задачи:
+      </Typography>
+      <Typography variant="body1" sx={styleText}>
+        Добавить участника:  <PersonAddIcon style={{ cursor: 'pointer' }} />
+      </Typography>
+    </Box>
+  );
+};
+
+export default memo(ProjectInfo);
\ No newline at end of file

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

@@ -4,11 +4,11 @@ import { memo } from "react";
 
 const ColumnTitle = ({ text }) => {
 
-    return <>
-        <Typography variant="h4" textAlign={'center'} sx={{ marginBottom: '20px' }}>
-        {text}
-      </Typography>
-    </>
+  return <>
+    <Typography variant="h4" textAlign={'center'} sx={{ marginBottom: '20px' }}>
+      {text}
+    </Typography>
+  </>
 };
 
 export default memo(ColumnTitle);

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

@@ -16,7 +16,7 @@ const styleColumn = {
 const ProjectUsersColumn = ({ role, members }) => {
   return (
     <Box sx={styleColumn}>
-      <ColumnTitle text={role.text}/>
+      <ColumnTitle text={role.text} />
 
       <UsersList
         role={role}

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

@@ -3,12 +3,12 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { memo } from "react";
 
 const style = {
-    width: '90%', 
-    border: '1px solid black', 
-    borderRadius: '5px', 
-    padding: '15px 15px', 
-    display: 'flex', 
-    justifyContent: 'space-between', 
+    width: '90%',
+    border: '1px solid black',
+    borderRadius: '5px',
+    padding: '15px 15px',
+    display: 'flex',
+    justifyContent: 'space-between',
     alignItems: 'center'
 }
 

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

-import { Box} from "@mui/material";
+import { Box } from "@mui/material";
 import { memo } from "react";
 import UserItem from "./UserItem/UserItem";
 
@@ -11,19 +11,19 @@ const styleList = {
 
 const UsersList = ({ role, members }) => {
   return (
-      <Box sx={styleList}>
-        {members.map((member) => {
-          if (member.roleProject === role.value) {
-            return (
+    <Box sx={styleList}>
+      {members.map((member) => {
+        if (member.roleProject === role.value) {
+          return (
             <UserItem
               key={member.id}
               user={member?.user}
             />
-            )
-          } else {
-            return null
-          }
-        })}
+          )
+        } else {
+          return null
+        }
+      })}
     </Box>
   );
 };

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

-import {Box} from "@mui/material";
+import { Box } from "@mui/material";
 import { memo } from "react";
 import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
 
 
-const projectRoles = [{value: 'admin', text: 'Админы'}, {value: 'user', text: 'Юзеры'}, {value: 'watcher', text: 'Наблюдатели'}]
+const projectRoles = [{ value: 'admin', text: 'Админы' }, { value: 'user', text: 'Юзеры' }, { value: 'watcher', text: 'Наблюдатели' }]
 const style = {
   display: 'flex',
-  gap: '150px', 
+  gap: '150px',
   width: '100%',
   marginTop: '20px',
   justifyContent: 'space-evenly'
 }
 
 
-const ProjectUsersColumnsWrapper = ({members}) => {
-    return (
-        <Box sx={style} justifyContent={'space-between'}>
-            {projectRoles.map((role, i)=>{
-              return(
-                <ProjectUsersColumn
-                  key={i}
-                  role={role}
-                  members={members}
-                />
-              )
-            })}
-        </Box>
-    );
+const ProjectUsersColumnsWrapper = ({ members }) => {
+  return (
+    <Box sx={style} justifyContent={'space-between'}>
+      {projectRoles.map((role, i) => {
+        return (
+          <ProjectUsersColumn
+            key={i}
+            role={role}
+            members={members}
+          />
+        )
+      })}
+    </Box>
+  );
 };
 
 export default memo(ProjectUsersColumnsWrapper);
\ No newline at end of file

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

@@ -6,6 +6,7 @@ import { 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";
 
 
 const FullProject = () => {
@@ -27,43 +28,13 @@ const FullProject = () => {
     }, [project])
 
     return <>
-        <Grid item xs={12} sm={12} md={6} lg={4}>
-            <Box>
-                <h2>Проект - {project?.project?.title} </h2>
-
-                <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>
-                    Задачи:
-                    <br></br>
-                </strong>
-                <strong>
-                    <br></br>
-                    <div style={{ display: 'flex', direction: 'column' }}>
-                        Участники проекта:  <NewMember members={project?.project?.members} />
-                    </div>
-
-                    <ProjectUsersColumnsWrapper
-                        members={members}
-                    />
-                </strong>
-
-            </Box>
+        <Grid>
+            <ProjectInfo
+                project={project.project}
+            />
+            <ProjectUsersColumnsWrapper
+                members={members}
+            />
         </Grid>
 
     </>