#131 Переделал рендер под абсолюты

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

 import { Grid } from "@mui/material";
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../../helpers/CalendarHelpers";
 import CalendarStandartCell from "../../../UI/CalendarStandartCell/CalendarStandartCell";
 import CalendarTask from "../CalendarTask/CalendarTask";
 import EmptyBox from "./EmptyBox/EmptyBox";
-import { getBoxesInLine } from "./Helpers";
+import { getTasksWithInfoForPosition } from "./Helpers";
 
 const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) => {
 
+  const [rowDaySize, setRowDaySize] = useState({ width: 0, height: 0 })
+  const dayRowRef = useRef('')
+  useEffect(() => {
+    setRowDaySize(prev => { return { height: dayRowRef.current.offsetHeight, width: dayRowRef.current.offsetWidth } })
+  }, [hourFormat])
+
   const hours = useMemo(() => {
     return getHoursInDayNumbers(hoursInDay)
   }, [hoursInDay])
@@ -24,6 +30,11 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
     return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
   }, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
 
+  if (day.dayNumber === 16) {
+    console.log(linesInDay)
+    console.log(getTasksWithInfoForPosition(linesInDay[0], hoursInDay, sortedTasks, 0, rowDaySize.width))
+    console.log(getTasksWithInfoForPosition(linesInDay[1], hoursInDay, sortedTasks, 1, rowDaySize.width))
+  }
   return <>
     <Grid
       container
@@ -31,7 +42,33 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
       xs={10.8}
       align='center'
       sx={{ position: 'relative' }}
+      ref={dayRowRef}
     >
+      {linesInDay?.map((line, i) => {
+        const tasks = getTasksWithInfoForPosition(line, hoursInDay, sortedTasks, i, rowDaySize.width)
+        return (<>
+          {tasks.map((task) => {
+            return (
+              <CalendarTask
+                key={task.task.id}
+                width={task.width}
+                left={task.left}
+                task={task.task}
+                top={task.top}
+                handleOpen={handleOpen}
+                setCurrentTask={setCurrentTask}
+                modal={modal}
+                month={month}
+                setCopyTask={setCopyTask}
+                dragTaskHandler={dragTaskHandler}
+                hourFormat={hourFormat}
+              >
+              </CalendarTask>
+            )
+          })}
+        </>)
+
+      })}
       {hoursInDay.map((hour, i) => {
         return (
           <CalendarStandartCell
@@ -49,69 +86,6 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
           </CalendarStandartCell>
         )
       })}
-      <Grid sx={{ position: 'absolute', top: '0' }} container item xs={12}>
-        {linesInDay?.map((line, i) => {
-          const boxes = getBoxesInLine(line, hoursInDay, sortedTasks)
-          return (
-            <Grid key={i} container sx={{ height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px' }}>
-              {boxes.map((box, index) => {
-                if (box.task) {
-                  return (<Grid
-                    item xs={box.xs}
-                    key={box.task.id}
-                    sx={{ height: '35px', marginBottom: '5px' }}
-                  >
-                    <CalendarTask
-                      dragTaskHandler={dragTaskHandler}
-                      setCurrentLine={() => { setCurrentLine(day.dayNumber) }}
-                      currentTask={currentTask}
-                      currentLine={currentLine}
-                      hour={parseInt(hours[index])}
-                      line={day.dayNumber}
-                      task={box.task}
-                      setCurrentTask={setCurrentTask}
-                      handleOpen={handleOpen}
-                      setCopyTask={setCopyTask}
-                    />
-                  </Grid>)
-                } else {
-                  return (<EmptyBox
-                    key={index}
-                    modal={modal}
-                    dayNumber={day.dayNumber}
-                    hourNumber={box.hour}
-                    handleOpen={handleOpen}
-                    dragTaskHandler={dragTaskHandler}
-                    createCopyTask={createCopyTask}
-                    copyTask={copyTask}
-                    createTaskInCellHandler={createTaskInCellHandler}
-                    xs={box.xs}
-                  >
-                  </EmptyBox>)
-                }
-              })}
-            </Grid>)
-        })}
-      </Grid>
-
-      <Grid container sx={{ height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px', position: 'absolute', bottom: '0' }}>
-        {hoursInDay.map((hour, i) => {
-          const hourNumber = parseInt(hour)
-          return (<EmptyBox
-            key={i}
-            modal={modal}
-            dayNumber={day.dayNumber}
-            hourNumber={hourNumber}
-            handleOpen={handleOpen}
-            dragTaskHandler={dragTaskHandler}
-            createCopyTask={createCopyTask}
-            copyTask={copyTask}
-            createTaskInCellHandler={createTaskInCellHandler}
-            xs={xs}
-          >
-          </EmptyBox>)
-        })}
-      </Grid>
     </Grid>
   </>
 };

planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/CalendarRowDay/Helpers.js

-export const getBoxesInLine = (line, hoursInDay, sortedTasks) => {
+export const getTasksWithInfoForPosition = (line, hoursInDay, sortedTasks, index, rowDayWidth) => {
+  const widthStep = rowDayWidth / hoursInDay.length
+  console.log(widthStep)
   if (line) {
-    let xs = 12/hoursInDay.length
-    const boxes = []
+    const tasks = []
     for (let i = 0; i < line.length; i++) {
       if (!isNaN(line[i])) {
-        // if (boxes[boxes.length -1]?.task === null) {
-        //   boxes[boxes.length -1].xs += xs
-        // } else {
-        boxes.push({xs: xs, task: null, hour: line[i]})
-        //  }
       } else {
         const task = sortedTasks[line[i].split('-')[1]]
-        const taskIsThere = boxes.find((taskFind)=>{
+        const taskIsThere = tasks.find((taskFind) => {
           if (taskFind?.task?.id === task.id) return taskFind
           return false
         })
-        if (taskIsThere) {
-          taskIsThere.xs +=xs
+
+        if (!taskIsThere) {
+          tasks.push({
+            width: widthStep,
+            top: index * 40,
+            left: i * widthStep,
+            task: sortedTasks[line[i].split('-')[1]]
+          })
         } else {
-          boxes.push({
-            xs: xs, 
-            task: sortedTasks[line[i].split('-')[1]]})
+          taskIsThere.width += widthStep
         }
       }
     }
-    return boxes
+    return tasks
   }
 }
\ No newline at end of file

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

 import { Grid } from "@mui/material";
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useEffect, useMemo, useState } from "react";
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { getColorTaskByPriority } from "../../../../../helpers/CalendarHelpers";
 
-const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask }) => {
 
-  const [color, setColor] = useState('')
-  useEffect(() => {
-    if (task.priority) {
-      if (task.priority === 'A') setColor('rgb(32, 138, 250)')
-      if (task.priority === 'B') setColor('lightgreen')
-      if (task.priority === 'C') setColor('yellow')
-    } else {
-      setColor('rgb(171, 157, 157);')
-    }
-  }, [task])
+
+
+
+const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask, width, left,top }) => {
+
+
+  const color = useMemo(() => {
+    return getColorTaskByPriority(task.priority)
+  }, [task.priority])
+
+  const styles = {
+    boxSizing: 'border-box',
+    borderRadius: '3px',
+    border: '1px solid white',
+    backgroundColor: color,
+    height: `${35}px`,
+    width: `${width}px`,
+    position: 'absolute',
+    display: 'flex',
+    left: left,
+    top: top,
+    textAlign: 'left',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    borderRadius: '10px', 
+    margin: '5px 10px', 
+    alignItems: 'center', 
+    zIndex: '5',
+    '&:hover': {
+      cursor: 'pointer',
+      boxShadow: 'inset 0 0 100px 100px rgba(255, 255, 255, 0.3)'
+    },
+  }
 
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation();
@@ -40,13 +63,14 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine,
     e.target.style.boxShadow = 'none'
   }
 
+
   return (<>
     <Grid
       draggable={true}
       onDragLeave={(e) => { dragLeaveHandler(e) }}
       onDragStart={(e) => { dragStartHandler(e, line, task) }}
       onDragEnd={(e) => { dragEndHandler(e) }}
-      sx={{ position: 'relative', height: '30px', backgroundColor: color, borderRadius: '10px', margin: '5px 10px', display: 'flex', alignItems: 'center', zIndex: '5', justifyContent: 'space-between', padding: '0 15px' }}
+      sx={styles}
       onClick={(e) => { onClickTaskHandler(e, task) }}
     >
       <span style={{ maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>

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

@@ -10,7 +10,7 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
 
     const cellClass = {
         position: 'relative',
-        height: linesInDay?.length ? `${40 * linesInDay.length + 35}px` : `${40}px`,
+        height: linesInDay?.length ? `${40 * linesInDay.length}px` : `${40}px`,
         borderRight: '1px solid black',
         borderBottom: week ? '1px solid black' : null,
     }

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarColumnDayWeek.js

@@ -11,7 +11,6 @@ import { getTasksWithInfoForPosition, getWidthLeftZIndex } from "./Helpers";
 function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, setCopyTask, createCopyTask, createTaskInCellHandler, modal, dragTaskHandler }) {
 
   const [columnDaySize, setColumnDaySize] = useState({ width: 0, height: 0 })
-  const [diffForDragAndDrop, setDiffForDragAndDrop] = useState(1)
 
   const dayColumnRef = useRef('')
   useEffect(() => {