Merge branch 'task-38-enhance/enhance_tasks' into 'development'

Task 38 enhance/enhance tasks

See merge request !31

planner-front/src/App.js

@@ -18,6 +18,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
 
 const App = () => {
     const user = useSelector(state => state.users?.user);
+    console.log(user)
     return (
     <BrowserRouter>
       <Routes>

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

 import { Grid } from "@mui/material";
-import { memo } from "react";
 
 const CalendarRow = ({children}) => {
     return <>
@@ -13,6 +12,6 @@ const CalendarRow = ({children}) => {
     </>
 };
 
-export default memo(CalendarRow);
+export default CalendarRow;
 
 

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

+import { Grid } from "@mui/material";
+import { memo, useMemo } from "react";
+import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
+import CalendarTask from "../CalendarTask/CalendarTask";
+
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
+
+  const hours = useMemo(()=>{ 
+    return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
+  [hoursInDay])
+
+  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
+          } else {return false}   
+        } else {return false}   
+      } else {return false}      
+    })
+    return tasksInDay
+  }, [tasks, month, year, day.dayNumber])
+
+  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 = []
+    if (hourFormat) {
+      hourDiff = 1
+      hourDiffEnd = 0
+    } else {
+      hourDiff = 2
+      hourDiffEnd = 1
+    }
+    if (availableTasks.length) {
+      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+      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 = sortedTasks[k]
+            if (skipLine) {
+              skipLine = false
+              break;
+            }
+            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 (!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 (isNaN(line[a])) {
+                        havePlace = false
+                        break;
+                      }
+                    }
+                  }
+                  if (!havePlace) {
+                    havePlace = true  
+                    break;
+                  }
+                  line[i] += `-${k}`
+                  if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                    skipLine = true
+                    break;
+                  }
+                } else {
+                    if (j + 1 === lines.length) {
+                      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+                    }
+                    break;
+                }
+              } 
+            }
+          }
+      }
+    }
+    return lines
+  }, [availableTasks.length, hourFormat, hours, hoursInDay, sortedTasks])
+
+  return <>
+      <Grid 
+        container
+        item
+        xs={10.8}
+        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} 
+                item xs={xs}
+                createTaskInCellHandler={createTaskInCellHandler}
+                hours={hour}
+                dayNumber={day.dayNumber}
+                currentTask={currentTask}
+                handleOpen={handleOpen}
+                modal={modal}
+                >
+                  <CalendarTask
+                    setCurrentTask={setCurrentTask}
+                    hours={hour}
+                    modal={modal}
+                    hourFormat={hourFormat}
+                    handleOpen={handleOpen}
+                    currentTask={currentTask}
+                    linesForCell={linesForCell.length ? linesForCell : null}
+                    sortedTasks={sortedTasks}
+                  />               
+              </CalendarStandartCell>
+              ) 
+            })}
+        </Grid>
+    </>
+};
+
+export default memo(CalendarRowDay);
\ No newline at end of file

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

-import { Grid, TextField, Typography } from "@mui/material";
+import { Grid} from "@mui/material";
 import { memo, useEffect, useState } from "react";
 
 const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
@@ -16,7 +16,7 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCell
             {children}
         {isThisCell ?  
         <Grid  
-            sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} 
+            sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px 10px", borderRadius: '10px'}} 
             >
             <span>
                 Задача

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

-import { Grid, TextField, Typography } from "@mui/material";
-import React, { memo, useState, useEffect} from "react";
+import { Grid} from "@mui/material";
+import React, { memo} from "react";
+
+
+const TaskDefault = ({task, onClickTaskHandler}) => {
+  return(<Grid  
+        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', textAlign: 'left'}} 
+        onClick={onClickTaskHandler}
+        >
+          <span>
+            {task.title}
+          </span>
+    </Grid>)
+}
+
+const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
+  return(<Grid
+        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', textAlign: 'left'}} 
+        onClick={onClickTaskHandler}
+        >
+          <span>
+            {task.title}
+          </span>
+    </Grid>)
+}
+const TaskWithAllStartAndNoEnd = ({onClickTaskHandler}) => {
+  return(<Grid  
+        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>
+            	&#8291;
+          </span>
+    </Grid>)
+}
+const TaskWithAllStartAndAllEnd = ({onClickTaskHandler}) => {
+  return(<Grid  
+        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>
+            	&#8291;
+          </span>
+    </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 = ({hours, setCurrentTask, hourFormat, handleOpen, currentTask, linesForCell, sortedTasks}) => {
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
-  const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
-  const getTaskInDayCell = (tasks, day, hours) => {
   const hour = parseInt(hours.split(':')[0])
-    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
-          }
-        }
-      }      
-    }
-    })
-    return tasksCell
-  }
-  const tasksCell = getTaskInDayCell(tasks, day, hours)
 
-  useEffect(()=>{
-    if (!currentTask.title) {
-      setThisCellCurrentTask({})
+  const onClickTaskHandler = (e, task) => {
+    e.stopPropagation(); 
+    setCurrentTask(task); 
+    handleOpen(e)
   }
-  }, [currentTask])
-
 
   return (<> 
-      {tasksCell.length ? tasksCell.map((task, i)=>
+      {linesForCell?.length ? linesForCell.map((line, i)=>
       {
+        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}
+              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+            />)
+          }
+          if (task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour) {
             return (
-      <Grid  
+              <TaskWithAllStartAndNoEnd
                 key={task.id}
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51);;'}} 
-        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
-        >
-          {task.title}
-      </Grid>
-      )}
+                onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+              />)
+          }
+          return (
+            <TaskDefault
+              key={task.id}
+              task={task}
+              onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
+            />
+          )
+        } else {
+          return (
+            <Empty
+              
+            />
+          )
+        }
+        }
+          
       ) 
       : null}
   </>)

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

 import { FormControlLabel, Switch} from "@mui/material";
-import { memo, useEffect, useState } from "react";
+import { useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
-import CalendarTask from "./CalendarTask/CalendarTask";
 import ModalTask from "../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
+import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
 function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
 
@@ -27,7 +27,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   };
 
 
-
   return (
     <>
     <CalendarRow
@@ -54,32 +53,20 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
           >
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
-            {hoursInDay.map((hours, i)=>{
-              return (
-                <CalendarStandartCell 
-                  key={i} 
-                  item xs={cellSizes.standarCell}
+            <CalendarRowDay
+              xs={cellSizes.dayCell}
               createTaskInCellHandler={createTaskInCellHandler}
-                  hours={hours}
-                  dayNumber={day.dayNumber}
+              hoursInDay={hoursInDay}
               currentTask={currentTask}
               handleOpen={handleOpen}
               modal={modal.open}
-                  >
-                    <CalendarTask
               setCurrentTask={setCurrentTask}
               year={year}
               month={month} 
               tasks={tasks}
               day={day}
-                      hours={hours}
               hourFormat={hourFormat}
-                      handleOpen={handleOpen}
-                      currentTask={currentTask}
             />
-                </CalendarStandartCell>
-                ) 
-              })}
         </CalendarRow>
       )
     })}

planner-front/src/components/UI/СustomSelect/СustomSelect.js

@@ -6,10 +6,10 @@ function СustomSelect({value, onChange, label, variant='standard', items, id})
   return ( 
   <>
     <FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel id={id + '-select' + '-label'}>{label}</InputLabel>
+        <InputLabel id={`${id}-select-label`}>{label}</InputLabel>
         <Select
-          labelId={id + '-select'+ '-label'}
-          id={id + '-select'}
+          labelId={`${id}-select-label`}
+          id={`${id}-select`}
           value={value}
           onChange={onChange}
           label={label}

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

@@ -13,7 +13,6 @@ function MonthCalendar() {
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
   const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
-
   const [cellSizes, setCellSizes] = useState({})
 
   useEffect(()=>{
@@ -31,7 +30,7 @@ function MonthCalendar() {
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
+        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
       })
       return arr
     } else {
@@ -39,7 +38,7 @@ function MonthCalendar() {
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
+        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
       })
       return arr
     }
@@ -122,12 +121,13 @@ function MonthCalendar() {
 
   const sendNewTaskHandler = async () => {
     if (currentTask.id) {
+      delete currentTask.infoForCell
+      console.log(currentTask)
       setCurrentTask(() => {
         return{
         ...currentTask,
       }}
       )
-      delete currentTask.infoForCell
       await dispatch(editTask(currentTask))
     } else {
       setCurrentTask(() => {
@@ -135,7 +135,6 @@ function MonthCalendar() {
         ...currentTask,
       }}
       )
-      console.log(currentTask)
       delete currentTask.infoForCell
       await dispatch(addTask(currentTask))
     }

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

@@ -15,3 +15,5 @@ export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
 export const DELETE_TASK_REQUEST = "DELETE_TASK_REQUEST";
 export const DELETE_TASK_SUCCESS = "DELETE_TASK_SUCCESS";
 export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
+
+export const EDIT_CALENDAR_TASK = "EDIT_CALENDAR_TASK";
\ No newline at end of file

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

@@ -11,7 +11,8 @@ import {
   FETCH_CALENDAR_TASKS_FAILURE, 
   FETCH_CALENDAR_TASKS_REQUEST, 
   FETCH_CALENDAR_TASKS_SUCCESS,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+  } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchCalendarTasksRequest = () => {
@@ -68,7 +69,7 @@ const addTaskFailure = (error) => {
 export const addTask = (task) => {
   return async (dispatch, getState) => {
       dispatch(addTaskRequest());
-      const token = getState().users?.user?.token;
+      // const token = getState().users?.user?.token;
       try {
         await axios.post("/tasks", task);
         dispatch(addTaskSuccess())

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

@@ -18,9 +18,7 @@ export const registerUser = (userData, navigate) => {
     return async (dispatch) => {
         dispatch(registerUserRequest());
         try {
-            console.log("register " + userData)
             const response = await axios.post("/users", userData);
-           console.log(response)
             dispatch(registerUserSuccess())
             navigate("/")
         } catch (error) {
@@ -51,9 +49,7 @@ const logoutUserFailure = (error) => {
 export const loginUser = (userData, navigate) => {
     return async (dispatch) => {
         try {
-            console.log(userData)
             const response = await axios.post("users/sessions", userData);
-            console.log(response)
             dispatch(loginUserSuccess(response.data.user));
             navigate("/")
         } catch (e) {

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

@@ -11,7 +11,9 @@ import {
   DELETE_TASK_SUCCESS,
   DELETE_TASK_REQUEST,
   DELETE_TASK_FAILURE,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+  EDIT_CALENDAR_TASK,
+} from "../actionTypes/tasksTypes";
 
 const initialState = {
     calendarTasks: [],
@@ -38,7 +40,8 @@ const tasksReduсer = (state = initialState, action) => {
               const timeEndHour = parseInt(timeEnd.split(':')[0])
               const timeStartMinute = parseInt(timeStart.split(':')[1])
               const timeEndMinute = parseInt(timeEnd.split(':')[1])
-              newArr.push({...task, infoForCell: { 
+              const newObj = {...task, 
+                infoForCell: { 
                 startDay: dayStart, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
@@ -47,7 +50,8 @@ const tasksReduсer = (state = initialState, action) => {
                 endHour: timeEndHour,
                 endMinute: timeEndMinute,
               }
-              } )
+              }
+              newArr.push(newObj)
               }
             }
           })