#56 Завершил drag and drop

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

 import { Grid } from "@mui/material";
-import { memo, useMemo, useState } from "react";
-import { useDispatch } from "react-redux";
+import { memo, useEffect, useMemo, useState } from "react";
 import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
 import CalendarTask from "../CalendarTask/CalendarTask";
+import EmptyBox from "./EmptyBox/EmptyBox";
 
 const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler}) => {
+
   const hours = useMemo(()=>{ 
     return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
   [hoursInDay])
@@ -44,6 +45,7 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
       hourDiff = 2
       hourDiffEnd = 1
     }
+    
     if (availableTasks.length) {
       lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
       for (let k = 0; k < sortedTasks.length; k++) {
@@ -73,11 +75,15 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                     }
                   }
                   if (!havePlace) {
+                    if (j + 1 === lines.length) {
+                      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+                    }
                     havePlace = true  
                     break;
                   }
                   line[i] += `-${k}`
-                  if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                  if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) 
+                  || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
                     skipLine = true
                     break;
                   }
@@ -114,7 +120,9 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
           if (taskIsThere) {
             taskIsThere.xs +=xs
           } else {
-            boxes.push({xs: xs, task: sortedTasks[line[i].split('-')[1]]})
+            boxes.push({
+              xs: xs, 
+              task: sortedTasks[line[i].split('-')[1]]})
           }
         }
       }
@@ -122,16 +130,6 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
     }
   }
 
-  const dragOverHandler = (e) => {
-    e.preventDefault();
-  }
-
-  const dropHandler = (e, currentHour) => {
-      e.stopPropagation()
-      e.preventDefault();
-      dragTaskHandler(day.dayNumber, currentHour)
-  }
-
   return <>
       <Grid 
         container
@@ -165,11 +163,10 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                 {boxes.map((box, index)=>{
                   if (box.task) {
                     return (<Grid 
+                        key={i}
                         item xs={box.xs} 
                         sx={{height: '35px', marginBottom: '5px'}}
-                        onDragOver={(e)=>{dragOverHandler(e)}}
-                        onDrop={(e)=>{dropHandler(e, parseInt(hours[index]))}
-                        }>
+                        >
                       <CalendarTask
                        dragTaskHandler={dragTaskHandler}
                        setCurrentLine={()=>{setCurrentLine(day.dayNumber)}} 
@@ -183,16 +180,38 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                        />
                     </Grid>)
                   } else {
-                    return (<Grid 
-                    onDragOver={(e)=>{dragOverHandler(e)}}
-                    onDrop={(e)=>{dropHandler(e, box.hour)}}
-                    item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
-                      
-                    </Grid>)
+                    return (<EmptyBox 
+                      key={i}
+                      modal={modal}
+                      dayNumber={day.dayNumber}
+                      hourNumber={box.hour}
+                      handleOpen={handleOpen}
+                      dragTaskHandler={dragTaskHandler}
+                      createTaskInCellHandler={createTaskInCellHandler}
+                      xs={box.xs}
+                      >
+                      </EmptyBox>)
                   }
                 })}
               </Grid>)
             })}
+
+            <Grid container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px'}}>
+              {hoursInDay.map((hour, i)=>{
+                const hourNumber = parseInt(hour)
+                return(<EmptyBox 
+                  key={i}
+                  modal={modal}
+                  dayNumber={day.dayNumber}
+                  hourNumber={hourNumber}
+                  handleOpen={handleOpen}
+                  dragTaskHandler={dragTaskHandler}
+                  createTaskInCellHandler={createTaskInCellHandler}
+                  xs={xs}
+                  >
+                  </EmptyBox>)
+              })}
+            </Grid>
         </Grid>
     </>
 };

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

+import { Grid} from "@mui/material";
+import React, { memo, useEffect, useState} from "react";
+import DefaultTask from "../../DefaultTask/DefaultTask";
+
+
+
+const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler}) => {
+
+  const [isThisCell, setIsThisCell] = useState(false)
+  useEffect(()=>{
+      if(!modal) {
+          setIsThisCell(false);
+      }
+  }, [modal])
+
+  const onClickHandler = (e, dayNumber, hour) => {
+    createTaskInCellHandler(dayNumber, hour);
+    setIsThisCell(true);
+    handleOpen(e)
+  } 
+  const dragOverHandler = (e) => {
+    e.preventDefault();
+  }
+
+  const dropHandler = (e) => {
+    e.stopPropagation()
+    e.preventDefault();
+    dragTaskHandler(dayNumber, hourNumber)
+  }
+
+  return(<Grid 
+    onDragOver={(e)=>{dragOverHandler(e)}}
+    onDrop={(e)=>{dropHandler(e)}}
+    onClick={(e)=>{onClickHandler(e, dayNumber, hourNumber)}}
+    item xs={xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
+      {isThisCell ?  
+        <DefaultTask/> : null}
+    </Grid>)
+};
+
+export default memo(EmptyBox, (prevProps, nextProps)=>{
+  if(!prevProps.modal) return false
+  if(nextProps.modal) return true
+});
\ No newline at end of file

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

@@ -23,10 +23,6 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, c
     handleOpen(e)
   }
 
-  const dragOverHandler = (e) => {
-    e.preventDefault();
-    e.target.style.boxShadow = '0 4px 3px grey'
-  }
   const dragLeaveHandler = (e) => {
     e.target.style.boxShadow = 'none'
   }
@@ -37,21 +33,14 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, c
   const dragEndHandler = (e) => {
     e.target.style.boxShadow = 'none'
   }
-  const dropHandler = (e, line, task) => {
-    e.stopPropagation()
-    e.preventDefault();
-    console.log(hour)
-    dragTaskHandler(line, hour)
-  }
   
   return (<>
     <Grid  
         draggable={true} 
-        onDragOver={(e)=>{dragOverHandler(e)}}
+
         onDragLeave={(e)=>{dragLeaveHandler(e)}}
         onDragStart={(e)=>{dragStartHandler(e, line, task)}}
         onDragEnd={(e)=>{dragEndHandler(e)}}
-        onDrop={(e)=>{dropHandler(e, line, task)}}
         sx={{ position: 'relative', height: '30px', backgroundColor: color, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}} 
         onClick={(e)=>{onClickTaskHandler(e, task)}}
       >

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

+import { Box } from "@mui/material";
+import { memo } from "react";
+
+const DefaultTask = ({}) => {
+
+  
+  return (<>
+    <Box  
+        sx={{ position: 'relative', height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}} 
+      >
+      <span>
+        Задача
+      </span>
+    </Box>
+  </>)
+};
+
+export default memo(DefaultTask);
\ No newline at end of file

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

@@ -13,7 +13,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
   const handleOpen = (e) => {
-    console.log(e)
     setModal( {
       open: true, 
       yPage: e.clientY, 

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

@@ -103,7 +103,12 @@ function MonthCalendar() {
   }
 
   const createTaskInCellHandler = (dayNumber, dayHour) => {
-    const hour = parseInt(dayHour.split(':')[0])
+    let hour
+    if (!isNaN(dayHour)) {
+      hour = dayHour
+    } else {
+      hour = parseInt(dayHour.split(':')[0])
+    }
     let hourDue
     if (hourFormat) {
       hourDue = hour + 0
@@ -119,9 +124,8 @@ function MonthCalendar() {
     }
     setCurrentTask((newTask))
   }
-
+  
   const dragTaskHandler = async (dayNumber, hour) => {
-    console.log(dayNumber, hour)
     const timeEnd = currentTask.dateTimeDue.split('T')[1]
     const timeEndHour = parseInt(timeEnd.split(':')[0])
     const timeStart = currentTask.dateTimeStart.split('T')[1]
@@ -134,6 +138,7 @@ function MonthCalendar() {
       dateTimeStart: start,
       dateTimeDue: due
     }))
+    setCurrentTask({})
   }
 
   const sendNewTaskHandler = async () => {