#131 Пофиксил отображение задачи пустышки

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

@@ -17,7 +17,7 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCopyTask, wid
   const styles = {
     boxSizing: 'border-box',
     backgroundColor: color,
-    height: `${35}px`,
+    height: `35px`,
     width: `${width - 10}px`,
     position: 'absolute',
     display: 'flex',

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

@@ -2,20 +2,18 @@ import { Grid } from "@mui/material";
 import { memo, useEffect, useState } from "react";
 import DefaultTask from "../DefaultTask/DefaultTask";
 
-
-
-
-const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month , year}) => {
+const heightCell = 45
+const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month, year}) => {
     const [isThisCell, setIsThisCell] = useState(false)
-
+    const [top, setTop] = useState(0)
     const cellClass = {
         position: 'relative',
-        height: linesInDay?.length ? `${45 * linesInDay.length}px` : `${40}px`,
+        height: linesInDay?.length ? `${heightCell * linesInDay.length}px` : `${40}px`,
         borderRight: '1px solid black',
         borderBottom: week ? '1px solid black' : null,
         '&:hover': {
-            cursor: children ? null :'#d6d2d2',
-            background: children ? null :'#d6d2d2'
+            cursor: children ? null : '#d6d2d2',
+            background: children ? null : '#d6d2d2'
         },
     }
 
@@ -27,21 +25,25 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
 
     const dragOverHandler = (e) => {
         e.preventDefault();
-        e.target.style.background = children ? null :'#d6d2d2'
+        e.target.style.background = children ? null : '#d6d2d2'
     }
     const dragLeaveHandler = (e) => {
         e.preventDefault();
-        e.target.style.background =  null
+        e.target.style.background = null
     }
 
     const dropHandler = (e) => {
         e.stopPropagation()
         e.preventDefault();
-        e.target.style.background =  null
+        e.target.style.background = null
         dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]), month, year)
     }
 
     const onClickHandler = (e) => {
+        if (!week) {
+            console.log(e.nativeEvent.offsetY)
+            setTop( 40 * Math.ceil((e.nativeEvent.offsetY - 5 * linesInDay.length)/40 - 1))
+        }
         if (copyTask) {
             createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month, year)
         } else {
@@ -57,12 +59,12 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
             sx={cellClass}
             onClick={(e) => { onClickHandler(e) }}
             onDragOver={(e) => { dragOverHandler(e) }}
-            onDragLeave={(e)=>{dragLeaveHandler(e)}}
+            onDragLeave={(e) => { dragLeaveHandler(e) }}
             onDrop={(e) => { dropHandler(e) }}
         >
             {children}
             {isThisCell ?
-                <DefaultTask week={week} /> : null}
+                <DefaultTask week={week} top={top} /> : null}
 
         </Grid>
     </>

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

 import { Box } from "@mui/material";
 import { memo } from "react";
 
-const MonthDefaultTaskStyles = {
-  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'
-}
+
 const WeekDefaultTaskStyles = {
   boxSizing: 'border-box',
   padding: '0 5px',
@@ -31,7 +17,25 @@ const WeekDefaultTaskStyles = {
 }
 
 
-const DefaultTask = ({ week }) => {
+const DefaultTask = ({ week, top }) => {
+
+  const MonthDefaultTaskStyles = {
+    boxSizing: 'border-box',
+    position: 'relative',
+    height: '35px',
+    backgroundColor: 'lightgreen',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    borderRadius: '10px',
+    margin: '5px 3px 0 6px',
+    padding: '5px',
+    top: top,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    zIndex: '5'
+  }
 
   return (<>
     <Box