#38 пофиксил отображение на 2 часа

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

@@ -6,19 +6,35 @@ import CalendarTask from "../CalendarTask/CalendarTask";
 
 const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
 
-  const hours = hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))
+  const hours = useMemo(()=>{ 
+    return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
+  [hourFormat])
 
-  const tasksInDay = useMemo(() => {
-    const ranges = hoursInDay.length
+  const availableTasks = useMemo(() => {
     const tasksInDay = tasks.filter(task=> {
-      if (year === task.infoForCell.startYear) {
-        if (month + 1 === task.infoForCell.startMonth) {
-          if (day.dayNumber === task.infoForCell.startDay) {
-                return task
-            }
+    if (year === task.infoForCell.startYear) {
+      if (month + 1 === task.infoForCell.startMonth) {
+        if (day.dayNumber === task.infoForCell.startDay) {
+              return task
           }
-        }      
+        }
+      }      
+    })
+    return tasksInDay
+  }, [tasks, month])
+
+  const sortedTasks = useMemo(() => {
+    if (availableTasks.length) {
+      const newSortedArr = [...availableTasks].sort(function(a,b){
+        const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
+        const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
+        return durattionSecondDate - durattionFirstDate;
       })
+      return newSortedArr
+    }
+  }, [availableTasks])
+
+  const linesInDay = useMemo(() => {
     let hourDiff
     let hourDiffEnd
     const lines = []
@@ -29,19 +45,13 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
       hourDiff = 2
       hourDiffEnd = 1
     }
-    if (tasksInDay.length) {
-      const newSortedArr = [...tasksInDay].sort(function(a,b){
-        const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
-        const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
-        return durattionSecondDate - durattionFirstDate;
-      });
+    if (availableTasks.length) {
       lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
-      let counter = 0
-      for (let k = 0; k < newSortedArr.length; k++) {
+      for (let k = 0; k < sortedTasks.length; k++) {
         let skipLine = false
           for (let j = 0; j < lines.length; j++) {
             const line = lines[j]
-            const task = newSortedArr[k]
+            const task = sortedTasks[k]
             if (skipLine) {
               skipLine = false
               break;
@@ -49,13 +59,14 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
             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))  
-              || (task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hour + hourDiff)
+              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 (!isNaN(line[i])) {
                   for (let a = 0; a < hours.length; a++) {
                     const hour = hours[a]
-                    if (task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour) {
+                    if (task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
                       if (isNaN(line[a])) {
                         havePlace = false
                         break;
@@ -81,10 +92,10 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
             }
           }
       }
-      console.log(lines)
     }
-  }, [tasks, month, hourFormat])
-
+    return lines
+  }, [sortedTasks, hours])
+  console.log(linesInDay)
   return <>
       <Grid 
         container
@@ -93,6 +104,12 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
         align='center'
         >
           {hoursInDay.map((hour, i)=>{
+            const linesForCell = []
+            if (linesInDay?.length) {
+              for (let j = 0; j < linesInDay.length; j++) {
+                linesForCell.push(linesInDay[j][i])
+              }
+            }
             return (
               <CalendarStandartCell
                 key={i} 
@@ -114,6 +131,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                     hourFormat={hourFormat}
                     handleOpen={handleOpen}
                     currentTask={currentTask}
+                    linesForCell={linesForCell.length ? linesForCell : null}
+                    sortedTasks={sortedTasks}
                   />               
               </CalendarStandartCell>
               ) 

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

@@ -6,7 +6,7 @@ import { editCalendarTask } from "../../../store/actions/tasksActions";
 
 const TaskDefault = ({task, onClickTaskHandler}) => {
   return(<Grid  
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin:"5px 10px"}} 
+        sx={{ height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin: '5px 10px'}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -17,7 +17,7 @@ const TaskDefault = ({task, onClickTaskHandler}) => {
 
 const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
   return(<Grid
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative'}} 
+        sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative'}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -27,7 +27,7 @@ const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
 }
 const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
   return(<Grid  
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}} 
+        sx={{height: '30px',backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -37,7 +37,7 @@ const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
 }
 const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
   return(<Grid  
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}} 
+        sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -46,53 +46,28 @@ const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
     </Grid>)
 }
 
+const Empty = ({}) => {
+  return (<Grid  
+      sx={{height: '30px', backgroundColor: 'rgb(0,0,0,0)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px -1px"}} 
+      >
+        <span>
+            &#8291;
+        </span>
+  </Grid>)
+}
+
 
 
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
-  const dispatch = useDispatch();
+const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask, linesForCell, sortedTasks}) => {
+
   const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
 
   const hour = parseInt(hours.split(':')[0])
   const tasksCell = useMemo(() => {
-    let hourDiffEnd
-    if (hourFormat) {
-      hourDiffEnd = hour + 1
-    } else {
-      hourDiffEnd = hour + 2
-    }
-    const tasksCell = tasks.filter(task=> {
-    if (year === task.infoForCell.startYear) {
-      if (month + 1 === task.infoForCell.startMonth) {
-        if (day.dayNumber === task.infoForCell.startDay) {
-          if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))  
-          || (task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hourDiffEnd)
-          || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
-              return task
-          }
-        }
-      }      
-    }
-    })
-    const newSortedArr = [...tasksCell].sort(function(a,b){
-      const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
-      const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
-      return durattionSecondDate - durattionFirstDate;
-    });
-    const newArrWithTypes = newSortedArr.map((task, i)=>
-      {
-        if (hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour || (!hourFormat && task.infoForCell.endHour > hour + 1 && (task.infoForCell.startHour === hour))) {
-          return {...task, type: 'TaskWithNoStartAndAllEnd'}
-        }
-        if (hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour || ((!hourFormat && task.infoForCell.startHour  < hour && task.infoForCell.endHour  > hour + 2))) {
-          return{...task, type: 'TaskWithAllStartAndAllEnd'}
-        }
-        if (hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour && (task.infoForCell.endHour === hour || task.infoForCell.endHour === hour + 1 && task.infoForCell.startHour + 1 !== hour))) {
-          return {...task, type: 'TaskWithAllStartAndNoEnd'}
-        }
-        return {...task, type: 'TaskDefault'}})
-    return newArrWithTypes
-  }, [hourFormat, month, tasks])
+    return []
+  }, [])
+
   useEffect(()=>{
     if (!currentTask.title) {
       setThisCellCurrentTask({})
@@ -106,43 +81,50 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
   }
 
   return (<> 
-      {tasksCell.length ? tasksCell.map((task, i)=>
+      {linesForCell?.length ? linesForCell.map((line, i)=>
       {
-
-        if (task.type === 'TaskWithNoStartAndAllEnd') {
-          return (
-            <TaskWithNoStartAndAllEnd
+        if (isNaN(line)) {
+          const task = sortedTasks[line.split('-')[1]]
+          if ((hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour) 
+              || (!hourFormat && (task.infoForCell.endHour - 1 > hour)
+                  && (task.infoForCell.startHour === hour || task.infoForCell.startHour === hour +1))) {
+            return (<TaskWithNoStartAndAllEnd
+                key={task.id}
+                task={task}
+                onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+              />)
+          }
+          if ((hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour) 
+              || (!hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour + 1)) {
+            return (<TaskWithAllStartAndAllEnd
               key={task.id}
               task={task}
               onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
-            />
-          )
-        }
-        if (task.type === 'TaskWithAllStartAndAllEnd') {
+            />)
+          }
+          if (task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour) {
+            return (
+              <TaskWithAllStartAndNoEnd
+                key={task.id}
+                task={task}
+                onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+              />)
+          }
           return (
-            <TaskWithAllStartAndAllEnd
+            <TaskDefault
               key={task.id}
               task={task}
               onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
             />
           )
-        }
-        if (task.type === 'TaskWithAllStartAndNoEnd') {
-          return (<>
-            <TaskWithAllStartAndNoEnd
-              key={task.id}
-              task={task}
-              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+        } else {
+          return (
+            <Empty
             />
-          </>)
+          )
+        }
         }
-        return (<>
-          <TaskDefault
-            key={task.id}
-            task={task}
-            onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
-          />
-        </>)}
+          
       ) 
       : null}
   </>)

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

@@ -114,7 +114,7 @@ function MonthCalendar() {
       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)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue + 4, 59)),
     }
     setCurrentTask((newTask))
   }