#113 Пофиксил баги, реализовал копирование задачи

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

@@ -5,7 +5,7 @@ import DefaultTask from "../DefaultTask/DefaultTask";
 
 
 
-const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week }) => {
+const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month}) => {
     const [isThisCell, setIsThisCell] = useState(false)
 
     const cellClass = {
@@ -30,6 +30,7 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
         e.preventDefault();
         dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
     }
+
     const onClickHandler = (e) => {
         if (linesInDay?.length) {
             createTaskInCellHandler(dayNumber, hours);
@@ -37,9 +38,13 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
             handleOpen(e)
         }
         if (week) {
-            createTaskInCellHandler(dayNumber, hours);
-            setIsThisCell(true);
-            handleOpen(e)
+            if (copyTask) {
+                createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month)
+            } else {
+                createTaskInCellHandler(dayNumber, hours, month);
+                setIsThisCell(true);
+                handleOpen(e)
+            }
         }
     }
 
@@ -53,7 +58,7 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
         >
             {children}
             {isThisCell ?
-                <DefaultTask week={week}/> : null}
+                <DefaultTask week={week} /> : null}
 
         </Grid>
     </>

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

@@ -8,10 +8,9 @@ import { getTasksWithInfoForPosition, getWidthLeftZIndex } from "./Helpers";
 
 
 
-function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, createCopyTask, createTaskInCellHandler, modal }) {
+function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, setCopyTask, createCopyTask, createTaskInCellHandler, modal }) {
 
   const [columnDaySize, setColumnDaySize] = useState({ width: 0, height: 0 })
-
   const dayColumnRef = useRef('')
   useEffect(() => {
     setColumnDaySize(prev => { return { height: dayColumnRef.current.offsetHeight, width: dayColumnRef.current.offsetWidth } })
@@ -54,6 +53,8 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
                 handleOpen={handleOpen}
                 setCurrentTask={setCurrentTask}
                 modal={modal}
+                month={month}
+                setCopyTask={setCopyTask}
               >
               </CalendarWeekTask>
             )
@@ -71,6 +72,9 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
             dayNumber={day}
             hours={hour}
             modal={modal}
+            copyTask={copyTask}
+            createCopyTask={createCopyTask}
+            month={month}
           >
           </CalendarStandartCell>
         )

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

 import { Box } from "@mui/material"
 import { useEffect, useState, memo, useCallback, useMemo } from "react"
 import { getColorTaskByPriority } from "../../../../../../helpers/CalendarHelpers"
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
 
-function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal }) {
+function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month }) {
   const [zIndexStyle, setZIndexStyle] = useState(10)
   const color = useMemo(() => {
     return getColorTaskByPriority(task.priority)
@@ -22,7 +23,8 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
         ...task,
         infoForCell: {
           ...task.infoForCell,
-          endHour: task.infoForCell.endHour + 1
+          endHour: task.infoForCell.endHour + 1,
+          month: month
         }
       }
     });
@@ -38,6 +40,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
     height: `${height - 1}px`,
     width: `${width - 1}px`,
     position: 'absolute',
+    display: 'flex',
     left: left,
     top: top,
     zIndex: zIndexStyle,
@@ -57,6 +60,8 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
       <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>
     </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 }) {
+function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler, copyTask, setCopyTask, createCopyTask }) {
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
   const handleOpen = useCallback((e) => {
     setModal({
@@ -79,6 +79,9 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
                       handleOpen={handleOpen}
                       createTaskInCellHandler={createTaskInCellHandler}
                       modal={modal.open}
+                      copyTask={copyTask} 
+                      setCopyTask={setCopyTask} 
+                      createCopyTask={createCopyTask}
                     />
                   )
                 })}

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

 import { useEffect, useCallback, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import CalendarModalWorkerContent from '../../components/Calendars/CalendarModalWorkerContent/CalendarModalWorkerContent';
 import MonthCalendarBody from '../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
@@ -245,9 +244,9 @@ function MonthCalendar() {
 
   const onChangeCalendarUser = useCallback(() => {
     setModal(false)
-    dispatch(setUserCalendarId(workerInfo.worker.user.id))
+    setUserCalendarId(workerInfo.worker.user.id)
     setWorkerInfo({ project: '', worker: '' })
-  }, [dispatch, workerInfo?.worker?.user?.id])
+  }, [workerInfo?.worker?.user?.id])
 
   return (
     <>

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

@@ -4,12 +4,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
 import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader';
 import { getWeekInfoString, getWeekFromCurrentDate, dateToISOLikeButLocal } from '../../helpers/CalendarHelpers';
-import { addCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
+import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
 
 
 function WeekCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
+  const [copyTask, setCopyTask] = useState(null)
   const user = useSelector(state => state.users?.user);
   const [dateNow, setDateNow] = useState({ year: '', month: '', currentDay: '' })
   const [currentTask, setCurrentTask] = useState({ title: '', description: '', priority: null, infoForCell: { startHour: null, endHour: null } })
@@ -77,7 +78,7 @@ function WeekCalendar() {
     }
   }, []);
 
-  const createTaskInCellHandler = useCallback((dayNumber, dayHour) => {
+  const createTaskInCellHandler = useCallback((dayNumber, dayHour, month) => {
     let hour
     if (!isNaN(dayHour)) {
       hour = dayHour
@@ -94,23 +95,25 @@ function WeekCalendar() {
       title: "Задача",
       description: "описание",
       priority: null,
-      dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
-      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
+      dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hourDue, 59)),
       infoForCell: {
         startHour: hour,
         endHour: hourDue,
-        startDay: dayNumber
+        startDay: dayNumber,
+        month: month
       }
     }
     setCurrentTask((newTask))
-  },[dateNow.month, dateNow.year, hourFormat])
+  }, [dateNow.month, dateNow.year, hourFormat])
 
   const sendNewTaskHandler = useCallback(async () => {
     const timeEndHour = currentTask.infoForCell.endHour
     const timeStartHour = currentTask.infoForCell.startHour
+    const month = currentTask.infoForCell.month
     const day = currentTask.infoForCell.startDay
-    const due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeEndHour - 1, 59))
-    const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeStartHour, 0))
+    const due = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeEndHour - 1, 59))
+    const start = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeStartHour, 0))
     if (currentTask.id) {
       const newTask = {
         ...currentTask,
@@ -135,6 +138,28 @@ function WeekCalendar() {
     }
   }, [currentTask, dateNow.month, dateNow.year, dispatch, user.id, userId])
 
+  const createCopyTask = useCallback(async (dayNumber, hour, month) => {
+    const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
+    const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
+    let due
+    if (hour + hourDiff >= lastHour) {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, lastHour, 59))
+    } else {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour + hourDiff, 59))
+    }
+    const start = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0))
+    const newTask = {
+      ...copyTask,
+      dateTimeStart: start,
+      dateTimeDue: due,
+      taskId: copyTask.mainTaskId
+    }
+    delete newTask.infoForCell
+    delete newTask.id
+    await dispatch(addCopyCalendarTask(newTask, userId))
+    setCopyTask(null)
+  }, [copyTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
+
   const deleteTaskHandler = useCallback(async (taskId) => {
     dispatch(deleteCalendarTask(taskId, userId))
   },[dispatch, userId])
@@ -159,6 +184,9 @@ function WeekCalendar() {
         setHourFormat={setHourFormat}
         hoursInDay={hoursInDay}
         createTaskInCellHandler={createTaskInCellHandler}
+        createCopyTask={createCopyTask}
+        copyTask={copyTask}
+        setCopyTask={setCopyTask}
       />
     </>
   );