#149 Добавил форму для создания новой задачи без логики

planner-front/src/components/Calendars/UI/CalendarModalTaskContent/CalendarModalTaskContent.js

@@ -60,6 +60,7 @@ function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, descripti
           label="От"
           variant="outlined"
           name='startHour'
+          type="number"
           onChange={(e) => { onChangeCurrentTaskHandler(e) }}
         />
         <TextField
@@ -68,6 +69,7 @@ function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, descripti
           label="До"
           variant="outlined"
           name='endHour'
+          type="number"
           onChange={(e) => { onChangeCurrentTaskHandler(e) }}
         />
       </div>

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/NewTaskForm/NewTaskForm.js

+import { Box, Divider, Grid, Table, TableCell, TableContainer, TextField, Typography, } from "@mui/material";
+import { memo } from "react";
+
+function NewTaskForm({ addFormStatus }) {
+
+  return (
+    <Box sx={{height: addFormStatus ? '200px' : '0px', transition: 'all 0.3s linear', visibility: addFormStatus ? 'visible' : 'hidden', transform: addFormStatus ? 'translateY(0)' : 'translateY(-20vh)'}}>
+      <Box>
+        <Divider>
+          <Typography variant="overline">Добавить новую задачу</Typography>
+        </Divider>
+        <Box container sx={{
+          backgroundColor: "#E8E8E8",
+          marginBottom: "2em",
+        }}>
+          <Grid container padding={2}>
+            <Grid item xs={1}>Приоритеты</Grid>
+            <Grid item xs={3.5}>Заголовок</Grid>
+            <Grid item xs={2}>Проект</Grid>
+            <Grid item xs={2}>Исполнитель</Grid>
+            <Grid item xs={3}>Дедлайн</Grid>
+            <Grid item xs={0.5}></Grid>
+          </Grid>
+          <Grid container padding={2}>
+            <Grid item xs={1}>
+              <TextField sx={{width: '90%'}}/>
+            </Grid>
+            <Grid item xs={3.5}>
+              <TextField sx={{width: '90%'}}/>
+            </Grid>
+            <Grid item xs={2}>
+              <TextField sx={{width: '90%'}}/>
+            </Grid>
+            <Grid item xs={2}>
+              <TextField sx={{width: '90%'}}/>
+            </Grid>
+            <Grid item xs={3}>
+              <TextField sx={{width: '90%'}}/>
+            </Grid>
+            <Grid item xs={0.5}>
+              X
+            </Grid>
+          </Grid>
+          <Grid container></Grid>
+        </Box >
+        <Divider />
+      </Box>
+  </Box>);
+}
+
+export default memo(NewTaskForm)
\ No newline at end of file

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableBody/UsersTasksTableBody.js

-import { Divider, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
+import { TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import moment from "moment";
 import { memo } from "react";
 import DeleteButton from "../../../UI/DeleteButton/DeleteButton";
 import { getComparator, stableSort } from "./helpers";
 import { Done, Edit } from "@mui/icons-material";
 
-function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy }) {
+function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, addFormStatus }) {
 
-  return (
+  return (<>
     <TableBody>
+      
+
       {stableSort(rows, getComparator(order, orderBy))
         .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
         .map((row, index) => {
@@ -20,8 +22,8 @@ function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy }) {
               <TableCell sx={{ width: '4%' }}>{row.priority ? row.priority : null}</TableCell>
               <TableCell sx={{ width: '10%' }}>{moment(row.createdAt).format('DD.MM.YYYY')}</TableCell>
               <Tooltip title={row.description}>
-                <TableCell sx={{ width: '25%', overflow: 'hidden', overflow: 'hidden', textOverflow: 'ellipsis'}}>
-                    {row.title}
+                <TableCell sx={{ width: '25%', overflow: 'hidden', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  {row.title}
                 </TableCell>
               </Tooltip>
               <TableCell sx={{ width: '10%' }}>{row.projectTitle}</TableCell>
@@ -31,14 +33,14 @@ function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy }) {
               <TableCell sx={{ width: '10%' }}>{row.dateTimeDeadLine ? moment(row.dateTimeDeadLine).utcOffset('+000').format('DD.MM.YYYY HH:MM') : null}</TableCell>
               <TableCell sx={{ width: '7%' }}>{row.accomplish}</TableCell>
               <TableCell size='medium' sx={{ width: '5%', position: 'relative' }}>
-                <Edit sx={{position: 'absolute', left: -10}}/>
-                <DeleteButton/>
+                <Edit sx={{ position: 'absolute', left: -10 }} />
+                <DeleteButton />
               </TableCell>
             </TableRow>
           );
         })}
     </TableBody >
-  );
+  </>);
 }
 
 export default memo(UsersTasksTableBody)
\ No newline at end of file

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableContainer.js

-import { Table, TableContainer, } from "@mui/material";
+import { Box, Table, TableCell, TableContainer, } from "@mui/material";
 import { memo } from "react";
+import NewTaskForm from "./NewTaskForm/NewTaskForm";
 import UsersTasksTableBody from "./UsersTasksTableBody/UsersTasksTableBody";
 import UsersTasksTableHead from "./UsersTasksTableHead/UsersTasksTableHead";
 
-function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage }) {
-
+function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage, addFormStatus }) {
+  console.log(addFormStatus)
   return (
     <TableContainer>
+      <NewTaskForm
+        addFormStatus={addFormStatus} />
       <Table
         sx={{ minWidth: 750 }}
         aria-labelledby="tableTitle"

planner-front/src/components/UsersTasksCompoments/UsersTasksTableToolbar/CreateTaskFromButton/CreateTaskFromButton.js

+import {Button} from '@mui/material';
+import {Add, Close} from "@mui/icons-material";
+import { memo } from 'react';
+
+function CreateTaskFromButton({ addFormStatus, onClick }) {
+  return (
+    <Button
+      color={addFormStatus === true ? "info" : "inherit"}
+      style={{
+        backgroundColor: addFormStatus === true ? "white" : "inherit",
+        width: '250px'
+      }}
+      onClick={onClick}
+    >
+      {addFormStatus === true ? (
+        <>
+          <Close />
+          <span style={{ lineHeight: "16px" }}>Скрыть задачу</span>
+        </>
+      ) : (
+        <>
+          <Add />
+          <span style={{ lineHeight: "16px" }}>Добавить задачу</span>
+        </>
+      )}
+    </Button>
+  );
+}
+
+export default memo(CreateTaskFromButton)
\ No newline at end of file

planner-front/src/components/UsersTasksCompoments/UsersTasksTableToolbar/UsersTasksTableToolbar.js

-import { AppBar, Toolbar, Typography } from "@mui/material";
+import { AppBar, Box, Toolbar, Typography } from "@mui/material";
 import { memo } from "react";
+import CreateTaskFromButton from "./CreateTaskFromButton/CreateTaskFromButton";
 
 
-function UsersTasksTableToolbar() {
+function UsersTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler }) {
 
   return (
-    <AppBar position="static" sx={{padding: 3}}>
-      <Typography
-        sx={{ flex: '1 1 100%' }}
-        variant="h6"
-        id="tableTitle"
-        component="div"
-      >
-        Задачи сотрудников
-      </Typography>
+    <AppBar position="static" sx={{ padding: 3 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Typography
+          sx={{ flex: '1 1 100%' }}
+          variant="h6"
+          id="tableTitle"
+          component="div"
+        >
+          Задачи сотрудников
+        </Typography>
+        <CreateTaskFromButton
+          addFormStatus={addFormStatus}
+          onClick={() => { createTaskFromButtonHandler() }}
+        />
+      </Box>
     </AppBar>
   );
 }

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

@@ -12,11 +12,12 @@ export default function EnhancedTable() {
   const {tasks} = useSelector((state) => state.tasks, shallowEqual);
   const projects = useSelector((state) => state.tasks.projects);
   const user = useSelector((state) => state.users.user);
-  console.log(tasks)
+
   const [order, setOrder] = useState('asc');
   const [orderBy, setOrderBy] =useState('createdAt');
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [addFormStatus, setAddFormStatus] = useState(false);
 
   useEffect(() => {
     dispatch(fetchAllTasksByMembership());
@@ -37,9 +38,16 @@ export default function EnhancedTable() {
     setPage(0);
   };
 
+  const createTaskFromButtonHandler = () => {
+    setAddFormStatus((prevState)=>{return !prevState})
+  }
+
   return (
     <Paper sx={{ width: '100%', mb: 2 }}>
-      <UsersTasksTableToolbar />
+      <UsersTasksTableToolbar 
+         addFormStatus={addFormStatus} 
+         createTaskFromButtonHandler={createTaskFromButtonHandler}
+      />
       <UsersTasksTableContainer
         order={order}
         orderBy={orderBy}
@@ -47,6 +55,7 @@ export default function EnhancedTable() {
         rows={tasks}
         page={page}
         rowsPerPage={rowsPerPage}
+        addFormStatus={addFormStatus}
       />
       <UsersTasksTablePagination
         count={tasks.length}