Merge branch 'task-54-feature/resize_tasks' into 'development'

Task 54 feature/resize tasks

See merge request !37

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'}}
                         >
@@ -175,13 +174,15 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                        hour={parseInt(hours[index])}
                        line={day.dayNumber}
                        task={box.task}
+                       hourFormat={hourFormat}
                        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.css

+.resizeable {
+  border: 2px solid #533535;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 15px;
+  min-height: 15px;
+}
+
+.resizer {
+  position: absolute;
+  background: black;
+}
+
+.resizer-r {
+  cursor: col-resize;
+  height: 100%;
+  right: 0;
+  top: 0;
+  width: 5px;
+}
+
+.resizer-l {
+  cursor: col-resize;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 5px;
+}
\ No newline at end of file

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

 import { Grid} from "@mui/material";
-import React, { memo, useEffect, useState} from "react";
-
+import React, { memo, useEffect, useRef, useState} from "react";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 
+const arrowClass = {
+  height: '20px',
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": { 
+  transition: '0.5s',
+  transform: 'scale(1.2)'
+  }
+}
 
-const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, currentLine, currentTask,  dragTaskHandler, hour}) => {
+const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, increaseTaskHandler, reduceTaskHandler,  hourFormat}) => {
 
   const [color, setColor] = useState('')
   useEffect(() => {
@@ -16,13 +26,12 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, c
     }
   }, [task])
 
-
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation(); 
     setCurrentTask(task); 
     handleOpen(e)
   }
-
+  
   const dragLeaveHandler = (e) => {
     e.target.style.boxShadow = 'none'
   }
@@ -37,16 +46,45 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, c
   return (<>
     <Grid  
         draggable={true} 
-
         onDragLeave={(e)=>{dragLeaveHandler(e)}}
         onDragStart={(e)=>{dragStartHandler(e, line, task)}}
         onDragEnd={(e)=>{dragEndHandler(e)}}
-        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'}} 
+        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', justifyContent: 'space-between'}} 
         onClick={(e)=>{onClickTaskHandler(e, task)}}
       >
-      <span>
-        {task.title}
-      </span>
+      {task.infoForCell.endHour === task.infoForCell.startHour && hourFormat ?  
+      <>
+        <div tyle={{display: 'flex', alignItems: 'center'}}>
+            <div style={{display: 'flex', alignItems: 'center'}}>
+              <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
+              <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
+              <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
+              <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
+            </div>
+        </div>
+        <div>
+          <span>
+          {task.title}
+         </span>
+        </div>
+      </>
+      
+      
+      :
+        <>
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
+            <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
+            </div>
+              <span>
+                {task.title}
+              </span>
+            <div style={{display: 'flex', alignItems: 'center'}}>
+            <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
+            <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
+          </div>
+        </>
+        }
     </Grid>
   </>)
 };

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,12 +133,79 @@ 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
+    let hourDiffCheck
+    if (hourFormat) {
+      hourDiff = 1
+      hourDiffCheck = 0
+    } else {
+      hourDiff = 2
+      hourDiffCheck = 1
+    }
+    let due
+    let start
+    if (task.infoForCell.endHour - task.infoForCell.startHour - hourDiffCheck !== 0) {
+      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 sendNewTaskHandler = async () => {
@@ -193,6 +260,8 @@ function MonthCalendar() {
         hoursInDay={hoursInDay}
         daysInMonth={daysInMonth}
         dragTaskHandler={dragTaskHandler}
+        increaseTaskHandler={increaseTaskHandler}
+        reduceTaskHandler={reduceTaskHandler}
       />
 
     </>

planner-front/src/store/reducers/tasksReducer.js

@@ -32,7 +32,8 @@ const tasksReduсer = (state = initialState, action) => {
         const newArr = []
           action.tasks.forEach((task)=>{
             if (task.dateTimeStart && task.dateTimeDue) {
-              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) {
+              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (24 * 3600000) &&
+              new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() > 0) {
               const dateStart = task.dateTimeStart.split('T')[0]
               const timeStart = task.dateTimeStart.split('T')[1]
               const timeEnd = task.dateTimeDue.split('T')[1]