#66 Добавил логику под инпуты времени

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

@@ -28,7 +28,15 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
 
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation(); 
-    setCurrentTask(task); 
+    setCurrentTask((prevState)=>{
+      return {
+        ...task, 
+        infoForCell: {
+          ...task.infoForCell, 
+          endHour: task.infoForCell.endHour + 1
+        }
+      }
+    }); 
     handleOpen(e)
   }
   

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

@@ -13,7 +13,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
   const handleOpen = (e) => {
-    console.log(e)
     setModal( {
       open: true, 
       yClickСordinates: e.clientY, 
@@ -90,6 +89,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         title={currentTask.title}
         description={currentTask.description}
         priority={currentTask.priority}
+        startHour={currentTask.infoForCell?.startHour}
+        endHour={currentTask.infoForCell?.endHour}
         onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}}
         sendNewTaskHandler={()=>{sendNewTaskHandler(); handleClose()}}
         deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}

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

@@ -27,7 +27,7 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
                 id={'worker'}
                 items={workers}
               />
-
+            <div style={{marginLeft: '20px'}}>
               <СustomSelect
                 value={calendarType}
                 onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
@@ -35,6 +35,7 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
                 id={'calendar-type'}
                 items={types}
               />
+            </div>
             </Toolbar>
           </AppBar>
         </Box>

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

@@ -2,10 +2,10 @@ import { Button, TextField } from "@mui/material";
 import { memo } from "react";
 import CustomSelect from '../UI/СustomSelect/СustomSelect'
 
-const priorities = [{value: '', text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
+const priorities = [{value: null, text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
 
 
-function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler}) {
+function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour}) {
   return (<>
     <TextField 
       id="task-description-title" 
@@ -27,9 +27,8 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
       name='description'
       onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
     />
-
     <CustomSelect
-      defaultValue={''}
+      defaultValue={null}
       value={priority}
       name={'priority'}
       variant={'outlined'}
@@ -40,19 +39,19 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
     />
     <div style={{display: 'flex', gap: '20px', margin: '20px 0'}}>
       <TextField 
-        id="task-description-title" 
-        value={title}
+        id="task-startHour" 
+        value={startHour}
         label="От" 
         variant="outlined" 
-        name='title'
+        name='startHour'
         onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
       />
       <TextField 
-        id="task-description-title" 
-        value={title}
+        id="task-endHour" 
+        value={endHour}
         label="До" 
         variant="outlined" 
-        name='title'
+        name='endHour'
         onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
       />
     </div>

planner-front/src/components/UI/ModalTask/ModalTask.js

@@ -38,7 +38,6 @@ export default function ModalTask({modal, handleClose, children}) {
       return modal.xClickСordinates + modal.xDiv - modal.xDivClick + 10
     } else {
       return windowDimenion.winWidth - (windowDimenion.winWidth - modal.xClickСordinates) - modal.xDivClick - 270 - 80
-      // return modal.xClickСordinates - (windowDimenion.winWidth - (modal.yClickСordinates + 270)) + modal.xDiv + modal.xDivClick
     }
   }
   const style = {

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

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

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

@@ -13,7 +13,7 @@ function MonthCalendar() {
   const [dateNow, setDateNow] = useState({month: '', year: ''})
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
+  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, infoForCell: {startHour: null, endHour: null}})
   const [copyTask, setCopyTask] = useState(null)
   const [cellSizes, setCellSizes] = useState({})
 
@@ -65,7 +65,7 @@ function MonthCalendar() {
       return {...prevState, month: prevState.month + 1}
     })
   }, [])
-
+  console.log(currentTask)
   const decrementMonth = useCallback(() => {
     setDateNow((prevState)=>{
       if (prevState.month - 1 === -1) {
@@ -77,12 +77,24 @@ function MonthCalendar() {
 
   const onChangeCurrentTaskHandler = useCallback((e) => {
     const {name, value} = e.target;
-    setCurrentTask((prevState) => {
+    if (name === 'startHour' || name === 'endHour') {
+      setCurrentTask((prevState) => {
+        return {
+            ...prevState,
+            infoForCell: {
+              ...prevState.infoForCell,
+              [name]: parseInt(value) 
+            }
+        }
+      });
+    } else {
+      setCurrentTask((prevState) => {
         return {
             ...prevState,
             [name]: value
         }
-    });
+      });
+    }
   }, []);
 
   const createTaskInCellHandler = (dayNumber, dayHour) => {
@@ -94,9 +106,9 @@ function MonthCalendar() {
     }
     let hourDue
     if (hourFormat) {
-      hourDue = hour + 0
-    } else {
       hourDue = hour + 1
+    } else {
+      hourDue = hour + 2
     }
     const newTask = {
       title:"Задача",
@@ -104,6 +116,11 @@ function MonthCalendar() {
       priority: null,
       dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
       dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
+      infoForCell: {
+        startHour: hour,
+        endHour: hourDue,
+        startDay: dayNumber
+      }
     }
     setCurrentTask((newTask))
   }
@@ -191,22 +208,21 @@ function MonthCalendar() {
   }
 
   const sendNewTaskHandler = async () => {
+    const timeEndHour = currentTask.infoForCell.endHour
+    const timeStartHour = currentTask.infoForCell.startHour
+    const day = currentTask.infoForCell.startDay
+    const due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeEndHour - 1, 59))
+    const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeStartHour, 0))
+    const newTask = {
+      ...currentTask,
+      dateTimeStart: start,
+      dateTimeDue: due
+    }
+    delete newTask.infoForCell
     if (currentTask.id) {
-      delete currentTask.infoForCell
-      setCurrentTask(() => {
-        return{
-        ...currentTask,
-      }}
-      )
-      await dispatch(editCalendarTask(currentTask))
+      await dispatch(editCalendarTask(newTask))
     } else {
-      setCurrentTask(() => {
-        return{
-        ...currentTask,
-      }}
-      )
-      delete currentTask.infoForCell
-      await dispatch(addCalendarTask(currentTask))
+      await dispatch(addCalendarTask(newTask))
     }
   }