#56 Почти реализовал drug and drop

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

 import { Grid } from "@mui/material";
-import { memo, useMemo } from "react";
+import { memo, useMemo, useState } from "react";
+import { useDispatch } from "react-redux";
 import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
 import CalendarTask from "../CalendarTask/CalendarTask";
 
-const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
-
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler}) => {
   const hours = useMemo(()=>{ 
     return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
   [hoursInDay])
@@ -101,11 +101,11 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
       const boxes = []
       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})
-          }
+          // if (boxes[boxes.length -1]?.task === null) {
+          //   boxes[boxes.length -1].xs += xs
+          // } else {
+          boxes.push({xs: xs, task: null})
+          //  }
         } else {
           const task = sortedTasks[line[i].split('-')[1]]
           const taskIsThere = boxes.find((taskFind)=>{
@@ -122,6 +122,18 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
     }
   }
 
+  const dragOverHandler = (e) => {
+    e.preventDefault();
+  }
+
+  const dropHandler = (e, currentHour) => {
+      e.stopPropagation()
+      e.preventDefault();
+      dragTaskHandler(day.dayNumber, currentHour)
+  }
+  console.log(sortedTasks)
+  console.log(linesInDay)
+
   return <>
       <Grid 
         container
@@ -129,17 +141,20 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
         xs={10.8}
         align='center'
         >
+          
           {hoursInDay.map((hour, i)=>{
             return (
               <CalendarStandartCell
-                key={i} 
-                item xs={xs}
-                createTaskInCellHandler={createTaskInCellHandler}
-                hours={hour}
-                dayNumber={day.dayNumber}
-                currentTask={currentTask}
-                handleOpen={handleOpen}
-                modal={modal}
+                  linesInDay={linesInDay}
+                  key={i} 
+                  item xs={xs}
+                  createTaskInCellHandler={createTaskInCellHandler}
+                  hours={hour}
+                  dragTaskHandler={dragTaskHandler}
+                  dayNumber={day.dayNumber}
+                  currentTask={currentTask}
+                  handleOpen={handleOpen}
+                  modal={modal}
                 >
               </CalendarStandartCell>
               ) 
@@ -148,18 +163,32 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
             {linesInDay?.map((line, i)=>{
               const boxes = getBoxesInLine(line)
               return(
-              <Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginTop: i === 0 ? '-35px' : 0, marginBottom: '5px'}}>
-                {boxes.map((box)=>{
+              <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} sx={{height: '35px', marginBottom: '5px'}}>
+                    return (<Grid 
+                        item xs={box.xs} 
+                        sx={{height: '35px', marginBottom: '5px'}}
+                        onDragOver={(e)=>{dragOverHandler(e)}}
+                        onDrop={(e)=>{dropHandler(e, parseInt(hours[index]))}
+                        }>
                       <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}
                        />
                     </Grid>)
                   } else {
-                    return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
+                    return (<Grid 
+                    onDragOver={(e)=>{dragOverHandler(e)}}
+                    onDrop={(e)=>{dropHandler(e, parseInt(hours[index]))}}
+                    item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
                       
                     </Grid>)
                   }
@@ -170,4 +199,5 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
     </>
 };
 
-export default memo(CalendarRowDay);
+export default memo(CalendarRowDay);
\ No newline at end of file
+

planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js

 import { Grid} from "@mui/material";
 import { memo, useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, divRef }) => {
+const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, divRef, dragTaskHandler, linesInDay}) => {
     const [isThisCell, setIsThisCell] = useState(false)
     useEffect(()=>{
         if(!modal) {
@@ -9,11 +9,23 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCell
         }
     }, [modal])
 
+    const dragOverHandler = (e) => {
+        e.preventDefault();
+      }
+    
+    const dropHandler = (e) => {
+        e.stopPropagation()
+        e.preventDefault();
+        dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
+    }
+
     return <>
         <Grid  
             item xs={xs} 
-            sx={{position: 'relative', height: '35px'}} 
+            sx={{position: 'relative', height:  linesInDay?.length ? `${35*linesInDay}px` : '35px'}} 
             onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
+            onDragOver={(e)=>{dragOverHandler(e)}}
+            onDrop={(e)=>{dropHandler(e)}}
         >
             {children}
         {isThisCell ?  

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

 import { Grid} from "@mui/material";
-import React, { memo} from "react";
+import React, { memo, useEffect, useState} from "react";
 
 
 
-const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
+const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, currentLine, currentTask,  dragTaskHandler, hour}) => {
+
+  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 onClickTaskHandler = (e, task) => {
@@ -12,10 +23,37 @@ const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
     handleOpen(e)
   }
 
-  return (<> 
+  const dragOverHandler = (e) => {
+    e.preventDefault();
+    e.target.style.boxShadow = '0 4px 3px grey'
+  }
+  const dragLeaveHandler = (e) => {
+    e.target.style.boxShadow = 'none'
+  }
+  const dragStartHandler = (e, line, task) => {
+    setCurrentLine()
+    setCurrentTask(task); 
+  }
+  const dragEndHandler = (e) => {
+    e.target.style.boxShadow = 'none'
+  }
+  const dropHandler = (e, line, task) => {
+    e.stopPropagation()
+    e.preventDefault();
+    console.log(hour)
+    dragTaskHandler(line, hour)
+  }
+  
+  return (<>
     <Grid  
-          sx={{ 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'}} 
-          onClick={(e)=>{onClickTaskHandler(e, task)}}
+        draggable={true} 
+        onDragOver={(e)=>{dragOverHandler(e)}}
+        onDragLeave={(e)=>{dragLeaveHandler(e)}}
+        onDragStart={(e)=>{dragStartHandler(e, line, task)}}
+        onDragEnd={(e)=>{dragEndHandler(e)}}
+        onDrop={(e)=>{dropHandler(e, line, task)}}
+        sx={{ position: 'relative', height: '30px', backgroundColor: color, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}} 
+        onClick={(e)=>{onClickTaskHandler(e, task)}}
       >
       <span>
         {task.title}

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

 import { FormControlLabel, Switch} from "@mui/material";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
@@ -7,8 +7,10 @@ import ModalTask from "../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
 
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler}) {
+
+  const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
   const handleOpen = (e) => {
     setModal( {
@@ -21,19 +23,22 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
       xDiv: e.target.offsetWidth,
     })
   };
+
   const handleClose = () => {
     setModal({...modal, open: false})
     setCurrentTask({})
   };
+
   const divRef = useRef(null)
   const [divHeight, setDivHeight] = useState('')
+
   useEffect(() => {
     if (divRef) {
         setDivHeight(()=>{
           return divRef.current?.offsetHeight
         })
-    }
-}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
+      }
+  }, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
 
   return (
     <div ref={divRef} style={{marginBottom: '30px'}}>
@@ -54,30 +59,34 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
             ) 
           })}
     </CalendarRow>
-    {daysInMonth?.map((day, i)=>{
-      return (
-        <CalendarRow
-          key={i}
-          >
-            <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
-            <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
-            <CalendarRowDay
-              xs={cellSizes.dayCell}
-              createTaskInCellHandler={createTaskInCellHandler}
-              hoursInDay={hoursInDay}
-              currentTask={currentTask}
-              handleOpen={handleOpen}
-              modal={modal.open}
-              setCurrentTask={setCurrentTask}
-              year={year}
-              month={month} 
-              tasks={tasks}
-              day={day}
-              hourFormat={hourFormat}
-            />
-        </CalendarRow>
-      )
-    })}
+      {daysInMonth?.map((day, i)=>{
+        return (
+          <CalendarRow
+            key={i}
+            >
+              <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
+              <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
+                <CalendarRowDay
+                dragTaskHandler={dragTaskHandler}
+                xs={cellSizes.dayCell}
+                createTaskInCellHandler={createTaskInCellHandler}
+                hoursInDay={hoursInDay}
+                currentTask={currentTask}
+                handleOpen={handleOpen}
+                currentLine={currentLine}
+                setCurrentLine={setCurrentLine}
+                modal={modal.open}
+                setCurrentTask={setCurrentTask}
+                year={year}
+                month={month} 
+                tasks={tasks}
+                day={day}
+                hourFormat={hourFormat}
+              >
+              </CalendarRowDay>
+          </CalendarRow>
+        )
+      })}
     <ModalTask
       modal={modal}
       handleClose={()=>{handleClose()}}

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

@@ -101,6 +101,7 @@ function MonthCalendar() {
     const iso = dateLocal.toISOString();
     return iso;
   }
+
   const createTaskInCellHandler = (dayNumber, dayHour) => {
     const hour = parseInt(dayHour.split(':')[0])
     let hourDue
@@ -119,10 +120,25 @@ function MonthCalendar() {
     setCurrentTask((newTask))
   }
 
+  const dragTaskHandler = async (dayNumber, hour) => {
+    console.log(dayNumber, hour)
+    const timeEnd = currentTask.dateTimeDue.split('T')[1]
+    const timeEndHour = parseInt(timeEnd.split(':')[0])
+    const timeStart = currentTask.dateTimeStart.split('T')[1]
+    const timeStartHour = parseInt(timeStart.split(':')[0])
+    const hourDiff = timeEndHour - timeStartHour
+    const due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59))
+    const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0))
+    await dispatch(editTask({
+      ...currentTask,
+      dateTimeStart: start,
+      dateTimeDue: due
+    }))
+  }
+
   const sendNewTaskHandler = async () => {
     if (currentTask.id) {
       delete currentTask.infoForCell
-      console.log(currentTask)
       setCurrentTask(() => {
         return{
         ...currentTask,
@@ -171,6 +187,7 @@ function MonthCalendar() {
         cellSizes={cellSizes}
         hoursInDay={hoursInDay}
         daysInMonth={daysInMonth}
+        dragTaskHandler={dragTaskHandler}
       />
 
     </>

planner-front/src/store/actions/tasksActions.js

@@ -95,11 +95,8 @@ const editTaskFailure = (error) => {
 export const editTask = (task) => {
   return async (dispatch, getState) => {
       dispatch(editTaskRequest());
-      // const token = getState().users?.user?.token;
       try {
-        console.log('task' , task)
-        const r=await axios.put("/tasks/", task);
-        console.log(r)
+        await axios.put("/tasks", task);
         dispatch(editTaskSuccess())
         dispatch(fetchAllTasks())
         dispatch(fetchCalendarTasks())