#61 небольшие изменения

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

@@ -29,7 +29,26 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
         item
         xs={10.8}
         align='center'
+        sx={{position: 'relative'}}
         >
+          {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>
+              ) 
+            })}
+            <Grid sx={{position: 'absolute', top: '0'}} container item xs={12}>
             {linesInDay?.map((line, i)=>{
               const boxes = getBoxesInLine(line, hoursInDay, sortedTasks)
               return(
@@ -75,8 +94,9 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                 })}
               </Grid>)
             })}
+            </Grid>
 
-            <Grid container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px'}}>
+            <Grid container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px', position: 'absolute', bottom: '0'}}>
               {hoursInDay.map((hour, i)=>{
                 const hourNumber = parseInt(hour)
                 return(<EmptyBox 
@@ -98,5 +118,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
     </>
 };
 
-export default memo(CalendarRowDay);
+export default memo(CalendarRowDay, (prevProps, nextProps)=>{
+  if(!prevProps.modal) return false
+  if(nextProps.modal) return true
+});
 

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

@@ -34,7 +34,11 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal
     onDragOver={(e)=>{dragOverHandler(e)}}
     onDrop={(e)=>{dropHandler(e)}}
     onClick={(e)=>{onClickHandler(e, dayNumber, hourNumber)}}
-    item xs={xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
+    item xs={xs} sx={{
+        height: '35px', 
+        backgroundColor: 'rgb(0,0,0,0)', 
+        zIndex: '6',
+        }}>
       {isThisCell ?  
         <DefaultTask/> : null}
     </Grid>)

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

+const taskIsAvailableInCell = (task, hour, hourDiffEnd, hourDiff, hourFormat) => {
+  if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour  <= hour) && (task.infoForCell.endHour > hour))  
+  || (!hourFormat && task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hour + hourDiff)
+  || (!hourFormat && task.infoForCell.startHour === hour + hourDiffEnd && task.infoForCell.endHour > hour)
+  || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
+    return true
+  } else {
+    return false
+  }
+}
+
+const lastPlaceInLineForTask = (task, hour, hourDiffEnd, hourFormat) => {
+  if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+    return true
+  } else {
+    return false
+  }
+}
+
+
 export const getLinesInDay = (availableTasks, sortedTasks, hoursInDay, hours, hourFormat) => {
   let hourDiff
   let hourDiffEnd
@@ -24,14 +44,11 @@ export const getLinesInDay = (availableTasks, sortedTasks, hoursInDay, hours, ho
           for (let i = 0; i < line.length; i++) {
             const hour = hours[i]
             let havePlace = true
-            if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour  <= hour) && (task.infoForCell.endHour > hour))  
-            || (!hourFormat && task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hour + hourDiff)
-            || (!hourFormat && task.infoForCell.startHour === hour + hourDiffEnd && task.infoForCell.endHour > hour)
-            || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
+            if (taskIsAvailableInCell(task, hour, hourDiffEnd, hourDiff, hourFormat)) {
               if (!isNaN(line[i])) {
                 for (let a = 0; a < hours.length; a++) {
                   const hour = hours[a]
-                  if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                  if (lastPlaceInLineForTask(task, hour, hourDiffEnd, hourFormat)) {
                     if (isNaN(line[a])) {
                       havePlace = false
                       break;
@@ -46,8 +63,7 @@ export const getLinesInDay = (availableTasks, sortedTasks, hoursInDay, hours, ho
                   break;
                 }
                 line[i] += `-${k}`
-                if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) 
-                || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                if (lastPlaceInLineForTask(task, hour, hourDiffEnd, hourFormat)) {
                   skipLine = true
                   break;
                 }

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

@@ -3,15 +3,14 @@ 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 CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay}) => {
     const [isThisCell, setIsThisCell] = useState(false)
-
+    const cellClass = {
+        position: 'relative', 
+        height: linesInDay?.length ? `${40*linesInDay.length+35}px` : `${35+35}px`,
+        borderRight: '1px solid black',
+    }
     useEffect(()=>{
         if(!modal) {
             setIsThisCell(false);
@@ -27,21 +26,26 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCell
         e.preventDefault();
         dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
     }
+    const onClickHandler = (e) => {
+        if (!linesInDay?.length) {
+            createTaskInCellHandler(dayNumber, hours); 
+            setIsThisCell(true); 
+            handleOpen(e)
+        }
+    }
 
     return <>
         <Grid  
             item xs={xs} 
             sx={cellClass} 
-            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
+            onClick={(e)=>{onClickHandler(e)}}
             onDragOver={(e)=>{dragOverHandler(e)}}
             onDrop={(e)=>{dropHandler(e)}}
         >
             {children}
         {isThisCell ?  
         <DefaultTask/> : null}
-        <div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
-
-        </div>
+        
         </Grid>
     </>
 };

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

-.resizeable {
-  border: 2px solid #533535;
-  border-radius: 3px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 15px;
-  min-height: 15px;
-}
-
-.resizer {
-  position: absolute;
-  background: black;
-}
-
-.resizer-r {
-  cursor: col-resize;
-  height: 100%;
-  right: 0;
-  top: 0;
-  width: 5px;
-}
-
-.resizer-l {
-  cursor: col-resize;
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 5px;
-}
\ No newline at end of file

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

-import { FormControlLabel, Switch} from "@mui/material";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, FormControlLabel, Switch} from "@mui/material";
+import { useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
@@ -29,20 +29,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
     setCurrentTask({})
   };
 
-  const divRef = useRef(null)
-  const [divHeight, setDivHeight] = useState('')
-
-  useEffect(() => {
-    if (divRef) {
-        setDivHeight(()=>{
-          return divRef.current?.offsetHeight
-        })
-      }
-  }, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
-  
-
   return (
-    <div ref={divRef} style={{marginBottom: '30px'}}>
+    <Box style={{marginBottom: '30px'}}>
     <CalendarRow
             >
         <CalendarSmallCell xs={1.2}> 
@@ -54,7 +42,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         </CalendarSmallCell>
         {hoursInDay?.map((hours, i)=>{
           return (
-            <CalendarStandartCell key={i} xs={cellSizes.standarCell} divRef={divHeight}>
+            <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
               {hours}
             </CalendarStandartCell>
             ) 
@@ -106,7 +94,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
       />
     </ModalTask>
-    </div>
+    </Box>
   );
 }
 

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthAndYearInfo.js

@@ -3,7 +3,7 @@ import { Box, Typography } from '@mui/material';
 import { memo } from 'react';
 import MonthDecrementButton from './MonthDecrementButton/MonthDecrementButton';
 import MonthIncrementButton from './MonthIncrementButton/MonthIncrementButton';
-function MonthAndYearInfo({getCurrentMonthString, year, incrementMonth, decrementMonth}) {
+function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMonth}) {
   
   return ( 
   <>
@@ -26,7 +26,7 @@ function MonthAndYearInfo({getCurrentMonthString, year, incrementMonth, decremen
                 justifyContent: 'center',
               }}
             >
-              {getCurrentMonthString}
+              {currentMonthString}
             </Typography>
             <Typography align='center'>{year}</Typography>
           </Box>

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

@@ -6,7 +6,7 @@ import СustomSelect from '../UI/СustomSelect/СustomSelect'
 const workers = [{value: '', text: '--выберите сотрудника'}, {value: 'Василий', text: 'Василий'}, {value: 'Никита', text: 'Никита'}]
 const types = [{value: 'Месяц', text: 'Месяц'}, {value: 'Неделя', text: 'Неделя'}]
 
-function MonthCalendarHeader({ getCurrentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) {
+function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) {
   
   return (
     <>
@@ -15,7 +15,7 @@ function MonthCalendarHeader({ getCurrentMonthString, decrementMonth, incrementM
             <Toolbar>
               
               <MonthAndYearInfo
-                getCurrentMonthString={getCurrentMonthString}
+                currentMonthString={currentMonthString}
                 decrementMonth={decrementMonth}
                 incrementMonth={incrementMonth}
                 year={year}

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

@@ -2,6 +2,7 @@ import { useEffect, useCallback, useState, useMemo  } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
+import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers';
 import { addTask, deleteTask, editTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
 
 function MonthCalendar() {
@@ -26,35 +27,27 @@ function MonthCalendar() {
 
 
   const hoursInDay = useMemo(()=>{
+    let arr
     if (hourFormat) {
-      const arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00']
-      const cells = arr.length
-      const xs = 10.8/cells
-      setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
-      })
-      return arr
+      arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00']
     } else {
-      const arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
-      const cells = arr.length
-      const xs = 10.8/cells
-      setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
-      })
-      return arr
+      arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
     }
+    const cells = arr.length
+    const xs = 10.8/cells
+    setCellSizes(()=>{
+      return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
+    })
+    return arr
   }, [hourFormat])
 
   const daysInMonth = useMemo(() => {
-    const newDaysInMonth = []
-    const daysInMonthNumber = new Date(dateNow.year, dateNow.month + 1, 0).getDate()
-    for (let i = 1; i <= daysInMonthNumber; i++) {
-      const dayOfWeekNumber = new Date(dateNow.year, dateNow.month, i).getDay()
-      const getDayOfWeekString = ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][dayOfWeekNumber]
-      newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString})
-    }
-    return newDaysInMonth
-  }, [dateNow.month, dateNow.year])
+    return getDaysInMonth(dateNow)
+  }, [dateNow])
+
+  const currentMonthString = useMemo(() => {
+    return getCurrentMonthString(dateNow)
+  }, [dateNow])
 
   const onChangeWorkerHandler = useCallback((event) => {
     setWorker(event.target.value);
@@ -64,10 +57,6 @@ function MonthCalendar() {
     setCalendarType(event.target.value);
   }, []);
 
-  const getCurrentMonthString = useMemo(() => {
-    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][dateNow.month];
-  }, [dateNow.month])
-
   const incrementMonth = useCallback(() => {
     setDateNow((prevState)=>{
       if (prevState.month + 1 === 12 ) { 
@@ -95,13 +84,6 @@ function MonthCalendar() {
         }
     });
   }, []);
-  function dateToISOLikeButLocal(date) {
-    const offsetMs = date.getTimezoneOffset() * 60 * 1000;
-    const msLocal =  date.getTime() - offsetMs;
-    const dateLocal = new Date(msLocal);
-    const iso = dateLocal.toISOString();
-    return iso;
-  }
 
   const createTaskInCellHandler = (dayNumber, dayHour) => {
     let hour
@@ -128,7 +110,13 @@ function MonthCalendar() {
   
   const dragTaskHandler = async (dayNumber, hour) => {
     const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
-    const due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59))
+    const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
+    let due
+    if (hour + hourDiff >= lastHour) {
+      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, lastHour, 59))
+    } else {
+      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 = {
       ...currentTask,
@@ -141,10 +129,8 @@ function MonthCalendar() {
   }
 
   const increaseTaskHandler = async (dayNumber, task, isStartTask) => {
-    const timeEnd = task.dateTimeDue.split('T')[1]
-    const timeEndHour = parseInt(timeEnd.split(':')[0])
-    const timeStart = task.dateTimeStart.split('T')[1]
-    const timeStartHour = parseInt(timeStart.split(':')[0])
+    const timeEndHour = task.infoForCell.endHour
+    const timeStartHour = task.infoForCell.startHour
     let hourDiff
     if (hourFormat) {
       hourDiff = 1
@@ -172,10 +158,8 @@ function MonthCalendar() {
   }
 
   const reduceTaskHandler = async (dayNumber, task, isStartTask) => {
-    const timeEnd = task.dateTimeDue.split('T')[1]
-    const timeEndHour = parseInt(timeEnd.split(':')[0])
-    const timeStart = task.dateTimeStart.split('T')[1]
-    const timeStartHour = parseInt(timeStart.split(':')[0])
+    const timeEndHour = task.infoForCell.endHour
+    const timeStartHour = task.infoForCell.startHour
     let hourDiff
     let hourDiffCheck
     if (hourFormat) {
@@ -228,10 +212,18 @@ function MonthCalendar() {
 
   const createCopyTask = async (dayNumber, hour) => {
     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, dateNow.month, dayNumber, lastHour, 59))
+    } else {
+      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 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)),
+      dateTimeStart: start,
+      dateTimeDue: due,
     }
     delete newTask.infoForCell
     delete newTask.id
@@ -247,7 +239,7 @@ function MonthCalendar() {
     <>
       <MonthCalendarHeader
         year={dateNow.year}
-        getCurrentMonthString={getCurrentMonthString} 
+        currentMonthString={currentMonthString} 
         decrementMonth={decrementMonth}
         incrementMonth={incrementMonth}
         onChangeCalendarTypeHandler={onChangeCalendarTypeHandler}

planner-front/src/helpers/CalendarHelpers.js

+export const getDaysInMonth = (dateNow) => {
+  const newDaysInMonth = []
+  const daysInMonthNumber = new Date(dateNow.year, dateNow.month + 1, 0).getDate()
+  for (let i = 1; i <= daysInMonthNumber; i++) {
+    const dayOfWeekNumber = new Date(dateNow.year, dateNow.month, i).getDay()
+    const getDayOfWeekString = ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][dayOfWeekNumber]
+    newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString})
+  }
+  return newDaysInMonth
+}
+
+export const getCurrentMonthString = (dateNow) => {
+  return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][dateNow.month];
+}
+
+export const dateToISOLikeButLocal = (date) => {
+  const offsetMs = date.getTimezoneOffset() * 60 * 1000;
+  const msLocal =  date.getTime() - offsetMs;
+  const dateLocal = new Date(msLocal);
+  const iso = dateLocal.toISOString();
+  return iso;
+}
\ No newline at end of file