#135 Добавил инактивные клетки, которые дальше дедлайна

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/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, copyMode }) => {
+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 = {
+    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))
@@ -56,9 +79,32 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
             setIsThisCell(true);
             handleOpen(e)
         }
-    }
+    }, [week, copyTask, copyMode, dayNumber, hours, month, year, createTaskInCellHandler, createCopyTask, handleOpen])
 
-    return <>
+    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}
@@ -72,6 +118,12 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
                     <DefaultTask week={week} top={top} /> : null}
 
             </Grid>
+        </>)
+
+    }, [cellClass, children, copyMode, copyTask, dragOverHandler, dropHandler, isThisCell, onClickHandler, top, week, xs, dragLeaveHandler, isDeadLine])
+
+    return <>
+        {returnCells}
     </>
 };
 

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

@@ -87,6 +87,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
             year={year}
             dragTaskHandler={dragTaskHandler}
             copyMode={copyMode.working}
+            copyModeTask={copyMode.task}
           >
           </CalendarStandartCell>
         )

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

@@ -49,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