#135 Реализовал снизу плашечку при включение состояния создания копий задач

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}>
+          Остаться
+        </Button>
+        <Button onClick={copyModeReturn}>
+          Вернуться
+        </Button>
+      </Box>
+      : null}
+  </>
+  );
+};
+
+export default memo(CreateCopyTasksModeBlock);

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/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 ? '100px' : '30px'}}>
         <Box style={{ position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey' }}>
           <CalendarRow
           >

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/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';
@@ -13,6 +16,7 @@ import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersAction
 
 function WeekCalendar() {
   const dispatch = useDispatch();
+  const navigate = useNavigate()
   const { calendarTasks, copyMode } = useSelector(state => state.tasks);
   const { user, currentCalendarDisplayName } = useSelector(state => state.users);
   const { allUserProjects} = useSelector(state => state.projects)
@@ -261,6 +265,15 @@ function WeekCalendar() {
       setUserCalendarId(null)
     }
   }, [dispatch, user.id, userId])
+
+  const copyModeStay = useCallback(async () => {
+    dispatch(deactivateCreateCopyTasksMode())
+  }, [dispatch])
+
+  const copyModeReturn = useCallback(async () => {
+    navigate('/my-tasks')
+  }, [dispatch])
+
   return (
     <>
       <DefaultModal
@@ -308,6 +321,13 @@ function WeekCalendar() {
         copyTask={copyTask}
         setCopyTask={setCopyTask}
         dragTaskHandler={dragTaskHandler}
+        copyMode={copyMode.working}
+      />
+
+      <CreateCopyTasksModeBlock
+        copyMode={copyMode.working}
+        copyModeStay={()=>{copyModeStay()}}
+        copyModeReturn={()=>{copyModeReturn()}}
       />
     </>
   );