Merge branch 'task-135-feature/create_tasks_mode_in_calendar' into 'development'

Task 135 feature/create tasks mode in calendar

See merge request !109

planner-api/src/routers/copyTasks.ts

@@ -108,10 +108,11 @@ router.delete('/:dateTimeTaskId',authAuthorOrExecutorOfDateTimeTask, async(req:R
     }
 }
 
-    if (dateTimeTasks.length ===1  ) {
+    if (dateTimeTasks.length === 1  ) {
         if ( authorStatus) {
-            Task.remove(task)
-            return res.send({message:"task delete succesfully"})
+            task.dateTimeTasks = []
+            await task.save()
+            return res.send({message:"copyTask delete succesfully"})
         } else{
             return res.send({message:"not uathorized to delete task"})
         }

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

+import { Box, Button } from "@mui/material";
+import { memo } from "react";
+const style = { 
+  position: 'fixed', 
+  left: '50%', 
+  bottom: 10, 
+  width: '30%', 
+  height: '70px', 
+  backgroundColor: 'white', 
+  border: '2px solid black',
+  borderRadius: '10px',
+  zIndex: '100', 
+  transform: 'translateX(-50%)', 
+  boxShadow: '0px 5px 54px 27px rgba(34, 60, 80, 0.2)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-around'
+
+  }
+const CreateCopyTasksModeBlock = ({ copyMode, copyModeReturn,  copyModeStay }) => {
+  return (<>
+    {copyMode ?
+      <Box sx={style}>
+        <Button onClick={copyModeStay} sx={{fontWeight: 800}}>
+          Остаться
+        </Button>
+        <Button onClick={copyModeReturn} sx={{fontWeight: 800}}>
+          Вернуться
+        </Button>
+      </Box>
+      : null}
+  </>
+  );
+};
+
+export default memo(CreateCopyTasksModeBlock);

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

@@ -81,6 +81,7 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
             copyTask={copyTask}
             createCopyTask={createCopyTask}
             month={month}
+            year={year}
           >
           </CalendarStandartCell>
         )

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

@@ -6,7 +6,6 @@ import CalendarStandartCell from "../../UI/CalendarStandartCell/CalendarStandart
 import ModalTask from "../../UI/ModalTask/ModalTask"
 import MonthCalendarModalContent from "../../UI/CalendarModalTaskContent/CalendarModalTaskContent";
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
-import { useSelector } from "react-redux";
 
 
 function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) {

planner-front/src/components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader.js

-import { AppBar, Button, Toolbar, Typography } from '@mui/material';
+import { AppBar, Toolbar, } from '@mui/material';
 import { Box } from '@mui/system';
 import ButtonSwapCalendar from '../../UI/ButtonSwapCalendar/ButtonSwapCalendar';
 import CalendarUserDisplayName from '../../UI/CalendarUserDisplayName/CalendarUserDisplayName';

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

 import { Grid } from "@mui/material";
-import { memo, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import DefaultTask from "../DefaultTask/DefaultTask";
 
 const heightCell = 40
-const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month, year }) => {
+const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month, year, copyMode, copyModeTask }) => {
     const [isThisCell, setIsThisCell] = useState(false)
     const [top, setTop] = useState(0)
-    const cellClass = {
-        position: 'relative',
-        height: linesInDay?.length ? `${heightCell * linesInDay.length + 5}px` : `${45}px`,
-        borderRight: '1px solid black',
-        borderBottom: week ? '1px solid black' : null,
-        transition: week ? '0.3s' : null,
-        '&:hover': {
-            transition: '0.3s',
-            cursor: children ? null : '#d6d2d2',
-            background: children ? null : '#d6d2d2'
-        },
-    }
+    const isDeadLine = useMemo(()=>{
+        if (copyTask?.dateTimeDeadLine) {
+            if (new Date(copyTask?.dateTimeDeadLine).getTime() - new Date(year, month, dayNumber, parseInt(hours?.split(':')[0])).getTime() < 0 ) {
+                return true
+            }
+        } else {
+            if (copyModeTask?.dateTimeDeadLine) {
+                if (new Date(copyModeTask?.dateTimeDeadLine).getTime() - new Date(year, month, dayNumber, parseInt(hours?.split(':')[0])).getTime() < 0 ) {
+                    return true
+                }
+            } else {
+                return false
+            }
+        }
+    },[copyTask, copyModeTask, year, month, dayNumber, hours])
+
+    console.log(copyTask)
+    const cellClass = useMemo(() => {
+        const backgroundColor = isDeadLine ? '#fa9b9be3' : 'null'
+        return ({
+            position: 'relative',
+            height: linesInDay?.length ? `${heightCell * linesInDay.length + 5}px` : `${45}px`,
+            borderRight: '1px solid black',
+            borderBottom: week ? '1px solid black' : null,
+            padding: week ? '2px' : null,
+            transition: week ? '0.3s' : null,
+            backgroundColor: backgroundColor,
+            '&:hover': {
+                transition: '0.3s',
+                cursor: children ? null : '#d6d2d2',
+                background: children ? null : '#d6d2d2'
+            }
+        })
+    }, [children, linesInDay?.length, week, isDeadLine])
+
 
     useEffect(() => {
         if (!modal) {
@@ -25,23 +48,23 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
         }
     }, [modal])
 
-    const dragOverHandler = (e) => {
+    const dragOverHandler = useCallback((e) => {
         e.preventDefault();
         e.target.style.background = children ? null : '#d6d2d2'
-    }
-    const dragLeaveHandler = (e) => {
+    }, [children])
+    const dragLeaveHandler = useCallback((e) => {
         e.preventDefault();
         e.target.style.background = null
-    }
+    }, [])
 
-    const dropHandler = (e) => {
+    const dropHandler = useCallback((e) => {
         e.stopPropagation()
         e.preventDefault();
         e.target.style.background = null
         dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]), month, year)
-    }
+    }, [dayNumber, hours, month, year, dragTaskHandler])
 
-    const onClickHandler = (e) => {
+    const onClickHandler = useCallback((e) => {
         if (!week) {
             if (e.nativeEvent.offsetY <= 5) {
                 setTop(40 * Math.ceil((e.nativeEvent.offsetY) / 40 - 1))
@@ -49,29 +72,58 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
                 setTop(40 * Math.ceil((e.nativeEvent.offsetY - 5) / 40 - 1))
             }
         }
-        if (copyTask) {
+        if (copyTask || copyMode) {
             createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month, year)
         } else {
             createTaskInCellHandler(dayNumber, hours, month, year);
             setIsThisCell(true);
             handleOpen(e)
         }
-    }
+    }, [week, copyTask, copyMode, dayNumber, hours, month, year, createTaskInCellHandler, createCopyTask, handleOpen])
 
-    return <>
-        <Grid
-            item xs={xs}
-            sx={cellClass}
-            onClick={(e) => { onClickHandler(e) }}
-            onDragOver={(e) => { dragOverHandler(e) }}
-            onDragLeave={(e) => { dragLeaveHandler(e) }}
-            onDrop={(e) => { dropHandler(e) }}
-        >
-            {children}
-            {isThisCell ?
-                <DefaultTask week={week} top={top} /> : null}
+    const returnCells = useMemo(() => {
+        if (copyTask || copyMode) {
+            if (isDeadLine) {
+                return (<Grid
+                    item xs={xs}
+                    sx={cellClass}
+                >
+                </Grid>)
+            } else {
+                return (<Grid
+                    item xs={xs}
+                    sx={cellClass}
+                    onClick={(e) => { onClickHandler(e) }}
+                    onDragOver={(e) => { dragOverHandler(e) }}
+                    onDragLeave={(e) => { dragLeaveHandler(e) }}
+                    onDrop={(e) => { dropHandler(e) }}
+                >
+                    {children}
+                    {isThisCell ?
+                        <DefaultTask week={week} top={top} /> : null}
+                </Grid>)
+            }
+        }
+        return (<>
+            <Grid
+                item xs={xs}
+                sx={cellClass}
+                onClick={(e) => { onClickHandler(e) }}
+                onDragOver={(e) => { dragOverHandler(e) }}
+                onDragLeave={(e) => { dragLeaveHandler(e) }}
+                onDrop={(e) => { dropHandler(e) }}
+            >
+                {children}
+                {isThisCell ?
+                    <DefaultTask week={week} top={top} /> : null}
 
-        </Grid>
+            </Grid>
+        </>)
+
+    }, [cellClass, children, copyMode, copyTask, dragOverHandler, dropHandler, isThisCell, onClickHandler, top, week, xs, dragLeaveHandler, isDeadLine])
+
+    return <>
+        {returnCells}
     </>
 };
 

planner-front/src/components/Calendars/UI/DateTimePicker/DateTimePicker.js

-import React, {useState} from 'react';
-import DatePicker from "react-datepicker";
-
-
-
-const DateTimePicker =({task,name,onChange}) => {
-    const [startDate, setStartDate] = useState(new Date());
-    return (
-        <>
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date)}
-        // locale="ru"
-        showTimeSelect
-        timeFormat="p"
-        timeIntervals={60}
-        dateFormat="Pp"
-      />
-      </>
-    );
-  };
-
-  export default DateTimePicker;

planner-front/src/components/Calendars/UI/DeleteIcon/DeleteIcon.js

+
+import React, { memo} from "react";
+import DeleteIcons from '@mui/icons-material/Delete';
+
+const DeleteIcon = ({onClick}) => {
+  const styles = { width: '20px', cursor: 'pointer', marginLeft: 'auto', marginTop: '5px', marginRight: '5px'}
+  return (
+      <DeleteIcons sx={styles} onClick={onClick}>
+      </DeleteIcons>)
+};
+
+export default memo(DeleteIcon);
\ No newline at end of file

planner-front/src/components/Calendars/UI/ModalTask/ModalTask.js

 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 
 export default function ModalTask({ modal, handleClose, children, week }) {
@@ -38,7 +38,7 @@ export default function ModalTask({ modal, handleClose, children, week }) {
         return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 470) - windowDimenion.winHeight) - 30
       }
     }
-  }, [windowDimenion.winHeight, modal])
+  }, [windowDimenion.winHeight, modal, week])
 
   const getXCordinatesToModal = useCallback(() => {
     if (windowDimenion.winWidth > modal.xClickСordinates + 270 + modal.xDiv) {

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

@@ -8,7 +8,7 @@ import { getTasksWithInfoForPosition, getWidthLeftZIndex } from "./Helpers";
 
 
 
-function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, setCopyTask, createCopyTask, createTaskInCellHandler, modal, dragTaskHandler }) {
+function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, setCopyTask, createCopyTask, createTaskInCellHandler, modal, dragTaskHandler, copyMode, deleteTaskHandler }) {
 
   const [columnDaySize, setColumnDaySize] = useState({ width: 0, height: 0 })
 
@@ -62,6 +62,8 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
                 step={step}
                 tasksLength={tasksLength}
                 hourFormat={hourFormat}
+                copyModeTask={copyMode.task}
+                deleteTaskHandler={deleteTaskHandler}
               >
               </CalendarWeekTask>
             )
@@ -84,6 +86,8 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
             month={month}
             year={year}
             dragTaskHandler={dragTaskHandler}
+            copyMode={copyMode.working}
+            copyModeTask={copyMode.task}
           >
           </CalendarStandartCell>
         )

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

@@ -2,9 +2,10 @@ import { Box } from "@mui/material"
 import { useEffect, useState, memo, useCallback, useMemo } from "react"
 import { getColorTaskByPriority } from "../../../../../../helpers/CalendarHelpers"
 import CopyIcon from "../../../../UI/CopyIcon/CopyIcon";
+import DeleteIcon from "../../../../UI/DeleteIcon/DeleteIcon";
 
 
-function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month, dragTaskHandler, step, hourFormat, tasksLength }) {
+function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month, dragTaskHandler, step, hourFormat, tasksLength, copyModeTask, deleteTaskHandler }) {
   const [zIndexStyle, setZIndexStyle] = useState(10)
   const color = useMemo(() => {
     return getColorTaskByPriority(task.priority)
@@ -94,7 +95,40 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
     e.stopPropagation();
     setCopyTask(task)
   }, [task, setCopyTask])
-  console.log(tasksLength)
+
+  const returnTask = useMemo(() => {
+    if (copyModeTask?.id === task?.mainTaskId) {
+      return (<>
+        <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
+          {task.title}
+        </span>
+        <DeleteIcon
+          onClick={(e) => { deleteTaskHandler(e, task.id) }}
+        />
+      </>)
+    }
+    if (tasksLength > 2) {
+      return (<>
+        <CopyIcon
+          tasksLength={tasksLength}
+          onClick={(e) => { onClickCopyIconHandler(e) }}
+        />
+        <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
+          {task.title}
+        </span>
+      </>)
+    } else {
+      return (<>
+        <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
+          {task.title}
+        </span>
+        <CopyIcon
+          onClick={(e) => { onClickCopyIconHandler(e) }}
+        />
+      </>)
+    }
+  }, [tasksLength, task.title, onClickCopyIconHandler, copyModeTask?.id, deleteTaskHandler, task?.id, task?.mainTaskId])
+
   return (
     <Box
       draggable={true}
@@ -106,22 +140,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
       onClick={(e) => { onClickTaskHandler(e, task) }}
       className='calendar_task_block'
       sx={styles}>
-      {tasksLength > 2 ? <>
-        <CopyIcon
-            tasksLength={tasksLength}
-            onClick={(e) => { onClickCopyIconHandler(e) }}
-          />
-        <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
-          {task.title}
-        </span>
-       </>
-        : <>
-          <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
-            {task.title}
-          </span>
-          <CopyIcon
-            onClick={(e) => { onClickCopyIconHandler(e) }}
-          /> </>}
+      {returnTask}
     </Box>);
 }
 

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

@@ -10,7 +10,7 @@ import HourFormatSwitch from "../../UI/HourFormatSwitch/HourFormatSwitch";
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
 import { getCurrentWeekDayString, getMonthAndYearToDayColumn } from "./Helpers";
 
-function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler, copyTask, setCopyTask, createCopyTask, dragTaskHandler }) {
+function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler, copyTask, setCopyTask, createCopyTask, dragTaskHandler, copyMode }) {
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
   const handleOpen = useCallback((e) => {
     setModal({
@@ -31,7 +31,7 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
 
   return (
     <>
-      <Box style={{ marginBottom: '30px' }}>
+      <Box style={{ marginBottom: copyMode.working ? '100px' : '30px'}}>
         <Box style={{ position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey' }}>
           <CalendarRow
           >
@@ -84,6 +84,8 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
                       setCopyTask={setCopyTask} 
                       createCopyTask={createCopyTask}
                       dragTaskHandler={dragTaskHandler}
+                      copyMode={copyMode}
+                      deleteTaskHandler={deleteTaskHandler}
                     />
                   )
                 })}
@@ -109,7 +111,7 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
           project={currentTask.project}
           onChangeCurrentTaskHandler={(e) => { onChangeCurrentTaskHandler(e) }}
           sendNewTaskHandler={() => { sendNewTaskHandler(); handleClose() }}
-          deleteTaskHandler={() => { deleteTaskHandler(currentTask.id); handleClose() }}
+          deleteTaskHandler={(e) => { deleteTaskHandler(e, currentTask.id); handleClose() }}
         />
       </ModalTask>
     </>

planner-front/src/components/MyTasksCompoments/NewTaskForm.js

@@ -21,7 +21,6 @@ import BasicSelect from "../UI/Select/Select";
 import { addTask } from "../../store/actions/tasksActions";
 import TaskModal from "./TaskModal/TaskModal";
 import {dateToISOLikeButLocal} from '../../helpers/CalendarHelpers';
-import DateTimePicker from "../Calendars/UI/DateTimePicker/DateTimePicker";
 
 export default function NewTaskForm({ projects, setAddTaskForm }) {
   console.log('new task form')

planner-front/src/components/MyTasksCompoments/TableRowTask/TableRowTask.js

@@ -22,6 +22,9 @@ import BasicSelect from "../../UI/Select/Select";
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { activateCreateCopyTasksMode } from "../../../store/actions/tasksActions";
 
 const weekDays = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб" ];
 
@@ -40,9 +43,10 @@ const TableRowTask= ({
   onToggleEditMode,
   onToggleEditModeDone,
 })=>{
-
+  
   const [open, setOpen] = React.useState(false);
-
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
   const roudHourUp =(dateIso)=>{
     let m = moment(dateIso);
     let roundUp = m.minute() || m.second() || m.millisecond() ? m.add(1, 'hour').startOf('hour') : m.startOf('hour');
@@ -59,7 +63,7 @@ const TableRowTask= ({
      return weekDays[date.day()];
   }
   const calendarOpen=(taskId)=>{
-    console.log('task Id in Calendar Open' , taskId)
+    dispatch(activateCreateCopyTasksMode(task, navigate))
   }
 
     return (
@@ -159,11 +163,11 @@ const TableRowTask= ({
                             user:user
                           }}
                         />
-                        {task.isEditMode && task.author.id===user.id  ? (
+                        {task.dateTimeTasks.length === 0 && task.author.id === user.id  ? (
                           <TableCell>
                               <Tooltip title="Перейти в календарь">
                                 <IconButton
-                                  onClick={() => { calendarOpen(task.id)}}
+                                  onClick={() => { calendarOpen(task)}}
                                 >
                                   <CalendarMonthIcon />
                                 </IconButton>
@@ -172,7 +176,7 @@ const TableRowTask= ({
                           </TableCell>
                         ) : (
 
-                        task.dateTimeTasks.length>1 ? 
+                        task.dateTimeTasks.length >= 1 ? 
                         <TableCell>
                             <IconButton
                             aria-label="expand row"
@@ -286,7 +290,7 @@ const TableRowTask= ({
                         </TableCell>):null}
 
                       </TableRow>
-                      {task.dateTimeTasks.length>1?          
+                      {task.dateTimeTasks.length>=1?          
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={11}>
             <Collapse in={open} timeout="auto" unmountOnExit>

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

@@ -189,7 +189,6 @@ export default function EnhancedTable() {
      setRecievedTasks(tasksFilteredByProject)
      setFilterProjectTumbler(true)
    }
-
   //  if (
     // tasks &&
     // tasks?.length > 0

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

 import moment from 'moment';
 import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import CreateCopyTasksModeBlock from '../../components/Calendars/CreateCopyTasksModeBlock/CreateCopyTasksModeBlock';
 import CalendarModalWorkerContent from '../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent';
 import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
 import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader';
@@ -8,15 +11,16 @@ import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';
 import { AllHoursOneHourFormat, AllHoursTwoHourFormat } from '../../constants';
 import { getWeekInfoString, getWeekFromCurrentDate, dateToISOLikeButLocal } from '../../helpers/CalendarHelpers';
 import { fetchAllUserProjects } from '../../store/actions/projectsActions';
-import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
+import { addCalendarTask, addCopyCalendarTask, deactivateCreateCopyTasksMode, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
 import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersActions';
 
 function WeekCalendar() {
   const dispatch = useDispatch();
-  const { calendarTasks } = useSelector(state => state.tasks);
+  const navigate = useNavigate()
+  const { calendarTasks, copyMode } = useSelector(state => state.tasks);
   const { user, currentCalendarDisplayName } = useSelector(state => state.users);
-  const { allUserProjects, project } = useSelector(state => state.projects)
-
+  const { allUserProjects } = useSelector(state => state.projects)
+  console.log(copyMode)
   const [weekGoal, setWeekGoal] = useState('Наладить режим сна')
   const [weekPriorities, setWeekPriorities] = useState({ priorityOne: 'Один', priorityTwo: 'Два', priorityThree: 'Три' })
   const [workerInfo, setWorkerInfo] = useState({ project: '', worker: '' });
@@ -27,14 +31,15 @@ function WeekCalendar() {
   const [userCalendarId, setUserCalendarId] = useState(null)
   const [modal, setModal] = useState(false)
   const [userId, setUserId] = useState('')
-
+  console.log(copyTask)
   useEffect(() => {
     const year = new Date().getFullYear()
     const month = new Date().getMonth()
     const currentDay = moment().date()
     setDateNow({ year: year, month: month, currentDay: currentDay })
-    dispatch(fetchCalendarTasks(user.id))
-    dispatch(fetchAllUserProjects())
+    return () => {
+      dispatch(deactivateCreateCopyTasksMode())
+    }
   }, [dispatch, user.id])
 
   useEffect(() => {
@@ -200,26 +205,41 @@ function WeekCalendar() {
   }, [currentTask, dispatch, user.id, userId])
 
   const createCopyTask = useCallback(async (dayNumber, hour, month, year) => {
-    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(year, month, dayNumber, lastHour, 59))
+    if (copyMode.working) {
+      const hourDiff = hourFormat ? 0 : 1
+      const due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
+      const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
+      const newTask = {
+        ...copyMode.task,
+        dateTimeStart: start,
+        dateTimeDue: due,
+        taskId: copyMode.task.id
+      }
+      delete newTask.infoForCell
+      delete newTask.id
+      await dispatch(addCopyCalendarTask(newTask, userId))
     } else {
-      due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
-    }
-    const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
-    const newTask = {
-      ...copyTask,
-      dateTimeStart: start,
-      dateTimeDue: due,
-      taskId: copyTask.mainTaskId
+      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(year, month, dayNumber, lastHour, 59))
+      } else {
+        due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
+      }
+      const start = dateToISOLikeButLocal(new Date(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)
     }
-    delete newTask.infoForCell
-    delete newTask.id
-    await dispatch(addCopyCalendarTask(newTask, userId))
-    setCopyTask(null)
-  }, [copyTask, dispatch, hoursInDay, userId])
+  }, [copyTask, dispatch, hoursInDay, userId, copyMode.task, copyMode.working, hourFormat])
 
   const dragTaskHandler = useCallback(async (dayNumber, hour, month, year) => {
     const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
@@ -243,8 +263,10 @@ function WeekCalendar() {
     setCurrentTask({})
   }, [currentTask, dispatch, hoursInDay, userId])
 
-  const deleteTaskHandler = useCallback(async (taskId) => {
-    dispatch(deleteCalendarTask(taskId, userId))
+  const deleteTaskHandler = useCallback(async (e, taskId) => {
+    console.log(e)
+    e.stopPropagation();
+    await dispatch(deleteCalendarTask(taskId, userId))
   }, [dispatch, userId])
 
   const handleClose = useCallback(() => {
@@ -260,6 +282,15 @@ function WeekCalendar() {
       setUserCalendarId(null)
     }
   }, [dispatch, user.id, userId])
+
+  const copyModeStay = useCallback(async () => {
+    dispatch(deactivateCreateCopyTasksMode())
+  }, [dispatch])
+
+  const copyModeReturn = useCallback(async () => {
+    navigate('/my-tasks')
+  }, [navigate])
+
   return (
     <>
       <DefaultModal
@@ -307,6 +338,13 @@ function WeekCalendar() {
         copyTask={copyTask}
         setCopyTask={setCopyTask}
         dragTaskHandler={dragTaskHandler}
+        copyMode={copyMode}
+      />
+
+      <CreateCopyTasksModeBlock
+        copyMode={copyMode.working}
+        copyModeStay={() => { copyModeStay() }}
+        copyModeReturn={() => { copyModeReturn() }}
       />
     </>
   );

planner-front/src/store/actionTypes/tasksTypes.js

@@ -28,4 +28,7 @@ export const DELETE_DATETIMETASK_FAILURE = "DELETE_TASK_FAILURE";
 
 export const FETCH_ALL_TASKS_BY_MEMBERSHIP_REQUEST = "FETCH_ALL_TASKS_BY_MEMBERSHIP_REQUEST";
 export const FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS = "FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS";
-export const FETCH_ALL_TASKS_BY_MEMBERSHIP_FAILURE = "FETCH_ALL_TASKS_BY_MEMBERSHIP_FAILURE";
\ No newline at end of file
+export const FETCH_ALL_TASKS_BY_MEMBERSHIP_FAILURE = "FETCH_ALL_TASKS_BY_MEMBERSHIP_FAILURE";
+
+export const ACTIVATE_CREATE_COPY_TASKS_MODE = "ACTIVATE_CREATE_COPY_TASKS_MODE"
+export const DEACTIVATE_CREATE_COPY_TASKS_MODE = "DEACTIVATE_CREATE_COPY_TASKS_MODE"
\ No newline at end of file

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

@@ -18,7 +18,9 @@ import {
   DELETE_DATETIMETASK_FAILURE,
   DELETE_DATETIMETASK_SUCCESS,
   DELETE_DATETIMETASK_REQUEST,
-  FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS
+  FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS,
+  DEACTIVATE_CREATE_COPY_TASKS_MODE,
+  ACTIVATE_CREATE_COPY_TASKS_MODE
   } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
@@ -294,4 +296,13 @@ export const addTaskToUserTasksTable = (task) => {
   }
 }
 
-/** end */
\ No newline at end of file
+/** end */
+
+export const activateCreateCopyTasksMode = (task, navigate) => {
+  navigate('/')
+  return {type: ACTIVATE_CREATE_COPY_TASKS_MODE, task}
+}
+
+export const deactivateCreateCopyTasksMode = () => {
+  return {type: DEACTIVATE_CREATE_COPY_TASKS_MODE}
+}
\ No newline at end of file

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

@@ -18,10 +18,17 @@ import {
   DELETE_DATETIMETASK_FAILURE,
   DELETE_DATETIMETASK_SUCCESS,
   DELETE_DATETIMETASK_REQUEST,
-  FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS
+  FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS,
+  ACTIVATE_CREATE_COPY_TASKS_MODE,
+  DEACTIVATE_CREATE_COPY_TASKS_MODE
 } from "../actionTypes/tasksTypes";
 
 const initialState = {
+    copyMode: {
+      working: false,
+      task: null,
+    },
+    tasks: [],
     calendarTasks: [],
     loading: false,
     error: null,
@@ -42,6 +49,7 @@ const tasksReduсer = (state = initialState, action) => {
             mainTaskId: task.id,
             executor: task.executor,
             author: task.author,
+            dateTimeDeadLine: task.dateTimeDeadLine,
             priority: task.priority,
             title: task.title,
             description: task.description
@@ -114,6 +122,10 @@ const tasksReduсer = (state = initialState, action) => {
       return {...state, loading: true};
     case DELETE_DATETIMETASK_FAILURE:
       return {...state, loading: false, error: action.error};
+    case ACTIVATE_CREATE_COPY_TASKS_MODE:
+      return {...state, copyMode: {working: true, task: action.task}}
+    case DEACTIVATE_CREATE_COPY_TASKS_MODE: 
+      return {...state, copyMode: {working: false, task: null}}
     default: 
         return state;
 }