#30 Реализовал скрытие полного название задачи

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

-import { Grid, TextField } from "@mui/material";
+import { Grid, TextField, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, onClick, currentTask, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
+const CalendarStandartCell = ({children, xs, currentTask, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
     const [isThisCell, setIsThisCell] = useState(false)
     useEffect(()=>{
         if(!modal) {
@@ -16,7 +16,7 @@ const CalendarStandartCell = ({children, xs, onClick, currentTask, hours, dayNum
             {children}
         {isThisCell ?  
         <Grid
-            sx={{backgroundColor: 'lightgreen'}} 
+            sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} 
         >
             <span>
                 {currentTask.title}

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

 import { Grid, TextField } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat, handleOpen}) => {
+const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen}) => {
   const getTaskInDayCell = (tasks, day, hours) => {
     const hour = parseInt(hours.split(':')[0])
     let hourDiffEnd
@@ -26,23 +26,19 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange,
     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', }} 
         onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
         >
-          <TextField 
-          id={task.title} 
-          variant="standard" 
-          value={task.title} 
-          name='title' 
-          onChange={onChange}>
-          </TextField>
+          {returnText(task.title)}
       </Grid>
       )}
       ) 

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

@@ -6,7 +6,7 @@ import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell
 import CalendarTask from "./CalendarTask/CalendarTask";
 import ModalTask from "../UI/ModalTask/ModalTask";
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTask}) {
   
   const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'])
   const [daysInMonth, setDaysInMonth] = useState([])
@@ -121,7 +121,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
                   >
                     <CalendarTask
                       setCurrentTask={setCurrentTask}
-                      onChange={(e)=>{onChangeCellTaskTitle(e)}}
                       year={year}
                       month={month} 
                       tasks={tasks}
@@ -161,26 +160,25 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
         onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
       />
       <FormControl variant="outlined" sx={{width: '160px', marginBottom: '30px'}}>
-        <InputLabel id="calendar-type-label">Приоритет</InputLabel>
+        <InputLabel id="priority-type-label">Приоритет</InputLabel>
           <Select
-            labelId="calendar-type-label"
-            id="calendar-type"
-            onChange={()=>{}}
+            labelId="priority-type-label"
+            id="priority-type"
             label="Приоритет"
             sx={{width: '160px'}}
             value={currentTask.priority}
             name='priority'
-            // onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+            onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
           >
             <MenuItem value="">
                     <em>-- Выберите Приоритет --</em>
             </MenuItem>
-            <MenuItem value={"C"}>C</MenuItem>
-            <MenuItem value={"B"}>B</MenuItem>
             <MenuItem value={"A"}>A</MenuItem>
+            <MenuItem value={"B"}>B</MenuItem>
+            <MenuItem value={"C"}>C</MenuItem>
           </Select>
       </FormControl>
-      <Button sx={{marginRight: '40px'}}>Сохранить</Button>
+      <Button sx={{marginRight: '40px'}} onClick={()=>{sendNewTask()}}>Сохранить</Button>
       <Button>Удалить</Button>
     </ModalTask>
     </>

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

@@ -14,7 +14,7 @@ function MonthCalendar() {
   const [year, setYear] = useState('')
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
+  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: '', dateTimeStart: '', dateTimeDue:''})
   
   useEffect(()=>{
     setMonth(new Date().getMonth())
@@ -83,19 +83,19 @@ function MonthCalendar() {
     const newTask = {
       title:"Задача",
       description:"описание",
-      priority: "C",
+      priority: "",
       dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
       dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
     }
-    // dispatch(addTask(newTask))
     setCurrentTask((newTask))
   }
 
-  const onChangeCellTaskTitle = (e) => {
-    e.stopPropagation()
-    const value = e.target.value;
-    const name = e.target.name;
-    setCurrentTask({ ...currentTask, [name]: value })
+  const sendNewTask = async () => {
+    setCurrentTask(({
+      ...currentTask,
+      priority: currentTask.priority ? currentTask.priority : 'C'
+    }))
+    await dispatch(addTask(currentTask))
   }
 
   return (
@@ -116,12 +116,12 @@ function MonthCalendar() {
         year={year}
         tasks={tasks}
         createTaskInCellHandler={createTaskInCellHandler}
-        onChangeCellTaskTitle={onChangeCellTaskTitle}
         setCurrentTask={setCurrentTask}
         hourFormat={hourFormat} 
         setHourFormat={setHourFormat}
         currentTask={currentTask}
         onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
+        sendNewTask={sendNewTask}
       />
     </>
   );