#131 Пофиксил баги, которые вылезли, и драг энд дроп

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

@@ -3,10 +3,9 @@ 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 { getTasksWithInfoForPosition } from "./Helpers";
 
-const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) => {
+const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) => {
 
   const [rowDaySize, setRowDaySize] = useState({ width: 0, height: 0 })
   const dayRowRef = useRef('')
@@ -30,11 +29,6 @@ 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
@@ -82,6 +76,9 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
             currentTask={currentTask}
             handleOpen={handleOpen}
             modal={modal}
+            copyTask={copyTask}
+            createCopyTask={createCopyTask}
+            month={month}
           >
           </CalendarStandartCell>
         )

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

 export const getTasksWithInfoForPosition = (line, hoursInDay, sortedTasks, index, rowDayWidth) => {
   const widthStep = rowDayWidth / hoursInDay.length
-  console.log(widthStep)
   if (line) {
     const tasks = []
     for (let i = 0; i < line.length; i++) {

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

 import { Grid } from "@mui/material";
-import React, { memo, useEffect, useMemo, useState } from "react";
+import React, { memo, useMemo} from "react";
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { getColorTaskByPriority } from "../../../../../helpers/CalendarHelpers";
 
@@ -7,7 +7,7 @@ import { getColorTaskByPriority } from "../../../../../helpers/CalendarHelpers";
 
 
 
-const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask, width, left,top }) => {
+const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCopyTask, width, left,top }) => {
 
 
   const color = useMemo(() => {
@@ -16,20 +16,19 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine,
 
   const styles = {
     boxSizing: 'border-box',
-    borderRadius: '3px',
-    border: '1px solid white',
     backgroundColor: color,
     height: `${35}px`,
-    width: `${width}px`,
+    width: `${width - 10}px`,
     position: 'absolute',
     display: 'flex',
-    left: left,
+    left: left + 5,
     top: top,
+    margin: '5px 5px 0 0',
+    padding: '5px',
     textAlign: 'left',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     borderRadius: '10px', 
-    margin: '5px 10px', 
     alignItems: 'center', 
     zIndex: '5',
     '&:hover': {
@@ -55,10 +54,11 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine,
   const dragLeaveHandler = (e) => {
     e.target.style.boxShadow = 'none'
   }
+  
   const dragStartHandler = (e, line, task) => {
-    setCurrentLine()
     setCurrentTask(task);
   }
+
   const dragEndHandler = (e) => {
     e.target.style.boxShadow = 'none'
   }
@@ -76,7 +76,7 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine,
       <span style={{ maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
         {task.title}
       </span>
-      <ContentCopyIcon sx={{ width: '20px', cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
+      <ContentCopyIcon sx={{ width: '20px', cursor: 'pointer', marginLeft: 'auto' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
       </ContentCopyIcon>
 
 

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

@@ -11,7 +11,6 @@ import { useSelector } from "react-redux";
 
 function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) {
   
-  const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
   const handleOpen = useCallback((e) => {
     setModal({
@@ -65,8 +64,6 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
               hoursInDay={hoursInDay}
               currentTask={currentTask}
               handleOpen={handleOpen}
-              currentLine={currentLine}
-              setCurrentLine={setCurrentLine}
               modal={modal.open}
               setCurrentTask={setCurrentTask}
               year={year}

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

@@ -5,14 +5,18 @@ import DefaultTask from "../DefaultTask/DefaultTask";
 
 
 
-const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month}) => {
+const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month , year}) => {
     const [isThisCell, setIsThisCell] = useState(false)
 
     const cellClass = {
         position: 'relative',
-        height: linesInDay?.length ? `${40 * linesInDay.length}px` : `${40}px`,
+        height: linesInDay?.length ? `${45 * linesInDay.length}px` : `${40}px`,
         borderRight: '1px solid black',
         borderBottom: week ? '1px solid black' : null,
+        '&:hover': {
+            cursor: 'pointer',
+            background: children ? null :'#d6d2d2'
+        },
     }
 
     useEffect(() => {
@@ -28,24 +32,18 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
     const dropHandler = (e) => {
         e.stopPropagation()
         e.preventDefault();
-        dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
+        console.log(dayNumber, parseInt(hours.split(':')[0]))
+        dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]), month, year)
     }
 
     const onClickHandler = (e) => {
-        if (linesInDay?.length) {
-            createTaskInCellHandler(dayNumber, hours);
+        if (copyTask) {
+            createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month, year)
+        } else {
+            createTaskInCellHandler(dayNumber, hours, month, year);
             setIsThisCell(true);
             handleOpen(e)
         }
-        if (week) {
-            if (copyTask) {
-                createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month)
-            } else {
-                createTaskInCellHandler(dayNumber, hours, month);
-                setIsThisCell(true);
-                handleOpen(e)
-            }
-        }
     }
 
     return <>

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

@@ -35,6 +35,8 @@ 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) => {
@@ -80,6 +82,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
             copyTask={copyTask}
             createCopyTask={createCopyTask}
             month={month}
+            year={year}
             dragTaskHandler={dragTaskHandler}
           >
           </CalendarStandartCell>

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

@@ -6,17 +6,18 @@ export const getCurrentWeekDayString = (dayNumber) => {
   }
 }
 
-export const getMonthToDayColumn = (week, weekDay, month) => {
+
+export const getMonthAndYearToDayColumn = (week, weekDay, month, year) => {
   if (week[0] > week[6]) {
     if (weekDay < week[0]) {
-      if (month === 11) {
-        return 0
-      }
-      return month + 1
+      return {month: month, year: year}
     } else {
-      return month
+      if (month === 0) {
+        return {month: 11, year: year - 1}
+      }
+      return {month: month - 1, year: year}
     }
   } else {
-    return month
+    return {month: month, year: year}
   }
-}
\ No newline at end of file
+}

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

@@ -8,7 +8,7 @@ import CalendarSmallCell from "../../UI/CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../UI/CalendarStandartCell/CalendarStandartCell";
 import HourFormatSwitch from "../../UI/HourFormatSwitch/HourFormatSwitch";
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
-import { getCurrentWeekDayString, getMonthToDayColumn } from "./Helpers";
+import { getCurrentWeekDayString, getMonthAndYearToDayColumn } from "./Helpers";
 
 function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler, copyTask, setCopyTask, createCopyTask, dragTaskHandler }) {
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
@@ -66,13 +66,14 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
             <Grid item xs={11.005}>
               <CalendarRow week={true}>
                 {week?.map((weekDay, i) => {
+                  const {month, year} = getMonthAndYearToDayColumn(week, weekDay, date.month, date.year)
                   return (
                     <CalendarColumnDayWeek
                       key={i}
                       hoursInDay={hoursInDay}
                       tasks={tasks}
-                      month={getMonthToDayColumn(week, weekDay, date.month)}
-                      year={date.year}
+                      month={month}
+                      year={year}
                       day={weekDay}
                       hourFormat={hourFormat}
                       setCurrentTask={setCurrentTask}

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

@@ -136,7 +136,7 @@ function WeekCalendar() {
     setWorkerInfo({ project: '', worker: '' })
   }, [workerInfo?.worker?.user?.id])
 
-  const createTaskInCellHandler = useCallback((dayNumber, dayHour, month) => {
+  const createTaskInCellHandler = useCallback((dayNumber, dayHour, month, year) => {
     let hour
     if (!isNaN(dayHour)) {
       hour = dayHour
@@ -153,26 +153,28 @@ function WeekCalendar() {
       title: "Задача",
       description: "описание",
       priority: null,
-      dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0)),
-      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hourDue, 59)),
+      dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
       infoForCell: {
         startHour: hour,
         endHour: hourDue,
         startDay: dayNumber,
-        month: month
+        month: month,
+        year: year,
       },
       project: allUserProjects[0]?.id
     }
     setCurrentTask((newTask))
-  }, [dateNow.year, hourFormat, allUserProjects])
+  }, [hourFormat, allUserProjects])
 
   const sendNewTaskHandler = useCallback(async () => {
     const timeEndHour = currentTask.infoForCell.endHour
     const timeStartHour = currentTask.infoForCell.startHour
     const month = currentTask.infoForCell.month
     const day = currentTask.infoForCell.startDay
-    const due = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeEndHour - 1, 59))
-    const start = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeStartHour, 0))
+    const year = currentTask.infoForCell.year
+    const due = dateToISOLikeButLocal(new Date(year, month, day, timeEndHour - 1, 59))
+    const start = dateToISOLikeButLocal(new Date(year, month, day, timeStartHour, 0))
     if (currentTask.id) {
       const newTask = {
         ...currentTask,
@@ -195,18 +197,18 @@ function WeekCalendar() {
       delete newTask.id
       await dispatch(addCalendarTask(newTask, userId))
     }
-  }, [currentTask, dateNow.year, dispatch, user.id, userId])
+  }, [currentTask, dispatch, user.id, userId])
 
-  const createCopyTask = useCallback(async (dayNumber, hour, month) => {
+  const createCopyTask = useCallback(async (dayNumber, hour, month, year) => {
     const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
     const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
     let due
     if (hour + hourDiff >= lastHour) {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, lastHour, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, lastHour, 59))
     } else {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour + hourDiff, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
     }
-    const start = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0))
+    const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
     const newTask = {
       ...copyTask,
       dateTimeStart: start,
@@ -217,18 +219,18 @@ function WeekCalendar() {
     delete newTask.id
     await dispatch(addCopyCalendarTask(newTask, userId))
     setCopyTask(null)
-  }, [copyTask, dateNow.year, dispatch, hoursInDay, userId])
+  }, [copyTask, dispatch, hoursInDay, userId])
 
-  const dragTaskHandler = useCallback(async (dayNumber, hour) => {
+  const dragTaskHandler = useCallback(async (dayNumber, hour, month, year) => {
     const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
     const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
     let due
     if (hour + hourDiff >= lastHour) {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, lastHour, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, lastHour, 59))
     } else {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59))
+      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
     }
-    const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0))
+    const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
     const newTask = {
       ...currentTask,
       taskId: currentTask.mainTaskId,
@@ -239,7 +241,7 @@ function WeekCalendar() {
     delete newTask.infoForCell
     await dispatch(editCalendarTask(newTask, currentTask.id, userId))
     setCurrentTask({})
-  }, [currentTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
+  }, [currentTask, dispatch, hoursInDay, userId])
 
   const deleteTaskHandler = useCallback(async (taskId) => {
     dispatch(deleteCalendarTask(taskId, userId))
@@ -259,8 +261,6 @@ function WeekCalendar() {
     }
   }, [dispatch, user.id, userId])
 
-  console.log(project)
-
   return (
     <>
       <DefaultModal