Merge branch 'task-115-feature/week_drag_and_drop' into 'development'

#115 реализовал драг энд дроп задач, даже друг на друга

See merge request !95

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

@@ -8,9 +8,11 @@ import { getTasksWithInfoForPosition, getWidthLeftZIndex } from "./Helpers";
 
 
 
-function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, setCopyTask, createCopyTask, createTaskInCellHandler, modal }) {
+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(() => {
     setColumnDaySize(prev => { return { height: dayColumnRef.current.offsetHeight, width: dayColumnRef.current.offsetWidth } })
@@ -41,6 +43,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
         return (<>
           {boxes.map((task) => {
             const { width, left, zIndex } = getWidthLeftZIndex(task, columnDaySize.width, i)
+            const step = columnDaySize.height / hours.length
             return (
               <CalendarWeekTask
                 key={task.task.id}
@@ -55,6 +58,9 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
                 modal={modal}
                 month={month}
                 setCopyTask={setCopyTask}
+                dragTaskHandler={dragTaskHandler}
+                step={step}
+                hourFormat={hourFormat}
               >
               </CalendarWeekTask>
             )
@@ -75,6 +81,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
             copyTask={copyTask}
             createCopyTask={createCopyTask}
             month={month}
+            dragTaskHandler={dragTaskHandler}
           >
           </CalendarStandartCell>
         )

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

@@ -4,7 +4,7 @@ import { getColorTaskByPriority } from "../../../../../../helpers/CalendarHelper
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
 
-function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month }) {
+function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month, dragTaskHandler, step, hourFormat}) {
   const [zIndexStyle, setZIndexStyle] = useState(10)
   const color = useMemo(() => {
     return getColorTaskByPriority(task.priority)
@@ -53,14 +53,56 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
     },
   }
 
+  const dragStartHandler = (e, task) => {
+    setCurrentTask((prevState) => {
+      return {
+        ...task,
+        infoForCell: {
+          ...task?.infoForCell,
+          month: month
+        }
+      }
+    });
+  }
+
+  const dragEndHandler = (e) => {
+    e.target.style.boxShadow = 'none'
+  }
+
+  const dragOverHandler = (e) => {
+    e.preventDefault();
+  }
+
+  const dropHandler = (e, task) => {
+    e.preventDefault();
+    let hour
+    if (hourFormat) {
+      hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetY/step)-1) 
+    } else {
+      hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetY/step)-1 + Math.ceil(e.nativeEvent.offsetY/step)-1) 
+    }
+    dragTaskHandler(task.infoForCell.startDay, hour)
+  }
+
+  const dragLeaveHandler = (e) => {
+    e.preventDefault();
+
+  }
   return (
     <Box
+      draggable={true}
+      onDragStart={(e) => { dragStartHandler(e, task) }}
+      onDragEnd={(e) => { dragEndHandler(e) }}
+      onDrop={(e) => { dropHandler(e, task) }}
+      onDragOver ={(e) => { dragOverHandler(e) }}
+      onDragLeave={(e) => { dragLeaveHandler(e) }}
       onClick={(e) => { onClickTaskHandler(e, task) }}
+      className='calendar_task_block'
       sx={styles}>
       <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 sx={{ marginLeft: 'auto', marginTop: '5px' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
       </ContentCopyIcon>
     </Box>);
 }

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

@@ -10,7 +10,7 @@ import HourFormatSwitch from "../../HourFormatSwitch/HourFormatSwitch";
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
 import { getCurrentWeekDayString, getMonthToDayColumn } from "./Helpers";
 
-function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler, copyTask, setCopyTask, createCopyTask }) {
+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, });
   const handleOpen = useCallback((e) => {
     setModal({
@@ -82,6 +82,7 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
                       copyTask={copyTask} 
                       setCopyTask={setCopyTask} 
                       createCopyTask={createCopyTask}
+                      dragTaskHandler={dragTaskHandler}
                     />
                   )
                 })}

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

@@ -160,6 +160,28 @@ function WeekCalendar() {
     setCopyTask(null)
   }, [copyTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
 
+  const dragTaskHandler = useCallback(async (dayNumber, hour) => {
+    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))
+    } else {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59))
+    }
+    const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0))
+    const newTask = {
+      ...currentTask,
+      taskId: currentTask.mainTaskId,
+      dateTimeStart: start,
+      dateTimeDue: due
+    }
+    delete newTask.id
+    delete newTask.infoForCell
+    await dispatch(editCalendarTask(newTask, currentTask.id, userId))
+    setCurrentTask({})
+  }, [currentTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
+
   const deleteTaskHandler = useCallback(async (taskId) => {
     dispatch(deleteCalendarTask(taskId, userId))
   },[dispatch, userId])
@@ -187,6 +209,7 @@ function WeekCalendar() {
         createCopyTask={createCopyTask}
         copyTask={copyTask}
         setCopyTask={setCopyTask}
+        dragTaskHandler={dragTaskHandler}
       />
     </>
   );