#30 Реализовал создание задачи

planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js

-import { Grid, TextField } from "@mui/material";
+import { Grid, TextField, Typography } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
 const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen}) => {
@@ -26,19 +26,16 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
     return tasksCell
   }
   const tasksCell = getTaskInDayCell(tasks, day, hours)
-  const returnText = (text) => {
-    return (<span>{text}</span>)
-  }
   return (<> 
       {tasksCell.length ? tasksCell.map((task, i)=>
       {
       return (
       <Grid  
         key={task.id} 
-        sx={{backgroundColor: 'lightgreen', }} 
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51);;'}} 
         onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
         >
-          {returnText(task.title)}
+          {task.title}
       </Grid>
       )}
       ) 

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

-import { Button, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Switch, TextField } from "@mui/material";
+import { FormControlLabel, Switch} from "@mui/material";
 import { useEffect, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
 import CalendarTask from "./CalendarTask/CalendarTask";
 import ModalTask from "../UI/ModalTask/ModalTask";
+import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
 
 function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTask}) {
   
@@ -25,6 +26,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   };
   const handleClose = () => {
     setModal({...modal, open: false})
+    setCurrentTask({})
   };
 
 
@@ -139,47 +141,13 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
       modal={modal}
       handleClose={()=>{handleClose()}}
     >
-      <TextField 
-        id="task-description-title" 
-        value={currentTask.title}
-        label="Название" 
-        variant="outlined" 
-        sx={{marginBottom: '30px'}}
-        name='title'
-        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      <MonthCalendarModalContent
+        title={currentTask.title}
+        description={currentTask.description}
+        priority={currentTask.priority}
+        onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}}
+        sendNewTask={()=>{sendNewTask(); handleClose()}}
       />
-      <TextField 
-        id="task-description" 
-        multiline
-        rows={4}
-        value={currentTask.description}
-        label="Описание" 
-        variant="outlined" 
-        sx={{marginBottom: '30px'}} 
-        name='description'
-        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
-      />
-      <FormControl variant="outlined" sx={{width: '160px', marginBottom: '30px'}}>
-        <InputLabel id="priority-type-label">Приоритет</InputLabel>
-          <Select
-            labelId="priority-type-label"
-            id="priority-type"
-            label="Приоритет"
-            sx={{width: '160px'}}
-            value={currentTask.priority}
-            name='priority'
-            onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
-          >
-            <MenuItem value="">
-                    <em>-- Выберите Приоритет --</em>
-            </MenuItem>
-            <MenuItem value={"A"}>A</MenuItem>
-            <MenuItem value={"B"}>B</MenuItem>
-            <MenuItem value={"C"}>C</MenuItem>
-          </Select>
-      </FormControl>
-      <Button sx={{marginRight: '40px'}} onClick={()=>{sendNewTask()}}>Сохранить</Button>
-      <Button>Удалить</Button>
     </ModalTask>
     </>
   );

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

+import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+
+function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTask}) {
+  return (<>
+  <TextField 
+    id="task-description-title" 
+    value={title}
+    label="Название" 
+    variant="outlined" 
+    sx={{marginBottom: '30px'}}
+    name='title'
+    onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+  />
+  <TextField 
+    id="task-description" 
+    multiline
+    rows={4}
+    value={description}
+    label="Описание" 
+    variant="outlined" 
+    sx={{marginBottom: '30px'}} 
+    name='description'
+    onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+  />
+  <FormControl variant="outlined" sx={{width: '160px', marginBottom: '30px'}}>
+    <InputLabel id="priority-type-label">Приоритет</InputLabel>
+      <Select
+        labelId="priority-type-label"
+        id="priority-type"
+        label="Приоритет"
+        sx={{width: '160px'}}
+        value={priority}
+        name='priority'
+        onChange={onChangeCurrentTaskHandler}
+      >
+        <MenuItem value="">
+                <em>-- Выберите Приоритет --</em>
+        </MenuItem>
+        <MenuItem value={"A"}>A</MenuItem>
+        <MenuItem value={"B"}>B</MenuItem>
+        <MenuItem value={"C"}>C</MenuItem>
+      </Select>
+  </FormControl>
+  <Button sx={{marginRight: '40px'}} onClick={sendNewTask}>Сохранить</Button>
+  <Button>Удалить</Button>
+  </>);
+}
+
+export default MonthCalendarModalContent;
\ No newline at end of file

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

@@ -15,7 +15,7 @@ function MonthCalendar() {
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
   const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: '', dateTimeStart: '', dateTimeDue:''})
-  
+  console.log(currentTask)
   useEffect(()=>{
     setMonth(new Date().getMonth())
     setYear(new Date().getFullYear())