Merge branch 'task-66-enhance/enhance-modal-task' into 'development'

Task 66 enhance/enhance modal task

See merge request !44

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)
   }
   
@@ -63,9 +71,9 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
             </div>
         </div>
         <div>
-          <span>
+          
           {task.title}
-         </span>
+         
         </div>
       </>
       
@@ -76,9 +84,9 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
             <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
             <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
             </div>
-              <span>
+              
                 {task.title}
-              </span>
+              
             <div style={{display: 'flex', alignItems: 'center'}}>
             <Button sx={{color:'black', fontWeight:'600'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}>
                 Copy

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

@@ -15,8 +15,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   const handleOpen = (e) => {
     setModal( {
       open: true, 
-      yPage: e.clientY, 
-      xPage: e.clientX, 
+      yClickСordinates: e.clientY, 
+      xClickСordinates: e.clientX, 
       yDivClick: e.nativeEvent.offsetY,
       xDivClick: e.nativeEvent.offsetX,
       yDiv: e.target.offsetHeight,
@@ -89,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

-import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+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'}
@@ -38,8 +37,28 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
       id={'priority-type'}
       items={priorities}
     />
-  <Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button>
-  <Button onClick={deleteTaskHandler}>Удалить</Button>
+    <div style={{display: 'flex', gap: '20px', margin: '20px 0'}}>
+      <TextField 
+        id="task-startHour" 
+        value={startHour}
+        label="От" 
+        variant="outlined" 
+        name='startHour'
+        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      />
+      <TextField 
+        id="task-endHour" 
+        value={endHour}
+        label="До" 
+        variant="outlined" 
+        name='endHour'
+        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      />
+    </div>
+    <div style={{display: 'flex', gap: '20px', margin: '10px 0'}}>
+      <Button onClick={sendNewTaskHandler}>Сохранить</Button>
+      <Button onClick={deleteTaskHandler}>Удалить</Button>
+    </div>
   </>);
 }
 

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

 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
+import { useEffect, useRef, useState } from 'react';
 
 
 export default function ModalTask({modal, handleClose, children}) {
 
+  const [windowDimenion, detectHW] = useState({
+    winWidth: window.innerWidth,
+    winHeight: window.innerHeight,
+  })
+
+  const detectSize = () => {
+    detectHW({
+      winWidth: window.innerWidth,
+      winHeight: window.innerHeight,
+    })
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', detectSize)
+    return () => {
+      window.removeEventListener('resize', detectSize)
+    }
+  }, [windowDimenion])
+  const modalRef = useRef('')
+
+
+  const getYCordinatesToModal = () => {
+    if (windowDimenion.winHeight > modal.yClickСordinates + 450) {
+      return modal.yClickСordinates - modal.yDiv - modal.yDivClick
+    } else {
+      return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 450) - windowDimenion.winHeight) - 30
+    }
+  }
+  const getXCordinatesToModal = () => {
+    if (windowDimenion.winWidth > modal.xClickСordinates + 270 + modal.xDiv) {
+      return modal.xClickСordinates + modal.xDiv - modal.xDivClick + 10
+    } else {
+      return windowDimenion.winWidth - (windowDimenion.winWidth - modal.xClickСordinates) - modal.xDivClick - 270 - 80
+    }
+  }
   const style = {
+    display: 'flex',
+    flexDirection: 'column',
     position: 'absolute',
-    top: modal.yPage - modal.yDiv - modal.yDivClick,
-    left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
-    width: 250,
-    height: 350,
+    top: getYCordinatesToModal(),
+    left: getXCordinatesToModal(),
+    width: 270,
+    height: 450,
     bgcolor: 'background.paper',
     border: '2px solid #000',
     boxShadow: 24,
@@ -24,7 +62,7 @@ export default function ModalTask({modal, handleClose, children}) {
         aria-describedby="modal-modal-description"
         BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
       >
-        <Box sx={style}>
+        <Box sx={style} ref={modalRef}>
           {children}
         </Box>
       </Modal>

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

@@ -8,7 +8,7 @@ import Select from "@mui/material/Select";
 export default function BasicSelect({value,label,name,onChange,task,items}) {
 
   return (
-    <Box sx={{ minWidth: 60 }}>
+    <Box sx={{ minWidth: 60, m: 0}}>
       <FormControl fullWidth>
         <InputLabel id="demo-simple-select-label"></InputLabel>
         <Select

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))
     }
   }