#60 реализовал копирование задач

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, increaseTaskHandler, reduceTaskHandler}) => {
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, increaseTaskHandler, reduceTaskHandler, createCopyTask, setCopyTask, copyTask}) => {
 
   const hours = useMemo(()=>{ 
     return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
@@ -137,25 +137,6 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
         xs={10.8}
         align='center'
         >
-          
-          {hoursInDay.map((hour, i)=>{
-            return (
-              <CalendarStandartCell
-                  linesInDay={linesInDay}
-                  key={i} 
-                  item xs={xs}
-                  createTaskInCellHandler={createTaskInCellHandler}
-                  hours={hour}
-                  dragTaskHandler={dragTaskHandler}
-                  dayNumber={day.dayNumber}
-                  currentTask={currentTask}
-                  handleOpen={handleOpen}
-                  modal={modal}
-                >
-              </CalendarStandartCell>
-              ) 
-            })}
-
             {linesInDay?.map((line, i)=>{
               const boxes = getBoxesInLine(line)
               return(
@@ -164,6 +145,7 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                   if (box.task) {
                     return (<Grid 
                         item xs={box.xs} 
+                        key={box.task.id}
                         sx={{height: '35px', marginBottom: '5px'}}
                         >
                       <CalendarTask
@@ -179,15 +161,19 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                        handleOpen={handleOpen}
                        increaseTaskHandler={increaseTaskHandler} 
                        reduceTaskHandler={reduceTaskHandler}
+                       setCopyTask={setCopyTask}
                        />
                     </Grid>)
                   } else {
                     return (<EmptyBox 
+                      key={index}
                       modal={modal}
                       dayNumber={day.dayNumber}
                       hourNumber={box.hour}
                       handleOpen={handleOpen}
                       dragTaskHandler={dragTaskHandler}
+                      createCopyTask={createCopyTask}
+                      copyTask={copyTask}
                       createTaskInCellHandler={createTaskInCellHandler}
                       xs={box.xs}
                       >
@@ -207,6 +193,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                   hourNumber={hourNumber}
                   handleOpen={handleOpen}
                   dragTaskHandler={dragTaskHandler}
+                  createCopyTask={createCopyTask}
+                  copyTask={copyTask}
                   createTaskInCellHandler={createTaskInCellHandler}
                   xs={xs}
                   >

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

@@ -2,9 +2,7 @@ import { Grid} from "@mui/material";
 import React, { memo, useEffect, useState} from "react";
 import DefaultTask from "../../DefaultTask/DefaultTask";
 
-
-
-const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler}) => {
+const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler, copyTask, createCopyTask}) => {
 
   const [isThisCell, setIsThisCell] = useState(false)
   useEffect(()=>{
@@ -14,10 +12,14 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal
   }, [modal])
 
   const onClickHandler = (e, dayNumber, hour) => {
+    if (copyTask) {
+      createCopyTask(dayNumber, hour)
+    } else {
       createTaskInCellHandler(dayNumber, hour);
       setIsThisCell(true);
       handleOpen(e)
     }
+  } 
   const dragOverHandler = (e) => {
     e.preventDefault();
   }

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

 import { Grid} from "@mui/material";
 import { memo, useEffect, useState } from "react";
+import DefaultTask from "../DefaultTask/DefaultTask";
+
+
+  const cellClass = {
+    transition: '0.3s',
+    position: 'relative', 
+    height: '35px',
+  }
 
 const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, divRef, dragTaskHandler, linesInDay}) => {
     const [isThisCell, setIsThisCell] = useState(false)
+
     useEffect(()=>{
         if(!modal) {
             setIsThisCell(false);
@@ -22,20 +31,14 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCell
     return <>
         <Grid  
             item xs={xs} 
-            sx={{position: 'relative', height:  linesInDay?.length ? `${35*linesInDay}px` : '35px'}} 
+            sx={cellClass} 
             onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
             onDragOver={(e)=>{dragOverHandler(e)}}
             onDrop={(e)=>{dropHandler(e)}}
         >
             {children}
         {isThisCell ?  
-        <Grid  
-            sx={{ position: 'relative', height: '29px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '3px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}  
-            >
-            <span>
-                Задача
-            </span>
-        </Grid> : null}
+        <DefaultTask/> : null}
         <div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
 
         </div>

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

-import { Grid} from "@mui/material";
+import { Button, Grid} from "@mui/material";
 import React, { memo, useEffect, useRef, useState} from "react";
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -13,7 +13,7 @@ const arrowClass = {
   }
 }
 
-const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, increaseTaskHandler, reduceTaskHandler,  hourFormat}) => {
+const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, increaseTaskHandler, reduceTaskHandler,  hourFormat, setCopyTask}) => {
 
   const [color, setColor] = useState('')
   useEffect(() => {
@@ -80,6 +80,9 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
                 {task.title}
               </span>
             <div style={{display: 'flex', alignItems: 'center'}}>
+            <Button sx={{color:'black', fontWeight:'600'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}>
+                Copy
+            </Button>
             <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
             <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
           </div>

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, increaseTaskHandler, reduceTaskHandler}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, increaseTaskHandler, reduceTaskHandler, createCopyTask, setCopyTask, copyTask}) {
 
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
@@ -85,6 +85,9 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
                 hourFormat={hourFormat}
                 increaseTaskHandler={increaseTaskHandler} 
                 reduceTaskHandler={reduceTaskHandler}
+                createCopyTask={createCopyTask}
+                copyTask={copyTask}
+                setCopyTask={setCopyTask}
               >
               </CalendarRowDay>
           </CalendarRow>

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

@@ -13,6 +13,7 @@ function MonthCalendar() {
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
   const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
+  const [copyTask, setCopyTask] = useState(null)
   const [cellSizes, setCellSizes] = useState({})
 
   useEffect(()=>{
@@ -126,11 +127,7 @@ function MonthCalendar() {
   }
   
   const dragTaskHandler = async (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 hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
     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))
     const newObj = {
@@ -142,6 +139,7 @@ function MonthCalendar() {
     await dispatch(editTask(newObj))
     setCurrentTask({})
   }
+
   const increaseTaskHandler = async (dayNumber, task, isStartTask) => {
     const timeEnd = task.dateTimeDue.split('T')[1]
     const timeEndHour = parseInt(timeEnd.split(':')[0])
@@ -228,6 +226,19 @@ function MonthCalendar() {
     }
   }
 
+  const createCopyTask = async (dayNumber, hour) => {
+    const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
+    const newTask = {
+      ...copyTask,
+      dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59)),
+    }
+    delete newTask.infoForCell
+    delete newTask.id
+    await dispatch(addTask(newTask))
+    setCopyTask(null)
+  }
+
   const deleteTaskHandler = async (taskId) => {
     dispatch(deleteTask(taskId))
   }
@@ -262,6 +273,9 @@ function MonthCalendar() {
         dragTaskHandler={dragTaskHandler}
         increaseTaskHandler={increaseTaskHandler}
         reduceTaskHandler={reduceTaskHandler}
+        createCopyTask={createCopyTask}
+        copyTask={copyTask}
+        setCopyTask={setCopyTask}
       />
 
     </>