#131 Пофиксил баги с недельном календарем и реализовал драг энд дроп на задачи

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

@@ -42,6 +42,7 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
         const tasks = getTasksWithInfoForPosition(line, hoursInDay, sortedTasks, i, rowDaySize.width)
         return (<>
           {tasks.map((task) => {
+            const step = rowDaySize.width / hoursInDay.length
             return (
               <CalendarTask
                 key={task.task.id}
@@ -56,6 +57,7 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
                 setCopyTask={setCopyTask}
                 dragTaskHandler={dragTaskHandler}
                 hourFormat={hourFormat}
+                step={step}
               >
               </CalendarTask>
             )

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

 import { Grid } from "@mui/material";
-import React, { memo, useMemo} from "react";
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import React, { memo, useCallback, useMemo } from "react";
 import { getColorTaskByPriority } from "../../../../../helpers/CalendarHelpers";
+import CopyIcon from "../../../UI/CopyIcon/CopyIcon";
 
-
-
-
-
-const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCopyTask, width, left,top }) => {
-
+const CalendarTask = ({ setCurrentTask, handleOpen, task, setCopyTask, width, left, top, dragTaskHandler, hourFormat, step }) => {
 
   const color = useMemo(() => {
     return getColorTaskByPriority(task.priority)
   }, [task.priority])
 
-  const styles = {
+  const styles = useMemo(()=>{
+    return {
       boxSizing: 'border-box',
       backgroundColor: color,
       height: `35px`,
@@ -36,8 +32,9 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCopyTask, wid
         boxShadow: 'inset 0 0 100px 100px rgba(255, 255, 255, 0.3)'
       },
     }
+  }, [width, left, top, color])
 
-  const onClickTaskHandler = (e, task) => {
+  const onClickTaskHandler = useCallback((e, task) => {
     e.stopPropagation();
     setCurrentTask((prevState) => {
       return {
@@ -49,42 +46,58 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCopyTask, wid
       }
     });
     handleOpen(e)
-  }
+  },[handleOpen, setCurrentTask])
 
-  const dragLeaveHandler = (e) => {
+  const dragLeaveHandler =  useCallback((e) => {
     e.target.style.boxShadow = 'none'
-  }
+  },[])
 
-  const dragStartHandler = (e, line, task) => {
+  const dragStartHandler =  useCallback((e, task) => {
     setCurrentTask(task);
-  }
+  },[setCurrentTask])
 
-  const dragEndHandler = (e) => {
+  const dragEndHandler =  useCallback((e) => {
     e.target.style.boxShadow = 'none'
-  }
+  },[])
 
-  const onClickCopyIconHandler = (e) => {
+  const onClickCopyIconHandler =  useCallback((e) => {
     e.stopPropagation();
     setCopyTask(task)
+  },[task, setCopyTask])
+
+  const dragOverHandler =  useCallback((e) => {
+    e.preventDefault();
+  },[])
+
+  const dropHandler =  useCallback((e, task) => {
+    e.preventDefault();
+    let hour
+    if (hourFormat) {
+      hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetX / step) - 1)
+    } else {
+      hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetX / step) - 1 + Math.ceil(e.nativeEvent.offsetX / step) - 1)
     }
+    dragTaskHandler(task.infoForCell.startDay, hour)
+  },[dragTaskHandler, hourFormat, step])
 
 
   return (<>
     <Grid
       draggable={true}
       onDragLeave={(e) => { dragLeaveHandler(e) }}
-      onDragStart={(e) => { dragStartHandler(e, line, task) }}
+      onDragStart={(e) => { dragStartHandler(e, task) }}
       onDragEnd={(e) => { dragEndHandler(e) }}
+      onDrop={(e) => { dropHandler(e, task) }}
+      onDragOver={(e) => { dragOverHandler(e) }}
       sx={styles}
       onClick={(e) => { onClickTaskHandler(e, task) }}
     >
       <span style={{ maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
         {task.title}
       </span>
-      <ContentCopyIcon sx={{ width: '20px', cursor: 'pointer', marginLeft: 'auto' }} onClick={(e) => { onClickCopyIconHandler(e) }}>
-      </ContentCopyIcon>
-
-
+      <CopyIcon
+        onClick={(e) => { onClickCopyIconHandler(e)}}
+      />
     </Grid>
   </>)
 };

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

@@ -3,7 +3,7 @@ import { memo } from "react";
 
 const CalendarSmallCell = ({ children, xs, week }) => {
   return <>
-    <Grid align='center' item xs={xs} sx={{ borderRight: week ? null : '1px solid black', height: week ? '40px' : null, borderBottom: week ? '1px solid black' : null, }}>
+    <Grid align='center' item xs={xs} sx={{ borderRight: week ? null : '1px solid black', height: week ? '45px' : null, borderBottom: week ? '1px solid black' : null, }}>
       {children}
     </Grid>
   </>

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

@@ -2,13 +2,13 @@ import { Grid } from "@mui/material";
 import { memo, useEffect, useState } from "react";
 import DefaultTask from "../DefaultTask/DefaultTask";
 
-const heightCell = 45
-const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month, year}) => {
+const heightCell = 40
+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 ? `${heightCell * linesInDay.length}px` : `${40}px`,
+        height: linesInDay?.length ? `${heightCell * linesInDay.length + 5}px` : `${45}px`,
         borderRight: '1px solid black',
         borderBottom: week ? '1px solid black' : null,
         '&:hover': {
@@ -41,8 +41,11 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
 
     const onClickHandler = (e) => {
         if (!week) {
-            console.log(e.nativeEvent.offsetY)
-            setTop( 40 * Math.ceil((e.nativeEvent.offsetY - 5 * linesInDay.length)/40 - 1))
+            if (e.nativeEvent.offsetY <= 5) {
+                setTop(40 * Math.ceil((e.nativeEvent.offsetY) / 40 - 1))
+            } else {
+                setTop(40 * Math.ceil((e.nativeEvent.offsetY - 5) / 40 - 1))
+            }
         }
         if (copyTask) {
             createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month, year)

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

+
+import React, { memo} from "react";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
+const styles = { width: '20px', cursor: 'pointer', marginLeft: 'auto' }
+const CopyIcon = ({onClick}) => {
+
+  return (
+      <ContentCopyIcon sx={styles} onClick={onClick}>
+      </ContentCopyIcon>)
+};
+
+export default memo(CopyIcon);
\ No newline at end of file

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

@@ -35,8 +35,6 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
     return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
   }, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
 
-  console.log(month, year)
-
   return (<>
     <Grid item xs={12 / 7} ref={dayColumnRef} sx={{ position: 'relative' }}>
       {linesInDay?.map((line, i) => {

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

 import { Box } from "@mui/material"
 import { useEffect, useState, memo, useCallback, useMemo } from "react"
 import { getColorTaskByPriority } from "../../../../../../helpers/CalendarHelpers"
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CopyIcon from "../../../../UI/CopyIcon/CopyIcon";
 
 
 function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month, dragTaskHandler, step, hourFormat}) {
@@ -81,13 +81,18 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
     } else {
       hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetY/step)-1 + Math.ceil(e.nativeEvent.offsetY/step)-1) 
     }
-    dragTaskHandler(task.infoForCell.startDay, hour)
+    dragTaskHandler(task.infoForCell.startDay, hour, task.infoForCell.startMonth - 1, task.infoForCell.startYear)
   }
 
   const dragLeaveHandler = (e) => {
     e.preventDefault();
-
   }
+
+  const onClickCopyIconHandler =  useCallback((e) => {
+    e.stopPropagation();
+    setCopyTask(task)
+  },[task, setCopyTask])
+
   return (
     <Box
       draggable={true}
@@ -102,8 +107,9 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
       <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
         {task.title}
       </span>
-      <ContentCopyIcon sx={{ marginLeft: 'auto', marginTop: '5px' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
-      </ContentCopyIcon>
+      <CopyIcon
+        onClick={(e) => { onClickCopyIconHandler(e)}}
+      />
     </Box>);
 }
 

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

@@ -172,7 +172,7 @@ function WeekCalendar() {
     const timeStartHour = currentTask.infoForCell.startHour
     const month = currentTask.infoForCell.month
     const day = currentTask.infoForCell.startDay
-    const year = currentTask.infoForCell.year
+    const year = currentTask.infoForCell.startYear
     const due = dateToISOLikeButLocal(new Date(year, month, day, timeEndHour - 1, 59))
     const start = dateToISOLikeButLocal(new Date(year, month, day, timeStartHour, 0))
     if (currentTask.id) {