#54 Реализовал увелечение задачи

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

@@ -4,7 +4,7 @@ import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCel
 import CalendarTask from "../CalendarTask/CalendarTask";
 import EmptyBox from "./EmptyBox/EmptyBox";
 
-const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler}) => {
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, increaseTaskHandler, reduceTaskHandler}) => {
 
   const hours = useMemo(()=>{ 
     return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
@@ -163,7 +163,6 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                 {boxes.map((box, index)=>{
                   if (box.task) {
                     return (<Grid 
-                        key={i}
                         item xs={box.xs} 
                         sx={{height: '35px', marginBottom: '5px'}}
                         >
@@ -177,11 +176,12 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                        task={box.task}
                        setCurrentTask={setCurrentTask} 
                        handleOpen={handleOpen}
+                       increaseTaskHandler={increaseTaskHandler} 
+                       reduceTaskHandler={reduceTaskHandler}
                        />
                     </Grid>)
                   } else {
                     return (<EmptyBox 
-                      key={i}
                       modal={modal}
                       dayNumber={day.dayNumber}
                       hourNumber={box.hour}

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

 import { Grid} from "@mui/material";
-import React, { memo, useEffect, useRef} from "react";
+import React, { memo, useEffect, useRef, useState} from "react";
 
 
-const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, currentLine, currentTask,  dragTaskHandler, hour}) => {
+const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, increaseTaskHandler, reduceTaskHandler}) => {
 
   const [color, setColor] = useState('')
   useEffect(() => {
@@ -25,19 +25,28 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, c
     let width = parseInt(styles.width, 10);
     let x = 0;
 
-    // Right resize
+    const lastPoint = {x: null, y: null}
     const onMouseMoveRightResize = (event) => {
-      const dx = event.clientX - x;
-      x = event.clientX;
-      width = width + dx;
-      resizeableEle.style.width = `${width}px`;
+      event.stopPropagation()
+      const leftOrRight = (
+        event.clientX > lastPoint.x ? 'right'
+        : event.clientX < lastPoint.x ? 'left'
+        : 'none'
+      )
+      if (leftOrRight === 'right') {
+        increaseTaskHandler(line, task, false)
+      }
+      lastPoint.x = event.clientX
+      lastPoint.y = event.clientY
     };
 
     const onMouseUpRightResize = (event) => {
+      event.stopPropagation()
       document.removeEventListener("mousemove", onMouseMoveRightResize);
     };
 
     const onMouseDownRightResize = (event) => {
+      event.stopPropagation()
       x = event.clientX;
       resizeableEle.style.left = styles.left;
       resizeableEle.style.right = null;
@@ -47,6 +56,7 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, c
 
     // Left resize
     const onMouseMoveLeftResize = (event) => {
+      event.stopPropagation()
       const dx = event.clientX - x;
       x = event.clientX;
       width = width - dx;
@@ -54,10 +64,12 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, c
     };
 
     const onMouseUpLeftResize = (event) => {
+      event.stopPropagation()
       document.removeEventListener("mousemove", onMouseMoveLeftResize);
     };
 
     const onMouseDownLeftResize = (event) => {
+      event.stopPropagation()
       x = event.clientX;
       resizeableEle.style.right = styles.right;
       resizeableEle.style.left = null;

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

@@ -8,7 +8,7 @@ import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalenda
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, increaseTaskHandler, reduceTaskHandler}) {
 
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
@@ -83,6 +83,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
                 tasks={tasks}
                 day={day}
                 hourFormat={hourFormat}
+                increaseTaskHandler={increaseTaskHandler} 
+                reduceTaskHandler={reduceTaskHandler}
               >
               </CalendarRowDay>
           </CalendarRow>

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

@@ -133,11 +133,72 @@ function MonthCalendar() {
     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({
+    const newObj = {
       ...currentTask,
       dateTimeStart: start,
       dateTimeDue: due
-    }))
+    }
+    delete newObj.infoForCell
+    await dispatch(editTask(newObj))
+    setCurrentTask({})
+  }
+  const increaseTaskHandler = async (dayNumber, task, isStartTask) => {
+    const timeEnd = task.dateTimeDue.split('T')[1]
+    const timeEndHour = parseInt(timeEnd.split(':')[0])
+    const timeStart = task.dateTimeStart.split('T')[1]
+    const timeStartHour = parseInt(timeStart.split(':')[0])
+    let hourDiff
+    if (hourFormat) {
+      hourDiff = 1
+    } else {
+      hourDiff = 2
+    }
+    let due
+    let start
+    if (isStartTask) {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
+      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour + hourDiff, 0))
+    } else {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour + hourDiff, 59))
+      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
+    }
+    const newObj = {
+      ...task,
+      dateTimeStart: start,
+      dateTimeDue: due
+    }
+    delete newObj.infoForCell
+    await dispatch(editTask(newObj))
+    setCurrentTask({})
+  }
+
+  const reduceTaskHandler = async (dayNumber, task, isStartTask) => {
+    const timeEnd = task.dateTimeDue.split('T')[1]
+    const timeEndHour = parseInt(timeEnd.split(':')[0])
+    const timeStart = task.dateTimeStart.split('T')[1]
+    const timeStartHour = parseInt(timeStart.split(':')[0])
+    let hourDiff
+    if (hourFormat) {
+      hourDiff = 1
+    } else {
+      hourDiff = 2
+    }
+    let due
+    let start
+    if (isStartTask) {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
+      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour - hourDiff, 0))
+    } else {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour - hourDiff, 59))
+      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
+    }
+    const newObj = {
+      ...task,
+      dateTimeStart: start,
+      dateTimeDue: due
+    }
+    delete newObj.infoForCell
+    await dispatch(editTask(newObj))
     setCurrentTask({})
   }
 
@@ -193,6 +254,8 @@ function MonthCalendar() {
         hoursInDay={hoursInDay}
         daysInMonth={daysInMonth}
         dragTaskHandler={dragTaskHandler}
+        increaseTaskHandler={increaseTaskHandler}
+        reduceTaskHandler={reduceTaskHandler}
       />
 
     </>